Design

このブログをスマートフォン対応した際の施策と備忘録

 Author:fumiyasac

Twitterでもつぶやいたのですが、このブログをスマートフォン対応をしました(是非見てみて下さい)。このブログ自体はWordPressで構築しているのでスマートフォン対応のネタは沢山あったのですが、出来るだけ対応の手間を省いて無駄無く行いたかったのでスマートフォン対応した際の施策と注意点をまとめました。

1. どうすれば手早くかつきれいにできるか?

このブログのデザイン自体がかなりシンプルなので、今回はスマートフォン用のテンプレートを改めてデザインから作成する必要はない気がしました。そして、このブログのマークアップ自体もHTML5で行っていたので出来ればHTMLの構造やWordPressでのプログラムもスマートフォン用の処理をできるだけ追記をしたくないと思いました。
そこで今回取ったのはこのような方法でした。

2. ユーザーエージェントでJSとCSS,viewportのmetaタグ等のみを振り分ける

プラグインの導入やレスポンシブWebデザイン、CSSフレームワーク(jQueryMobile等)も考えたのですが、今回は以下の懸案事項があったので見送りました。

  • プラグインの導入
    再度HTMLからの構築が必要であるためNG
  • レスポンシブWebデザイン
    再度HTMLからの構築が必要+既にブログを公開しているのでソースを大幅に改修する必要があるためNG
  • CSSフレームワーク
    最後まで検討したのですが、ブログのデザインと合わせたシンプルな感じにしたかったのでNG

そしてスマートフォン対応をするに当たってのルールも自分の中で決めました。

  1. HTML内に新たなクラスを付与しない(HTMLにはできるだけ手を加えない)
  2. JSはWebで使用しているものを極力使い回す(ただしロールオーバー等は除外、パンくずの10文字制限を追加)
  3. WordPressのコードはやむ終えない場合のみ記述(画像処理部分のみ)

特にスマートフォン用の振り分け用の処理と、ユーザーエージェントで定数を変化させるような処理はfunctions.phpに予め以下のようなコードを書いています。

1. ユーザーエージェントの判定(PHP)

  1. function isSmartPhone(){
  2.   $ua = $_SERVER['HTTP_USER_AGENT'];
  3.   if( (strpos($ua,'iPhone') !== false) || (strpos($ua,'iPod') !== false) || (strpos($ua,'Android') !== false) ){
  4.     $uaVal = "sp";
  5.   }else{
  6.     $uaVal = "web";
  7.   }
  8.   return $uaVal;
  9. }

2. ユーザーエージェントを元にした定数値の設定(PHP)

  1. function getArrayConfig($key){
  2.   $ua = $_SERVER['HTTP_USER_AGENT'];
  3.   if( isSmartPhone() === "sp" ){
  4.     //配列定数値の設定(スマートフォン)
  5.     $config = array(
  6.       'keyName1' => 'valueName1',
  7.       'keyName2' => 'valueName2,
  8.     );
  9.   }else{
  10.     //配列定数値の設定(Web画面)
  11.     $config = array(
  12.       'keyName1' => 'valueName1',
  13.       'keyName2' => 'valueName2,
  14.     );
  15.   }
  16.   //該当キーの値を取得
  17.   $value = $config[$key];
  18.   return $value;
  19. }

またスマートフォンアクセス時のパンくずリストの制御はできればPHPを使いたかったのですが、テンプレートやコアファイルを編集することになるので面倒かと思いました。この部分はJSで10文字以上であれば文字を詰める処理も行っています。

3. パンくずリストの表示を10文字以内にする処理(jQuery)

  1. var TARGET_LIST = ".breadcramb li.last";
  2. var STRING_LIMIT = 10;
  3. var string = $(TARGET_LIST).html();
  4. if(string.length > STRING_LIMIT){
  5.   newString = string.substr(0, STRING_LIMIT);
  6.   $(TARGET_LIST).html(newString + "...");
  7. }

※3/17追記:上記のJSをリファクタリングしました。基本的なロジックは上記のものを使用していますが、Recent EntriesとRelated Entriesの部分でも使う必要が出て来たので共通関数化してあります。

あとは、スマートフォンの場合の画像のサイズバリエーションの追加等もあれば便利になると思います。

  • add_image_size()関数
  • Additional image sizesプラグイン

等も導入しておくと便利になるかと思います。
※ 整理されていないソースではありますが、一応自分のgithubにソースはあります。

3. 今回の様な実装を行う際の注意点

今回の様な「一つのWordpressテンプレートファイルでスタイルのみを分ける」という場合は手を加える手間は比較的少ないとは思いますが構築してみて、ここは一番気をつけないといけないと感じた点がありました。

  • Webサイトを作る段階でHTML5でスマートフォン用のソースにできるだけ近い構造のマークアップを予めする。

特に凝った装飾を施している場合やjQueryのライブラリを多様するようなケースでは微調整等の為のhtmlタグを入れたり、idやclass属性を使って調整をはかる場合も多いと思いますのでその際は注意しないといけないと思います。
そしてデザインや設計の段階でしっかりと整理しておかないと確実にカオスになります。

4. スマートフォン対応に「ただ一つの解」はない

スマートフォン対応とは一口にいっても方法は様々で、業務やサイト全体の仕様によってもずいぶん変わってくると思います。
個人的に興味があるのは

  • Twitter Bootstrap
  • CSS3メディアクエリ
  • jQuery Mobile

なのでこの辺りなんかも自分のサービスを作る際には導入して行きたいと思っています。

WordPressは便利ではある反面、何も考えずに設計を疎かにしたまま構築を行ってしまうと「落としどころ」を見失うことなってしまうので、今回は構築そのものよりも設計に関することをメインに書きましたが、今後は具体的な手順やTipsを自分なりにもっと突っ込んで、しっかりとした記事にできればと思います。