@thorikiriのてょりっき

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

『HTML5実力テスト』答え合わせ勉強会！ に行ってきました

event html5

HTML・CSSコース解説

資料 → HTML5実力テスト 答え合わせ勉強会 HTML/CSS編
ライブコーディング結果 → CSS Flexbox Layout - jsdo.it - Share JavaScript, HTML5 and CSS

  • 試験について
    • 平均は44点くらいでした
    • CSS、レンダリング系で点数が低い傾向でした
      • CSS、UI部分が弱いのではないか
      • なので、CSSの話をしたい
      • とは言え、CSSの範囲が多すぎるので、レイアウトについて話します
  • CSS Layout
    • 実は、レイアウトと言っても、6種類くらいある
    • IE10では試せるが、対応ブラウザが少ない
    • Flexible Boxの仕様が変わったので、この話をします
      • Web ComponentsなどではCSSでフレキシブルなレイアウトを作ることが求められるようになる
  • Flexible Boxとは？
    • 横並びのBOXの高さを揃えたり
    • iPadなどのタブレットで、縦と横でBOX数を変えたり
  • ライブコーディング
    • jsdo.it - Share JavaScript, HTML5 and CSSでライブコーディング
    • jsdo.itでは、sassとcompassが使える。LESSも使える。
    • zen-cordingも使える。コマンド+Eで展開する
    • GmailのようなUIを作る。メールの一覧部分をフレキシブルに、その他の部分は固定にしたい
      • #contentに対して、display: -webkit-flex;を指定すると中身が横並びになる
      • サイドバーに対して、-webkit-flex: 130px 0 0;を指定すると、サイドバーが130pxで固定になる
      • メインパネルに対して、-webkit-flex: 1;を設定することでサイドバーと揃う。
      • コンテナに対して、-webkit-flex-flow: column;を指定する
      • ・・・などなど。
  • まとめ
    • 結構簡単にフレキシブルなレイアウトが実現できる
    • でも、仕様が変更になったり、実装が変わったりもするので、追従するのは大変です

すべての人に知っておいてほしい HTML5 & CSS3 の基本原則

すべての人に知っておいてほしい HTML5 & CSS3 の基本原則

すべての人に知っておいてほしい スタイルシートデザインの基本原則

すべての人に知っておいてほしい スタイルシートデザインの基本原則

JavaScriptコース解説

資料 → HTML5 exam : checking answers

  • 試験について
    • 平均は37点くらい
    • セキュリティについては地味なので今日は触れません。
    • ECMAScriptとDOMは仕様を読んでください。
    • Webグラフィックス周りとJXR2について
  • Webグラフィックス
    • 今回は割とベーシックな問題
      • 難しい問題を作ったら白石さんにもっと簡単にしたほうが良いと言われて
    • canvas
      • 描画だけじゃない
      • 画像を編集したり出来る
      • 画像認識なども可能なのですごく面白い
    • WebGLの仕様はKHRONOSが管理している
      • OpenGLの仕様を管理している関係で
      • WebGLは1.0が去年正式にリリースされたので使うことが出来る。IE以外は。
      • OpenGLベースです。なので、少々面倒臭い。three.jsなどを使うと良い。
      • ゲームとか、3Dとかが出来る。
      • 3Dの地下鉄のモデルとか、商品の3Dモデルなども出来る
    • SVG
      • SVGは10年前からある
      • HTML5とからめて、最近有名になってきた
      • xlinkなどの接頭辞を付けなければいけないのは、HTML5の仕様です。
      • SVGで、要素の接頭辞は省略可能であるが、属性の接頭辞は省略できない。
      • データを可視化したりとかに向いている。曲線を表現できる。
      • iOSには対応している。Androidも3.0以降は対応しているので、4.0全盛になってくれば使える。
  • XHR2
    • 試験には1問しか出ていませんが
    • XHR
      • ドメイン間の通信がNG
      • イベントがあんまりない
      • バイナリのデータを扱えない
    • XHR2では改善している
    • CORS
      • Access-Control-Allow-Originをヘッダにつけてリクエスト
      • サーバ側が許可していれば通信できる
    • イベント
      • onloadstart, onload, onloadend（成功しても失敗しても呼ばれる）などのイベント
      • onprogressで進捗が取れる。ev.loadedとev.totalの割り算をする。ただし、totalがわからない状態もあるので、lengthComputableで判定する。
    • バイナリ
      • バイナリの送受信が可能
      • Formの非同期化出来る
      • アップロードとダウンロード、File APIとの組み合わせ
  • まとめ
    • 泥臭くやっていたところが普通に簡単に出来るようになりました
    • フロントエンドエンジニアの腕の見せ所になる
  • 宣伝

WebクリエイティブのためのDOM Scripting （Web Designing Books）

WebクリエイティブのためのDOM Scripting （Web Designing Books）

iOS・Androidコース解説

資料 → 見当たらず

  • 試験について
    • 平均は45点くらい
    • 今日はノウハウとAPIについて
  • Audio
    • autoplayはiOS6から出来るようになりました。
    • だが、ちょっと待って欲しい、本当にその音楽は聞きたいですか？どんなシチュエーションでも。
      • ユーザが聞きたいと思ったときに、明示的に聞けるようにすれば良いだ。
  • 事例
    • jPlayer（jPlayer : HTML5 Audio & Video for jQuery）を使って再生している
    • 実装について
      • jQueryもjPlayerもそれなりに重いライブラリなので、モバイルでは不都合
      • 音楽を流しても良いモードに設定された場合のみ、ロードしてくるようにしている
    • その他
  • インタラクション
    • 戦闘の編隊フォーメーションの入れ替えの時のインタラクション
    • positionをabsoluteで指定して、originとtargetのtopとleftを取得して、移動距離を計算する
    • 移動距離をもとに、CSSのtransformで移動する。
    • しかしながら、単純に上書きしてしまうとダメなので、一度外に配置している要素に退避する
    • ゲーム性とか色々考えて、適切なインタラクションを指定していきましょう。
  • Flash Player
    • iOSではFlashをサポートしていない
    • Androidも今後はサポートしない

PEX？PFX？
PEXだか、PFXだかPostFxか何かの話をしていたのですが、何のことなのかわかりませんでした。勉強不足ですね。すみません。