html5jk 勉強会 #1 初めての HTML5 アプリ開発 その一

1. HTML5 のお話

2. 自己紹介
●
名前: 政倉 智
●
所属: codeArts 株式会社
●
趣味: バイク (新しく買いました!)

3. バイク来ません...
お金払ったのに...

4. アジェンダ
● HTML5 で何が変わったか?
● HTML5 でできること
● HTML5 を使ったアプリの紹介
● HTML5 モバイルアプリの展開
● まとめ

5. アジェンダ
● HTML5 で何が変わったか?
● HTML5 でできること
● HTML5 を使ったアプリの紹介
● HTML5 モバイルアプリの展開
● まとめ

6. HTML5 で変わったこと
● HTML4 から変わったことはたくさんある
– 要素・属性が増えた
– マルチメディアが扱えるようになった
– DTD 宣言が簡単になった
– などなど

7. 個人的には「アプリを書くのも含めて HTML5 の
ミッションになった」ことが大きいと思う

8. もちろん今までもアプリは書けたよね?

9. でもあくまでそれは、ドキュメントを書くための
規格の HTML4 の範疇でアプリを書いてた

10. HTML5 では「アプリを書くのも含めてミッショ
ンになった」ことで、いろんな機能が追加されて
いる

11. Web Storage
●
かなり古い例ですが...
● アプリを作るためにはデータの保存領域が必要
●
でも Cookie は容量が少ないなどの問題が
●
というわけで Web Storage という規格が生ま
れた
● こんな感じで、できないことに対して新しく機能
を盛り込むみたいな作業が延々続いている

12. そもそもなぜウェブでアプリなのか?
ネイティブではだめなのか?

13. ● 昔から、アプリをウェブでという動きはたくさ
んある
– Java Applet
– Flash
– Silverlight
– DHTML

14. インストール不要でアプリが使えるのが
非常に大きいんだと思う

15. Flash は一時期すごいシェアを誇ったけど
iOS で動かないなどの理由で敬遠されている

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 機器がつながると聞いた時はかなり
びっくりしました...

23. できないことを探すほうが
難しくなるんじゃないかという勢い!

24. アジェンダ
● HTML5 で何が変わったか?
● HTML5 でできること
● HTML5 を使ったアプリの紹介
● HTML5 モバイルアプリの展開
● まとめ

25. 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

34. HTML5 では紹介したようなアプリも
作れるようになった!

35. アドレスバーがなければ
ウェブだって分かんないかも

36. アジェンダ
● HTML5 で何が変わったか?
● HTML5 でできること
● HTML5 を使ったアプリの紹介
● HTML5 モバイルアプリの展開
● まとめ

37. モバイルアプリを 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/
– 結構面白いので、ぜひ試してください!

44. もうちょっとしたら
モバイルアプリは
HTML5 アプリだらけになりそう

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 あたりから (いまさら聞けないHTML5概要)