News


こんにちは。ITセンターProideの村上です。仕事もプライベートも多忙すぎてブログの更新が遅くなってしまいました(TT

Proide Monthly Reportの5月号は

「スマホ対応アラカルト」

です。Googleが2月に発表した「モバイルフレンドリー」対応の記事の影響を受け、3月、4月のWeb業界はホームページのスマートフォン対応の話題で持ちきりでした。Proideでも既存のホームページをいい感じにスマホ対応して欲しいというお仕事をイヤというほどさせて頂きました(笑

そこで今月はホームページをスマートフォンに対応させるいくつかの手法と、その周辺の技術についてざっくりと解説します。ちょっと長くなりそうですが、最後までお付き合いくださいませ。

スマートフォン向けのサイトデザイン

さて、普段何気なくホームページを見ていると思いますが、同じアドレスのページをパソコンで見たときとスマートフォンで見たときで、

「なんかデザインが全然違うな~」

と思ったことってありませんか?

「たぶん、何らかの方法で切り替えているのかな~?」

と、想像できる方はなかなかいい勘してますね。

パソコンやスマートフォン、もしくはタブレットでホームページを見るとき、クライアントサイド、およびサーバーサイドでは主に以下の情報を取得することで、ホームページを見ているデバイスを判別することができます。

1.ユーザーエージェント
2.IPアドレス
3.画面サイズ

この3つの情報のうち、どれかの情報を使用して、閲覧しているデバイスごとにホームページの情報(デザイン)を切り替えることができます。

ユーザーエージェントについて

まず最初に「ユーザーエージェント」という言葉について解説します。

ユーザーエージェントとは、一言でいうとブラウザの種類を表しているテキストの文字列です。普通にホームページを見ている時には意識することはないのですが、1つ1つのホームページを見るときに、閲覧に使用しているデバイスと、ホームページのデータが存在するサーバーとの通信で必ずやり取りされているデータのうちの1つがユーザーエージェントです。

具体的に例を挙げると、例えばIE11のユーザーエージェントは

Mozilla/5.0 (Windows NT 6.1; Trident/7.0; rv:11.0) like Gecko

です。Google Chromeだと、

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36

こんな感じです。
長ったらしい文字列ですが、それぞれの単語には1つ1つ意味があります。実際にユーザーエージェントの判別を行うときは、この長いユーザーエージェトに完全に一致するかどうかで判別するわけではありません。ユーザーエージェントの文字列の一部分にデバイス特有の文字列が含まれているかどうかを判別して、デバイスの切り替えを行います。

例えば、iPhoneのSafariのユーザーエージェントは

Mozilla/5.0 (iPhone; CPU iPhone OS 8_2 like Mac OS X) AppleWebKit/600.1.4 (KHTML, like Gecko) Version/8.0 Mobile/12D508 Safari/600.1.4

このような文字列となっておりまして、この中に「iPhone」という文字列が含まれているので、このユーザーエージェントでアクセスしてきたデバイスは、「iPhoneで見てるんだな」 といった感じで判別されます。

ちなみにこのユーザーエージェントという文字列は簡単に偽装できます。ブラウザの開発ツールを使用したり、プラグインを導入することで、変更できます。私は業務ではGoogle Chromeを使っており、ユーザーエジェントを偽装するために、拡張の「User Agent Switcher」を使っています。

これを使うことで、実際にはGoogle Chromeを使っていても、

「いや、私はiPhoneで見てます(キリッ」

と、サーバーやクライアントをだまして動作確認することができます。Web制作の現場では必須のプラグインですね。

ちなみにこのユーザーエージェントという文字列は、

・JavaScript(クライアントサイド)
・PHP、Perlなど(サーバーサイド)
・.htaccess(サーバーサイド)

などの技術で用いる事ができます。
目的によってどの技術で判別させるのかを選択することができます。

IPアドレスについて

次にIPアドレスについて解説します。これはおそらく皆様も聞いたことがあると単語だと思います。ネットワークに接続されているパソコンの住所のようなものですね。しかし、最近はIPアドレスを使ってデバイスの種類を特定するという機会は少なくなりました。公衆無線LANを使っていたり、自宅の無線LANのルーター経由で接続していたりと、同じデバイスを使っていても、IPアドレスが様々に変化してしまうため、最近はIPアドレスによる判別はあてにならなくなっているからです。

ちなみに、フィーチャーフォン(ガラケー)が主流だった時代は、JavaScriptが動くガラケーが少なかったり、無線LAN経由でネット接続するということができなかったため、IPアドレスによる判別が普及していました。

画面幅について

最後に画面サイズです。これはみんな大好きなレスポンシブウェブデザインで使われているメディアクエリーによる判別です。基本的にはデバイスの横幅のみを判別基準としているので、パソコンで閲覧している時も、指定した横幅になるまで、ブラウザウィンドウをサイズを変更するだけで、スマホと同じデザインに切り替えることができます。

さて、デバイスの判別方法の解説は以上です。それでは具体的にどのようの処理をすることで、ホームページをパソコンとスマホで、それぞれに最適化されたデザインにする方法について解説します。

まずスマホ対応のホームページを制作するにあたって重要な考え方として、

「横スクロールバーは親のカタキと思え!」

というものがあります。

とにかくホームページの横幅をスマホやタブレットの横幅とピッタリ合わせるか、それ以下のサイズで表示させるように調整するのがスマホ対応サイトの大前提です。Web制作業界では、かなり昔から横スクロールバーを嫌う傾向がありました。特別なレイアウトのデザインのサイトを除けば、普段見ているホームページでも横スクロールバーが表示されることって少ない思います。この考え方は、もともと横幅の狭いスマートフォン向けのサイトにおいても受け継がれているわけですね。

パソコン、スマホ、タブレットなど様々な横幅を持つデバイスに対して、横スクロールバーを発生させないようにホームページをデザインするためにはどうすればいいのか? 気になりますよね。具体的にはホームページの中にある要素の横幅を%(パーセント)単位で指定することがあげられます。

%(パーセント)での指定について

%(パーセント)、ようするに割合のことです。何に対する割合なのかというと、ブラウザの左端から右端までの幅を100%としたときの割合のことです。本来、ホームページのサイズやデバイスの画面の幅は「ピクセル」という単位で表現されます。iPhoneなら320ピクセル、パソコン上のIEやGoogle Chromeのようなブラウザはウィンドウをリサイズできるので、特別決まったサイズというものはありませんが、それぞれの大きさに対して、必ず何ピクセルといったようにサイズを測定することができます。

ここで、ブラウザやスマホの横幅よりも、ホームページの中身の横幅が大きい場合に横スクロールバーが発生します。例えば、最初はブラウザのサイズが1600ピクセルでホームページの中身が1200ピクセルだった場合は400ピクセル分ゆとりがあるので横スクロールバーは表示されません。しかしブラウザをリサイズして1000ピクセルになった場合、ホームページの中身の横幅のうち200ピクセル分がブラウザサイズより大きくなってしまうため、200ピクセル分横スクロールバーが表示されてしまいます。

そこでホームページの中身の幅を%(パーセント)指定することによって、ブラウザ自体の横幅の変化に応じてホームページの中身の横幅も変化させることができます。上の例を取り上げると、最初、1600ピクセルの横幅を持つブラウザサイズに対して、75%というホームページの中身の横幅を設定します。上の例をよく見てください。ブラウザサイズ1600ピクセルに対してホームページの中身は1200ピクセルであると書きました。つまり、ここで指定した75%というのは、

1600ピクセル × 75% = 1200ピクセル

となります。デザインの指定は75%としますが、実際の見た目は1200ピクセルと同じになるわけです。こんな風に%(パーセント)指定したサイズとピクセルとの変換はホームページの制作でよく使われる計算です。

さて、次にブラウザサイズを1000ピクセルに縮小させました。ホームページの中身の幅はどうなるのかというと、75%で指定しているので、中身の幅はブラウザの縮小に応じて750ピクセルに変化します。このように%(パーセント)指定することで、ブラウザのリサイズに応じて中身の大きさを大きくしたり小さくしたりできるんですね。

かなり単純な例をあげてしまいましたが、実際のホームページ制作で行われる%(パーセント)とピクセルの計算はもっと複雑なケースが多いです。特にこういった計算は私のようなコーダーが担当するため、他のスタッフさんはあまり意識していない部分だと思います。

今月のProide Monthly Reportはいかがだったでしょうか。後半の話はちょっと難しく感じた方もいらっしゃるかも知れませんね。ホームページの制作の実際の現場ってこんな感じなんだな~とわかってくれたら幸いです。それでは来月のProide Monthly Reportもお楽しみに!

このエントリーをはてなブックマークに追加