jQuery Mobileでのサイト作成

to-R 西畑一馬

西畑 一馬
to-R代表 / Webクリエイター

・JavaScript / Ajax システム開発
・HTML5 / CSS3 スマートフォンサイト作成

http://ascii.jp/elem/000/000/607/607366/

Design by sonsun 鍋坂理恵

本日の内容• jQuery Mobileの基本• jQuery Mobileの利用方法• フレームワークとは?
• jQuery Mobileの得意なところ• jQuery Mobileの苦手なところ• ケーススタディ• ワークフローjQuery Mobileの基本

http://jquerymobile.com/

まだベータ版

http://jquerymobile.com/と思ったらRC1

We’re targeting a 1.0 release within the next few weeks.

数週間以内に1.0をリリースするよ！

http://lp15.cssnite.jp/i/

http://baito.mynavi.jp/sp/http://www.
barackobama.com/m

http://m-dfb.com

http://www.jqmgallery.com/

スマートフォンサイト作成の課題• iPhone, Android, Windows Phone 7など
多様なデバイスに対応• iOS3.6〜4.3, Android2.1〜2.3など多様なOSに対応• Mobile Safari, Firefox Mobile ,Opera Mobileなど多様なブラウザに対応

そこでjQuery Mobile!!

http://jquerymobile.com/gbs/

Progressive Enhancement

iPhoneFirefox

IE9

IE7

IE6

Feature Phoneすべてのデバイスにコンテンツを！

WAI-ARIA

Dreamweaver

jQuery Mobileの利用方法

headの設定<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery Mobile Sample</title><link rel="stylesheet"href="jquery.mobile-1.0rc1.min.css"><script src="jquery-1.6.4.min.js"></script><script src="jquery.mobile-1.0rc1.min.js"></script><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"></head><body>....
</body></html>headの設定<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery Mobile Sample</title><link rel="stylesheet"href="jquery.mobile-1.0rc1.min.css"><script src="jquery-1.6.4.min.js"></script><script src="jquery.mobile-1.0rc1.min.js"></script><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"></head><body>....
</body></html>CDN
http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css
http://code.jquery.com/jquery-1.6.4.min.js
http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js

http://jquerymobile.com/download/

headの設定<!DOCTYPE html><html><head><meta charset="UTF-8"><title>jQuery Mobile Sample</title><link rel="stylesheet"href="jquery.mobile-1.0rc1.min.css"><script src="jquery-1.6.4.min.js"></script><script src="jquery.mobile-1.0rc1.min.js"></script><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"></head><body>....
</body></html><meta name="viewport" content="width=device-width,initial-scale=1">

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

ページの設定<body><div data-role="page" id="index">...
</div><div data-role="page" id="about">...
</div><div data-role="page" id="seminar">...
</div></body>HTML5のカスタムデータ属性• HTML5から独自の属性が設定可能• data-◯ ◯ ◯="☓ ☓ ☓ ☓"• jQuery Mobileではカスタムデータ属性を利用するためにHTML5を採用している

HTML5のブロックリンク<a href="#seminar"><div><h2>seminar</h2><p>this is block link</p></div></a>ページの設定<body><div data-role="page" id="index"><a href="#about">about</a>...
</div><div data-role="page" id="about"><a href="#index">index</a>...
</div></body>ページの設定
index.html<body><div data-role="page" id="index"><a href="detail.html">detail</a></div></body>detail.html<body><div data-role="page" id="index"><a href="index.html">index</a></div></body>ヘッダー、フッター、コンテンツ<div data-role="page" id="index"><div data-role="header"><h1>to-R</h1></div><div data-role="content"><p>コンテンツの内容</p></div><div data-role="footer"><h4>&copy; 2011 to-R</h4></div></div>

デザインテーマの変更<div data-role="page" id="index"
data-theme="b"><div data-role="header"><h1>to-R</h1></div><div data-role="content"><p>コンテンツの内容</p></div><div data-role="footer"><h4>&copy; 2011 to-R</h4></div></div>

data-theme="c"data-theme="d"data-theme="e"ベータ2からheader、footerにもテーマ設定が必要<div data-role="page" id="index"
data-theme="b"><div data-role="header" data-theme="b" ><h1>to-R</h1></div><div data-role="content"><p>コンテンツの内容</p></div><div data-role="footer" data-theme="b" ><h4>&copy; 2011 to-R</h4></div></div>

リストビュー
<div data-role="content"><ul data-role="listview"><li data-role="list-divider">Menu</li><li><a href="#about"><h3>to-Rについて</h3></a></li><li><a href="#seminar"><h3>セミナー情報</h3></a></li><li><a href="#access"><h3>アクセス</h3></a></li><li><a href="#contact"><h3>お問い合わせ</h3></a></li></ul></div>

リストビュー<div data-role="content"><ul data-role="listview" data-inset="true"><li data-role="list-divider">Menu</li><li><a href="#about"><h3>to-Rについて</h3></a></li><li><a href="#seminar"><h3>セミナー情報</h3></a></li><li><a href="#access"><h3>アクセス</h3></a></li><li><a href="#contact"><h3>お問い合わせ</h3></a></li></ul></div>

フォーム<div data-role="content"><form action="form.php" method="post"><div data-role="fieldcontain"><label for="name">名前</label><input type="text" id="name"></div><div data-role="fieldcontain"><label for="gender">性別</label><select name="gender" id="gender" data-role="slider"><option value="男性">男性</option><option value="女性">女性</option></select></div>

フォーム<div data-role="ﬁeldcontain"><ﬁeldset data-role="controlgroup"><legend>お問い合わせ種別</legend><input type="checkbox" name="type1" id="type1" /> <label for="type1">HP新規作成</label><input type="checkbox" name="type2" id="type2" /> <label for="type2">HPリニューアル</label><input type="checkbox" name="type2" id="type3" /> <label for="type3">システム開発</label><input type="checkbox" name="type4" id="type4" /> <label for="type4">コンサルティング</label></ﬁeldset></div><div data-role="ﬁeldcontain"><label for="textarea">お問い合わせ内容</label><textarea cols="40" rows="8" name="textarea" id="textarea"></textarea></div><input type="submit" value="キャンセル" data-theme="b" data-icon="delete" data-inline="true"><input type="submit" value="送信" data-theme="b" data-icon="arrow-r" data-inline="true"></form></div>

ページ遷移アニメーション
スライド <a href="#about" data-transition="slide">
スライドアップ <a href="#about" data-transition="slideup">
スライドダウン <a href="#about" data-transition="slidedown">
ポップ <a href="#about" data-transition="pop">
フェード <a href="#about" data-transition="fade">
フリップ <a href="#about" data-transition="flip">

デモ他にもさまざまな機能が！

ここまでのカスタマイズはすべてHTMLのみ

これでスマホサイトは完璧！！

コーディングお願いします！

( ﾟдﾟ) ポカーン・・・

カスタマイズしなくちゃ
実務では使えないフレームワークとは？

特定の記述で、特定の機能が呼び出せるhttp://blog.verygoodtown.com/2011/07/cakephp-10-minutes-cms/

http://japan.zdnet.com/development/analysis/20354695/

フレームワーク利用時

手間カスタマイズ

フレームワーク未使用時

手間

カスタマイズフレームワークの特性を理解しておかないとコストがかかるjQuery Mobileの得意なこと

ページアニメーション

ページアニメーション• スマホらしさの演出?
• 無駄なアニメーション?
• モバイルファーストはどこに行った！

ページアニメーション oﬀ<a href="#about" data-transition="none">

Ajaxページング oﬀ<a href="about.html" rel="external">

ヘッダー・フッターの固定配置

ヘッダー・フッターの固定配置<div data-role="header" data-position="ﬁxed"><h1>to-R</h1></div><div data-role="content">(中略)</div><div data-role="footer" data-position="ﬁxed"><h4>&copy; 2011 to-R</h4></div>

ヘッダー・フッターの固定配置• 思ってたのとちょっと違う！
• iOS5からposition:ﬁxedが復活予定(jQuery Mobile beta3では対応済み)と思ったらRC1でデフォルトはOFFに• Android2.2から復活済み(jQuery Mobile はまだ未対応)ネイティブアプリのようなデザイン

独自のJavaScriptイベント

独自のJavaScriptイベント
タップ tap
タップホールド taphold

マウスオーバー vmouseover
マウスダウン vmousedown

スワイプ swipe

マウスムーブ vmousemove

スワイプレフト swipeleft

マウスアップ vmouseup

スワイプライト swiperightクリック vclick
マウスキャンセル vmousecancel

ダブルタップ
http://blog.webcreativepark.net/2010/09/08-204058.html

イベントの設定$(document).delegate("#tap","tap",function(event){$("#page1").append("<p>tap</p>");});jQuery Mobileの苦手なこと

デザインのカスタマイズ

他のJavaScriptライブラリとの連携<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>

Google マップの埋め込み他のJavaScriptライブラリとの連携<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});$('div#access').live('pageshow',function(){google.maps.event.trigger(map, 'resize');
map.setCenter(myLatlng);});});</script>パフォーマンスも気になる• アニメーションがスムーズじゃない端末も• 正式版リリース後にアニメーション関係が「keyframes」から「transition」に変更予定

セキュリティ関係も不安• α版以前では明らかなXSSが存在• β版でも完全にFixされていない• jQuery Core1.6.3でbug Fixの報告• RC版では多分大丈夫α版からRC版に変更する際の注意点<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"><link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" /><script src="http://code.jquery.com/jquery-1.6.4.min.js"></script><script>$(document).bind("mobileinit", function() {$.mobile.page.prototype.options.addBackBtn = true;});</script><script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>

http://blog.webcreativepark.net/2011/06/23-165144.html

戻るボタンの設定1<div data-role="header"><a href="#index" data-rel="back" data-icon="arrow-l">
戻る</a><h1>to-R</h1></div>

戻るボタンの設定2<div data-role="header"><a href="#index" data-direction="reverse"
data-icon="arrow-l">TOPページ</a><h1>to-R</h1></div>

どうすればいいの？

モックアップ・Webアプリに使うのがベスト？
H２Oスペース たにぐちまこと

Case Study 1 ノンカスタマイズ

そのまま使う限りなく低コストでスマホ対応が可能• 予算がない• PC版のおまけで• 自社プロダクト・自社サイト

Case Study 2 プチカスタマイズカラーテーマを変える

jQuery MobileのCSS

共通CSS

テーマCSS<div data-role="page" id="index"
data-theme="a"><div data-role="header" data-theme="a" ><h1>to-R</h1></div><div data-role="content"><p>コンテンツの内容</p></div><div data-role="footer" data-theme="a" ><h4>&copy; 2011 to-R</h4></div></div>

jquery.mobile-1.0rc1.css

<div data-role="page" id="index"
data-theme="f"><div data-role="header" data-theme="f" ><h1>to-R</h1></div><div data-role="content"><p>コンテンツの内容</p></div><div data-role="footer" data-theme="f" ><h4>&copy; 2011 to-R</h4></div></div>

カラーテーマclass.ui-bar-f {" border: 1px solid " " #669999;" background: " " " #709f9f;" color: " " " " " #ffffff;" font-weight: bold;" text-shadow: 0 -1px 1px #669999;" background-image: -webkit-gradient(linear, left top, left bottom, from(#b4cece),to(#709f9f)); /* Saf4+, Chrome */" background-image: -webkit-linear-gradient(top, #b4cece, #709f9f); /* Chrome 10+,Saf5.1+ */" background-image:-moz-linear-gradient(top, #b4cece, #709f9f); /* FF3.6 */" background-image:-ms-linear-gradient(top, #b4cece, #709f9f); /* IE10 */" background-image:-o-linear-gradient(top, #b4cece, #709f9f); /* Opera 11.10+*/" background-image:linear-gradient(top, #b4cece, #709f9f);}

ボタンカラーテーマclass.ui-btn-up-f {...}.ui-btn-hover-f {...}.ui-btn-down-f {...}.ui-btn-active {...}.ui-btn-activeは共通classボタンカラーテーマclass.ui-btn-up-f {...}.ui-btn-hover-f {...}.ui-btn-down-f {...}.ui-body-f .ui-btn-active {...}.ui-btn-activeは共通classチェックボックスclass.ui-icon-checkbox-on,.ui-checkbox-on .ui-icon,.ui-radio-on .ui-icon {background-color: #709f9f;}
共通classチェックボックスclass.ui-body-f .ui-icon-checkbox-on,.ui-body-f .ui-checkbox-on .ui-icon,.ui-body-f .ui-radio-on .ui-icon {background-color: #709f9f;}

共通class

リストビュー<div data-role="content"><ul data-role="listview" data-inset="true"
data-dividertheme="f"><li data-role="list-divider">Menu</li><li><a href="#about"><h3>to-Rについて</h3></a></li><li><a href="#seminar"><h3>セミナー情報</h3></a></li><li><a href="#access"><h3>アクセス</h3></a></li><li><a href="#contact"><h3>お問い合わせ</h3></a></li></ul></div>

リストビュー<div data-role="content"><ul data-role="listview" data-inset="true"
data-dividertheme="f"><li data-role="list-divider">Menu</li><li data-theme="f"><a href="#about"><h3>to-Rについて</h3></a></li><li><a href="#seminar"><h3>セミナー情報</h3></a></li><li><a href="#access"><h3>アクセス</h3></a></li><li><a href="#contact"><h3>お問い合わせ</h3></a></li></ul></div>

けっこう手間がかかる• 既存のテーマCSSをオーバーライドするだけではダメ• 共通CSSをいじると影響範囲が大きい• バグも多い!?
• 一度テーマファイルを作成したら、次回は簡単にカラースキームを変更できる。

ThemeRollerが公開予定

Case Study 3 セミカスタマイズカラーテーマを変える+αほぼオリジナルサイト• TOPに導線を配置• ロゴなどを配置• ヘッダー・フッターにちょっとしたカスタマイズ

テイストを標準のUIに合わせるには？

OOCSS(Object-Oriented CSS)

レゴブロックのようにCSSを設計する

Webridge Kagawa 筒井 志信

Web Desining 2010年4月より

リストビュー
<div data-role="content"><ul data-role="listview" data-inset="true"
data-dividertheme="f"><li data-role="list-divider">Menu</li><li><a href="#about"><h3>to-Rについて</h3></a></li><li><a href="#seminar"><h3>セミナー情報</h3></a></li><li><a href="#access"><h3>アクセス</h3></a></li><li><a href="#contact"><h3>お問い合わせ</h3></a></li></ul></div>

リストビュー
<div data-role="content"><ul data-role="listview" datainset="true" data-dividertheme="f"class="ui-listview ui-listview-inset
ui-corner-all ui-shadow">(中略)" </ul></div>

• jQuery MobileのOOCSSパターンを理解するのに手間がかかる• OOCSSの設計思想に触れるよい機会• TOPページや個別ページで利用する

Case Study 4 フルカスタマイズ

テーマCSSを利用しないSafariのWebインスペクタ

http://blog.webcreativepark.net/2011/05/12-213145.html

どの機能を利用するかがポイント• jQuery Mobileのアニメーション• Ajaxページングの利用• ヘッダー・フッターの固定

スマホサイトに求められているのはスマホらしさワークフローの改善

これまでのワークフロー

グラフィカルツールでデザイン

クライアント確認

コーディングこれからのワークフロー?

コーディングクライアント確認

コーディンググラフィカルツールでデザインすると2重３重の調整が必要になる10年続いたカンプから作るフローを見直す時期では

Could 長谷川恭久

そこでjQuery Mobile!!

まとめ

まとめ

• jQuery Mobileは雛形どおりのサイトは簡単に作成できる• テーマカラーの変更も慣れれば簡単• セミカスタマイズまでならCSS+αの知識でどうにかなる• スマホらしさを表現するには最高のツール• ワークフローを改善する一助になるのでは！

続きはWebでKazumaNishihata