Contenu connexe Similaire à Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン (20) Plus de Shumpei Shiraishi (20) Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン1. WEBフロントエンド開発の
最新トレンド
HTML5,モバイル,オフライン
2012/4/17
株式会社シーエー・モバイル
Web先端技術フェロー ⽩白⽯石俊平
2. ⾃自⼰己紹介
¨ ⽩白⽯石俊平と申します。
¨ コミュニティhtml5j.org管理理⼈人(会員数4500名
超)
¨ HTML5とか勉強会主催(毎⽉月⼀一回、100名を動員)
¨ Google API Expert (HTML5)
¨ Microsoft Most Valuable Professional (IE9)
¨ Twitter: @Shumpei
¨ 著書:HTML5&API⼊入⾨門
13. オフラインWebアプリケーション
¨ HTML/CSS/JavaScript/画像などの、Webアプリが必
要とするリソースを全てローカルにキャッシュすること
で実現
o 例例: Titanium Mobile API Document
14. アプリケーションキャッシュ
¨ キャッシュマニフェストを作成し、html要素の
manifest属性に指定することでオフライン化可能
hello.appcache
CACHE MANIFEST!
!
hello.html!
hello.js!
hello.css
hello.html
<!DOCTYPE html>!
<html manifest="hello.appcache">!
…!
</html>!
19. IndexedDBのコード例例
¨ IndexedDBの使い勝⼿手はよくない。。
¤ →jdb.jsというフレームワーク作りました!
var tx =!
db.transaction(['Feed'], IDBTransaction.READ_ONLY);!
var feedStore = tx.objectStore('Feed');!
var cursorReq = feedStore.openCursor();!
cursorReq.onsuccess = function() {!
var cursor = cursorReq.result;!
if (!cursor) {!
return;!
}!
var value = cursor.value;!
cursor.continue();!
};!
cursorReq.onerror = function() {!
…!
};!
21. File APIとは?
¨ Webアプリからファイルを読み書きするため
のAPI。
¨ 以下の3仕様からなる。
¤ File API・・・ファイルの読み取りや基本的なイ
ンターフェースの定義
¤ File API:Writer・・・ファイルの書き出し
¤ File API:Systems and Directories・・・ファイ
ルシステムとディレクトリ構造
22. File APIのコード例例
¨ ファイルの読み取りは、ドラッグ&ドロップ
かファイル選択ダイアログに限られている。
element.ondrag = function(event) {!
var files = event.dataTransfer.files;!
var reader = new FileReader();!
reader.onload = function() {!
var result = reader.result;!
…!
};!
reader.readAsText(files[0]);!
};!
29. デバイスの様々な機能にアクセス
¨ 他にも、以下のようなことを⾏行行えるようにな
る
¤ ⾳音声によるテキスト⼊入⼒力力
¤ 温度度や光、近接センサーなど、各種センサーを扱
える ネイティブアプリとの機能差が
どんどん縮⼩小していく!
¤ バイブレーションを実⾏行行できる
¤ アドレス帳やギャラリーからデータを取得できる
¤ バッテリーの状態にアクセスできる
¤ ネットワークの状態にアクセスできる
31. Core Mobile Web Platform
Community Group
¨ FacebookによるモバイルWebの断⽚片化を解決
するW3Cコミュニティグループ
40. レスポンシブWebデザインのサンプル
#wrapper { width: 100% }!
#col-left { width: 100%; float: none; }!
#col-right { width: 100%; float: none; }!
!
@media screen and (min-width: 768px) {!
#col-left { width: 30%; float: left; }!
#col-right { width: 70%; float: left; }!
}!
!
@media screen and (min-width: 960px) {!
#wrapper { width: 960px; }!
}!
46. HTML5のマルチプラットフォーム
性が改めて注⽬目されている
¨ 例例:jQuery Mobileがサポートするプラット
フォーム(Grade A)
Apple iOS 3.2-5.0, Android 2.1-2.3, Android 3.1 (Honeycomb),
Android 4.0 (ICS), Windows Phone 7-7.5, Blackberry 6.0,
Blackberry 7, Blackberry Playbook (1.0-2.0), Palm WebOS
(1.4-2.0), Palm WebOS 3.0, Firebox Mobile (10 Beta), Chrome for
Android (Beta), Skyfire 4.1, Opera Mobile 11.5:, Meego 1.2,
Samsung bada 2.0, UC Browser, Kindle 3 and Fire, Nook Color
1.4.1, Chrome Desktop 11-17, Safari Desktop 4-5, Firefox
Desktop 4-9, Internet Explorer 7-9, Opera Desktop 10-11
49. ネイティブアプリに近い操作感
¨ CSS/JavaScriptを駆使して、「ネイティブア
プリに近い」操作感を実現する
¤ UIコンポーネント・・・フォーム要素やリストな
ど、⽤用意されているコンポーネントがすべてブラ
ウザネイティブのUIに近づけてあり、操作しやす
い
¤ ページ遷移がなめらかなアニメーションで実現さ
れる(画⾯面のリフレッシュが発⽣生しない)
¨ jQuery Mobileのドキュメントがデモになって
いる。
50. テーマの切切り替えが可能
¨ jQuery Mobileは、CSSの切切り替えのみで⼤大幅
にUIを変更更することが可能。
¤ ⾊色合いを変えるだけならば「スウォッチ」の変更更
だけで可能
53. マルチプラットフォーム
¨ デスクトップを含め、22のプラットフォーム
に対して同様のユーザ体験を提供できる
¤ Android 2.1-4.0
¤ iOS 3.2-5.0
¨ プログレッシブ・エンハンスメントのアプ
ローチにより、古いブラウザに対しても最低
限の情報提供は⾏行行える。
55. ボイラープレートコードを貼りつけて
みる。(1/7)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile Live Coding!</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<div id="top_page" data-role="page">
<div data-role="header">
<h1>jQuery Mobileをはじめよう!</h1>
</div>
<div data-role="content">
<p>ページの内容はここに書きます。</p>
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
</body>
</html>
56. サブページを作ってみる(2/7)
<div id="sub_page" data-role="page">
<div data-role="header">
<h1>こどもたち</h1>
</div>
<div data-role="content">
さぶぺーじです
</div>
<div data-role="footer">
<h4>フッター</h4>
</div>
</div>
<a href="#sub_page">こどもたち</a>
65. まとめ
¨ 今年年モバイル上(のハイブリッドアプリ)で、
HTML5は爆発的に普及する!
¤ その際、jQuery
Mobile、オフラインWebアプリ、
レスポンシブWebデザインなどが活⽤用される
¨ 2020年年には、アプリよりもWebが主流流になっ
ているかも知れない?(59%がWebを選択)
http://japan.cnet.com/news/business/35015489/