@thorikiriのてょりっき

@thorikiriがWebとかAndroidとかの技術ネタや本を読んだブログです

第9回HTML5開発技術勉強会 #TechBuzz に行ってきたよ

event html5

以下メモを。

Web技術のこれまでとこれから

資料 → http://www.log25.jp/file/130117.pdf

  • 前振り
  • HTML5
    • XHTMLで失敗した一方でFlashが流行ってた。
    • Webアプリケーションがリッチになってきてた。
    • なので、2004年 WebApplication1.0 WebFomrs2.0が提案されたりしました。
    • 一番狭いHTML5はW3CのHTML5。Elements、Form、Offline Events、D&Dなど
    • WHATWGのHTML5 Canvasなど
    • その他広義のHTML5
  • 1. Video＆Audio
  • 2. Canvas
    • JavaScriptでお絵かきなど
    • 前回の資料を参照
  • 3. オフラインWebアプリケーション
    • オフラインでもWebアプリを使えるようにしよう。
    • online, offlineイベント（IE8と９で挙動が異なる）
    • キャッシュマニフェストなど。
  • 4. D&D
    • mousedown,mousemove, mouseupなどのイベントが昔からあった。
    • これを使いやすく。
  • 5. WebWorker
    • JavaScriptのマルチスレッド化、並列処理
    • 問題点として、DOMやUIへの操作ができなくなる。
      • バックグラウンドから。
      • postMessageの引数経由で操作
  • 6. WebStorage
    • sessionStorage, localStorage
    • 画像データを事前にダウンロードしておいてStorageにいれておくなども可能
  • 7. WebSocket
    • ７回目の資料参考。
    • ブラウザ上での双方向やりとり。バイナリもOK
  • 8. File API
    • ローカルのファイルのデータを使用する。
    • 主に、オフラインWebアプリケーションでも利用
      • そうなの？
    • FileReaderオブジェクト
      • readAsText, readAsBinaryStringなど
  • 9. WebRTC
    • JavaScriptでカメラやマイクなどを使ってリアルタイムでデータを取得。
    • Chromeの場合デフォルトオフになってる可能性があるよ。
    • 2つのカメラが有る場合に不安定らしい
  • 10. FullScreenAPI
    • HTMLの要素をなんでもフルスクリーンに出来る。
    • 任意の要素をフルスクリーンにするらしい。
    • ただし、中の要素を自動的には拡大しない。
  • その他
    • CSSアニメーション
    • GPS、Geolocation
    • センサー
    • IndexedDBとか
    • WebGLとか。
  • まとめると
    • グラフィックス・マルチメディア、オフライン・ローカル、データストレージ、その他などがある。
    • 技術の流行りすたりがある。
    • ひとつの技術にとらわれず、幅広く身につけよう。

2013年、HTML5+WebGLはどう変わるのか？

  • HTML5
    • コンピュータが今より文章を踏み込んで解釈できる。
    • コンピュータが人間の欲する情報を的確に取り出せる。 対検索エンジン
  • HTML Canvas
    • ２Dグラフィックスを表現出来る。無理やりブラウザでできるけど・・・。
    • ハードの機能を利用出来る。
  • WebGL
    • ３Dのグラフィックスを表現出来る。
  • 総じて、ブラウザでもっと色々出来るように表現できるようにしようと言うもの。
  • HTML4までは、レポートを記述するためのもの。
    • 内容は、レポート向けだった。そういう思想でした。
    • それを無理やり拡張してきた。
    • それだけしかなかったけど、それだけしかなかったからこそ発展したのかもしれない。
  • HTML5では今のWebアプリに必要な表現力を持っている。
    • ブラウザでガリガリやるよりは、OSにまかせてしまった方がいい。OpenGLとかであれば高速。
    • なので、２D、３Dグラフィクスの表現が豊かになるのでは。
  • WebGLって？
    • OpenGL＋入力デバイス。
    • WebGLはOpenGLの焼き直し的なことがある。冗長なAPIを排除して、Web向けにしている。
    • よりゲームを作るのには適しているようになっているよ。
    • OpenGLが使えるしOKではダメです。C/C++とJavaScriptはぜんぜん違うよ。
    • HTML5があれば、組み込みの色々なしでOK。
  • ジレンマ
    • OS組 VS ブラウザ組 でもめている？
    • 鍔迫り合いではある。
    • なかなかちょっとむずかしい。WebGLとかはまさに煽りを喰っている？
  • 2004年から
    • HTML5 2009年 GoogleIOの発表をきっかけに。
    • 2010年 からHTML5に対応したサイトが出現してきた。
    • 2011年 HTML5変換ツールとか、Wallaby、Swiffy,Edgeとか ついに、モバイル用FlashPlayer開発中止を発表
    • 2012年 HTML5 普及機
  • HTML5の使いドコロは？
    • スマホ用。 モバイルだからこその機能がある。
    • PC用WebアプリはHTML4+jQueryで。
  • WebGL
    • 2009年。 ほぼ誕生といっていっていい。
    • 2010年 フレームワークとか、THREE.js
    • 2011年 Google、Mozillaはやってて、MSは拒否。Appleはむーん
    • 2012年 けっこうやる気がなくなってきている。
  • WebGL無理じゃね？
  • まとめ
    • PCはHTML4とjQuery
    • スマフォはHTML5
    • WebGLは・・・輝けないかもしれない。