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

スマートフォン用にjQuery Mobileを使ってデザインしたデータを、Drupal CMSに適用する手順を何回かに分けてご紹介します。

[手順]

  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. ​;$Id$
    name = cpi
    description = CPIスタッフブログ用カスタムモジュール
    core = 7.x
    package = CPI Custom Module
  4. .moduleファイルを下記の内容で作成します。
    ファイル名はモジュール名.module
    e.g) cpi.module
  5. <?php
    // $Id$
    
    /**
    * @file
    * mページのマッピング(hook_menu)
    */
    function cpi_menu(){
    
      $items['m'] = array(
        'page callback' => 'cpi_m_page',
        'access callback' => TRUE,
        'type' => MENU_CALLBACK,
      );
      return $items;
    }
    
    function cpi_m_page(){
      return t('Hello CPI Module');
    }
    
    ?>
  6. モジュールを管理画面より有効にします。hook_menuシステムにより、「/m」が有効になりました。

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

関連タグ: 

この記事をシェアする:

Author
この記事を書いた人:阿部 正幸

KDDIウェブコミュニケーションズ
クラウドホスティング事業本部 エバンジェリスト

CPIスタッフブログ編集長。ACE01,SmartReleaseをリリース後、現職の「エバンジェリスト」として、web制作に関する様々なイベントに登場

Line@登録よろしくお願いします

Web制作に関する情報や、CPIノベルティのプレゼント、サーバーの無償提供などを定期的に発信しています。
ぜひ、登録ください。