2. HTML5で人気のAPIを使って
未来価値を創造しよう
第26回 岡山WEBクリエイターズ × HTML5 fun
KDDIウェブコミュニケーションズ
阿部 正幸

3. ● ACE01 / SmartRelease プロダクトマネージャー
● CPI エバンジェリスト 統括
● KDDIウェブ 公認 CPI スタッフブログ 編集長
● Drupal(g.d.o Japan)日本コミュニティー
● 日本ディレクション協会 講演部
● HTML5 Fun 理事
OSSを広げる活動、Web制作に関する情報発信を行う
神戸生まれ、横浜育ち
阿部 正幸（あべ まさゆき）
ディレクタープログラマー プロマネ エバンジェリスト

4. 取り扱っていませ
ん
Venture
Since
1998
Web
Service
Hosting
取り扱っていませ
ん

5. Web制作を 『超ラク』 にする
http://www.cpi.ad.jp/shared/smartrelease/

9. マークアップ言語「HTML」
の5回目にあたる改訂版
厳密には
一般的には
HTML5とは
CSS3、JavaScript、HTML5
などを利用したリッチなサイト
構築のための技術の総称

10. HTML5が注目される理由

11. 制作単価の下落

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

13. 新しい価値を創造する

15. 3分で「今」をつかむ

17. モチベーションをキープ。
ゴールにチャレンジ。
友達と競争。
新しいラン体験がはじまる

18. 注目を集めるサービスには必ず
新しい価値がある

19. HTML5が注目される理由
● ビデオ / オーディオ
● リッチなコンテンツ
● Webアプリケーション
新しい価値に必要

20. そこで今日は
新しい価値になるような
JavaScriptライブラリをご紹介

21. 1つめ
HTML5でも人気のAPI

22. ● Geolocation
● Web Storage
● ファイルAPI
● Indexed Database
● Web Sockets
● Web Workers
● Canvas
一つめ：HTML5でも人気のAPI

23. ● Geolocation
● Web Storage
● ファイルAPI
● Indexed Database
● Web Sockets
● Web Workers
● Canvas
一つめ：HTML5でも人気のAPI

24. Geolocation API

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

26. //ユーザーの現在の位置情報を取得
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

29. Google Map API V3
+
Geolocation API

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

31. つぎも、HTML5で人気のAPI

32. ● Geolocation
● Web Storage
● ファイルAPI
● Indexed Database
● Web Sockets
● Web Workers
● Canvas
二つめ：HTML5でも人気のAPI

33. Web Storage

34. IE8以上で利用可能。
アプリケーションで利用するデータをユーザーの
ローカル環境に保存できる
Cookieとの違い
データ量の上限：4KB 5MB
Web Storage

35. ● 電波が無くてもアプリケーションが利用できる
● 通信の回数が減らせる
● 高速に動作
メリット
オフラインWebアプリケーションの
構築が可能に
Web Storage

36. //変数storageにsessionStorageを格納
var storage = sessionStorage;
//useridキーに1111を割り当てて保存
storage.setItem('userid', '1111');
//useridキーの値を取得する
storage.getItem('userid');
//useridキーの値を削除する
storage.removeItem('userid');
//ストレージに保存されているデータをクリアする
storage.clear();
Web Storage

37. //変数storageにsessionStorageを格納
var storage = sessionStorage;
//useridキーに1111を割り当てて保存
storage.setItem('userid', '1111');
//useridキーの値を取得する
storage.getItem('userid');
//useridキーの値を削除する
storage.removeItem('userid');
//ストレージに保存されているデータをクリアする
storage.clear();
Web Storage
手軽に実装可能

38. File API：
ローカルのファイルを操作
Indexed Database：
ブラウザ側上で利用できる
データベース
その他にも

39. 次は
少し地味だけど、
可能性が広がるAPI

41. Web Speech API
var 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;

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

43. 次は、少し未来のAPI

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

46. 従来の通信方式
● レスポンス問題 (HTTP/1.1)
● サーバーコスト問題

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

48. を実装

50. Ntt Communicationsがpeer.jsを元に開発した
WebRTCアプリ開発用JavaScriptライブラリ

51. <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);
});
});
●メッセージ受信

52. <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);
});
});
●メッセージ受信
手軽に実装可能

53. Demo
http://bit.ly/peertest

54. を使ったサービス

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

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

60. 少し敷居が高い

61. ×−
なにかお困り
でしょうか

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

64. UI / UXのためのHTML5
RWDといって何を想像しますか

66. Ambient Light Events
window.addEventListener('devicelight',
function(event) {
console.log('lux='+event.value);
},false);
環境光を取得する
環境に合わせたUIの設計が可能

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

68. http://shared-blog.kddi-web.com/test/js-event/js.event.html
HTML5で追加になった
Window Event ハンドラまとめ

69. さいごに

70. 今まであった技術でも実現可能
では、なぜ注目されるのか
新しい価値
● 今後制作単価は下落する
● 制作単価を上げるために新しい価値が必要

71. 開発の敷居を下げた
アイデアがあれば、誰でも参入可能

72. 今後の制作者は
SVG
Canvas
Web Storage
Geolocation Web Workers
WebSocket

73. 今後の制作者は
SVG
Canvas
Web Storage
Geolocation Web Workers
WebSocket
全てを使える必要は無いが
どんなことができるかは
知っておく必要がある

74. さまざまなプロダクトを知り
新しい価値を創造

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

78. ご清聴ありがとうございました
ID：chiyo.abe
阿部 正幸