[WordPress Advent Calendar 17日目] WordPressでスマートフォン対応をする際に何をどうすれば良いかを素人なりに考えたよ

2011年12月17日

みなさんご機嫌いかがですか?僕はごきげんです。「ご機嫌いかが?」と聞かれているのに「ごきげんです」と答えるのはどうなんでしょうね、「コーヒーをいかが?」と聞かれて「あ、コーヒーです」って答えられたらあなたはどう思います?ポカーンですかね。そんな事を考えながら歩いてたら女子高生にぶつかったんですが、その子は食パンを加えていなかったためか何のイベントも発生しませんでした、そんないつもの日常です。

そしてこれは「WordPress Advent Calendar 2011」の中の一つの記事です。WordPress 大好きっ子が集まって日替わりでWordPressに関する事を一つずつブログに書いていく、というイベントです。僕は @Webourgeon_com さんからバトンを頂きました。

WordPressでオリジナルテーマを作るときの考え方とはまりどころ | Webourgeon

WordPressでWebサービスを一つ作ろう!と考えている僕にとって、考え方というのか「テーマをこう作ってこういう風にすればこんな事が実現できるよ!」って記事はもの凄く嬉しいので、ホント AdventCalender 様々だなぁと思います。WordPress が凄いというか、 WordPress を愛してる人達が凄いんだよな−、そういう人達がいっぱいいるって凄いよなー、その中の一人になりたいなー、と思って参加しましたが、如何でしょ、参加できてる?

メニューに関してはカスタムメニューが本当におすすめです。投稿や、固定ページや、カスタム投稿タイプの記事だけでなく、カテゴリーやオリジナルのリンクまで自由自在に並べることが出来ます。

これとか、え?マジで?そんな事できるの?でした。ほんとすごいね WordPress。

もうさ、365日やってれば良いのにね。そしたらWorePressの情報はいっぱい集まるわ初めての人は「そうなんだ!じゃこれ僕でもやれるじゃないか!」って思えてコミュニティが活性化するわで良いこといっぱいなのにね。

さて、それはそれとして、ちょっとすみませんが先に僕のグダグダ話を聞いてくださいませんか?聞きたくない方はちょこっとだけスクロールして頂ければ本編につきますし、本編はもうちょっとだけまともなこと書いてますので、そちらへお願いします。

このイベントを知ったとき、僕は即参加を決めたわけですが、後になって他の方々が書かれている内容を読んで、場違いだったことに、僕完全に空気読めない子な事に気づかされました。僕そんなみんなが「ほほぉ!」って思うこと書けないよ!だって WordPress で遊びだしたの最近だし!

でも、とりあえず書いたんですよ、僕が今どれだけ WordPress に対して愛と感謝の気持ちがあるかを書いたんです。確か僕の出番の4日前には大体書き終わってました。チキンですからね、ギリギリでやるのが怖いんですよ。

そして、日々更新されている凄い方達の凄い記事を見つつ、自分の書いた文章を読んで、それを読み直す度に思うわけです、「お前、こんなテキトーなこと書いて恥ずかしくないの?」「何お前バカなの?」って。いやもう怖くて怖くてw

結果、それはひとまず公開しないことにしました。

じゃあなに書くんだよ

はい、なのでタイトルのようなことを書こうと思っています。正確に言うとタイトルのようなことを書こうかと思える出来事が起こったから飛びつきました。

Web を利用するためのデバイスが多様化した昨今、我々制作者はどう考え、どう対応していくべきか、ということをこないだの WordCampTokyo で色々と学ばせていただいたので、それを踏まえて僕なりに道筋を立ててみました。

と書くとそれっぽいですね。本当はそんな立派なもんじゃありません。WordCampTokyo で友達になれた @xxeimixx が言った一言に反応してる内に「お、これまとめたらそれっぽいこと書けんじゃね?」と思っただけです。言い逃れようもないくらいにタナボタで乗っかっただけです。

http://twitter.com/#!/xxeimixx/status/146487232163889153

この話から @andante0727 と3人であーだこーだと話し始めたので


こういう話になりました

確かにこれは WordCampTokyo で学ばせてもらったこと!そしてこれは学ばせてもらったことを反芻して自分のものにすべきチャンスだ!と思い、こもりさん(@cipher)の言葉「やり方は色々あるし、どれもメリット・デメリットがある。予算、要望に合わせてチョイスすることが大切だ」を思い出しながら自分なりに考え、纏めてみました。

まずは見せてもらおうか、その道筋とやらを

今回は Cacoo で書いてみました。自慢じゃありませんが Cacoo はよくお世話になっていて、なんと無料アカウントなんです。今回書いたのは、雑誌とかによくある一問一答式でドンドン進んで自分の恋愛傾向が分かっちゃう感じのアレです。何ていう名前なのかは知りませんので教えてください。

WordPress構築時にスマートフォン対応が必要な場合、どういう対応をすべきかのフローチャート的なもの

ところどころ適当なんで突っ込み大歓迎です。何だったらだれでも編集可能なので気にくわない箇所があれば変更してくれて良いです。なんでこんな上から目線で話しているんでしょうね。僕が認識している僕の立場は「ホントにこれであってます?指摘ください!マジで(>_< )」な感じですよね。お願いします指摘ください!コメントでもRTコメントでも良いので!

パターンごとの対応方法

フローチャートを描いたは良いですが、「じゃあ結局どうしたら良いんだよ!」となりますよね。僕だったらなります。なので、僕が考えつく限りの対応方法を記載したいと思います。

1.そもそも対応しなくて良いよ

当たり前ですが、特に何もしません。使いたいテーマを使って、特にプラグインを気にする必要もありません。iPhone前夜は全部こうだったんですね。そう考えるとiPhoneってホント色んな意味ですげーな。

2.スマートフォン対応をしているテーマを選ぶ

独自のデザインが必要ないのであれば既存のテーマを使いましょう。ただ作るものが商用のものだった場合、使って良いテーマかどうかを判断する必要があるのかも知れませんしないのかも知れません。すみません知らないだけですが注意しないよりは注意した方が良いかと思いまして。

20 High Quality Responsive WordPress Themes
高品質なレスポンシブデザインのWPテーマ20個の紹介記事です。僕が習得したくてやまないミニマルデザインなんかが乗ってて思わずため息でちゃうね、これ。

25 Quality Responsive WordPress Themes | Design Woop | The Web Design and Development Blog
こっちは25個ですって。何か昔の PlayStation のメモリーカードを思い出しますね。「20 in 1」みたいな。数で競う感じ。あれ?よく見ると上の記事とけっこうかぶってるw

WordPress › Twenty Eleven « Free WordPress Themes
そもそも WordPress 標準テーマの Twenty Eleven がレスポンシブなんですよね。

3.スマートフォン用プラグインを使う

何となくですが、ブログの場合このケースが一番多いんじゃないかと思ってます。てか普通は多分この選択肢を選ぶよね。

WPtouch
多分一番有名だと思う。有料版もあるんだけど試したことがないから分かんない。サポートがついたりiPad(タブレット?)にも対応するらしいですよ。

iWPhone
これもたまに見る気がします。テーマと一緒にパッケージングされてるみたいですね。これに関しては機能がどうとか言う前に名前が面白くて良いですよね。iWPhone ですよ?「WordPressで iPhone だったら iWPhone でよくねww」「ウケるww採用www」そんなノリでつけられたに違いありません。

4.MediaQueriesでレスポンシブ!

テーマは自作、そしてhtmlファイルを複数作るのはイヤ!って場合はこれになるのかな。ただ、まだこの思想は成熟していなくて「こうすれば何も問題ない」ってものがない状態。設計が難しそうだなぁとまだやったこともないのに漠然と妄想するくらい。

でも、僕としては、今後はこの思想を選択するケースもドンドン増えていくと思います。何故って、テキスト修正が入る度にデバイス毎のhtmlファイルを修正しないと行けないとなるとランニングコストが高くつくから。だったら最初にルールを決めて作っちゃえば良い。

例えばこんな感じの書き方をすれば良いのかな?

/* PC用 */
@media screen and (max-width: 1000px) {
  #content{
    width : 900px;
  }
}

/* タブレット用 */
@media screen and (max-width: 760px) {
  #content {
    width : 740px;
  }
  #content #main {
    width : 70%;
    float:left;
  }
  #content #nav {
    width : 30%;
    float:left;
  }
}

/* スマートフォン横画面用 */
@media screen and (max-width: 480px) {
  #content {
    width : 100%;
  }
  #content #main {
    width : 100%;
  }
  #content #nav {
    width : 100%;
    /* フロート解除で下に落とします */
  }
}
/* スマートフォン縦画面用 */
@media screen and (max-width: 320px) {
  #content {
    width : 100%;
  }
  #content #main {
    width : 100%;
  }
  #content #nav {
    display : none;
    /* そもそも表示しない */
  }
}

実際に使ったコードじゃなくて僕の頭の中の妄想コードなので、コピペはやめた方が良いと思いますよ。でもご指摘はお待ちしておりますお願いします!

※信頼と実績のWebデザインレシピさんの記事を参考にさせて頂きました。

CSS3 Media Queries を使って、Webサイトをスマートフォンに対応させるときの注意書き

5.UserAgentで端末を判別して読み込むCSSファイルを変更する

html ファイルは1つにしたい。ただしすでに制作されている CSS ファイルがあってそれがまたなかなかのカオスっぷりだったらみなさん、その CSS に対して MediaQueries を追記しますか?僕は何となくやりたくないです。何かどんなトラブルが起こるか分かんないもん。

そういうケースだったら、PHP側(functions.php)で UserAgent (端末が明示するブラウザの名前みたいなもん)を判別してそれぞれ別の CSS を読み込ませるように header.php あたりの CSS ファイル指定を変更する方が良いかもしれませんね。

■functions.php
function is_smart_phone() {
  return preg_match( '/android.+mobile/i', $_SERVER['HTTP_USER_AGENT'] ) ||
  preg_match( '/iphone/i', $_SERVER['HTTP_USER_AGENT'] );
}
■header.php
<?php if(is_smart_phone()) : ?>

<?php else : ?>
<?php endif; ?>

何度も言いますが実際に使ったコードじゃありません。お気をつけて。

※これはWordPress私的マニュアルの記事を参考にさせて頂きました。

スマートフォン向けの振り分けを自前で行う:WordPress私的マニュアル

6.UserAgent で端末を判別して1つのテンプレートファイル内で要素の出し分けをする

さっきは UserAgent の端末判別機能で読み込む CSS ファイルを変えましたが、このケースは「メディアクエリだと必要のない要素(画像とか CSS で非表示にする要素)まで読み込みは発生するから回線の弱いスマートフォンには向かない!ってなるようなケースに有効かなぁと思います。多分。

<?php if(!is_smart_phone()) : ?>
ここにスマートフォンでは表示しない要素を記述
<?php endif; ?>

7.UserAgentで端末を判別して、そもそも使うテンプレートファイルを変える

これもWordPress私的マニュアルさんを参考にさせて頂きました。ページはさっきと一緒です。さっきの functions.php に記述した内容と、さらに下記を記述すれば、スマートフォン用のテンプレートファイルをindex-sp.php、single-sp.php という名前にすればスマートフォンはこちらを読み込んでくれます。そして「-sp」付きのファイルがない場合はエラーになったりせず普通の「〜.php」を読んでくれる親切設計。

add_filter( 'template_include', 'mytheme_template_include' );

function mytheme_template_include( $template ) {
  if ( is_smart_phone() ) {
    $template_sp = str_replace( '.php', '-sp.php', $template );
    if ( file_exists( $template_sp ) )
      $template = $template_sp;
  }
  return $template;
}

実際の制作で気をつけて頂きたいこと

何度も言ってるのでそろそろ鬱陶しいと思われそうですが、上記コードが全て正常に動作するかどうかは正直分かりません。ただ、考え方としてはこういう感じじゃないのかな、と思ってます。

それと、今回は「じゃあどの機種までを守備範囲にするか」については特に触れていません。恐らく上記パターンのどの対応にするかを決めた後、端末毎のサポート対象を決めるんじゃないかと思います。

また、先ほどちょこっと触れましたが、こういう作業には「作った後の更新」が恐らく発生する事になるだろうと思います。しかしそれをお客さんが認識してくれている訳ではありません。その辺もきちんとお話しした上での制作にしたいものですね。

最後に

いかがでしたでしょうか。そもそも正しいかどうかが分かんないので公開したあとでもドキドキしてますが、間違ってたら誰かが優しく教えてくれるんじゃないかなぁと思えるところが WordPress のコミュニティの良さなんじゃないかとも思えるので勇気を出してみました。

これを書いたことで、今から WordPress でスマートフォン対応をしようと考えている方の参考にちょっとでもなれば良いなぁと思います。

そしてぇぇっ!!

次の方は@kamiyamさんです。僕は今日までは毎日ドキドキしながら読んでたんですが、これからは気楽に読めるのでワクワクしてますし、こういうイベントに参加できて本当に嬉しく思ってます!またこういうイベントがあれば良いなぁ。

他にこんな事も書いてます

FBでコメント

6個のコメント

  1. [WordPress Advent Calender 17日目] WordPressでスマートフォン対応をする際に何をどうすれば良いかを素人なりに考えたよ « STACKSTOCK http://t.co/wCB5Yzvv

  2. WordPress Advent Calendar 17日目!「WordPressでスマートフォン対応をする際に何をどうすれば良いかを素人なりに考えたよ」
    http://t.co/xVQjGHZN by @anticyborg さん。明日は @kamiyam さん!

  3. WordPress Advent Calendar 17日目 – WordPressでスマートフォン対応をする際に何をどうすれば良いかを素人なりに考えたよ : STACKSTOCK http://t.co/35svZRF7 #wordpressjp

  4. [WordPress Advent Calendar 17日目] WordPressでスマートフォン対応をする際に何をどうすれば良いかを素人なりに考えたよ : STACKSTOCK http://t.co/dl9j4mFB @anticyborgさんから

  5. [*wordpress][スマートフォン] / “[WordPress Advent Calender 17日目] WordPressでスマートフォン対応をする際に何をどうすれば良いかを素人なりに考えたよ : STACKSTOCK” http://t.co/o4mi8RE4

トラックバック/ピンバックはありません。