HiGash.Net ホームページへ戻る

Home [Blog] » MobilePressとjQuery MobileでiPhone最適化

MobilePressとjQuery MobileでiPhone最適化

MobilePressとjQuery MobileでiPhone最適化

今、仕事で初めてのスマホ案件をやってます。
僕はデザインだけやってコーディングはエンジニアにお任せしてるので、あんまりテクニカルなところを追っかける必要はないんだけど、せっかくなので勉強がてらHiGash.NetをiPhone対応してみました。iPhone(モバイル端末)から当ブログにアクセスすると、自動的にiPhone版デザインで表示されます。
実はずっと前からiPhone版作ろうって思ってたんですよね。なかなか実行に移せないでいましたが、やっと実現できました。

MobilePressによるテーマの切り替え

MobilePressのデフォルトテーマ。とてもシンプルなデザイン

WordPressのiPhone最適化プラグインといえば WPTouch が有名ですが、今回、HiGash.Netのために使ったプラグインは MobilePress 。デフォルトで用意されたテーマがシンプルでカスタマイズしやすそうだったのでMobilePressを使うことにしました。WPTouchはデザインをカスタマイズしない場合はいいのかもしれないけど、がっつりデザイン変えてやろうっていう場合にはちょっと弄るのが面倒な気がします。

まずはWordPress公式の Plugin Directory から MobilePress をダウンロード 。
pluginsディレクトリにアップロードして有効化。デフォルトのテーマは/wp-content/plugins/mobilepress/system/themes内にありますが、カスタムテーマの保存場所は/wp-content内で自由に設定することができます(mobile-themesディレクトリが推奨みたい)。デフォルトテーマを弄っていけば、カスタマイズは簡単です。

ちなみにMobilePressを使うと、モバイル端末からアクセスした際にはモバイル用のテーマが表示されますが、 URL末尾に?nomobileという引数を付けることでモバイル端末でもPC用のテーマを表示させることができます。

Retinaディスプレイ対応

デザインは幅640pxで作成。実際にiPhoneで表示される画面の2倍以上のサイズで作ることになるので、なかなか感覚がつかめない

iPhone 4の特長のひとつがRetinaディスプレイ。
幅640px・高さ960pxの高解像度ディスプレイに対応するため、デザインは幅640pxで作成しました。iPhone 3G/3GSの画面解像度は幅320px・高さ480pxなので、iPhone 4の解像度はiPhone 3G/3GSのちょうど2倍(総画素数でいうと4倍)です。
当然iPhoneの画面と比べるとMacBook Proでの640pxはかなり大きく表示されるので、デザインするのがなかなか難しい。Photoshopで50%に縮小表示してデザイン確認しても、まだiPhoneでの実際の表示よりも大きいぐらい。

iPhone 3G/3GSで高解像度の画像を表示させる必要はないので、iPhone 4のみに高解像度の画像を表示させるのがスマートなRetinaディスプレイ対応ですが、これを実現するためには画像を低解像度(640px幅で作ったデザインを半分の320px幅にしたもの)と高解像度の2種類用意し、CSSの背景画像を利用して2種類の画像を出し分ける必要があります。
具体的には CSSのMedia Queriesを利用してiPhone 4用に専用のCSSを読み込ませ、 低解像度画像をRetinaディスプレイ用の高解像度画像で上書きします。さらに、 高解像度画像は-webkit-background-sizeプロパティを使って半分のサイズに指定してやります。

Media Quieriesを使ったRetineディスプレイ専用CSSの読み込み


<link rel="stylesheet" href="retina.css" media="only screen and (-webkit-min-device-pixel-ratio:2)">

-webkit-background-sizeプロパティ


header {
background-image:url(img/bg_header_2x.png); /* 高解像度画像を指定 */
-webkit-background-size:480px 63px; /* 画像を半分のサイズにして表示 */
}

Retinaディスプレイ対応のために参考にした記事はこちら。

jQuery Mobileによるテーマ作成

jQuery Mobileはまだアルファ版だが、近いうちにベータ版、そして正式版が登場する模様

iPhone版テーマ構築のフレームワークとして jQuery Mobile を採用しました。
AJAXでのページ切り替えが非常にいい感じです。デフォルトでは横スライドでページ遷移しますが、スライドアップ、スライドダウンなど、いくつかのエフェクトが用意されています。
ちなみに外部リンクを開く際にはAJAXは効かないし、<a>タグにrel=”external”やdata-ajax=”false”と書いてやることでAJAXを無効にさせることもできます。
ただし、URLがハッシュ(#)付きで管理されるようになるからか、 ページ内リンクがうまく動かないという問題が。。。 解決策を探してみたけど、見つかりません。これはjQuery Mobileの仕様なんでしょうか。

jQuery Mobileを使った場合、まずはヘッダでCSSとJavaScript(jQuery本体とjQuery Mobileの両方)を読み込みます。


<link rel="stylesheet" href="css/jquery.mobile-1.0a4.1.css">
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery.mobile-1.0a4.1.min.js"></script>

あとは以下のように基本的な構造に従って、HTMLを記述していきます。data-role=”header”と定義したブロック要素内には、別ページに遷移後、自動的に「Back」という戻るリンクが挿入されます。


<div data-role="page">
  <div data-role="header">...</div>
  <div data-role="content">...</div>
  <div data-role="footer">...</div>
</div>

ヘッダーとフッターは省略も可能だし、ブロック要素は<div>タグではなく、HTML5の<header>タグや<footer>タグでも大丈夫です。

あと、jQuery Mobileを使えば、簡単なマークアップでボタンやフォームまわりのデザインができますが、今回は特にそういう機能は使ってません。AJAXでページ遷移させたかったっていうのが、jQuery Mobileを使いたかった一番の理由。ちょっと贅沢で無駄の多いjQuery Mobileの使い方かな。。。

そんなこんなでゴールデンウィーク後半の突貫工事ですけど、とりあえずiPhone版作りました。あくまで突貫なのでやり足りてないことはたくさんあります。

実はiPhone版からはコメントの閲覧と投稿ができません。まあ、元々あんまり頻繁にコメントは付かないこのブログ。iPhone対応のニーズなんてないと思いますが、そのうちiPhoneからコメント閲覧&投稿もできるようになったらいいな、と。
もうひとつ、ぜひやっておきたいのはAndroid対応ですね。僕はiPhoneユーザーだけど、Androidはもはや無視できない存在。iPhoneのSafariもAndroidのブラウザもレンダリングエンジンは同じWebkitなので、iPhoneをターゲットにしていればAndroidでもそんなに大きく崩れることはないはずだけど、標準フォントとかは違うし、少なくとも表示チェックぐらいはしておきたい。
あとは過去のエントリーで一部うまく表示されてないページもありそうですが、そういうのは追々時間があるときに直していければいいかな。

というわけで、今年のゴールデンウィークはiPhone最適化のお勉強をしましたよ、というお話でした。

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

1 件のコメント/トラックバックをいただきました。ありがとうございます!!

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20110508/mobile-themes.html/trackback/

Preview

トラックバック
http://higash.net/20110508/mobile-themes.html/trackback/

Page Top