携帯端末用テーマの導入

当サイトをPCからだけでなく、携帯端末からも表示できるように「MobileTools」モジュールと「Japanese Mobile」テーマを導入しました。

使用モジュール

モジュール名 バージョンなど
MobileTools 6.x-2.2

携帯端末を識別して端末ごとにテーマを切り替えるモジュール

推奨テーマ
Fusion Mobile
Nokia Mobile Themes
Wurfl(Optional) 6.x-1.0

端末のデバイス性能を検知するためのモジュールでMobileToolsの機能を拡張する。
端末の識別する方法の選択肢の1つでもある。
別途wurfl PHP ライブラリが必要
BrowsCap(Optional) 6.x-1.1

PHPのget_browser()に代わるモジュールでサイト訪問者が使用しているブラウザの種類を判別する
MobileToolsで端末を識別する方法の選択肢の一つ。
Japanese Mobile 6.x-1.1

日本の携帯電話向けサイト用テーマ
Viewsのページの表示にも対応、携帯電話に対応していない大きなサイズの画像は表示できない。
付属しているjp mobile helperモジュールがSJISからUTF-8への文字コード変換を行う
URL alter 6.x-1.2

このモジュールを使用すれば、Japanese Mobile 6.x-1.1以降はコアハックをしなくて済む(D6のみ)

※携帯対応について参考になるサイト(ちょっと古いような・・・)
http://www.kensuke.jp/~kensuke/pukiwiki/index.php?lucid%2Ftest%2FDrupal_pkg#j7f856f8
http://www10.atwiki.jp/drupal/pages/92.html
 

手順

(1)Japanese Mobileテーマを導入

テーマを保存する場所は特に理由がなければ"sites/all/theme"です。
※解凍したフォルダにあるjp mobile helperを"sites/all/modules"にコピーするのも忘れないでください

(2)使用するモジュールをすべて導入

モジュールを保存する先は特に理由がなければ"sites/all/modules"です。
※jp mobile helperにチェックを入れるのを忘れないでください。

(3)Mobile Toolsの設定

Notification/Redirection
・General configuration

※同じURLでアクセス

・Redirection options


・Mobile Tools block message options


・Mobile Tools Build Mode


Mobile roles
・Mobile Tools settings


Theme Switching
・Theming configuration


※すべてのデバイスでJapanese Mobileテーマを使用

External Modules
・External detection modules


※Browscapを使用

Drupalシステムのキャッシュ機能を使用していない場合や携帯端末からログインしない場合は以上で携帯端末でサイトが表示できると思います。
私の携帯電話のキャリアはauなのでauからの動作確認しかしていません。

※携帯端末からログインする場合はセッション管理が必要になるので追加設定が必要になると思います。(URL alterの設定など)
※Drupalシステムのキャッシュ機能(パフォーマンスの設定でCSSやjavascriptなども含め)を有効にしていると表示がおかしくなる可能性があります。
※キャッシュ機能を有効にしている場合は、Mobile ToolsのReadMeやtheme/mobile_tools_cache.incなどを参考にしてみてください。

追加でiPhone用にと「iui」テーマを設定しましたが、はたして上手く表示できているのやら気になります。
ちなみにauでも「iui」テーマで問題なく表示できました。Japanese Mobileテーマと比較すると非常にシンプルに表示されていました。

Drupalバージョン

Drupal 6.x テーマ