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

(c)FLAMA Inc. All Rights Reserved. http://www.flama.co.jp/
ドキッとHTML5
~速い男は好きですか？~
2015年1月22日株式会社FLAMA 小杉太一郎

目次
1.自己紹介
2.HTML5って何？
3.HTML5で何ができるようになるの？
a.デモ
b.活用例
4.HTML5ってどんな場面で使えるの？
5.まとめ

１．自己紹介
●小杉太一郎
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/
……あと、アイドルプロデュースとか

変な写真

２．HTML5って何？
●狭義には―HTML(Hyper Text Markup
Language)のバージョン5
o……2014年10月28日にW3Cが勧告
●広義には―それに付随する様々な技術
https://html.spec.whatwg.org/multipage/introduction.html#abstractより

広義の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/より）
…もうかなり前から実装されている機能もあれば、これから実装が進んでいく機能も

HTML5はLiving Standardへ
●今までのHTMLの仕様
o様々なブラウザが独自に機能を実装していって、数年
か経った後に、W3Cが「しょうがねえなあ」と、標準
の仕様を策定……仕様と時代がそぐわないことが多々
起きる
●HTML5以降のHTMLの仕様
oブラウザベンダーの組織（WHATWG）がどんどん機
能を追加し、HTML仕様を追加していく
→HTML5の次はHTML6……ではない（参照リンク）

つまり……
常に最新の技術にキャッチアップしていくことが求められ
るようになる

３．HTML5で何ができるようになるの？
●Webが「テキストを表示するだけ」のものから、「アプリ
ケーションが動く基盤」へ

日本最初のWebページ

現在のWeb(ex.Google)

３．HTML5で何ができるようになるの？
●Webが「テキストを表示するだけ」のものから、「アプリ
ケーションが動く基盤」へ
oブラウザ上でほとんどのことが出来るようになる
oex.Googleドキュメント―Officeアプリの機能をほぼブ
ラウザ上で

DEMO
ふれいま牧場
●WebSocket……リアルタイム通信の
実現
●Canvas、SVG……Flashなどなしに
、グラフィックスの描画を実現
●WebSpeechAPI

IoT & クラウド & HTML5

DEMO
ふれいま動画
●WebSocket
●video……HTMLの一要素として、
何のプラグインもなしに動画再生が
可能に
●CSS Transition(CSS3)……CSSで
アニメーションが実現できる

Flashに比べたHTML5のメリット
スマートフォン・タブレット・PC全てに、1つのコードで対
応できる！
※外側のデザインさえ、それぞれに対応させれば

活用例
●選挙速報ページ
●Mutations Studio
●Canvasでドラえもん
●WebGLミクさん

４．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……日時入力などが簡単に

HTML5を用いた開発の一番の利点
●速い！
●ネイティブアプリケーション
o環境構築→開発（→審査）→配布→（ユーザーの）インストール……
その過程でごちゃごちゃしたことも
●HTML5のWebアプリケーション
o開発→URLを配るだけ！(今回のDEMOも、それぞれ数時間程度で開発)

どれぐらい「速い」か。
●ネイティブアプリケーション
o環境構築→開発（→審査）→配布→インストール……過程で問題も
●HTML5のWebアプリケーション
o開発→URLを配るだけ！(今回のDEMOも、それぞれ数時間程度で開発)
一例

速いと何が嬉しいか
●使うユーザーのフィードバック・進歩する技術をすぐに
取り込んで、修正することが出来る
●……フィードバック・ループの短縮
●クラウドと組み合わせれば、MVP（必要最低限の製
品）からのスケールアップも容易！
o……今回のDEMOも、Goocle Cloud Platformという、
Googleのクラウドサービスを用いています

５．まとめ
さまざまな端末からユーザーがアクセスしてくる、現代のユビキタスな環境
の中で、ユーザーにリッチかつインタラクティブな体験を与えるには、
HTML5がこれからの最適解！
HTML5を使ったアプリケーション開発は、是非
弊社にお任せください！

リンク
●今回のスライドのURL
ohttps://www.slideshare.net/ktaichirou/html5-43764252
●今回のDEMOのソースコード
ohttps://github.com/taitiro/HTML5ForSeminar
●HTML5のロゴの転載元
ohttp://www.w3.org/html/logo/
ご清聴ありがとうございました！

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

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

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

Similar to ドキッとHTML5~速い男は好きですか~ (20)

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