nlog(n): ブログをスマホ対応に

Sun August 11, 2013

ブログをスマホ対応に

スマホ用のスタイルシートを読みこませることで，ブログのスマホ対応を行う。スマホの時は，1カラム表示にすることと，文字を大きくすることにした。

■ ■ ■

スマホ対応までの経緯

スマートフォンを多くの人が持つようになってしばらく経つ。アクセスログを見ると，スマートフォンでのアクセスも増えてきている。しかし，特に何もしていなかった。一度シミュレータで確認したことがあり，「こりゃひどい」と思ったが，そのまま放置していた (nlog(n): ブログをスマートフォンで見てみたら)。

先日，Android タブレットを購入した (nlog(n): ASUS Fonepad ME371-GY08 購入)。やはり実機があると認識が変わるものだ。Android OS のブラウザでは，サイトの表示が崩れることはなかったが，見やすいとは言えない。簡単に言えば見づらいのである。そこでようやく重い腰を上げて対応することにした。

アクセスしてきたのが PC かスマートフォンかは，ブラウザのユーザエージェントをもとに判断する仕組みにする。そして，何の機能を使って振り分けるか，振り分けた先をどうするかで，次の選択肢がある。

何で振り分けるか: Apache などの Web サーバ，もしくはコンテンツ (Javascript または PHP)
振り分け後: スマホ専用サイトに誘導，もしくは CSS で対応

つまり，大きくは，2 x 2 = 4 種類の実装方法がある。Web サーバで振り分けて，専用サイトに誘導する場合は PC版とスマートフォン版サイトを自動振り分けする方法 [ホームページ作成] All About が詳しい。Javascript と PHP による振り分け方法は，ユーザーエージェントによってPCとスマートフォン（iPhone / Android）を振り分ける方法いろいろ（PHP / JavaScript / .htaccess等）｜ HTML5 – CSS3 mag に解説されている。

このサイトでの実装

方針

このサイトでは，Javascript で振り分け，CSS で対応することにした。

Javascript は別ファイルにして HTML ファイルから読み込むことにした。別ファイルにしておけば，そのファイルだけを書き換えれば全体に反映されるからである。もし，HTML の文書の中に書いてしまうと，Movable Type の場合はテンプレートに書くことになり，反映には全体の再構築が必要になってしまうからである。

CSS は，ヘッダの後ろの方に書いておくことにした。そして，PC 用のスタイルシートを一部上書きするのである。

PC かスマホの選択ボタンを用意して，Cookie に覚えさせておくことも考えたが，Android のブラウザや Chrome は「PC 版サイトを見る」という設定が簡単にできるようになっているので，デフォルトではスマホ表示，必要に応じて「PC 版サイトを見る」にすればいいということにした。つまり，ユーザはサイト内の機能で選択するのではなく，スマホのブラウザ側で選択することになる。タブレットなどの画面が大きい場合は，サイトごとに設定するのではなく，ブラウザで設定することが多いのではないかと思ったからである。

Javascript の呼び出し

Javascript の関数の呼び出しのため，ヘッダの後ろの方に次のように書いておく。

振り分け用 Javascript

スマホか PC かを判断するための Javascript は，次の内容を smartphone.js という名前で js ディレクトリ内に設置する (上の呼び出し側と一致させる)。

(function() {
  var ua = navigator.userAgent;
  if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0) {
   document.write('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />');
   document.write('<link rel="stylesheet" href="/styles-smartphone.css" type="text/css" />');
  }
})();

無名関数を使って，ユーザエージェントに iPhone, iPad, iPod, Android のいずれかの文字列があったときに viewport とスタイルシートを書き出すようになっている。viewport の設定に関してはスマートフォン用（iPhone・Android）Webページデザイン、viewport の指定 : Serendip - Webデザイン・プログラミングを参考にした。

CSS

スマホ用 CSS は styles-smartphone.css という名前にして，次のように書いた。コメントとトラックバック欄は表示せず，複数カラムは1カラム表示にした。Google Adsense は，PC 用の幅の広いバナーとスマホ用の狭いバナーを並べておいて，スマホ用 CSS では PC 用バナーを表示させないようにした。PC 用 CSS で .adsense-mobile { display: none; } で非表示にしたバナーは，.adsense-mobile { display: inherit; } すると復活できる。

body { -webkit-text-size-adjust: 100%; }
.login { display: none; }
.description {font-size: 80%; }
#content { padding: 0px; margin: 0px; }
#content2 { padding: 0px; margin: 0px; }
#history { display: none; }
#links { position: relative; top: 5px; width: auto; right: auto; }
#llinks { position: relative; top: 5px; width: auto; left: auto; }
#comments { display: none; }
#trackback { display: none; }
#footer-icon { display: none; }
.adsense-normal { display: none; }
.adsense-mobile { display: inherit; text-align: right; }

このサイトは Movable Type で構築されているが，スタイルシートはデフォルトからかなり外れているので，そのまま他のサイトにコピペしても役に立たない。

「-webkit-text-size-adjust: 100%;」の設定については -webkit-text-size-adjust: none を絶対に設定してはいけない理由 - てっく煮ブログが詳しい。initial-scale か maximum-scale を指定する必要があるとのこと (-webkit-text-size-adjustはscaleを指定しないと有効にならない #HTML @robario)。

動作確認

ハマったのは，iPhone の動作確認である。実機がないので，シミュレータに頼ることになる。簡易的に Firefox のアドオン Top - FireMobileSimulator.org を使ったのだが，どうやっても Javascript で振り分けができない。web帳 | スマートフォン JavaScript ユーザーエージェント振分けのデモページにアクセスしても iPhone と認識されないことから，原因は FireMobileSimulator のユーザエージェント名にあることが判明。

しかたないので Safari と ibbdemo3 をインストールして iBBDemo3 で確認した。

おわりに

これでようやくスマホ対応ができた。実機があるかないかというのは大きな違いがあるものだと感じた。その違いというのは「中の人」の意識の持ち方の違いである。実機があることでようやくモチベーションが上がり，実装につながったのである。

Posted by n at 2013-08-11 19:16 | Edit | Comments (0) | Trackback(0)

Trackbacks

「手違いで複数トラックバックを送ってしまった!」という場合でも気にしないでください (重複分はこちらで勝手に削除させていただきます)
タイムアウトエラーは，こちらのサーバの処理能力不足が原因です (詳細はトラックバック送信時のエラーをご覧ください)
トラックバックする記事には，この記事へのリンクを含めてください(詳細は迷惑トラックバック対策をご覧ください)

Comments