Download to read offline
More Related Content
![[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性](https://cdn.slidesharecdn.com/ss_thumbnails/uxux-211214103138-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to [okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
![Word pressセミナー東京[マイナビ主催] 阿部20131216](https://cdn.slidesharecdn.com/ss_thumbnails/wordpress20131216-131216071419-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
- 2. HTML5で人気のAPIを使って 未来価値を創造しよう 第26回 岡山WEBクリエイターズ ×HTML5 fun KDDIウェブコミュニケーションズ 阿部 正幸
- 3. ● ACE01 /SmartRelease プロダクトマネージャー ● CPI エバンジェリスト 統括 ● KDDIウェブ 公認 CPI スタッフブログ 編集長 ● Drupal(g.d.o Japan)日本コミュニティー ● 日本ディレクション協会 講演部 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う 神戸生まれ、横浜育ち 阿部 正幸（あべ まさゆき） ディレクタープログラマー プロマネ エバンジェリスト
- 4.
- 5.
- 9.
- 10.
- 11.
- 12.
- 13.
- 15.
- 17.
- 18.
- 19. HTML5が注目される理由 ● ビデオ /オーディオ ● リッチなコンテンツ ● Webアプリケーション 新しい価値に必要
- 20.
- 21.
- 22. ● Geolocation ● WebStorage ● ファイルAPI ● Indexed Database ● Web Sockets ● Web Workers ● Canvas 一つめ：HTML5でも人気のAPI
- 23. ● Geolocation ● WebStorage ● ファイルAPI ● Indexed Database ● Web Sockets ● Web Workers ● Canvas 一つめ：HTML5でも人気のAPI
- 24.
- 25.
- 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 APIV3 + Geolocation API
- 30.
- 31.
- 32. ● Geolocation ● WebStorage ● ファイルAPI ● Indexed Database ● Web Sockets ● Web Workers ● Canvas 二つめ：HTML5でも人気のAPI
- 33.
- 34.
- 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.
- 39.
- 41. Web Speech API varrecognizing; 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.
- 43.
- 45. WebRTC (Web Real-TimeCommunication)とは W3Cが提唱するリアルタイムコミュニケーション用 のAPIの定義で、プラグイン無しでウェブブラウザ間 のボイスチャット、ビデオチャット、ファイル共有 ができる。 - Wikipediaより引用-
- 46. 従来の通信方式 ● レスポンス問題 (HTTP/1.1) ●サーバーコスト問題
- 47.
- 48.
- 50.
- 51. <script src="https://skyway.io/dist/0.3/peer.js"></script> ● JS読み込む varpeer = 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読み込む varpeer = 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.
- 54.
- 58.
- 59.
- 60.
- 61.
- 62.
- 64.
- 66. Ambient Light Events window.addEventListener('devicelight', function(event){ console.log('lux='+event.value); },false); 環境光を取得する 環境に合わせたUIの設計が可能
- 67.
- 68.
- 69.
- 70.
- 71.
- 72. 今後の制作者は SVG Canvas Web Storage Geolocation WebWorkers WebSocket
- 73. 今後の制作者は SVG Canvas Web Storage Geolocation WebWorkers WebSocket 全てを使える必要は無いが どんなことができるかは 知っておく必要がある
- 74.
- 77.
- 78.