HTML5で人気のAPIを使って
未来価値を創造しよう
第26回 岡山WEBクリエイターズ × HTML5 fun
KDDIウェブコミュニケーションズ
阿部 正幸
● ACE01 / SmartRelease プロダクトマネージャー
● CPI エバンジェリスト 統括
● KDDIウェブ 公認 CPI スタッフブログ 編集長
● Drupal(g.d.o Japan)日本コミュニティー
● 日本ディレクシ...
取り扱っていませ
ん
Venture
Since
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 s...
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');
//u...
//変数storageにsessionStorageを格納
var storage = sessionStorage;
//useridキーに1111を割り当てて保存
storage.setItem('userid', '1111');
//u...
File API:
ローカルのファイルを操作
Indexed Database:
ブラウザ側上で利用できる
データベース
その他にも
次は
少し地味だけど、
可能性が広がるAPI
Web Speech API
var recognizing;
var recognition = new webkitSpeechRecognition();
recognition.lang = “ja-JP"; //言語の選択
recog...
http://shared-blog.kddi-web.com/test/webspeech/webspeechapi.html
次は、少し未来のAPI
WebRTC (Web Real-Time Communication)とは
W3Cが提唱するリアルタイムコミュニケーション用
のAPIの定義で、プラグイン無しでウェブブラウザ間
のボイスチャット、ビデオチャット、ファイル共有
ができる。
- ...
従来の通信方式
● レスポンス問題 (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'});
...
<script src="https://skyway.io/dist/0.3/peer.js"></script>
● JS読み込む
var peer = new Peer('pick-an-id', {key: 'myapikey'});
...
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);
環...
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
阿部 正幸
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう
Upcoming SlideShare
Loading in …5
×

[okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう

1,152 views

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,152
On SlideShare
0
From Embeds
0
Number of Embeds
365
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 話をもう少しふくらませる
  • 話をもう少しふくらませる
  • 話をもう少しふくらませる
  • [okaweb × HTML5 fun] HTML5で人気のAPIを使って 未来価値を創造しよう

    1. 1. HTML5で人気のAPIを使って 未来価値を創造しよう 第26回 岡山WEBクリエイターズ × HTML5 fun KDDIウェブコミュニケーションズ 阿部 正幸
    2. 2. ● ACE01 / SmartRelease プロダクトマネージャー ● CPI エバンジェリスト 統括 ● KDDIウェブ 公認 CPI スタッフブログ 編集長 ● Drupal(g.d.o Japan)日本コミュニティー ● 日本ディレクション協会 講演部 ● HTML5 Fun 理事 OSSを広げる活動、Web制作に関する情報発信を行う 神戸生まれ、横浜育ち 阿部 正幸(あべ まさゆき) ディレクタープログラマー プロマネ エバンジェリスト
    3. 3. 取り扱っていませ ん Venture Since 1998 Web Service Hosting 取り扱っていませ ん
    4. 4. Web制作を 『超ラク』 にする http://www.cpi.ad.jp/shared/smartrelease/
    5. 5. マークアップ言語「HTML」 の5回目にあたる改訂版 厳密には 一般的には HTML5とは CSS3、JavaScript、HTML5 などを利用したリッチなサイト 構築のための技術の総称
    6. 6. HTML5が注目される理由
    7. 7. 制作単価の下落
    8. 8. 10年、20年、100年、生き残るために
    9. 9. 新しい価値を創造する
    10. 10. 3分で「今」をつかむ
    11. 11. モチベーションをキープ。 ゴールにチャレンジ。 友達と競争。 新しいラン体験がはじまる
    12. 12. 注目を集めるサービスには必ず 新しい価値がある
    13. 13. HTML5が注目される理由 ● ビデオ / オーディオ ● リッチなコンテンツ ● Webアプリケーション 新しい価値に必要
    14. 14. そこで今日は 新しい価値になるような JavaScriptライブラリをご紹介
    15. 15. 1つめ HTML5でも人気のAPI
    16. 16. ● Geolocation ● Web Storage ● ファイルAPI ● Indexed Database ● Web Sockets ● Web Workers ● Canvas 一つめ:HTML5でも人気のAPI
    17. 17. ● Geolocation ● Web Storage ● ファイルAPI ● Indexed Database ● Web Sockets ● Web Workers ● Canvas 一つめ:HTML5でも人気のAPI
    18. 18. Geolocation API
    19. 19. Geolocation API WiFi携帯電話基地局、GPS、IPアドレス などから位置情報を取得する。
    20. 20. //ユーザーの現在の位置情報を取得 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
    21. 21. Google Map API V3 + Geolocation API
    22. 22. http://shared-blog.kddi-web.com/test/gmapv3/gmap-sample.html
    23. 23. つぎも、HTML5で人気のAPI
    24. 24. ● Geolocation ● Web Storage ● ファイルAPI ● Indexed Database ● Web Sockets ● Web Workers ● Canvas 二つめ:HTML5でも人気のAPI
    25. 25. Web Storage
    26. 26. IE8以上で利用可能。 アプリケーションで利用するデータをユーザーの ローカル環境に保存できる Cookieとの違い データ量の上限:4KB 5MB Web Storage
    27. 27. ● 電波が無くてもアプリケーションが利用できる ● 通信の回数が減らせる ● 高速に動作 メリット オフラインWebアプリケーションの 構築が可能に Web Storage
    28. 28. //変数storageにsessionStorageを格納 var storage = sessionStorage; //useridキーに1111を割り当てて保存 storage.setItem('userid', '1111'); //useridキーの値を取得する storage.getItem('userid'); //useridキーの値を削除する storage.removeItem('userid'); //ストレージに保存されているデータをクリアする storage.clear(); Web Storage
    29. 29. //変数storageにsessionStorageを格納 var storage = sessionStorage; //useridキーに1111を割り当てて保存 storage.setItem('userid', '1111'); //useridキーの値を取得する storage.getItem('userid'); //useridキーの値を削除する storage.removeItem('userid'); //ストレージに保存されているデータをクリアする storage.clear(); Web Storage 手軽に実装可能
    30. 30. File API: ローカルのファイルを操作 Indexed Database: ブラウザ側上で利用できる データベース その他にも
    31. 31. 次は 少し地味だけど、 可能性が広がるAPI
    32. 32. 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;
    33. 33. http://shared-blog.kddi-web.com/test/webspeech/webspeechapi.html
    34. 34. 次は、少し未来のAPI
    35. 35. WebRTC (Web Real-Time Communication)とは W3Cが提唱するリアルタイムコミュニケーション用 のAPIの定義で、プラグイン無しでウェブブラウザ間 のボイスチャット、ビデオチャット、ファイル共有 ができる。 - Wikipediaより引用-
    36. 36. 従来の通信方式 ● レスポンス問題 (HTTP/1.1) ● サーバーコスト問題
    37. 37. ● P2Pでユーザー同士がダイレクトに通信 ● サーバー費を安く抑えられる
    38. 38. を実装
    39. 39. Ntt Communicationsがpeer.jsを元に開発した WebRTCアプリ開発用JavaScriptライブラリ
    40. 40. <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); }); }); ●メッセージ受信
    41. 41. <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); }); }); ●メッセージ受信 手軽に実装可能
    42. 42. Demo http://bit.ly/peertest
    43. 43. を使ったサービス
    44. 44. この技術が何に使えるのか?
    45. 45. 老若男女問わず、全てのユーザーに売りたい
    46. 46. 少し敷居が高い
    47. 47. ×− なにかお困り でしょうか
    48. 48. http://www.sonymusic.co.jp/Music/Info/miwa/haru/
    49. 49. UI / UXのためのHTML5 RWDといって何を想像しますか
    50. 50. Ambient Light Events window.addEventListener('devicelight', function(event) { console.log('lux='+event.value); },false); 環境光を取得する 環境に合わせたUIの設計が可能
    51. 51. http://shared-blog.kddi-web.com/test/light/light.html
    52. 52. http://shared-blog.kddi-web.com/test/js-event/js.event.html HTML5で追加になった Window Event ハンドラまとめ
    53. 53. さいごに
    54. 54. 今まであった技術でも実現可能 では、なぜ注目されるのか 新しい価値 ● 今後制作単価は下落する ● 制作単価を上げるために新しい価値が必要
    55. 55. 開発の敷居を下げた アイデアがあれば、誰でも参入可能
    56. 56. 今後の制作者は SVG Canvas Web Storage Geolocation Web Workers WebSocket
    57. 57. 今後の制作者は SVG Canvas Web Storage Geolocation Web Workers WebSocket 全てを使える必要は無いが どんなことができるかは 知っておく必要がある
    58. 58. さまざまなプロダクトを知り 新しい価値を創造
    59. 59. このようなサイトをチェックしていると良いかも
    60. 60. ご清聴ありがとうございました ID:chiyo.abe 阿部 正幸

    ×