View
755
Download
0
Category
Preview:
Citation preview
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阿部 正幸
Recommended