qcon.pptx

WEB

フロントエンド開発の

最新トレンド

HTML5,

モバイル

,

オフライン

2012/4/17

株式会社シーエー・モバイル

Web

先端技術フェロー

⽩白⽯石俊平

⾃自⼰己紹介

¨ 

⽩白⽯石俊平と申します

。

¨ 

コミュニティ

html5j.org

管理理⼈人（会員数

4500

名

超）

¨ 

HTML5

とか勉強会主催（毎⽉月⼀一回

、100

名を動員）

¨ 

Google  API  Expert  (HTML5)

¨ 

Microsoft  Most  Valuable  Professional  (IE9)

¨ 

Twitter:  @

Shumpei

HTML5

のパワーが

、

多くの⼈人に認

Nike Air Jordan 2012

¨ 

最近はやりの、スクロールと連動した視差ス

ChronoZoom

¨ 

全宇宙史に関する様々なリソースを参照でき

WebGL City

¨ 

3D

で表現された都市空間を⾃自在に⾶飛び回れる

開発者の関⼼心も⾮非常に⾼高まってい

2012

年年中に

、

HTML5

をモバイルアプリに統合し

ようと考えている開発者の割合

なぜこれほどまでにHTML5への関

⼼心が⾼高まっているのか？

¨ 

消極的な理理由

¤ 

iOS

上ではFlashが動かない

なぜこれほどまでにHTML5への関

⼼心が⾼高まっているのか？

積極的な理理由

Web

アプリでできることが増加の⼀一途を辿ってい

る

様々なデバイスに対応できる

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

なぜこれほどまでにHTML5への関

⼼心が⾼高まっているのか？

積極的な理理由

Web

アプリでできることが増加の⼀一途を辿ってい

る

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

デバイスの様々な機能にアクセス

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

様々なデバイスに対応できる

o

例例:

Titanium Mobile API Document

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

¨ 

HTML/CSS/JavaScript/

画像などの、Webアプリが必

要とするリソースを全てローカルにキャッシュすること

で実現

アプリケーションキャッシュ

キャッシュマニフェストを作成し、html要素の

manifest

_{属性に指定することでオフライン化可能}

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

オフラインでも編集可能

なWebアプリケー

ションを作るには？

→ブラウザ内（ローカルで利利⽤用できる）

デー

タベース

や

ファイルシステム

を利利⽤用する。

Web

アプリのデータの読み書きはローカルのデー

タベースやファイルに対して⾏行行う

オンライン時にサーバに送信する

UI 同期 エン ジン クライアント

オフラインWebアプリの典型的な

アーキテクチャ

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()

のコード例例

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の断⽚片化を解決

ringmark

なぜこれほどまでにHTML5への関

⼼心が⾼高まっているのか？

積極的な理理由

Web

アプリでできることが増加の⼀一途を辿ってい

る

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

様々なデバイスに対応できる

なぜこれほどまでにHTML5への関

⼼心が⾼高まっているのか？

積極的な理理由

Web

アプリでできることが増加の⼀一途を辿ってい

る

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

様々なデバイスに対応できる

様々なスクリーンサイズに対応で

きる

¨ 

レスポンシブWebデザイン

により、単⼀一の

ソースコードで複数のスクリーンサイズに対

応できる

レスポンシブWebデザインの例例

レスポンシブWebデザインの例例

レスポンシブ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

なぜこれほどまでに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

jQuery Mobile

とは

¨ 

スマートフォン向けのWebサイト開発フレー

ムワーク

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)

<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>

リンクをボタンに変えてみる

(3/7)

data-role="button"

サブページのヘッダに

、Home

ボタン

をつけてみる

(4/7)

<a href="#top_page">Home</a>

画⾯面遷移を変更更してみる

(5/7)

data-transition="slideup"

slide slideup slidedown pop fade flip

リストを作ってみる

(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>

テーマを変えてみる

(7/7)

data-theme="e"

jQuery Mobile

を使⽤用したサイトは

増加中

DODA

、マイナビバイト、マイナビ派遣、じゃ

らんnetなど、続々と利利⽤用事例例は増加中

jQuery Mobile

を使った国内スマホサイトまと

め

⼤大⼿手によって採⽤用されていることからも、安

⼼心して使えるフレームワーク。

Appcelerator/IDC

の調査には

続きがある

。

アプリケーションをHTML5「のみ」で作ろうと

する開発者は

たった

6%

まとめ

今年年モバイル上（のハイブリッドアプリ）で、

HTML5

は爆発的に普及する！

その際、jQuery Mobile、オフラインWebアプリ、

レスポンシブWebデザインなどが活⽤用される

2020

年年

には、アプリよりもWebが主流流になっ

ているかも知れない？（59%がWebを選択）