HTML5 APIを使ったデモとソースの解説                      秋葉秀樹第3回Tizen勉強会 #TizenJP #HTML5J #Firefoxosjp #MeeGoJP
自己紹介       秋葉秀樹       フリーランスのデザイナー       Illustrator, Photoshop, Flash, ActionScript       HTML, CSS, JavaScript, Web Dire...
自主制作http://grad3.ecoloniq.jp/
カメラにアクセス位置情報を取得電池残量を取得振動を鳴らす
ベンダープリフィックス現状HTML5 API関連は策定中なので、各ブラウザでは接頭辞付きの記述をしている
カメラにアクセス  getUserMedia API                  MediaCapture API ストリームをvideo要素で再生                      input要素を拡張    Android 2...
カメラにアクセス getUserMedia API navigator.getUserMedia(      {video:true},      function (stream) { // 成功時の処理 },     function (s...
カメラにアクセス getUserMedia API撮影した画像を編集するにはcanvas要素! ctx.drawImage(video, 0, 0);画像に対しコントラストやぼかしなどフィルターをかける画像はBase64文字列で保存することがで...
カメラにアクセス var video = document.querySelector("video"); var canvas = document.querySelector("canvas"); var ctx = canvas.getC...
カメラにアクセス getUserMedia API策定中のCSSは、画像をぼかすことも  filter:invert();contrast(1000%)      hue-rotate(180deg)brightness(50%)      s...
カメラにアクセス MediaCapture APIフォームなどで使うinput要素でカメラにアクセス <input type="file" accept="image/*; capture=camera">ユーザが要素をタップするだけでデフォル...
位置情報を取得  Geolocation API位置情報を取得する navigator.geolocation.getCurrentPosition(    successCallback,    errorCallback,    optio...
位置情報を取得 Geolocation API位置情報を取得する「ここ」「どこ」があると「地図を起動します」と発声してGoogle Mapを表示するデモ                                       O      ...
電池残量を取得 Battery Status API電池残量だけでなく、充電ステータスも取得 var battery = navigator.battery;  alert( "残量は" + battery.level * 100 + "%" ...
振動を鳴らす   Vibration APIフォーム未入力エラーを振動で知らせる navigator.vibrate([200, 100, 500, 100]);配列は、振動時間と休みの時間を交互にいれていく。現在ベンダープリフィックスが必要。...
セッション中に情報いただきましたhttps://wiki.mozilla.org/WebAPI
Thanks :)Hidetaro7@Twitterblog: http://akibahideki.com/blog/
Upcoming SlideShare
Loading in...5
×

HTML5 APIを使ったデモとソースの解説

2,708

Published on

2012/8/25、豆蔵トレーニングルームで開催されたTIZEN勉強会で発表した資料。

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,708
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 APIを使ったデモとソースの解説"

  1. 1. HTML5 APIを使ったデモとソースの解説 秋葉秀樹第3回Tizen勉強会 #TizenJP #HTML5J #Firefoxosjp #MeeGoJP
  2. 2. 自己紹介 秋葉秀樹 フリーランスのデザイナー Illustrator, Photoshop, Flash, ActionScript HTML, CSS, JavaScript, Web Direction 3DCG(Lightwave, Shade), Movie執筆書籍自論「すべてのモノ作りは人に還る」
  3. 3. 自主制作http://grad3.ecoloniq.jp/
  4. 4. カメラにアクセス位置情報を取得電池残量を取得振動を鳴らす
  5. 5. ベンダープリフィックス現状HTML5 API関連は策定中なので、各ブラウザでは接頭辞付きの記述をしている
  6. 6. カメラにアクセス getUserMedia API MediaCapture API ストリームをvideo要素で再生 input要素を拡張 Android 2.xだとOpera12で標準実装 Android 2.xだとFirefox デスクトップ版Chrome、Firefox Nightlyなど Android 4.xだと標準ブラウザ、Chrome
  7. 7. カメラにアクセス getUserMedia API navigator.getUserMedia(  {video:true},  function (stream) { // 成功時の処理 }, function (stream) { // 失敗時の処理 } )Chromeなどは現在ベンダープリフィックスが必要。 O D EM
  8. 8. カメラにアクセス getUserMedia API撮影した画像を編集するにはcanvas要素! ctx.drawImage(video, 0, 0);画像に対しコントラストやぼかしなどフィルターをかける画像はBase64文字列で保存することができる O D EM
  9. 9. カメラにアクセス var video = document.querySelector("video"); var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); navigator.getUserMedia( {video: true}, // 成功時 function (stream){ video.src = window.webkitURL.createObjectURL(stream); setInterval(function (){ ctx.drawImage(video, 0, 0); }, 100); }, function (){ /* エラーーーーー */} );
  10. 10. カメラにアクセス getUserMedia API策定中のCSSは、画像をぼかすことも filter:invert();contrast(1000%) hue-rotate(180deg)brightness(50%) sepia() saturate(300%)現在ベンダープリフィックスが必要。
  11. 11. カメラにアクセス MediaCapture APIフォームなどで使うinput要素でカメラにアクセス <input type="file" accept="image/*; capture=camera">ユーザが要素をタップするだけでデフォルトのカメラ画面に切り替わる。撮影が終了したら、HTMLのform要素のファイルとしてサーバに送ることができる。 O D EM
  12. 12. 位置情報を取得 Geolocation API位置情報を取得する navigator.geolocation.getCurrentPosition( successCallback, errorCallback, option );getCurrentPositionだと一回、watchPositionだと定期的に位置取得。仕様では高度、方角、速度、誤差、高度誤差などがある。
  13. 13. 位置情報を取得 Geolocation API位置情報を取得する「ここ」「どこ」があると「地図を起動します」と発声してGoogle Mapを表示するデモ O D EM
  14. 14. 電池残量を取得 Battery Status API電池残量だけでなく、充電ステータスも取得 var battery = navigator.battery;  alert( "残量は" + battery.level * 100 + "%" )・充電コネクタがさされたとき、外されたときのイベントがとれる・現在充電中なのかそうでないのか、残量が変化した瞬間のイベントもとれる現在ベンダープリフィックスが必要。 O D EM
  15. 15. 振動を鳴らす Vibration APIフォーム未入力エラーを振動で知らせる navigator.vibrate([200, 100, 500, 100]);配列は、振動時間と休みの時間を交互にいれていく。現在ベンダープリフィックスが必要。 O D EM
  16. 16. セッション中に情報いただきましたhttps://wiki.mozilla.org/WebAPI
  17. 17. Thanks :)Hidetaro7@Twitterblog: http://akibahideki.com/blog/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×