Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ドキッとHTML5~速い男は好きですか~

479 views

Published on

2015年1月22日開催した「明日から使える!ナウいITワード~開校!FLAMA教室(http://www.flama.co.jp/news/2014/20141224_2.html)で発表したスライドです

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

ドキッとHTML5~速い男は好きですか~

  1. 1. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ ドキッとHTML5 ~速い男は好きですか?~ 2015年1月22日 株式会社FLAMA 小杉太一郎
  2. 2. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 目次 1.自己紹介 2.HTML5って何? 3.HTML5で何ができるようになるの? a.デモ b.活用例 4.HTML5ってどんな場面で使えるの? 5.まとめ
  3. 3. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 1.自己紹介 ●小杉太一郎 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. 4. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 変な写真
  5. 5. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 2.HTML5って何? ●狭義には―HTML(Hyper Text Markup Language)のバージョン5 o……2014年10月28日にW3Cが勧告 ●広義には―それに付随する様々な技術 https://html.spec.whatwg.org/multipage/introduction.html#abstractより
  6. 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. 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. 8. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ つまり…… 常に最新の技術にキャッチアップしていくことが求められ るようになる
  9. 9. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 3.HTML5で何ができるようになるの? ●Webが「テキストを表示するだけ」のものから、「アプリ ケーションが動く基盤」へ
  10. 10. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 日本最初のWebページ
  11. 11. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 現在のWeb(ex.Google)
  12. 12. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 3.HTML5で何ができるようになるの? ●Webが「テキストを表示するだけ」のものから、「アプリ ケーションが動く基盤」へ oブラウザ上でほとんどのことが出来るようになる oex.Googleドキュメント―Officeアプリの機能をほぼブ ラウザ上で
  13. 13. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ DEMO ふれいま牧場 ●WebSocket……リアルタイム通信の 実現 ●Canvas、SVG……Flashなどなしに 、グラフィックスの描画を実現 ●WebSpeechAPI
  14. 14. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ IoT & クラウド & HTML5
  15. 15. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ DEMO ふれいま動画 ●WebSocket ●video……HTMLの一要素として、 何のプラグインもなしに動画再生が 可能に ●CSS Transition(CSS3)……CSSで アニメーションが実現できる
  16. 16. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ Flashに比べたHTML5のメリット スマートフォン・タブレット・PC全てに、1つのコードで対 応できる! ※外側のデザインさえ、それぞれに対応させれば
  17. 17. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ DEMO ふれいま動画 ●WebSocket ●video……HTMLの一要素として、 何のプラグインもなしに動画再生が 可能に ●CSS Transition(CSS3)……CSSで アニメーションが実現できる
  18. 18. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 活用例 ●選挙速報ページ ●Mutations Studio ●Canvasでドラえもん ●WebGLミクさん
  19. 19. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 4.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. 20. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ HTML5を用いた開発の一番の利点 ●速い! ●ネイティブアプリケーション o環境構築→開発(→審査)→配布→(ユーザーの)インストール…… その過程でごちゃごちゃしたことも ●HTML5のWebアプリケーション o開発→URLを配るだけ!(今回のDEMOも、それぞれ数時間程度で開発)
  21. 21. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ どれぐらい「速い」か。 ●ネイティブアプリケーション o環境構築→開発(→審査)→配布→インストール……過程で問題も ●HTML5のWebアプリケーション o開発→URLを配るだけ!(今回のDEMOも、それぞれ数時間程度で開発) 一例
  22. 22. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 速いと何が嬉しいか ●使うユーザーのフィードバック・進歩する技術をすぐに 取り込んで、修正することが出来る ●……フィードバック・ループの短縮 ●クラウドと組み合わせれば、MVP(必要最低限の製 品)からのスケールアップも容易! o……今回のDEMOも、Goocle Cloud Platformという、 Googleのクラウドサービスを用いています
  23. 23. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ 5.まとめ さまざまな端末からユーザーがアクセスしてくる、現代のユビキタスな環境 の中で、ユーザーにリッチかつインタラクティブな体験を与えるには、 HTML5がこれからの最適解! HTML5を使ったアプリケーション開発は、是非 弊社にお任せください!
  24. 24. (c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/ リンク ●今回のスライドのURL ohttps://www.slideshare.net/ktaichirou/html5-43764252 ●今回のDEMOのソースコード ohttps://github.com/taitiro/HTML5ForSeminar ●HTML5のロゴの転載元 ohttp://www.w3.org/html/logo/ ご清聴ありがとうございました!

×