ウェブサイトのスマートフォン対応(マルチスクリーン対応)①

2013年9月、iPhone5S(5C)が発売されました。
この両機種の販売台数は、発売開始3日間で900万台を超えるという記録的な売り上げとなりました。

私はiPhone4Sから5Sに機種変更したクチなんですが、使用感としましては、4Sと比べて断然サクサクでストレスがほぼ無い、
メールやメモなどで文章入力をしている時に、日本語入力⇔英語入力の切り替えをよく行いますが、4Sの時はラグを感じまくっていたのが無くなった、
通知センターを↓スワイプで呼び出す時に、指の動きを素早くし過ぎると4Sでは反応しない為、画面上部で一旦指を止め気味でスワイプしていたんですが、その必要が無くなり、スルッと出てきます。

本体の重量が3割近く軽量化されている為、動作まで更に軽く感じるという錯覚もあり。
中でもWebの閲覧もかなり軽くなったのが一番嬉しいです。4SではjQueryでちょっとアニメーションしただけでカックンカックンしていたのがヌルッと動きますし、ページ表示速度も段違いに速いです。

スマホでこれだけ動いてくれれば、軽く使いやすさを求めていたスマホ対応化しているWebサイトにも新たなリッチコンテンツの可能性が生まれてきますね。
そしてこの販売台数です。ツイッターなどのソーシャルから訪問するユーザーの使用端末はほぼスマホという結果になってきていますし、今後のWebサイトがスマホ対応の必要性を迫られる圧力は日増しに強くなっています。

という訳で、今回はWebサイトのスマホ対応についての記事を書こうと思います。

スマホ対応を実現する実装の種類

スマホ対応といっても、どういった実装の種類が有るのかを知らなければ対応のしようが有りませんので、大まかな分類を知っておきましょう。

1.レスポンシブWebデザイン

HTMLとCSSのみでクライアントの画面サイズに応じて動的に画面デザインを変更する実装です。
最近のかっこいいサイトでよく見かけます。
サーバサイドの処理を見なくてもよいので、どちらかというとデザイナー向けの実装方法でしょう。

2.クライアント端末の種類で画面を振り分け

サーバサイドでクライアントからのリクエストヘッダに書き込まれているユーザエージェント(User-Agent、通称UA)により処理を切り分け、レスポンスで返すHTML、CSSを変更する実装方法です。
レスポンス速度やサーバのメモリ使用量、CPUの削減を行いたいという場合は、HTML、CSSの変更だけではなく、DBアクセスなどのロジック部分すらも処理の切り分けが可能であり、スマホに最適化する場合の強力な実装方法となります。
サーバサイドの処理に手を加える為、どちらかというとプログラマー向けの実装方法でしょう。

3.モバイル専用サイト構築

スマホかそれ以外の処理の切り分けは行わず、モバイル専用サイトを新規で作成し、通常のWebサイト上にモバイル専用サイトへのリンクを作成してユーザを誘導する方法です。
新たに1つのWebサイトを構築しなければならないため、サブドメインで構築する場合はDNSサーバ設定や、ApacheなどのWebサーバ(TomcatなどのAPサーバ)にヴァーチャルホストとして搭載するなどの設定変更が必要であり、多くの労力がかかります。
システム自体が分かれるため、既存のシステムには何ら影響がなくデプロイや起動、停止が行えるのが利点です。

既存Webサイトをスマホ対応するにはどの手段を選択すればよいのか

上記の大まかな3つの分類のうち、どれを選択すればよいのかを考えてみましょう。

まず『1.レスポンシブWebデザイン』ですが、既存の完成されたWebサイトが有る状態でこれに対応させるのは大変だと思います。
画面が複雑な場合は、既存に手を加えるのではなく、HTML(を生成するJSPやPHP)とCSSをまるっきり1から全部作り直しするのが無用なバグに時間を掛けないで済む一番の方法でしょう。
そうなると、既に完成されている画面構成も作り直しになってしまうというデメリットが発生し、同じ開発者が実装するのであればモチベーションダウン必至でしょう。
せっかく作った画面だからと修正で対応しようと試みるもあれやこれやで上手く行かず、悩んだ末に結局は画面全部作り直しという結論を出す画が浮かびます。
新規サイト構築を開始した時点で、レスポンシブWebデザインとするように初めから決めて作り始めるのであれば問題ありませんが、途中からこれに変更するのは私は嫌です。

次に『2.クライアント端末の種類で画面を振り分け』ですが、既存の画面にはノータッチでスマホ用の画面HTML(を生成するJSPやPHP)とCSSを新規作成、それとサーバサイドでスマホとそれ以外の端末の切り分けという実装で完了します。
クライアントに不要なデータは返さなくても良いという利点(レスポンシブでは画面には表示されていないが表示する為のデータは返ってきているという無駄)、せっかく作った既存の画面はそのままで良い(これが大きい)、という利点が有ります。
ただ欠点として、機能に追加や変更が加わると、既存画面の修正+スマホ用画面の修正という2度手間が掛かってしまいます。修正するソースの量も簡単に言うと倍になりますので、これは面倒です。

最後に『3.モバイル専用サイト構築』ですが、既存サイトをコピッてモバイル用に修正して、完成したらデプロイ、既存サイトからリンクを貼れば完了。です。
上の2とこちらのどっちを選択するかで迷うかもしれませんが、これは開発者の好みで分かれるんじゃないでしょうか。

上記から、私は、既存Webサイトをスマホ対応するには『2.クライアント端末の種類で画面を振り分け』の実装方法を選択する事にしました。
次の記事で私の環境での具体的な実装方法を書きます。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>