HTML5 で人気の API を使って未来価値を創造しよう

第 26 回 岡山 WEB クリエイターズ × HTML5 fun

KDDI ウェブコミュニケーションズ阿部 正幸

● ACE01 / SmartRelease プロダクトマネージャー● CPI エバンジェリスト 統括● KDDI ウェブ 公認 CPI スタッフブログ 編集長● Drupal(g.d.o Japan) 日本コミュニティー● 日本ディレクション協会　講演部● HTML5 Fun 理事

OSS を広げる活動、 Web 制作に関する情報発信を行う

神戸生まれ、横浜育ち阿部 正幸（あべ まさゆき）

ディレクタープログラマー プロマネ エバンジェリスト

取り扱っていません

VentureSince 1998

Web Service

Hosting

取り扱っていません

Web 制作を 『超ラク』 にする

http://www.cpi.ad.jp/shared/smartrelease/

マークアップ言語「 HTML 」の 5 回目にあたる改訂版

厳密には

一般的には

HTML5 とは

CSS3 、 JavaScript 、 HTML5などを利用したリッチなサイト構築のための技術の総称

HTML5 が注目される理由

制作単価の下落

10 年、 20 年、 100 年、生き残るために

新しい価値を創造する

3 分で「今」をつかむ

モチベーションをキープ。ゴールにチャレンジ。

友達と競争。

新しいラン体験がはじまる

注目を集めるサービスには必ず

新しい価値がある

HTML5 が注目される理由

● ビデオ / オーディオ

● リッチなコンテンツ

● Web アプリケーション

新しい価値に必要

そこで今日は

新しい価値になるような

JavaScript ライブラリをご紹介

1 つめ

HTML5 でも人気の API

● Geolocation

● Web Storage

● ファイル API

● Indexed Database

● Web Sockets

● Web Workers

● Canvas

一つめ： HTML5 でも人気の API

● Geolocation

● Web Storage

● ファイル API

● Indexed Database

● Web Sockets

● Web Workers

● Canvas

一つめ： HTML5 でも人気の API

Geolocation API

Geolocation API

WiFi 携帯電話基地局、 GPS 、 IP アドレスなどから位置情報を取得する。

// ユーザーの現在の位置情報を取得navigator.geolocation.getCurrentPosition( successCallback, errorCallback);

// ユーザーの現在の位置情報を取得function successCallback(position) { // 緯度 position.coords.latitude // 経度 position.coords.longitude // 高度 position.coords.altitude // 緯度・経度の誤差 position.coords.accuracy // 高度の誤差 position.coords.altitudeAccuracy // 方角 position.coords.heading // 速度 position.coords.speed}

Geolocation API

Google Map API V3 +

Geolocation API

http://shared-blog.kddi-web.com/test/gmapv3/gmap-sample.html

つぎも、 HTML5 で人気の API

● Geolocation

● Web Storage

● ファイル API

● Indexed Database

● Web Sockets

● Web Workers

● Canvas

二つめ： HTML5 でも人気の API

Web Storage

IE8 以上で利用可能。

アプリケーションで利用するデータをユーザーのローカル環境に保存できる

Cookie との違い

データ量の上限： 4KB 5MB

Web Storage

● 電波が無くてもアプリケーションが利用できる

● 通信の回数が減らせる

● 高速に動作

メリット

オフライン Web アプリケーションの構築が可能に

Web Storage

// 変数 storage に sessionStorage を格納var storage = sessionStorage;

//userid キーに 1111 を割り当てて保存storage.setItem('userid', '1111');

//userid キーの値を取得するstorage.getItem('userid');

//userid キーの値を削除するstorage.removeItem('userid');

// ストレージに保存されているデータをクリアするstorage.clear();

Web Storage

// 変数 storage に sessionStorage を格納var storage = sessionStorage;

//userid キーに 1111 を割り当てて保存storage.setItem('userid', '1111');

//userid キーの値を取得するstorage.getItem('userid');

//userid キーの値を削除するstorage.removeItem('userid');

// ストレージに保存されているデータをクリアするstorage.clear();

Web Storage

手軽に実装可能

File API ：ローカルのファイルを操作

Indexed Database ：ブラウザ側上で利用できるデータベース

その他にも

次は

少し地味だけど、可能性が広がる API

Web Speech APIvar recognizing;var recognition = new webkitSpeechRecognition();

recognition.lang = “ja-JP"; // 言語の選択

recognition.start(); //音声認識開始recognizing = true; //speech の開始 (abort method)

recognition.onresult = function (event) { console.log(event.results); // コンソールログに出力}

//音声認識終了recognition.stop();//speech の終了 (abort method)recognizing = false;

http://shared-blog.kddi-web.com/test/webspeech/webspeechapi.html

次は、少し未来の API

WebRTC (Web Real-Time Communication) とはW3C が提唱するリアルタイムコミュニケーション用の API の定義で、プラグイン無しでウェブブラウザ間のボイスチャット、ビデオチャット、ファイル共有ができる。

- Wikipedia より引用 -

従来の通信方式

● レスポンス問題 (HTTP/1.1)● サーバーコスト問題

● P2P でユーザー同士がダイレクトに通信● サーバー費を安く抑えられる

を実装

Ntt Communications が peer.js を元に開発した

WebRTC アプリ開発用 JavaScript ライブラリ

<script src="https://skyway.io/dist/0.3/peer.js"></script>● JS読み込む

var peer = new Peer('pick-an-id', {key: 'myapikey'}); ● Peer の生成（自動で id が発番される）

var conn = peer.connect('another-peers-id');conn.on('open', function(){ conn.send('hi!');});

● 他ユーザーに接続し、メッセージ送信

peer.on('connection', function(conn) { conn.on('data', function(data){ // Will print 'hi!' console.log(data); });});

● メッセージ受信

<script src="https://skyway.io/dist/0.3/peer.js"></script>● JS読み込む

var peer = new Peer('pick-an-id', {key: 'myapikey'}); ● Peer の生成（自動で id が発番される）

var conn = peer.connect('another-peers-id');conn.on('open', function(){ conn.send('hi!');});

● 他ユーザーに接続し、メッセージ送信

peer.on('connection', function(conn) { conn.on('data', function(data){ // Will print 'hi!' console.log(data); });});

● メッセージ受信

手軽に実装可能

Demo

http://bit.ly/peertest

を使ったサービス

この技術が何に使えるのか？

老若男女問わず、全てのユーザーに売りたい

少し敷居が高い

×−

なにかお困りでしょうか

http://www.sonymusic.co.jp/Music/Info/miwa/haru/

UI / UX のための HTML5

RWD といって何を想像しますか

Ambient Light Events

window.addEventListener('devicelight',

function(event) { console.log('lux='+event.value);},false);

環境光を取得する環境に合わせた UI の設計が可能

http://shared-blog.kddi-web.com/test/light/light.html

http://shared-blog.kddi-web.com/test/js-event/js.event.html

HTML5 で追加になったWindow Event ハンドラまとめ

さいごに

今まであった技術でも実現可能では、なぜ注目されるのか

新しい価値

● 今後制作単価は下落する

● 制作単価を上げるために新しい価値が必要

開発の敷居を下げた

アイデアがあれば、誰でも参入可能

今後の制作者は

SVG

Canvas

Web Storage

Geolocation Web Workers

WebSocket

今後の制作者は

SVG

Canvas

Web Storage

Geolocation Web Workers

WebSocket

全てを使える必要は無いがどんなことができるかは知っておく必要がある

さまざまなプロダクトを知り

新しい価値を創造

このようなサイトをチェックしていると良いかも

ご清聴ありがとうございました

ID ： chiyo.abe阿部 正幸