WEBフロントエンド 開 発 の 最 新 トレンド HTML5,モバイル,オフライン 2012/4/17 株 式 会 社 シーエー モバイル Web 先 端 技 術 フェロー 白 石 俊 平
自 己 紹 介 白 石 俊 平 と 申 します コミュニティhtml5j.org 管 理理 人( 会 員 数 4500 名 超 ) HTML5とか 勉 強 会 主 催 ( 毎 月 一 回 100 名 を 動 員 ) Google API Expert (HTML5) Microsoft Most Valuable Professional (IE9) Twitter: @Shumpei 著 書 :HTML5&API 入 門
HTML5のパワーが 多 くの 人に 認 識識 されつつある
Nike Air Jordan 2012 最 近 はやりの スクロールと 連 動 した 視 差 ス クロールをフル 活 用したサイト
ChronoZoom 全宇宙史に関する様々なリソースを参照でき るWebアプリ
WebGL City 3Dで 表 現 された 都 市 空 間 を 自 在 に 飛び 回 れる デモ
開 発 者 の 関 心も 非 常 に 高まってい る
2012 年年 中 に HTML5をモバイルアプリに 統 合 し ようと 考 えている 開 発 者 の 割 合 Appcelerator/IDC Mobile Developer Report, Q1 2012
なぜこれほどまでにHTML5への 関 心が 高まっているのか? 消 極 的 な 理理 由 ios 上 ではFlashが 動 かない 古 いブラウザ(IE6-8)を 考 慮 する 必 要 がない
なぜこれほどまでにHTML5への 関 心が 高まっているのか? 積 極 的 な 理理 由 Webアプリでできることが 増 加 の 一 途 を 辿 ってい る 様 々なデバイスに 対 応 できる 様 々なスクリーンサイズに 対 応 できる
なぜこれほどまでにHTML5への 関 心が 高まっているのか? 積 極 的 な 理理 由 Webアプリでできることが 増 加 の 一 途 を 辿 ってい る n オフラインWebアプリケーション n デバイスの 様 々な 機 能 にアクセス 様 々なスクリーンサイズに 対 応 できる 様 々なデバイスに 対 応 できる
オフラインWebアプリケーション HTML/CSS/JavaScript/ 画 像 などの Webアプリが 必 要 とするリソースを 全 てローカルにキャッシュすること で 実 現 o 例例 : Titanium Mobile API Document
アプリケーションキャッシュ キャッシュマニフェストを 作 成 し html 要 素 の manifest 属 性 に 指 定 することでオフライン 化 可 能 CACHE MANIFEST!! hello.html! hello.js! hello.css <!DOCTYPE html>! <html manifest="hello.appcache">!! </html>! hello.appcache hello.html
オフラインWebアプリケーション オフラインでも 編 集 可 能 なWebアプリケー ションを 作 るには? ブラウザ 内 (ローカルで 利利 用できる)デー タベースやファイルシステムを 利利 用する Webアプリのデータの 読 み 書 きはローカルのデー タベースやファイルに 対 して 行行う オンライン 時 にサーバに 送 信 する
オフラインWebアプリの 典 型 的 な アーキテクチャ クライアント UI ローカルストレージ 同 期 エン ジン
Indexed Database API Indexed Database APIは ブラウザに 内 蔵 さ れたデータベース(デモ)
Indexed Database APIとは? ブラウザ 組 み 込 みのキー バリューストア RDBのテーブルにあたるものがオブジェクトストア JavaScriptオブジェクトをオブジェクトストアに 対 し てそのまま 読 み 書 きできる
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() {!! };!
File API Webアプリによるファイルの 読 み( 書 き)も 可 能 に(デモ)
File APIとは? Webアプリからファイルを 読 み 書 きするため のAPI 以 下 の3 仕 様 からなる File API ファイルの 読 み 取 りや 基 本 的 なイ ンターフェースの 定 義 File API:Writer ファイルの 書 き 出 し File API:Systems and Directories ファイ ルシステムとディレクトリ 構 造
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]);! };!
デバイスの 様 々な 機 能 にアクセス Geolocation APIによる 位 置 情 報 へのアクセス (デモ)
Geolocation APIのコード 例例 navigator.geolocation.getcurrentposition(function(pos) {! var coords = pos.coords;! var latitude = coords.latitude;! var longitude = coords.longitude;!! });!
デバイスの 様 々な 機 能 にアクセス Device Orientation Eventにより デバイ スの 向 きや 傾 きを 検 知 する(デモ)
Device Orientation Eventのコード 例例 window.ondeviceorientation = function(event) {! var alpha = event.alpha;! var beta = event.beta;! var gamma = event.gamma;!! };!
デバイスの 様 々な 機 能 にアクセス カメラやマイクからメディアデータを 取 り 込 む(デモ)
getusermedia()のコード 例例 <video id="v" autoplay></video>! var video = document.getelementbyid("v");! navigator.getusermedia("video", function(stream) {! var url = URL.createObjectURL(stream);! video.src = url;! });!
デバイスの 様 々な 機 能 にアクセス 他 にも 以 下 のようなことを 行行えるようにな る 音 声 によるテキスト 入 力力 温 度度 や 光 近 接 センサーなど 各 種 センサーを 扱 える ネイティブアプリとの 機 能 差 が バイブレーションを どんどん 縮 実 小していく! 行行できる アドレス 帳 やギャラリーからデータを 取 得 できる バッテリーの 状 態 にアクセスできる ネットワークの 状 態 にアクセスできる
とはいえ デバイス 間 の 実 装 にはかなりのバラつきがあ る
Core Mobile Web Platform Community Group FacebookによるモバイルWebの 断 片 化 を 解 決 するW3Cコミュニティグループ
ringmark http://rng.io
なぜこれほどまでにHTML5への 関 心が 高まっているのか? 積 極 的 な 理理 由 Webアプリでできることが 増 加 の 一 途 を 辿 ってい る 様 々なスクリーンサイズに 対 応 できる 様 々なデバイスに 対 応 できる
なぜこれほどまでにHTML5への 関 心が 高まっているのか? 積 極 的 な 理理 由 Webアプリでできることが 増 加 の 一 途 を 辿 ってい る 様 々なスクリーンサイズに 対 応 できる 様 々なデバイスに 対 応 できる
様 々なスクリーンサイズに 対 応 で きる レスポンシブWebデザインにより 単 一の ソースコードで 複 数 のスクリーンサイズに 対 応 できる
レスポンシブWebデザインの 例例 GRAVITATE
レスポンシブWebデザインの 例例 CREAN AIR WORKS
レスポンシブWebデザインで 使 わ れるテクニック Fluid Grid ピクセルではなく パーセン ト 指 定 により 幅 を 決 定 する Media Queries デバイスの 幅 や 高さな ど 様 々な 条 件 に 応 じて CSSを 切切 り 替 える 技 術
レスポンシブWebデザインのサンプル コンテンツの 幅 に 応 じて ピクセル 指 定 と% 指 定 を 切切 り 替 える 事 により PCサイトも1 ソースで 実 現 できる
レスポンシブ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; }! }!
レスポンシブWebデザインは 万 能 ではない コンテンツや 画 像 のファイルサイズがモバイ ルにとって 大きすぎ パフォーマンスが 劣劣 化 することも 画 像 をレスポンシブにするための 工 夫 や ス クリーンサイズに 合 わせてコンテンツをサー バ 側 で 切切 り 詰 めるなどの 対 処 が 必 要
WebApp Field Guide オフライン 対 応 レスポンシブWebデザイン
なぜこれほどまでにHTML5への 関 心が 高まっているのか? 積 極 的 な 理理 由 Webアプリでできることが 増 加 の 一 途 を 辿 ってい る 様 々なスクリーンサイズに 対 応 できる 様 々なデバイスに 対 応 できる
なぜこれほどまでにHTML5への 関 心が 高まっているのか? 積 極 的 な 理理 由 Webアプリでできることが 増 加 の 一 途 を 辿 ってい る 様 々なスクリーンサイズに 対 応 できる 様 々なデバイスに 対 応 できる
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
jquery Mobileとは スマートフォン 向 けのWebサイト 開 発 フレー ムワーク 現 在 のバージョンは1.1.0
jquery Mobileの 特 徴 ネイティブアプリに 近 い 操 作 感 テーマの 切切 り 替 えが 可 能 JavaScriptの 知 識識 がなくてもそこそこ 使 える jqueryに 依 存 している マルチプラットフォーム
ネイティブアプリに 近 い 操 作 感 CSS/JavaScriptを 駆 使 して ネイティブア プリに 近 い 操 作 感 を 実 現 する UIコンポーネント フォーム 要 素 やリストな ど 用 意 されているコンポーネントがすべてブラ ウザネイティブのUIに 近 づけてあり 操 作 しやす い ページ 遷 移 がなめらかなアニメーションで 実 現 さ れる( 画 面のリフレッシュが 発 生しない) jquery Mobileのドキュメントがデモになって いる
テーマの 切切 り 替 えが 可 能 jquery Mobileは CSSの 切切 り 替 えのみで 大 幅 にUIを 変 更更 することが 可 能 色 合 いを 変 えるだけならば スウォッチ の 変 更更 だけで 可 能
JavaScriptの 知 識識 がなくてもそこ そこ 使 える マークアップに 特 別 な 属 性 (data-* 属 性 )を 加 えていくだけで 簡 単 にスマートフォン 対 応 サイトを 作 成 できる
jqueryに 依 存 している jqueryに 強 く 依 存 している バージョン1.1でjQuery1.7 系 に 対 応 少 し 凝 ったことをやるなら jqueryの 知 識識 が あったほうが 良良 い
マルチプラットフォーム デスクトップを 含 め 22のプラットフォーム に 対 して 同 様 のユーザ 体 験 を 提 供 できる Android 2.1-4.0 ios 3.2-5.0 プログレッシブ エンハンスメントのアプ ローチにより 古 いブラウザに 対 しても 最 低 限 の 情 報 提 供 は 行行える
実 際 にjQuery Mobileを 触 ってみま しょう
ボイラープレートコードを 貼 りつけて みる (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>
サブページを 作 ってみる(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>
リンクをボタンに 変 えてみる(3/7) data-role="button" を 要 素 に 付 与 すると 見見た 目がボタンに
サブページのヘッダに Homeボタン をつけてみる(4/7) <a href="#top_page">home</a> class="ui-btn-right"
画 面 遷 移 を 変 更更 してみる(5/7) data-transition="slideup" slide slideup slidedown pop fade flip turn flow
リストを 作 ってみる(6/7) <ul data-role="listview" class="children_list"> <li><a href="http://goo.gl/vcqd3">こうたろう</a></li> <li><a href="http://goo.gl/p8ltb">ちほ</a></li> </ul>
テーマを 変 えてみる(7/7) data-theme="e" テーマはa-eの5 種 類
jquery Mobileを 使 用したサイトは 増 加 中 DODA マイナビバイト マイナビ 派 遣 じゃ らんnetなど 続 々と 利利 用 事 例例 は 増 加 中 jquery Mobileを 使 った 国 内 スマホサイトまと め 大 手によって 採 用されていることからも 安 心して 使 えるフレームワーク
Appcelerator/IDCの 調 査 には 続 きがある
アプリケーションをHTML5 のみ で 作 ろうと する 開 発 者 はたった6% Appcelerator/IDC Mobile Developer Report, Q1 2012
まとめ 今 年年 モバイル 上 (のハイブリッドアプリ)で HTML5は 爆 発 的 に 普 及 する! その 際 jquery Mobile オフラインWebアプリ レスポンシブWebデザインなどが 活 用される 2020 年年 には アプリよりもWebが 主 流流 になっ ているかも 知 れない?(59%がWebを 選 択 ) http://japan.cnet.com/news/business/35015489/