Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン

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）を考慮する必要がない

¨  積極的な理理由
¤  Webアプリでできることが増加の⼀一途を辿ってい
る
¤  様々なデバイスに対応できる

¤  様々なスクリーンサイズに対応できる

る
n  オフラインWebアプリケーション
n  デバイスの様々な機能にアクセス



オフラインWebアプリケーション

¨  HTML/CSS/JavaScript/画像などの、Webアプリが必
要とするリソースを全てローカルにキャッシュすること
で実現

o  例例: Titanium Mobile API Document

アプリケーションキャッシュ
¨  キャッシュマニフェストを作成し、html要素の
manifest属性に指定することでオフライン化可能
hello.appcache
CACHE MANIFEST!
!
hello.html!
hello.js!
hello.css
hello.html
<!DOCTYPE html>!
<html manifest="hello.appcache">!
…!
</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

る


様々なスクリーンサイズに対応で
きる
¨  レスポンシブ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のマルチプラットフォーム
性が改めて注⽬目されている
¨  例例：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/

Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン

More Related Content

What's hot

Viewers also liked

Similar to Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン

More from Shumpei Shiraishi

Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン