webフロントエンド開発の...

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アプリでできることが増加の⼀一途を辿っている

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


¤ Webアプリでできることが増加の⼀一途を辿っている n オフラインWebアプリケーション n デバイスの様々な機能にアクセス

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

o 例例: Titanium Mobile API Document

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

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

アプリケーションキャッシュ¨  キャッシュマニフェストを作成し、html要素の

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

CACHE MANIFEST!!hello.html!hello.js!hello.css

!!…!!

hello.appcache

hello.html

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

¨ オフラインでも編集可能なWebアプリケーションを作るには？

¨ →ブラウザ内（ローカルで利利⽤用できる）データベースやファイルシステムを利利⽤用する。 ¤ Webアプリのデータの読み書きはローカルのデータベースやファイルに対して⾏行行う

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

UI 同期エンジン

クライアント

オフラインWebアプリの典型的なアーキテクチャ

ローカルストレージ

Indexed Database API

¨  Indexed Database APIは、ブラウザに内蔵されたデータベース（デモ）。

•  ブラウザ組み込みのキー・バリューストア•  RDBのテーブルにあたるものがオブジェクトストア•  JavaScriptオブジェクトをオブジェクトストアに対してそのまま読み書きできる。

Indexed Database APIとは？

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の断⽚片化を解決する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) jQuery Mobile Live Coding! jQuery Mobileをはじめよう！

ページの内容はここに書きます。

フッター

サブページを作ってみる(2/7)

こどもたちさぶぺーじですフッター

こどもたち

リンクをボタンに変えてみる(3/7)

data-role="button" を要素に付与すると、⾒見見た⽬目がボタンに。

サブページのヘッダに、Homeボタンをつけてみる(4/7) Home

class="ui-btn-right"

画⾯面遷移を変更更してみる(5/7)

data-transition="slideup"

slide slideup slidedown

pop fade flip

turn flow

リストを作ってみる(6/7)

こうたろうちほ

テーマを変えてみる(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フロントエンド開発の...

Documents