jquery by hiroto ohno

2012.1.28 講師：原

jQuery Mobileとは？

jQueryをベースとしたモバイルサイト構築のためのフレームワークです。デザイナー好みの「手軽さ」と「自由さ」を兼ね備えている。

jQuery Mobileの特徴 • 開発が容易（JSを１行もまたはほとんどかかず基本的なコンテンツは制作可能） • Cross-platform

（マルチデバイス対応。iOSからOperaまでもサポート）

• Progressive Enhancement

（高性能な機種には最高にリッチな

コンテンツを提供しつつ、下位機種にも情報コンテンツとしては問題のない表示を保つ）

• CDNネットワークを活用

（Contents Delivery Network）

• Accessibility（アクセシビリティのためのW3C規格「 WAI-ARIA 」をサポート） • Markup-driven（ JSを記述せず、マークアップだけでほとんどの設定が可能） • 非常に軽量（JS24kb+CSS 7kb、軽量なアイコン、描画にCSS３をフル活用） • 美しいUIと、アプリのようなエフェクト

jQuery Mobileのメリット • マルチデバイスに対応 http://jquerymobile.com/gbs/ （最新のサポートデバイス）

• クロスブラウザ対策を考えなくて良い

• スマホサイトだけでなくスマホアプリ開発もできる  DreamweaverCS5.5+Phone Gappでネイティブアプリも書き出し可能。

• アプリさながらの美しいUIが売り（フォームやボタンも簡単に実装(UIデザインが容易にできる)

• Ajax遷移による、アプリのようなエフェクト

jQuery Mobileのデメリット • 低スペックのデバイスでは、まだまだ動きが遅い（特にトランジションはver1.2で大がかりな改変予定アリ）

• 完全オリジナルのデザインは出来ない。大掛かりなカスタマイズが難しい（CSS3の知識が必要ｗ）

検証環境はどうする？ Safariを機能拡張すれば簡単に検証環境ができます。（Safari3.0以上）

心配なら初めから、iPhone、Androidなどの実機で検証してみましょう。

jQuery Mobileの設置

jQuery Mobileの設置準備 ●viewport 設定 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>サンプル</title>

jQuery Mobileの設置準備 ● jQuery Mobileの読込み <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>サンプル</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc3/jquery.mobile-1.0rc3.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc3/jquery.mobile1.0rc3.min.js"></script> </head>

注意点として、1) jquery.js 2) jquery.mobile.jsの順に記述すること!!

http://jquerymobile.com/download/ （最新のJQM）

data-* 属性について data-ｘ属性は、「カスタムデータ属性」とも呼ばれ、 HTML5からはdata-ｘ属性を使用することで独自の設定がきるように。JQMも、このdata-ｘ属性をフル活用します。＜主なdata-* 属性一覧＞属性

説明

例

data-role

UIのパーツとしての役割を設定

page, header, content, footer, button, slider, none, nojs, list-divider

data-rel

要素の動作を設定

back, dialog

data-url

URLを設定

data-transition

ページ遷移時のエフェクト

slide,slideup, slidedown, pop, fade, flip, none (defaultはslide)

data-direction

ページ遷移時のエフェクト方向

reverse

data-ajax

リンクのajaxの有効化、無効化

true, false (defaultはtrue)

data-position

position fixed

data-id

JQM内部で扱うid

data-theme

テーマの種類を設定

a,b,c,d,e

data-icon

アイコンの種類

refresh, star, delete, plus, check, gear, arrow-r, arrow-l ..........etc

data-iconpos

アイコンの位置

right, left, notext

data-type

Form要素の種類

input, text, range, horizontal, search

data-inset

角丸リストにする

true, false (defaultはfalse)

jQuery Mobileの基本のページ構造 <body> <div data-role="page" id=“top">  <div data-role="header"> <h1>タイトル</h1> </div>  <div data-role="content"> コンテンツ </div>  <div data-role="footer"> <h4>フッター</h4> </div> </div> </body>

‣ ページ • ヘッダー • コンテンツ • フッター

jQuery Mobileのページ構築 1. 基本的にAjaxによるページ内リンクなので、１つのhtmlファイルに何ページでも記述できる。 2. もちろん外部ファイルリンクもOK 3. ユーザビリティ＆アクセシビリティを考慮して、ページはなるべく外部リンクにし、ページを分ける方が主流になっている。（仕事では）

<!DOCTYPE html> <html lang="ja"> <head> </head>

<body> <div data-role="page" id=“top">  <div data-role="header"> <h1>タイトル</h1> </div>  <div data-role="content"> コンテンツ </div>  <div data-role="footer"> <h4>フッター</h4> </div> </div> <div data-role="page" id=“top">  <div data-role="header"> <h1>タイトル</h1> </div>  <div data-role="content"> コンテンツ </div>  <div data-role="footer"> <h4>フッター</h4> </div> </div> <div data-role="page" id=“top">  <div data-role="header"> <h1>タイトル</h1> </div>  <div data-role="content"> コンテンツ </div>  <div data-role="footer"> <h4>フッター</h4> </div> </div> </body>

ページ遷移① <p><a href="#form" data-role="button" data-icon="arrow-r" data-transition="pop">参加エントリーフォーム</a></p> <ul data-role="listview" data-inset="true"> <li data-icon="star"><a href="#concept">コンセプト</a></li> <li data-icon="search"><a href="#event">イベント会場</a></li> <li data-icon=“search”><a href=“another.html”>外部リンク</a></li> </ul>

ページ遷移は基本的に、

Ajaxによって行われる。（javascript等を使って画面遷移をせずにサーバーから

新しいコンテンツを取得し、非同期に画面の一部のみを更新する技術）

ページ遷移② JQMサイトは、Ajax遷移なので、実は、、、ページ遷移時に、ページ全体を切り替えているわけではないのです。

“ 最初に表示されたページ（基点ページ）のhead要素内の内容しか読み込んでいない！“ んです。。

ページ遷移② 1. ヘッド部分のスタイル、スクリプトはすべてのページで共通で読み込む方法を推奨（どのページが基点となっても良いように）

2. どうしても個別適用したいページは、ページ要素内（div data-role=“page”）に、スタイル、スクリプトタグを記述する。）

ページ遷移Tips 1. 「戻る」ボタンをつけるには、リンク先のdatarole=“page“を指定した開始タグ内に、 data-add-back-btn=”true”を記述する。 2. Ajax遷移を切りたいときの方法３つ  リンク先を外部URLにする。  a要素の開始タグ内に、rel=“external” を記述する。  a要素の開始タグ内に、data-ajax=“false” を記述する。 <ul> <li><a href=“http://anothersite.com/”>外部URL</a></li> <li><a href=“#twitter” rel=“external”>ツイート</a></li> <li><a href=“#googlemap” data-ajax=“false” >マップ</a></li> </ul>

トランジション効果 <p><a href="#form" data-role="button" data-icon="arrow-r" data-transition="pop">参加エントリーフォーム</a></p> <ul data-role="listview" data-inset="true"> <li data-icon="star"><a href="#concept" data-transition="slide">コンセプト</a></li> <li data-icon="search"><a href="#place" data-transition=“slideup">イベント会場 </a></li> </ul>

トランジション効果の種類は６種類 • slide • slideup • slidedown • pop • fade • flip

UIコンポーネント① ボタン 1. リンク要素のbutton化 <a href="#form" data-role="button" data-icon="arrow-r" data-transition="pop">参加エントリーフォーム</a>

●JQMは、button要素やinput要素（一部）を、自動的にボタン化します●

2. button要素に <button>ボタンさ</button>

3. input要素＋inline化 <input type="button" value="キャンセル" data-inline="true"> <input type="submit" value="送信" data-inline="true">

ボタンTIPS ①

1. 遷移後、ヘッダー戻るボタンを自動で付ける場合、ページ要素にdata-add-back-btn=“true“を指定。 2. data-icom属性でボタン上にいろいろなアイコンを設置できます。（ data-icom属性はリストなどにも指定可能） <div data-role="page" id="form" data-add-back-btn="true“> <div data-role="header"> <h1>ヘッダー</h1>

<p><a href="#form" data-role="button" data-icon="arrow-r" data-transition="pop">参加エントリーフォーム</a></p>

ボタンTIPS ② 1. data-inline=“true”を使うとインライン表示となり、内容に合わせたボタンの幅になります。 2. header、footerにもボタン設置可。（ header、 footer内のa要素は自動的にボタンになる。） <input type="button" value="キャンセル" data-inline="true"> <input type="submit" value="送信" data-inline="true">

<div data-role="page" id="top" data-theme="a"> <div data-role="header"> <h1>渋谷校リニューアル記念イベント</h1> <a href="#" data-icon="plus">Add</a> <a href="#" data-icon="gear" class="ui-btn-right">Options</a> </div>

UIコンポーネント② リスト 1. リストテーブルを作成するには、ul要素に属性で、 data-role=”listview” を指定するだけで作成できます。 2. 角丸の立体的なリストテーブルにするには、 ul要素に同時にdata-inset=”true”を指定します。 <ul data-role="listview" data-inset="true"> <li data-icon="star"><a href="#concept" data-transition="slide">コンセプト</a></li> <li data-icon="search"><a href="#event" data-transition="pop">イベント会場</a></li> </ul>

リストTIPS 1. li要素に対しても、ボタン同様、data-icon属性を指定すると、リスト要素各々の上にもアイコンを置くことが出来ます。 <ul data-role="listview" data-inset="true"> <li data-icon="star"><a href="#concept" data-transition="slide">コンセプト</a></li> <li data-icon="search"><a href="#event" data-transition="pop">イベント会場</a></li> </ul>

UIコンポーネント③ 開閉コンテンツ 1. 開閉コンテンツを作成するには、親要素に、 data-role="collapsible" を指定するだけで作成できます。 2. 最初の子要素にはタイトル要素（h1～h6）を置きます。この中の文字が開く前の状態で表示されるタップ領域です。 <div data-role="collapsible"> <h1>開閉コンテンツのタイトル</h1> ・・・・・・・・ </div>

開閉コンテンツTIPS 1. 開閉コンテンツをあらかじめ開いておくには、 data-collapsed=”false”を指定します。 <div data-role="collapsible" data-collapsed="false"> <h1>開閉式コンテンツのタイトル</h1> ・・・・・・・・ </div>

jQuery Mobileでフォームの設置

jQuery Mobileでフォーム 1. 通常通りフォームは<form></form>で定義。 2. アクセシビリティ向上のためラべリング（label要素）する。 3. ラベルテキストとフォーム要素（input要素や textarea要素など）をフィールドセットするには、 data-role=“fieldcontain” を指定した要素で両者を囲む。 <form> <div data-role="fieldcontain"> <label for=“name”>ラベルテキスト</label> <input type=“text” id=“name” placeholder=“山田メッシ"> </div> ....... ....... </form>

jQuery Mobileでフォームフィールドセットすると、端末がローテーションした時、とても見栄えが良い。ユーザビリティ＆アクセシビリティも向上します。ローテーション縦（画面幅480px以内）

ラベルテキスト

ローテーション横（画面幅480px以上）

ラベルテキスト

jQuery Mobile x Google Map API

Google Map API の設置準備 <link rel="stylesheet" href="jquery.mobile.css" />¥ <script src="jquery.js"></script> <script script src=“自身のカスタマイズのための.js"></ ></script> <script src="jquery.mobile.js"></script>

jQuery Mobileでは、カスタムのJSやｊQueryのイベントや

関数は、jquery.jsとjquery.mobile.jsの間に記述することが推奨されている。

Google Map API <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script> // Google Map API $(document).ready(function(){ $('#place').bind('pageshow', function(){ //地図作成 var target = document.getElementById('map'), infowindow = new google.maps.InfoWindow(target), latLng = new google.maps.LatLng(35.660144,139.697482), //地図の中心の緯度,経度 map = new google.maps.Map(target, { zoom: 15, //ズーム率 mapTypeId: google.maps.MapTypeId.ROADMAP}), marker = new google.maps.Marker({ title: 'デジタルハリウッド渋谷校', //配置するマーカーの名前 position: latLng, map: map}); map.setCenter(latLng); infowindow.open(map); }); }); </script>

Google Map API CSS /* イベント会場ページ*/ #map { width: 100%; height: 240px; border: 7px solid #69C; -webkit-box-sizing: border-box; /*ベンダープレフィックス*/ box-sizing: border-box; /*「box-sizing」：paddingとborder分をその要素のwidth、heightに含められる*/ }

HTML <div data-role="content"> <h1>イベント会場</h1> <div id="map"></div> <p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p> </div>

jQuery Mobileテーマの設定

テーマの設定１ 1. 各要素へdata-theme=“○” で個別に指定できる。 2. テーマはデフォルトで"a"～"e"の4種類 3. オリジナルのテーマをcssで作る場合は、"f"～"z" を割り当てる  <div data-role="page" data-theme="a">  <div data-role="header“ data-theme="b"></div>  <div data-role="content" data-theme="c">  <a href="#" data-role="button" data-theme="d">  <a href="#" data-role="button" data-theme="e"> </div>

テーマをカスタマイズする方法

1. ThemeRoller※を使う例） http://hmatrix.sakura.ne.jp/jqm/jqmtw/

2. 気合でCSSをカスタマイズする。 ※jQuery Mobileのテーマ簡単にカスタマイズできる公式ツール

http://jquerymobile.com/themeroller/ http://www.koikikukan.com/archives/2011/12/12-002222.php

テーマをカスタマイズする方法② 2. 気合でCSSファイルのクラスをカスタマイズする

クラスの命名規則 ui-[要素名]-[状態]-[名テーマ名] ex) ui-btn-hover-z {} .ui-header .ui-title {} .ui-header .ui-title,.ui-footer .ui-title{min-height:1.1em;text-align:center;fontsize:16px;display:block;margin:.6em 90px .8em;padding:0;text-overflow:ellipsis;overflow:hidden;whitespace:nowrap;outline:0!important}

.ui-header .ui-title, .ui-footer .ui-title { margin: .6em 0 .8em; }

○CSSを鬼のようにカスタマイズする人 VERITAS CREATIVE.ORG BLOG

付録：JQMギャラリー ○JQM Gallery http://www.jqmgallery.com/ ○Bridgestone Golf Mobile http://bgolf.us/ ○BRP Sea-Doo Watercraft http://m.sea-doo.com/ ○ジュンク堂

http://www.junkudo.jp/ ○Final fantasy XI フォーラム

http://forum.square-enix.com/ffxi/forum.php Spacial Thanks for : ○HTML５でサイトを作ろう http://www.html5-memo.com/jquery-mobile/

jQuery Mobile 絶対きます。