[カスタムモジュール編] jQuery MobileデザインデータをDrupalに適用

[手順]

1. 「/m」(スマートフォンTOP)のURLを有効にする。　←今回はここです。
2. デザインをCMSのテンプレートに適用する
3. PCサイトと、スマートフォンサイトで使用するテンプレートテーマを分ける
4. スマートフォン用に画像サイズを自動リサイズ
5. PCサイトとスマートフォンサイトとでURLが違うが、同じコンテンツを読み込む
   e.g) PC：/smartrelease/70　SP：/m/70
6. FacebookのいいねボタンをPCサイトとスマートフォンサイトとで同じにする

※Drupal CMSのデザインテンプレートの適用方法は様々な手法があります。ここで紹介させて頂いた方法が必ずしも効率が良いと言う訳ではありません。一つの方法として見て頂ければと思います。

[「/m」(スマートフォンTOP)のURLを有効にする]
ユーザーが「/m」にアクセスしてきた時にスマートフォンのホームページを表示します。私が行った手順はDrupalのメニューシステムを使って、URLのマッピングを行います。今回はDrupalのカスタムモジュールを作成します。

1. 「/sites/all/modules/custom/cpi」「modules」フォルダに「custom」フォルダを作成し、その配下に作成するモジュール名のフォルダを作成します。今回はcpiというモジュールを作成しますので、「cpi」フォルダを作成しました。

2. .infoファイルを下記の内容で作成します。(http://drupal.org/node/542202)
   ファイル名はモジュール名.info
   e.g) cpi.info
3. 1. ​;$Id$
   2. name = cpi
   3. description = CPIスタッフブログ用カスタムモジュール
   4. core = 7.x
   5. package = CPI Custom Module
4. .moduleファイルを下記の内容で作成します。
   ファイル名はモジュール名.module
   e.g) cpi.module
5. 1. <?php
   2. // $Id$
   3.  
   4. /**
   5. * @file
   6. * mページのマッピング(hook_menu)
   7. */
   8. function cpi_menu(){
   9.  
   10. $items['m'] = array(
   11. 'page callback' => 'cpi_m_page',
   12. 'access callback' => TRUE,
   13. 'type' => MENU_CALLBACK,
   14. );
   15. return $items;
   16. }
   17.  
   18. function cpi_m_page(){
   19. return t('Hello CPI Module');
   20. }
   21.  
   22. ?>
6. モジュールを管理画面より有効にします。hook_menuシステムにより、「/m」が有効になりました。

次回は、この「/m」に対してCSMテンプレートを適用して行きます。