More Related Content
Similar to 2012年8月10日 勉強会 (20)
2012年8月10日 勉強会
- 1. Quick Start to
jQuery Mobile
ほとんどWeb Designing 8月号の記事内容紹介
JavaScriptが書けない残念なデザイナー
矢野りん
2012年8月10日金曜日
- 2. トピックス
• jQuery Mobile 基礎
• jQuery Mobileサイトギャラリー紹介
• jQuery Mobile プロコン
• リソース集
2012年8月10日金曜日
- 3. jQuery Mobile基礎
• jQMとは
JavaScriptライブラリのモバイル専用版。よくつかうUIのイン
タラクションとかUIのデザインが部品化してある。
• 使い方
jQMのサイトからDLしたjsファイルをサーバに展開して使う
か、CDN(Contents Delivery Network)を参照してjQMサーバ
から呼び出して使うこともできるよ。
2012年8月10日金曜日
- 4. ゲット★ザ jQM
• http://jquerymobile.com/download/
2012年8月10日金曜日
- 5. jQMを読み込もうぜ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>jQuery Mobileだっせ</title>
<!-- jQuery Mobileの動作に必要なスタイル／ライブラリをインポート -->
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.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.0/jquery.mobile-1.0.min.js"></script>
</head>
2012年8月10日金曜日
- 6. jQMページのコードはこんな感じ
<body>
<div data-role= page id= page>
<div data-role= header >
<h1>へっだ</h1>
</div>
B
<div data-role= content >
こんてんつ
C A
</div>
<div data-role= footer >
<h4>ふった</h4>
</div>
D
</div>
A:data-role(HTML５のCustom Data属性を使用）が
</body> 指定されている要素内が１つのページになる
B：ヘッダー（自動的にスタイルがついてみためヘッダーっぽくなる）
C：コンテンツ（ヘッダとフッタにはさまれた見た目になる）
D：フッター（みためヘッダーっぽくなる）
2012年8月10日金曜日
- 7. 1つのHTMLに複数のページ？
ふつうのHTML jQM
.htmlファイル .htmlファイル
論理的なページA
<div data-role= page id= pageA>
論理的なページ 論理的なページB
<div data-role= page id= pageB>
論理的なページC
<div data-role= page id= pageC>
論理的なページを１つのHTMLにまとめることでリクエストを減らし通信効率をあげる
のが目的なんだ。でも、文書構造が大きいとそもそもデータが大きくなったりもするから
設計にはちゅういが必要なんだ
2012年8月10日金曜日
- 9. UIパーツを作る
<input type="submit" value="submit" />
<input type="reset" value="reset" />
<input type="image" value="image" />
<input type="button" value="button" />
<button>button要素</button>
<a href="#" data-role="button">アンカータグ</a>
従来のHTMLで指定してもdata-role属性で
指定してもぜんぶおんなじボタンの見た目になる
※見た目は同じだがJS的な制限があったりと実装的
には同じ扱いにはならない
2012年8月10日金曜日
- 12. jQMサイトギャラリー
http://www.jqmgallery.com/
2012年8月10日金曜日
- 13. WordPressにも組み込めるとか
• Multi Device Switcher
http://wordpress.org/extend/plugins/multi-device-
switcher/
のプラグインをWPに仕込んでユーザーエージェントをみてCSS
を振り分ける作戦で組み込める。
• 他人が作成したsample
http://meglog.net/jqm-sample/
※WPtap mobile detectorというプラグインを使った例だそう
ですがプラグインのサポートが終了していたので似たようなのを
みつけました。
2012年8月10日金曜日
- 14. jQM長所と短所
• イイネ！
‣ いわゆるスマホサイトを作るなら最速でローンチできそう（コンテンツさえ
あればね）
‣ マルチプラットフォームの対応もおまかせ。
http://jquerymobile.com/gbs/
‣ 横スライドとかページ回転とかよくあるインタラクションの組み込みが簡単
‣ マルチなディスプレイ解像度に配慮した作りになっており、レスポンシブで
も採用可能な気がする
• イクナイネ！
‣ インタラクションが一部のAndroid でうんこちゃんのように遅い
‣ アプリ開発とかUIを細かくカスタマイズしたくなりそうな案件では逆に１か
ら作った方がはやいかもしれないくらい、スタイルの構造が複雑である
2012年8月10日金曜日
- 15. リソース集
• jQuery Mobile（本家）
http://jquerymobile.com/
• jQuery Mobile Graded Browser Support（サポートしているブラウザリスト）
http://jquerymobile.com/gbs/
• jQuery Mobile Gallery（jQMを採用しているサイト集）
http://www.jqmgallery.com/
• ThemeRoller（CSSカスタマイズツール）
http://jqueryui.com/themeroller/
• さんざん引き合いに出した他人の図の出典（@IT jQuery Mobile 入門）
http://www.atmarkit.co.jp/fdotnet/chushin/jqmobile_index/index.html
• jQuery採用サイト例
MBA mobile
http://www.mba-multimedia.mobi/
Dungs Mobile
mobile.dungs.com/en/home
one little dream
http://www.onelittledream.com/happycircus-timeline-cover.html
※雑誌掲載時はモバイル版があったらしいが今はなくなっている。なんでやー
COTOHOGI
http://cotohogi.com/sp/
SharksFrenzy
http://m.sharksfrenzy.co.za/
2012年8月10日金曜日
