<> 携帯端末用テーマの導入 | PhoenixKnight

携帯端末用テーマの導入

Drupalバージョン
当サイトを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
drupal2011042301
※同じURLでアクセス

・Redirection options
drupal2011042302

・Mobile Tools block message options
drupal2011042303

・Mobile Tools Build Mode
drupal2011042304

Mobile roles
・Mobile Tools settings
drupal2011042305

Theme Switching
・Theming configuration
drupal2011042306
drupal2011042307
※すべてのデバイスでJapanese Mobileテーマを使用

External Modules
・External detection modules

drupal2011042308
※Browscapを使用

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

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

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