東京では語れないhtml5[仮題] -...
DESCRIPTION
2012年10月19日開催の第三回東北セミナー(主催:公益社団法人 日本アドバタイザーズ協会 Web広告研究会) 第二部 パネルディスカッション「東京では語れないHTML5[仮題]」において、パネリスト山本健介が担当した部分のスライドです。TRANSCRIPT
![Page 1: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/1.jpg)
「HTML5の登場で、新しく何ができるようになったのか?」
![Page 2: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/2.jpg)
静的コンテンツ
リッチコンテンツ
???
HTML
PC スマートデバイス
Flash HTML5 + JS
HTML5 + JS
HTML+JS
デバイスとコンテンツの種類による技術の使い分け
![Page 3: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/3.jpg)
構造に意味を持たせるSEMANTICS
オフライン機能とストレージOFFLINE & STORAGE
DEVICE ACCESS
デバイスが持つインターフェイスやデータにアクセスCONNECTIVITY
クライアントとサーバ間での接続性の改善MULTIMEDIA
動画、音声の再生
3D, GRAPHICS & EFFECTS
リッチなビジュアル表現PERFORMANCE & INTEGRATION
パフォーマンスの向上
CSS3
CSSでの表現力を向上 Flashでもできた事
Flashにはできない事
HTML5で追加された機能
![Page 4: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/4.jpg)
オフラインとストレージ
• Application Cache• Web Storage• Indexed Database API• File API
OFFLINE & STORAGE
・オフライン機能・ローカルへのデータ保存
![Page 5: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/5.jpg)
静的コンテンツ
リッチコンテンツ
オフライン機能とストレージ
HTML
PC スマートデバイス
Flash HTML5 + JS
HTML5 + JS
HTML+JS
デバイスとコンテンツの種類による技術の使い分け
![Page 6: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/6.jpg)
Flashでもできたが、スマートデバイスでできると革新的になる機能
・リアルタイム通信・デバイス情報の取得(位置情報、加速度センサーなど)・リッチな表現
![Page 7: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/7.jpg)
・オフライン機能・ローカルへのデータ保存・スマートデバイスにおけるリアルタイム通信・スマートデバイスにおけるデバイス情報の取得・スマートデバイスにおけるリッチな表現
まとめると
![Page 8: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/8.jpg)
例えば、どんなものが作れるのか?
その5つの機能を使うと
![Page 9: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/9.jpg)
渋谷スクランブル交差点のヴィジョンを使って100人で「Wii」のようなゲームを同時プレイ
・オフライン機能・ローカルへのデータ保存・スマートデバイスにおけるリアルタイム通信・スマートデバイスにおけるデバイス情報の取得・スマートデバイスにおけるリッチな表現
![Page 10: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/10.jpg)
「アクセス」ページをカーナビにする
・オフライン機能・ローカルへのデータ保存・スマートデバイスにおけるリアルタイム通信・スマートデバイスにおけるデバイス情報の取得・スマートデバイスにおけるリッチな表現
![Page 11: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/11.jpg)
インストール不要のスマホアプリ
・オフライン機能・ローカルへのデータ保存・スマートデバイスにおけるリアルタイム通信・スマートデバイスにおけるデバイス情報の取得・スマートデバイスにおけるリッチな表現
![Page 12: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/12.jpg)
![Page 13: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/13.jpg)
アプリ
![Page 14: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/14.jpg)
![Page 15: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/15.jpg)
![Page 16: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/16.jpg)
![Page 17: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/17.jpg)
・低コスト・クロスプラットフォーム・導線の短さ・インストールに対するハードルの低さ・アプリストアの制約を受けない・更新性が高い
しかもネイティブアプリと比べて利点もある。
![Page 18: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/18.jpg)
ゲーム系コンテンツ
オフラインでもプレイ可能。全国ランキングを見たいときだけオンラインに接続。
営業ツール(見積計算機、商品カタログなど)
電波のないところでも営業可能。電波のあるときには簡単に最新版にアップデート。
例えば…
![Page 19: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/19.jpg)
・オフライン機能・ローカルへのデータ保存・スマートデバイスにおけるリアルタイム通信・スマートデバイスにおけるデバイス情報の取得・スマートデバイスにおけるリッチな表現
「HTML5の登場で、新しく何ができるようになったのか?」
まとめ
![Page 20: 東京では語れないHTML5[仮題] - HTML5の登場で、新しく何ができるようになったのか?](https://reader030.vdocuments.pub/reader030/viewer/2022020207/559c28dc1a28ab8f408b4729/html5/thumbnails/20.jpg)
ご清聴ありがとうございました。