jquery

Page 1

2012.1.28 講師:原



jQuery Mobileとは?

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


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

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

• Progressive Enhancement

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

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

• CDNネットワークを活用

(Contents Delivery Network)

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


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

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

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

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

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


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

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


検証環境はどうする? 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-x属性は、「カスタムデータ属性」とも呼ばれ、 HTML5からはdata-x属性を使用することで独自の設定が きるように。JQMも、このdata-x属性をフル活用します。 <主な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によるページ内 リンクなので、1つの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遷移を切りたいときの方法3つ  リンク先を外部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>

トランジション効果の種類は6種類 • 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やjQueryのイベントや

関数は、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 1. 各要素へdata-theme=“○” で個別に指定できる。 2. テーマはデフォルトで"a"~"e"の4種類 3. オリジナルのテーマをcssで作る場合は、"f"~"z" を割り当てる <!-- ページにテーマa --> <div data-role="page" data-theme="a"> <!-- ヘッダーにテーマb --> <div data-role="header“ data-theme="b"></div> <!-- ページコンテンツにテーマc --> <div data-role="content" data-theme="c"> <!-- ボタン1にテーマd --> <a href="#" data-role="button" data-theme="d"> <!-- ボタン2にテーマe --> <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 : ○HTML5でサイトを作ろう http://www.html5-memo.com/jquery-mobile/


jQuery Mobile 絶対きます。


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.