小粋空間: jQuery Mobile アーカイブ

Top ＞ JavaScript ＞ jQuery Mobile [全て閉じる]

2011年12月12日

jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説

December 12,2011 12:22 AM
Tag：[jQueryMobile, Theme]
Permalink

jQuery Mobileのデザインを簡単に作れる、jQuery Mobile公式サイトで提供している「ThemeRoller」を紹介します。

ThemeRoller

こんな風にjQuery Mobileのデザインが簡単に出来上がります。リンクをクリックすれば同じデザインが表示された状態で「ThemeRoller」が起動します（2012/01/11頃まで）。

このエントリーで紹介する情報は2011年12月のものです。

１．ThemeRollerへのアクセス方法と全体レイアウト

jQuery Mobileのトップページにある「Themes」をクリック。

jQuery Mobile

ウェルカムメッセージが表示されるので、「Get Rolling」をクリック。

冒頭の編集画面が現れます。左ペインにテーマの各種設定項目、右ペインにプレビュー画面が表示されます。プレビュー画面は複数表示させることができるので出来栄えを見比べることができます。デフォルトでは3画面表示されています。

左ペインのタブの一番右側にある「+」をクリックすれば、プレビュー画面を増やすことができます。タブの「Global」はすべてのプレビュー画面、「A」～「C」はそれぞれのプレビュー画面の設定に対応しています。

左ペイン

２．カラーピッカーの使い方

右上のカラーピッカーはドラッグすることができます。

カラーピッカー

プレビュー画面の背景部分にドラッグすると、

プレビュー画面

このように反映されます。

プレビュー画面

カラーピッカーのドラッグは設定項目に対しても有効です。適用部分には枠線が表示されます。

設定項目

適用した色は右側の保存領域に追加されていきます。最大で5つまでみたいです。

設定項目

Adobe Kulerとも連携しています。「Adobe Kuler」をクリックすると、

Adobe Kuler

Adobe Kulerのカラーピッカーに切り替わります。これもドラッグ可能です。左側のプルダウンを使えば、表示テーマの切り替えや検索が行えます。

手動で入力する場合は、次のようなカラーピッカーが表示されます。

カラーピッカー

３．Inspectorの使い方

Inspectorを「ON」にします。

Inspector

プレビュー画面にマウスをポイントすると設定範囲が枠線で表示されます。

プレビュー画面

さらにクリックすると、設定に必要な左ペインの項目が自動的に表示されます。

４．設定項目

左ペインの設定項目をスクリーンショットでご覧ください。InspectorのON/OFFによって項目が異なります。

Inspector OFF

Inspector ON

５．テーマのダウンロード

テーマをダウンロードするには「Download Theme」をクリック。

Download Theme

適当な名称を表示されたダイアログの右上に設定して「Download ZIP」をクリック。これでjQuery Mobileのテーマ部分をダウンロードできます。jQueryやjQuery Mobile本体は含まれませんので注意してください。

ダイアログに表示されているマークアップを使えばテーマを読み込みますが、link要素やscript要素は2011年12月現在でやや古い（1.0rc2などになっている）ので適宜修正してください。

６．テーマのインポート

ダウンロードしたテーマをインポートするには「Import」をクリック。

Import

表示されたテキストフィールドに、圧縮していないCSSファイル（.min.cssではなく.cssの方）の内容をペーストして「Import」をクリックすれば元のデザインをインポートできます。

７．テーマのシェア

作成したテーマをシェアするには「Share」をクリック。

表示されたURLでシェアすることができます。この機能を利用すれば作成したテーマをサーバに保存することもできますが、ヘルプの説明によると保存期間は30日なので、大事なテーマはダウンロードした方がよいでしょう。

不明な点は左ペイン上部にある「Help」をご覧ください。

Comments [0] | Trackbacks [0]

2011年3月22日

Movable Type + jQuery Mobileによる「計画停電検索サイト」の構築方法まとめ

March 22,2011 12:30 AM
Tag：[jQueryMobile, MovableType]
Permalink

Movable TypeとjQuery Mobileを使って構築する、スマートフォン向けの計画停電検索サイトのまとめです。

先日公開した「東京電力計画停電検索（iPhone版）」について、iuiライブラリからjQuery Mobileに乗り換え、それらも含めてサイト構造などについて紹介します。

本来やらなければならないことが他に色々あるのですが、東北地方太平洋沖地震地震が発生してから何も手につかずこの件ばかりやっている状態です。作成した検索サイトは少しでも役立てればと思いますし、この記事も他の何らかのサイトをMovable Typeで構築する際の参考になれば幸いです。

計画停電検索サイト（スマートフォン向け）

１．サイト構造

サイトの構造ですが、まず図の下にあるデモ画面のように、

「都県選択」→「市区郡選択」→「町名選択」→「グループ・時間帯表示」

という風に遷移するようにしました。それぞれのページではひとつ前の画面に戻れます。

それぞれのページは、図の上にあるようにインデックステンプレートとブログ記事アーカイブテンプレートを用いています。

「市区郡選択」から「町名選択」への遷移は、都県別のインデックステンプレートだけで行うようにしました。本当は「都県選択」から「町名選択」まででひとつのインデックステンプレートで行いたかったのですが、ファイルサイズが膨大になってしまうので、分割することにしました。

２．計画停電情報とMovable Typeのデータの関連づけ

計画停電情報は公表されているExcelデータを用いました。Excelデータは、

都県
市区郡
大字通称
グループ

と4つの情報があり、これを図のように対応づけました。

都県 → トップカテゴリ
市区郡 → サブカテゴリ
大字通称 → ブログ記事タイトル
グループ → ブログ記事本文

この構造にした場合、ブログ記事は約25000ページと結構な数になります。実際に表示するパターンはグループ1からグループ5の5パターンのみでちょっと無駄な感じもしますが、この対処は４項で解説します。

３．Excelデータのインポート

ExcelデータをMovable Typeに読み込ませるために、一旦CSV形式で出力し、その後スクリプトを使って、図の下のようにインポート可能な形式にしました。

加工したCSVデータのインポートには自作のプラグインを用いました。このプラグインはサブカテゴリのインポートにも対応しています。

余談ですが本プラグインはMT5.1の書籍用に開発中のもので刊行と合わせて公開する予定です。図では項目をかなり省略していますがほぼすべての項目をインポートが可能になっています。

４．ブログ記事ページへの情報出力

一番悩んだのがこの部分で、25000ページのブログ記事を5パターンに集約して出力する方法です。思いついたのが図に示す方法です。

まず、図右上のブログ記事本文にmt:incudeタグを埋め込み（３項のインポート時に埋め込んでます）、「グループ」テンプレートモジュールを呼び出すようにしておきます。mt:includeタグにはgroupモディファイアを与え、「グループ」テンプレートモジュールにグループ情報を渡します。

「グループ」テンプレートモジュールには、検索結果の表示と日付を選択するドロップダウンを記述しています。この部分はブログ記事アーカイブテンプレートに直接埋め込んでも問題ないのですが、CSVデータが膨大になるのを避けるためです。

次に、図左上のブログ記事アーカイブテンプレートのmt:EntryBodyタグにmtevalモディファイアを与えます。これでファイル生成時にブログ記事本文の内容をテンプレートとして評価し、最終的に図左下のようなファイルを出力します。ファイルはダイナミックパブリッシングで動的生成するので再構築の手間はありません。

５．テンプレート

トップページのテンプレートは次のようになっています。jQuery Mobileのバージョンは1.0a3です。jQuery1.4.2では何も表示されず、1.4.3で表示されました。

都県名選択部分（青色）はmt:TopLevelCategoriesタグ（mt:SubCatsRecurseタグなし）で出力しています。リンクのファイル名はmt:CategoryDescriptionで取得していますが、作り方によってはmt:CategoryBasenameでも大丈夫だと思います。

jQuery Mobileのお作法として、外部（この場合は都県別）ページにリンクする場合は、a要素に「rel="external"」を付与します。付与しない場合は遷移後のURLにフラグメントが付与されます。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>計画停電検索</title>
<link rel="stylesheet" href="<mt:BlogURL />jQueryMobile/jquery.mobile-1.0a3.min.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="application/x-javascript" src="<mt:BlogURL />jQueryMobile/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div id="home" data-role="page">
  <div data-role="header">
    <h1>計画停電検索</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
      <li data-role="list-divider">都県を選択</li>
<mt:TopLevelCategories>
      <li><a rel="external" href="<mt:BlogURL /><mt:CategoryDescription />.html"><mt:CategoryLabel /></a></li>
</mt:TopLevelCategories>
    </ul>
  </div>
  <div data-role="footer"></div>
</div>
</body>
</html>

都県別のインデックステンプレート（例は東京都）は次のようになっています。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>計画停電検索:東京都</title>
<link rel="stylesheet" href="<mt:BlogURL />jQueryMobile/jquery.mobile-1.0a3.min.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="application/x-javascript" src="<mt:BlogURL />jQueryMobile/jquery.mobile-1.0a3.min.js"></script>
</head>
<body>
<div id="home" data-role="page">
  <div data-role="header" data-position="inline" data-nobackbtn="true">
    <a href="#" data-icon="arrow-l" class="ui-btn-left" onclick="history.back();">Back</a>
    <h1>計画停電検索</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
      <li data-role="list-divider">東京都:市区郡を選択</li>
<mt:SubCategories category="東京都">
      <li><a href="#cat<mt:CategoryID>"><mt:CategoryLabel /></a></li>
  <mt:SubCatsRecurse />
</mt:SubCategories>
    </ul>
  </div>
  <div data-role="footer"></div>
</div>
<mt:TopLevelCategories>
  <mt:Entries sort_by="title" sort_order="ascend" lastn="0">
    <mt:EntriesHeader>
<div id="cat<mt:CategoryID />" data-role="page">
  <div data-role="header" data-position="inline" data-nobackbtn="true">
    <a href="#" data-icon="arrow-l" class="ui-btn-left" onclick="history.back();">Back</a>
    <h1>計画停電検索</h1>
  </div>
  <div data-role="content">
    <ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
      <li data-role="list-divider">東京都<mt:CategoryLabel />:町名・丁を選択</li>
    </mt:EntriesHeader>
      <li><a rel="external" href="<mt:EntryPermalink />"><mt:EntryTitle /></a></li>
    <mt:EntriesFooter>
    </ul>
  </div>
  <div data-role="footer"></div>
</div>
    </mt:EntriesFooter>
  </mt:Entries>
  <mt:SubCatsRecurse />
</mt:TopLevelCategories>
</body>
</html>

市区郡選択部分（青色）はmt:SubCategoriesタグにcategoryモディファイアを与え、特定のトップカテゴリのサブカテゴリ分のみを出力しています（mt:SubCatsRecurseは不要かもしれません）。

町名選択部分（赤色）はサブカテゴリ別にブログ記事タイトルを並べるサブテンプレートを作ります。

市区郡選択→町名選択は同一ページ内で遷移するので、jQuery Mobileのお作法にのっとって、次のような構造にしています。

<div id="home" data-role="page">
…中略…
  <div data-role="content">
    <ul>
      <li><a href="#cat1">あきるの市</a></li>
      <li><a href="#cat2">三鷹市</a></li>
      <li><a href="#cat3">八王子市</a></li>
    　…中略…
    </ul>
  </div>
…中略…
</div>
 
<div id="cat1" data-role="page">
  <div data-role="content">
    <ul>
      <li><a href="...">渕上</a></li>
      <li><a href="...">留原</a></li>
      <li><a href="...">養沢</a></li>
    　…中略…
    </ul>
  </div>
…中略…
</div>
 
<div id="cat2" data-role="page">
…中略…
</div>
 
<div id="cat3" data-role="page">
…中略…
</div>
 
…後略…

「data-role="page"」を付与したdiv要素が1ページに表示する範囲となります。その中のa要素のhref属性値に、遷移したい要素のid属性値を設定します。

この例の場合、最初に「id="home"」のdiv要素が表示され、その中にあるa要素のhref属性値「cat1/cat2/cat3」が後方のdiv要素のid属性に対応しています。

HTML5なのでdiv要素よりsection要素の方が良いと思いますがとりあえず。

Comments [0] | Trackbacks [0]

小粋空間 - a cheap joke and a play on words site

jQuery Mobileのデザインを簡単に作れる「ThemeRoller」徹底解説

１．ThemeRollerへのアクセス方法と全体レイアウト

２．カラーピッカーの使い方

３．Inspectorの使い方

４．設定項目

５．テーマのダウンロード

６．テーマのインポート

７．テーマのシェア

Movable Type + jQuery Mobileによる「計画停電検索サイト」の構築方法まとめ

１．サイト構造

２．計画停電情報とMovable Typeのデータの関連づけ

３．Excelデータのインポート

４．ブログ記事ページへの情報出力

５．テンプレート