【ワンポイント・メモ】
h2要素にclass名「h1」を付ける理由

　サンプル3では、h2要素に対して「h1」という名前のclass属性を付けています。要素名と同じclass名を付けることに対して、「気持ちが悪い」と感じた方もいるでしょう。

　一般的に見出し要素は、h1〜h5の見出しレベルに沿ってスタイルを定義します。h1要素が一番大きく、h5要素が一番小さくなる、といった具合です。ところが、jQuery Mobileのようなフレームワークでは、フレームワークが定めるルールに沿ってマークアップする必要があるため、HTMLドキュメント内の見出し要素と、見た目上の見出しレベルを一致できない場合があります。

　そこで、サンプル3では、見た目としての見出しレベルをclass属性で定義し、CSSで記述したスタイルを適用しています。

　この方法は、米ヤフーのNicole Sullivan（@stubbornella）が提唱する「OOCSS（オブジェクト指向CSS）」で採用されているCSS設計の考え方に沿ったものです。

「Backボタン」のカスタマイズ

　jQuery Mobileではページ遷移したときに、ヘッダーの左上に自動的に「Backボタン」が追加されます。Backボタンは、ページ遷移時と同じアニメーションエフェクトで前のページへ戻る機能です。

jQuery Mobileにより追加されたBackボタン

　便利な機能ですが、サイトによっては英語のUIがなじまない場合もあるでしょう。Backボタンのラベルは、ページ要素に対してカスタムデータ属性「data-back-btn-text」を追加することで、任意の文字列に変更できます。次のように指定すると、Backボタンが「戻る」に変わります。

■サンプル5[HTML]

<div data-role="page" id="about" data-theme="b" data-back-btn-text="戻る">

jQuery Mobileにより追加されたBackボタン

　手動でリンクを張りたい場合など、戻るボタンをあえて非表示にしたいときは、ヘッダー要素に対してカスタムデータ属性「data-backbtn="false"」を追加します。

■サンプル5[HTML]

<div data-role="header" data-backbtn="false">

ページ遷移のアニメーションエフェクト

　トップページ（#index）から各ページへのリンクをタップすると、ページが左右にスライドしながら遷移します。jQuery Mobileではさまざまなページ遷移のアニメーションエフェクトが用意されており、a要素に対してカスタムデータ属性「data-transition="エフェクトの種類"」を指定することで変更できます。

<a href="#about" data-transition="エフェクトの種類">

　指定できるエフェクトには以下のようなものがあります。

スライドアニメーション

　data-transitionに「slide」を指定すると、ページが左右にスライドして切り替わる「スライドアニメーション」が適用されます。jQuery Mobileのデフォルトのアニメーションです。

■サンプル6[HTML]

<a href="#about" data-transition="slide">

		右から左にスライドしてページが切り替わる

スライドアップアニメーション

　 data-transitionに「slideup」を指定すると、ページが下から上にスライドして切り替わる「スライドアップアニメーション」が適用されます。

■サンプル7[HTML]

<a href="#about" data-transition="slideup">

		下から新しいページがスライドして登場してページが切り替わる

スライドダウンアニメーション

　data-transitionに「slidedown」を指定すると、ページが上から下にスライドして切り替わる「スライドダウンアニメーション」を適用できます。

■サンプル8[HTML]

<a href="#about" data-transition="slidedown">

		上から新しいページがスライドして登場してページが切り替わる

ポップアニメーション

　data-transitionに「pop」を指定すると、ページが拡大しながら切り替わる「ポップアニメーション」を適用できます。

■サンプル9[HTML]

<a href="#about" data-transition="pop">

		中央から新しいページが拡大して登場してページが切り替わる

フェードアニメーション

　data-transitionに「fade」を指定すると、ページがフェードイン／フェードアウトで切り替わる「フェードアニメーション」を適用できます。

■サンプル10[HTML]

<a href="#about" data-transition="fade">

		新しいページがフェードインしながら登場してページが切り替わる

フリップアニメーション

　data-transitionに「flip」を指定すると、ページが回転して切り替わる「フリップアニメーション」を適用できます。

■サンプル11[HTML]

<a href="#about" data-transition="flip">

		ページが回転し裏側の新しいページ表示するように切り替わる

　このようにjQuery Mobileではページ遷移の動きを簡単に設定できます。ただし、さまざまなアニメーションが混在するサイトは一貫性に欠け、ユーザーから見ると煩わしいサイトになりますので、多用しすぎないようにしましょう。ページ遷移時のアニメーションエフェクトは1種類、特別な場面でもう1種類程度に留めるべきです。

デフォルトアニメーションの変更

　リンク（ページ）単位ではなく、サイト全体でページ遷移のアニメーションを一括して設定したい場合は、jQueryとjQuery Mobileのスクリプトファイルを読み込むscript要素の間に次のようなJavaScriptコードを追加します。このサンプルではデフォルトのアニメーションをフリップアニメーションに変更しています。

■サンプル12[HTML]

<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).bind("mobileinit", function(){
     $.mobile.defaultTransition = "flip";
});
</script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

　$(document).bind("mobileinit", function(){...}); 内にはさまざまな初期設定を記述できます。$.mobile.defaultTransition はデフォルトのアニメーションを指定するための記述で、上の例ではフリップアニメーションをデフォルトのアニメーションとして設定しています。

アニメーションをオフにする

　ページ遷移時のアニメーションが不要な場合は、「data-transition="none"」や「data-transition=""」のように存在しないアニメーションエフェクトを指定します。

■サンプル13[HTML]

<a href="#about" data-transition="none">

　たとえば、「補足情報だけをポップアニメーションで表示する」といった具合にアニメーションの利用シーンを絞ることで、情報の意味をアニメーションで強化できます。

　スマートフォンサイトではアニメーションも情報設計の一端を担うことを念頭に、効果的に利用しましょう。

セミナー情報ページの作成とテキスト省略機能の無効化

　続いて、「セミナー情報」のページ（#seminar）を作成します。#seminarはトップページと同様、data-role="listview"を使ったリスト型のUIで作ります。コンテンツ要素内に次のようなHTMLを記述します。

■サンプル14[HTML]

<div data-role="content">
  <h2 class="h1">セミナー情報</h2>
  <ul data-role="listview" data-inset="true">
    <li><a href="http://wdf.jp/vol01/">
      <h3>WDF Vol.1</h3>
      <p>金沢市　ITビジネスプラザ武蔵 6F ホール</p>
      <p>2011年6月11日</p>
    </a></li>
    <li><a href="http://rd.67.org/ws/workshop/detail/091html.html">
      <h3>西畑一馬のCSS3でつくるスマートフォンサイト講座</h3>
      <p>原宿 ロクナナワークショップ</p>
      <p>2011年7月14日</p> 
    </a></li>
    <li><a href="http://www.sacss.net/jquery_event/">
      <h3>SaCSS Special！</h3>
      <p>札幌市産業振興センター</p>
      <p>2011年7月23日</p> 
    </a></li>
  </ul>
</div>

セミナー情報のページ

　サンプル14をスマートフォンのブラウザーで確認すると、一見問題なく表示できているように見ますが、よく見ると肝心のセミナー名が途中で「...」と省略されているのが分かります。jQuery Mobileの仕様で、CSS3の「text-overflow:ellipsis」を使って特定の要素の内側の幅を超える文字列を「...」と省略してしまうのです。

　このままだと困るので、文字列を省略せず、折り返して表示するように変更します。最初に、text-overflowを初期化するスタイルを定義します。

■サンプル15[CSS]

.wordbreak{
overflow: visible;
white-space: normal;
}

　「oveflow: visible」で文字列を省略をしないように、「white-space: normal」で改行するように設定しています。CSSで定義したclass属性「wordbreak」をテキストが省略されている要素に対して追加します。

■サンプル15[HTML]

<p class="wordbreak">金沢市　ITビジネスプラザ武蔵 6F ホール</p>

■サンプル15[HTML]

<h3 class="wordbreak">西畑一馬のCSS3でつくるスマートフォンサイト講座</h3>

　以上でjQuery Mobileによるテキストの自動省略機能をオフにできました（サンプル15）。

テキストが省略されずに表示される

Googleマップの設置

　「アクセス」のページ（#access）では、Googleマップを利用して地図を表示しましょう。Googleマップでは地図ページ（http://maps.google.co.jp/）の右上から、ページへ地図を埋め込めるiframeタグを取得できます。

Google Mapではサイトに地図を埋め込めるiframeが公開されている

　ただし、Googleマップから取得したタグを貼り付けても、一部のスマートフォンでは地図が表示されません（サンプル16）。

■サンプル16[HTML]

<div data-role="content">
  <h2 class="h1">アクセス</h2>
  <iframe width="425"  ...中略... 大きな地図で見る</a></small>
</div>

　そこで、iframeは使わずに、Google Maps API（http://code.google.com/intl/ja/apis/maps/documentation/javascript/）を使って地図を読み込みます。

　最初に、Google Maps APIのスクリプトをhead要素内で読み込みます。

■サンプル17[HTML]

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

　次に、コンテンツ要素内にid属性「map」、class属性「ui-shadow」を付けたdiv要素を配置します。class属性「ui-shadow」は、要素に対してドロップシャドウを付けるスタイルで、jQuery Mobileであらかじめ定義されています。

■サンプル17[HTML]

<div data-role="content">
  <h2 class="h1">アクセス</h2>
  <div id="map" class="ui-shadow"></div>
</div>

　 CSSではdiv#mapに対して、width、height、borderを設定します。コンテンツ幅が100%を超えて描画されないように、CSS3のbox-sizing:border-boxを利用し、borderをwidthに含めるようにも設定します。

■サンプル17[CSS]

div#map{
  width:100%;
  height:400px;
  border:4px solid white;
  -webkit-box-sizing: border-box;
  box-sizing:border-box;
}

　最後に、JavaScriptの設定です。Google Maps APIで公開されているサンプルコードをもとに、地図を表示する簡単なスクリプトを書いてみましょう。以下にサンプルコードを示します。

<script>
$(function(){
  var myLatlng = new google.maps.LatLng(緯度,経度);
  var myOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("map"), myOptions);
  var marker = new google.maps.Marker({
    position: myLatlng, 
    map: map, 
  });
});
</script>

　経度と緯度のところには、目的地の緯度・経度を記述してください。緯度・経度は「経度緯度検索」（http://www.webcreativepark.net/labs/longitude_iatitude/）などのサービスで調べられます。

　通常はこれで完成ですが、jQuery Mobileの場合はもう一工夫必要です。jQuery MobileではJavaScriptを使ってページを擬似的に生成しているので、先ほどのスクリプトが実行された時点では、地図を表示する要素がまだ表示されていません。表示されていない要素に地図を表示しようとすると、座標が狂ったり、灰色の地図が描画されたりしてしまう不具合があるので、次のようなスクリプトで調整します。

■サンプル17[JavaScript]

<script>
$(function(){
  
  ....中略...
  
  $('div#access').live('pageshow',function(){
    google.maps.event.trigger(map, 'resize');　　　【1】
    map.setCenter(myLatlng);　　　【2】
  });
});
</script>

　$(ページ要素).live('pageshow',function(){...}); 内に記述した処理は、jQuery Moblieによってページが生成されたときに実行されます。サンプル17では、【1】で地図の再描画を、【2】で地図の中央位置を再設定するGoogle Maps APIの命令を実行し、アクセスページに遷移したタイミングで地図を調整しています。

　最後は少し複雑になってしまいましたが、以上でアクセスページに地図を表示できました。

アクセスページに表示されたGoogleマップ

　次回は、残る「お問い合わせ」のページ（#contact）を作りながら、jQuery MobileのフォームUIについて解説します。