[テンプレを分ける] 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サイトとスマートフォンサイトとで同じにする

今回はPCサイトと、スマートフォンサイトで使用するテンプレートテーマを分けます。巷ではレスポンシブウェブなどが流行っておりますがそんなの完全無視です。
流行りに反ってテーマを分けるには私なりに少し理由がありまして、PCサイトに載っているすべての情報がスマートフォンサイトには必要ないのでは無いかなと言う点と、一つのテンプレートで全ての端末に対応するのは、それはそれで時間がかかると思っているからです。手抜きといえば手抜きなんですが、以上の理由から当サイトではテンプレートを2つ用意しています。

[Drupal CSMテーマの分け方]
Drupal7.X

  1. ThemeKeyモジュールをインストールし、有効化します。
    (http://drupal.org/project/themekey)
  2. 「管理 » 環境設定 » ユーザーインターフェース」よりThemeKeyをクリクします。
  3. New Ruleより「drupal:path」を選択しスマートフォンサイトで使用するURL、「m」を入力し、スマートフォンサイト用に作成したDrupalテンプレートを選択します。
  4. 「設定を保存」をクリックすると、「/m」以下の階層にアクセスすると、スマートフォン用のテンプレートでレンダリングされます。

その他ThemeKeyではユーザー名、時間、タイトルなどの様々な条件でテーマを変更することが出来ます。

関連タグ: 

この記事をシェアする:

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

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

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

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

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