Dreamweaver CS5.5は、スマートフォンサイト制作用ライブラリであるjQuery Mobileに正式に対応しており、jQuery Mobileを用いたサイトを簡単に作ることができるようにする「jQuery Mobile Widget」機能を実装しています。本記事では、jQuery Mobile Widgetで作成したスマートフォンサイトをカスタマイズする上で役立つスニペットを紹介します。

※jQuery Mobile Widgetの基本的な使い方は「Dreamweaver CS5.5 マスターシリーズ第2回 jQuery Mobile Widgetでスマートフォン対応サイトを作ろう その1」をご覧ください。

スニペットの登録・管理

Dreamweaver CS5.5の[スニペット]パネルには、便利なスニペットが多く登録されています。使いたいスニペットを選択して[挿入]ボタンを押すと、そのコードがコードビューに展開されます。本記事で紹介するスニペットを利用する際は、[スニペット]パネルに登録しておくとよいでしょう。右クリックメニューの[新規スニペット]や[新規フォルダー]で使いやすいように登録してください。

使用するjQuery Mobileのバージョンを最新にする

発売時のDreamweaver CS5.5にバンドルされているjQuery Mobileのバージョンは「1.0alpha3」ですが、本稿執筆時点では「1.0beta1」がリリースされています。jQuery Mobileの最新機能を利用するには新しいバージョンを読み込まなければなりません。jQuery Mobile公式サイトから最新バージョンをダウンロードするか、CDNであれば以下のスニペットをコピーして差し替えてください。

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>

※jQuery Mobile 1.0beta1を含む以前のバージョンにはクロスサイトスクリプティングの脆弱性があり、セキュリティリスクがあることに注意してください。jQuery Mobileを本格的に利用する場合は、バージョン1.0beta2を待つか、nightly buildを使うことをおすすめします。

jQuery Mobileの日本語化

jQuery Mobileでは、いくつかのメッセージが英語のままなので日本語にしましょう。ページ読込み中のメッセージや戻るボタンのテキストなど自由に編集して利用してください。

// 初期設定 $(document).bind('mobileinit', function(){ // 日本語化 $.mobile.loadingMessage = '読込み中'; $.mobile.pageLoadErrorMessage = '読込みに失敗しました'; $.mobile.page.prototype.options.backBtnText = '戻る'; $.mobile.dialog.prototype.options.closeBtnText = '閉じる'; $.mobile.selectmenu.prototype.options.closeText= '閉じる'; $.mobile.listview.prototype.options.filterPlaceholder = '検索文字列...'; });

※jQueryとjQuery Mobileを読み込むscript要素の間に記述してください。

テキストを省略せずに表示する

ヘッダーやフッターなどに長いテキストを表示すると、末尾のテキストが省略して表示されてしまうことがあります。テキストを省略せずに表示するためには、デフォルトのスタイルを上書きするようにスタイルを定義する必要があります。

/* テキストを省略せずに表示する */ .ui-header .ui-title, /* ヘッダー */ .ui-footer .ui-title, /* フッター */ .ui-btn-inner, /* ボタン */ .ui-li-heading, /* リスト見出し */ .ui-li .ui-btn-text a.ui-link-inherit, /* リンクリスト */ .ui-li-desc /* リスト詳細 */ { overflow: visible; white-space: normal; }

このスニペットでは、ヘッダーやフッター以外にもボタンやリストなどのスタイル定義も記載しているので、必要なものを抜粋して利用してください。

任意のアイコンの追加

jQuery Mobileではボタンなどにdata-icon属性を追加するこによってアイコンを表示することができます。デフォルトではdata-icon属性に指定できるアイコン名は18種類ですが、スタイルを定義することによって任意のアイコンを追加することができます。以下のスニペットは、「map」というアイコンを定義したものです。

/* data-icon="map" */ .ui-icon-map { background: url(images/icon-map-min.png) 50% 50% no-repeat; width: 24px; -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }

任意のアイコンを追加する場合には、ui-icon-[アイコン名]でclass属性を定義してください。class属性の中身にはbackgroundやwidth、border-radiusなどのスタイルをアイコンに合わせて調整しましょう。

共通パーツを作成する

例えば「全ページに共通のボタンを追加したい」といった共通パーツを作成する要望があるかもしれません。その場合、jQuery Mobileがページを装飾する前に、スクリプトでパーツを生成するようにします。次のスニペットは、全ページのヘッダーにホームへ戻るアイコンを追加するものです。

// 最初のページ以外の全ページにホームボタンを追加 $(':jqmData(role=page)').live("pagebeforecreate", function(evt){ var page = $(this), home = $.mobile.firstPage; if ( page.attr('id') != home.attr('id') ) { page.find(':jqmData(role="header")').append( $('<a href="#' + home.attr('id') + '" data-transition="slideup" data-role="button" data-icon="home" data-iconpos="notext" class="ui-btn-right">Home</a>') ); } });

※jQueryとjQuery Mobileを読み込むscript要素の間に記述してください。

jQuery Mobileがページを装飾する前のイベントとしてpagebeforecreateがあります。そのイベント内でページのヘッダーにボタンを追加しています。追加するボタンの内容は自由に編集してください。

Google Mapを利用する

Google Mapを利用するスクリプト自体は通常のWebサイトのものと変わりませんが、jQuery Mobileで利用する場合には少し工夫が必要です。地図のあるページを表示する際にスクリプトが実行されるようにしなければなりません。以下は、id属性「access」を付与したページを用意して、そのページの場合のみGoogle Mapを表示するようにしています。

// 「会場 ACCESS」ページ $('#access').bind('pageshow', function(){ var TITLE = 'マーカーのタイトル', LAT = 緯度, LNG = 経度, MAP_ID = '地図を埋め込む要素のID'; //地図作成 var infowindow = new google.maps.InfoWindow(), latLng = new google.maps.LatLng(LAT, LNG), map = new google.maps.Map(document.getElementById(MAP_ID), { zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP }), marker = new google.maps.Marker({ title: TITLE, position: latLng, map: map }); //地図表示 map.setCenter(latLng); infowindow.open(map); });

※jQueryとjQuery Mobileを読み込むscript要素の間に記述してください。

Google Mapを表示するスクリプトをそのページのpageshowイベントの中で処理しています。イベント内に定義しているTITLEなどの設定を任意に変更してください。

Google Analyticsを利用する

jQuery Mobileでは1つのファイルで複数のページを生成するので、普通のWebサイトと同じようにGoogle Analyticsを導入しても最初のページしかトラッキングされません。以下のスニペットでは、jQuery Mobileの各ページが表示されるたびにトラッキングするようにしています。

// Google Analytics設定 var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-xxxxx-x']); $(document).bind('mobileinit', function(){ // ページトラッキング $(':jqmData(role="page")').live('pageshow', function (event, ui) { _gaq.push(['_trackPageview', $.mobile.activePage.jqmData('url')]); }); } // Google Analytics読み込み $(document).ready(function(){ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); });

※jQueryとjQuery Mobileを読み込むscript要素の間に記述してください。

jQuery Mobileがページを表示した場合に発生するpageshowイベントの中で表示したページのトラッキングを明示的にするようにしています。ページIDで遷移している場合には、そのページIDがトラッキングされます。

おわりに

jQuery Mobileを扱う上で便利なスニペットを7つ紹介しました。Dreamweaver CS5.5の標準の機能と合わせてこれらを使っていくことで、よりリッチなスマートフォンサイトを制作することができるでしょう。

今回紹介したスニペットを全て使用したサンプルを用意しました。スニペットを併用する際のコードの書き方など、参考にしてください。

サンプル:jQueryMobile_sample.zip