ブログ

受託開発時に決めておくべき「クライアントサイド対応」の優先順位

2016年5月23日
斉脇 一志

内容について

ここでは、「WEBサービスプロトタイピング道場」で扱う内容の一部を抜粋して紹介しています。追加情報に興味がある方は、「WEBサービスプロトタイピング道場」へお越しください。

まえふり

受託開発の終盤になって(もしくは検収作業をしている際に)、この端末で動かない、このバージョンでデザインがずれるなどの、思わず苦虫を噛みたくなる経験をしたことがある開発者も多いと思います。正直思い出すだけで震えます。ここから、この(誰も使っていない)Androidの端末に対応をするのかと思うと、まじで金返すからやめさせてくれと思うこともあります。

このような事態にならないように、期待値の調整も含めて、対応するクライアントを明確にしましょう。また、発注者はシステムの特性に合わせて、どのクライアントに優先的に対応するのが効果的なのか考える手助けになると思います。

以下では、弊社で利用しているクライアントサイドの対応時の概要と注意事項を記述しました。

概要

image

拡大表示

クライアントプラットフォーム

対応できるクライアント。マルチプラットフォームの種類、優先度を考える。ブラウザベース、アプリベース(ネイティブ)のメリットとデメリット。

  • サービスの要件別で、犠牲にできるものはなにか?
    • プラットフォーム対応が先か? 完成度(速度)が先か?
  • プラットフォーム別のプッシュ通知について考慮する
  • PCデスクトップアプリはネイティブで実装できないか?
    • Swift, C#で開発できないか?
  • HTML5ベースは?
    • Cordova, Ionic, Monaca, PhoneGap
  • ネイティブコード出力系は?
    • React Native, Titanium, Xamarin, Rubymotion, Ruboto
  • Visual Studio 2015でクロスプラットフォームはどうか?

ネイティブアプリで考慮すること

  • One Source Multi Platform は幻想(ネイティブでは特に)
    • 現状では保守できないし、UXも最適化できない
  • 優先度を見極めて一つ一つネイティブAPIで開発する
    • iOSアプリ: Xcode7, Swift2, Storyboard, UIKit
    • Androidアプリ: Android Studio2, Java, XML
    • Windowsデスクトップアプリ: Visual Studio, C#
    • Macデスクトップアプリ: Xcode7, Obj-C
  • サーバーサイドのREST APIは統一して利用する

ブラウザベースで考慮すること

対応ブラウザ

Web制作における対応ブラウザの選定方法 - to-R

JavaScriptで生成するViewの割合

  • サーバーでViewを作る割合と、JSでViewを作る割合はどのくらいか?
  • JavaScriptフレームワークの利用度合はどのくらいか?
  • JavaScriptフレームワークでVirtual DOMを使っているか?
  • SPAのように作成する場合は、サーバーサイドはREST APIベースになる。
  • つまり、サーバーサイドでViewの生成は行わない。

デザイン最適化の方法

A. 同じHTMLファイル(DOM)を使い、CSSで最適化

  • viewportとmedia queryを使う。
  • いわゆる、Responsive Designにする。

Googleでは、ウェブマスターが、レスポンシブウェブデザインを使用する、つまりすべてのデバイスに同じHTMLを配信し、CSSメディアクエリのみを使って各デバイスでのレンダリングを決定する、という業界のベストプラクティスに従うことをおすすめしています。

ウェブマスター向けモバイルガイド

B. 別のHTMLファイル(DOM)にする

  • User Agentでデバイスを判別する
  • Nginxで別ドメインにリダイレクト(m.sample.com や sample.com/sp/ など)
  • JSで別ドメインにリダイレクト(m.sample.com や sample.com/sp/ など)

【jQuery】PCとiPhone,iPad,Androidを判別してページを切り替え(リダイレクト)したいとき

画像のサイズについて

  • Reninaディスプレイでもボケないようになっているか
  • 画像サイズの軽量化はおこなっているか

タッチディスプレイの考慮

  • マウス固有のイベント(hoverなど)を多用していないか
  • タッチディスプレイ固有のイベント(フリックなど)を考慮しているか

マルチタッチ ウェブブラウザ向けの開発 - HTML5 Rocks

Landscape(横向け)対応

  • 横向けにしたときのUIを考慮しているか
  • モバイル、タブレットそれぞれどのようなデザインにするか検討する

アプリ内のWebViewを考慮

  • 指定アプリ(Facebook, Twitter, Lineなど)のWebViewでの表示を考慮する
  • 流入経路として大切なケースが多いのでしっかりと設計する
  • ユーザーフローとして重要な場合は、動作確認もすること
  • ただし、原則デフォルトブラウザでしっかり表示できていれば問題ないはず