ドキッと贬罢惭尝5词速い男は好きですか词
- 1. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ ドキッとHTML5 ~速い男は好きですか？~ 2015年1月22日 株式会社FLAMA 小杉太一郎
- 2. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 目次 1.自己紹介 2.HTML5って何？ 3.HTML5で何ができるようになるの？ a.デモ b.活用例 4.HTML5ってどんな場面で使えるの？ 5.まとめ
- 3. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ １．自己紹介 ●小杉太一郎 oプログラマー見習い ?興味のある分野：Android、Java、HTML、CSS、 ?JavaScript) ?「HTML5プロフェッショナル認定資格レベル2」認定プロフェッショナル otwitter https://twitter.com/taitiro1987 ofacebook https://www.facebook.com/ktaichirou o趣味：旅行先に行って変な写真を撮る ?Instagram http://instagram.com/taitiro ?Flickr https://www.flickr.com/photos/taitiro/ ……あと、アイドルプロデュースとか
- 4. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 変な写真
- 5. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ ２．HTML5って何？ ●狭義には―HTML(Hyper Text Markup Language)のバージョン5 o……2014年10月28日にW3Cが勧告 ●広義には―それに付随する様々な技術 https://html.spec.whatwg.org/multipage/introduction.html#abstractより
- 6. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 広義のHTML5に含まれる技術 ●セマンティクス対応……HTML、RDF、microdata ●オフライン対応……AppCache、LocalStorage、Indexed DB、FileAPI ●ネイティブ機能へのアクセス……GeolocationAPI、Orientation、Microphones、Camera ●リアルタイム通信……WebSocket、WebRTC ●マルチメディア対応……Audio/Video ●高度なグラフィックス……SVG、Canvas、WebGL ●パフォーマンス向上……WebWorkers、XMLHttpRequest 2 ●CSS3……CSSアニメーション、Multi-column Layout、Flexible Box Layout （http://www.w3.org/html/logo/より） …もうかなり前から実装されている機能もあれば、これから実装が進んでいく機能も
- 7. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ HTML5はLiving Standardへ ●今までのHTMLの仕様 o様々なブラウザが独自に機能を実装していって、数年 か経った後に、W3Cが「しょうがねえなあ」と、標準 の仕様を策定……仕様と時代がそぐわないことが多々 起きる ●HTML5以降のHTMLの仕様 oブラウザベンダーの組織（WHATWG）がどんどん機 能を追加し、HTML仕様を追加していく →HTML5の次はHTML6……ではない（参照リンク）
- 8. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ つまり…… 常に最新の技術にキャッチアップしていくことが求められ るようになる
- 9. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ ３．HTML5で何ができるようになるの？ ●Webが「テキストを表示するだけ」のものから、「アプリ ケーションが動く基盤」へ
- 10. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 日本最初のWebページ
- 11. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 現在のWeb(ex.Google)
- 12. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ ３．HTML5で何ができるようになるの？ ●Webが「テキストを表示するだけ」のものから、「アプリ ケーションが動く基盤」へ oブラウザ上でほとんどのことが出来るようになる oex.Googleドキュメント―Officeアプリの機能をほぼブ ラウザ上で
- 13. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ DEMO ふれいま牧場 ●WebSocket……リアルタイム通信の 実現 ●Canvas、SVG……Flashなどなしに 、グラフィックスの描画を実現 ●WebSpeechAPI
- 14. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ IoT & クラウド & HTML5
- 15. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ DEMO ふれいま動画 ●WebSocket ●video……HTMLの一要素として、 何のプラグインもなしに動画再生が 可能に ●CSS Transition(CSS3)……CSSで アニメーションが実現できる
- 16. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ Flashに比べたHTML5のメリット スマートフォン?タブレット?PC全てに、1つのコードで対 応できる！ ※外側のデザインさえ、それぞれに対応させれば
- 17. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ DEMO ふれいま動画 ●WebSocket ●video……HTMLの一要素として、 何のプラグインもなしに動画再生が 可能に ●CSS Transition(CSS3)……CSSで アニメーションが実現できる
- 18. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 活用例 ●選挙速報ページ ●Mutations Studio ●Canvasでドラえもん ●WebGLミクさん
- 19. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ ４．HTML5ってどんな場面で使えるの？ コンシューマ向けWebサイト 構築 ●WebSocketAPI……リアルタイムのコ ミュニケーションが、サイト閲覧者と出 来るように ●Canvas、SVG、WebGL……リッチな コンテンツをWeb上で公開 ●Audio、Video……マルチメディア ●CSS3、WebFont……よりデザインし やすく スマートフォンアプリ開 発 ●GeolocationAPI……現在地情報 を取得し、利用することができる ように ●WebStorage、AppCache……オ フライン時でもWebアプリケーシ ョンが使えるように ●WebSpeechAPI……音声入力機 能 ●Form……スマートフォンからで も入力がしやすく 業務支援Webアプリケー ション開発 ●Canvas……業務データをグラフ などにして分かりやすく ●Drag and drop……PCを利用して いる時と同じ感覚でWebアプリケ ーションを使えるように ●FileAPI……ローカルファイルの 読み書き ●Form……日時入力などが簡単に
- 20. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ HTML5を用いた開発の一番の利点 ●速い！ ●ネイティブアプリケーション o環境構築→開発（→審査）→配布→（ユーザーの）インストール…… その過程でごちゃごちゃしたことも ●HTML5のWebアプリケーション o開発→URLを配るだけ！(今回のDEMOも、それぞれ数時間程度で開発)
- 21. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ どれぐらい「速い」か。 ●ネイティブアプリケーション o環境構築→開発（→審査）→配布→インストール……過程で問題も ●HTML5のWebアプリケーション o開発→URLを配るだけ！(今回のDEMOも、それぞれ数時間程度で開発) 一例
- 22. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 速いと何が嬉しいか ●使うユーザーのフィードバック?進歩する技術をすぐに 取り込んで、修正することが出来る ●……フィードバック?ループの短縮 ●クラウドと組み合わせれば、MVP（必要最低限の製 品）からのスケールアップも容易！ o……今回のDEMOも、Goocle Cloud Platformという、 Googleのクラウドサービスを用いています
- 23. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ ５．まとめ さまざまな端末からユーザーがアクセスしてくる、現代のユビキタスな環境 の中で、ユーザーにリッチかつインタラクティブな体験を与えるには、 HTML5がこれからの最適解！ HTML5を使ったアプリケーション開発は、是非 弊社にお任せください！
- 24. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ リンク ●今回のスライドのURL o/ktaichirou/html5-43764252 ●今回のDEMOのソースコード ohttps://github.com/taitiro/HTML5ForSeminar ●HTML5のロゴの転載元 ohttp://www.w3.org/html/logo/ ご清聴ありがとうございました！