HTML5 のお話
- 1. HTML5 のお話
- 2. 自己紹介 ● 名前: 政倉 智 ● 所属: codeArts 株式会社 ● 趣味: バイク (新しく買いました!)
- 4. アジェンダ ● HTML5 で何が変わったか? ● HTML5 でできること ● HTML5 を使ったアプリの紹介 ● HTML5 モバイルアプリの展開 ● まとめ
- 5. アジェンダ ● HTML5 で何が変わったか? ● HTML5 でできること ● HTML5 を使ったアプリの紹介 ● HTML5 モバイルアプリの展開 ● まとめ
- 6. HTML5 で変わったこと ● HTML4 から変わったことはたくさんある – 要素?属性が増えた – マルチメディアが扱えるようになった – DTD 宣言が簡単になった – などなど
- 11. Web Storage ● かなり古い例ですが... ● アプリを作るためにはデータの保存領域が必要 ● でも Cookie は容量が少ないなどの問題が ● というわけで Web Storage という規格が生ま れた ● こんな感じで、できないことに対して新しく機能 を盛り込むみたいな作業が延々続いている
- 13. ● 昔から、アプリをウェブでという動きはたくさ んある – Java Applet – Flash – Silverlight – DHTML
- 16. ウェブの世界のアプリは RIA ではなく HTML5 で! という流れになっている
- 17. アジェンダ ● HTML5 で何が変わったか? ● HTML5 でできること ● HTML5 を使ったアプリの紹介 ● HTML5 モバイルアプリの展開 ● まとめ
- 18. HTML5 でできること ● HTML5 で何ができるのかを答えるのは非常 に難しい – とにかくできることの数が多い – 現在仕様策定中のものも非常に多い – 常に進化してます!
- 19. HTML5 でできること ● http://caniuse.com/ Can I use ? – ブラウザーごとの実装状況が見れる
- 20. HTML5 でできること ● 比較的当たり前に使われているものはこんなかんじでしょうか? – Canvas – SVG – Geolocation – Web Storage – Drag & Drop API – File API – Video/Audio Element – Application Cache (評判悪いですが...) – 他にも多分たくさん...
- 21. HTML5 でできること ● 最近ですとこのあたりが流行っているようです – WebRTC – Web Components – Web Audio API – Web MIDI API – Service Worker
- 22. HTML5 でできること ● 正直いろいろありすぎてよく分かりません! ● ゲームパッドがつながったり、ビデオチャット ができたり、バッテリー残量が取れたり、その 他もろもろ... ● MIDI 機器がつながると聞いた時はかなり びっくりしました...
- 24. アジェンダ ● HTML5 で何が変わったか? ● HTML5 でできること ● HTML5 を使ったアプリの紹介 ● HTML5 モバイルアプリの展開 ● まとめ
- 26. WebRTC Chat on SkyWay ● https://chat.skyway.io/ – NTT コミュニケーションズさんの WebRTC を 使ったチャット
- 27. WebRTC Chat on SkyWay ● WebRTC を使っているので... – ブラウザーだけで使える! – P2P でデータのやりとりをしている ● 細かいことは NTT コミュニケーションズの仲さんの セッションがおすすめ! – https://www.youtube.com/watch?v=7q9eFF_4Z38 – 2:34:00 あたりから
- 28. Unity WebGL Benchmarks ● ゲームエンジンの Unity 5 は WebGL と asm.js を使ってブラウザーでも動くようにな りました! ● デモアプリ – http://beta.unity3d.com/jonas/WebGLBenchm
- 29. Rulikaces ～ルリカケス～ ● HTML5 Conference 2015 in 鹿児島で キャリアデザイン専門学校さんが展示していた シューティングゲーム! ● 詳細知りたい... ● 秋頃販売?
- 30. Web Audio API demo ● https://chromium.googlecode.com/svn/trun – 結構遊べる!
- 31. 河合さんのデモ ● Web Audio API/Web MIDI API を使ったデモという かハンズオン – http://ryoyakawai.github.io/html5conference2015/analog/ ● HTML5 Experts.jp の記事 – https://html5experts.jp/ryoyakawai/12569/ ● 詳しくは河合さんのセッションを見るのをおすすめ! – https://www.youtube.com/watch?v=7q9eFF_4Z38 3:14:49 あたりから
- 32. Twilio ● http://twilio.kddi-web.com/ – KDDI Web Communications さんが展開して いる電話とウェブをつなぐツール
- 33. Twilio ● インターネットと電話?SNS をつなぎます! ● 細かいことはアラタナの永井さんのセッションがおすすめ! – https://www.youtube.com/watch?v=ejlb8CX2UgM – 2:51:00 あたりから ● 9/4 (金) 19:00 からさくらハウスで勉強会があるそうです – https://twiliojp-ug.doorkeeper.jp/events/29811
- 36. アジェンダ ● HTML5 で何が変わったか? ● HTML5 でできること ● HTML5 を使ったアプリの紹介 ● HTML5 モバイルアプリの展開 ● まとめ
- 38. Apache Cordova ● https://cordova.apache.org/ ● Adobe が作っている PhoneGap のオープンソー ス版 ● HTML5/JavaScript のソースコードをブラウ ザー込みのネイティブアプリを生成してくれる ● プラグインを使うことで、ネイティブの機能を使う ことができる
- 39. Chrome Mobile ● Chrome Mobile ” ”は ホーム画面に追加 というボタン で、ホーム画面にサイトを貼り付けられる – 手元に Android がある人はやってみて! ● マニフェストを書けばアイコンが指定できたり、フル 画面にできたりで、ほとんどアプリっぽくなる – Service Worker を使えばバックグラウンド通知やオフラ イン動作もいけるらしい
- 40. Chrome Mobile ● ネイティブアプリと同じように使えて、ストア の審査がない! ● iOS は昔からあったような...
- 41. Firefox OS ● https://www.mozilla.org/ja/firefox/os/2.0/ ● ホーム画面の UI も HTML5/JavaScript で作られ ている ● アプリも HTML5/JavaScript で書ける ● ウェブサーバーに配置するホスト型の他に、Firefox Marketplace に登録できるパッケージ型もある
- 42. Firefox OS ● 詳しくは HTML5 Conference の浅井さん のセッションがおすすめ! – https://www.youtube.com/watch?v=cI2BZ2mt – 6:03:50 あたりから
- 43. Firefox OS ● 特徴的なのが、Firefox OS 以外でも動くこ と ● Firefox Marketplace に Firefox でアクセ スすると... – https://marketplace.firefox.com/ – 結構面白いので、ぜひ試してください!
- 45. アジェンダ ● HTML5 で何が変わったか? ● HTML5 でできること ● HTML5 を使ったアプリの紹介 ● HTML5 モバイルアプリの展開 ● まとめ
- 46. まとめ ● HTML5 はアプリも作れることがミッションになっている ● HTML5 はいろんなことができる – MIDI 機器を操作したり – ビデオチャットができたり – オフライン通知ができたり ● 世の中のいろんな企業や個人がいろんなアプリを作れるように 機能拡張している ● モバイルでは HTML5 アプリをネイティブアプリのように扱 えるようになってきている
- 47. まとめ ● ネイティブアプリもいくらかは HTML5 アプリ化して いきそうな感じ ● 経緯などは HTML5 Conference の吉川さんのスライ ドやビデオを見ると分かりやすい! – https://www.youtube.com/watch?v=cI2BZ2mtjs8 – 1:00:15 あたりから (オープニングセッション) – 1:39:40 あたりから (いまさら闻けない贬罢惭尝5概要)