HTML5 カンファレンス 2017 に参加
もう 1ヶ月以上前だけど、HTML5 カンファレンス 2017 に参加した。
封印していたメモ書きを開放（ブログ用にちょっと整えるのが面倒で放置してただけ）。
聞いたのはこんなセッション。
- Nitendo SwitchとWeb
- WebGL、実践編
- デザインカンプの限界 - Adobe XDで実現するプロトタイプ駆動ワークフロー
- Web 技術とブラウザ -いま知っておくべき Web 最新動向-
- まあまあ最新のCSSと、これからつらくならないために（仮）
Nitendo SwitchとWeb
SNS等で拡散禁止ってことだったのでコメントは控える。
WebGL、実践編
ぶっちゃけほとんど内容わからなかったんだけど、安友さんの話でひとつ心に残ってるのが簡単に楽しく始めるためにオンラインエディタで遊ぶっていうところで、YouTube の動画ではこのへんからの話。
オンラインエディタって色々省略しすぎてプログラミングの本質に気づけないだろうってことで避けがちだったけど、それよりまずはプログラミングを触り始めることが大事だし、使おうと思った。
ちなみに安友さんが使ってるのは SHDR ってやつ。
デザインカンプの限界 - Adobe XDで実現するプロトタイプ駆動ワークフロー
- デザインカンプ
- 仕上がり見本、完成見本
- デザインカンプの終わり
- 2009年ごろまでは、デザインカンプ通りに完成品が上がるように HTML 職人が頑張っていた
- PC だけならデザインカンプは活きていた
- 2010年以降、スマートフォンがでてきて 1px のずれとか言ってられなくなってきた
- デザインカンプの終わり
- 2009年ごろまでは、デザインカンプ通りに完成品が上がるように HTML 職人が頑張っていた
- クライアントのフィードバックを早めたい
- 一昔前の制作現場では、開発に入ってからようやくクライアントのフィードバックがもらえる状態だった
- ワイヤーフレームやデザインカンプの作成プロセスの中で、"プロトタイプ" を作成する
- 開発に入る前に、クライアントのフィードバックが得られるようにしたい
- Adobe XD はなにができるか
- Adobe XD 用のリソースはサイトで公開されている
- 作業を簡略化するには UI Kit を使うのも便利
- Adobe XD の特徴的な機能
- リピートグリッド
- 縦にも横にもリピート
- リストなど、同じ構造を持ったデザインが簡単に作れる
- デザインモードに加え、プロトタイプモードがある
- 非公開リンクがつくれて簡単に共有できる
- コメントもつけれる
- 改行区切りのテキストデータがあれば、リピートデータに流し込みができる
- 画像データを Adobe XD に Drag & Drop すれば、画像はいい感じでリサイズされて配置される
- Adobe Creative Cloud を通して、Illustrator や Photoshop のアセットを XD でも使える
- リピートグリッド
- プロトタイプ駆動
- どんなもの
- ワイヤーフレームの段階で、プロトタイプの提出・フィードバック対応を繰り返す
- デザインカンプの段階で、プロトタイプの提出・フィードバック対応を繰り返す
- 結果
- 使い勝手と見やすさを早い段階で確認できる
- 意識しておきたいことは
- このプロトタイプ駆動で意識しておきたいのは、プロトタイプにコストをかけていては本末転倒であるということ
- どんなもの
感想
- 操作が感覚的な感じで、変な言い方だけどざっくりしたデザイン作成な感じが自分が目指すプロトタイプと近くてよかった
- 共有までできるのは強い
Web 技術とブラウザ -いま知っておくべき Web 最新動向-
- HTML5 終了の予定がある
- 終了してもとくに何も変わらない
- 昨年と比べて各ブラウザ API のサポート率はあがってる
- ブラウザのアップデートによって使えるようになった技術
- Grid Layout
- もう使える
- フル画面アプリ（display: fullscreen）
- display: flow-root
- clearfix にお別れ
- ただし、Safari と Edge がまだ対応してない
- CSS font-display
- WebFont 読み込み時の反映タイミングを指定
- Paint Timing API
- ブラウザの描画には順序がある
- なんでもいいから見える状態
- 真っ白じゃない状態
- なんの情報が入るか見える状態
- 情報が入る枠だけが見える状態
- コンテンツが見える状態
- なんでもいいから見える状態
- ブラウザの描画には順序がある
- rel="noopener"
- target="_blank" のセキュリティ的問題を解決する
- 推奨
- CSS Custome Properties
- 変数
- もう使える
- アニメーションは、WebGL でなめらかに、Web Assenbly ですばやく
- ゲームと変わらない
- CSS Masks
- IE と Edge ではまだ使えない
- CSS Shapes
- まだ使えない
- Grid Layout
感想
- CSS Grid が目玉
- 来年はもう一般的に使われ始めてそうだから、勉強し直さないと
- target="_blank" には rel="noopener" を指定しよう
- Headless Chrome で自動的にスクリーンショットとか撮りたいなぁ
まあまあ最新のCSSと、これからつらくならないために（仮）
- まあまあ最近のCSS
- CSS Grid Lyaout が使えるようになる！
- Edge は 10月のアップデートで対応、他はすでに使える
- プレフィックス付きたら Edge でもすでに使える
- 使い方
- 縦と横にグリッド線を引く
- 各線には index 番号が割り当てられる
- index 番号を使って、コンテンツの配置箇所を指定する
- 縦と横にグリッド線を引く
- どう使っていく？
- デザインツールでグリッドラインを確認
- CSS をちょっと書いてみる
- ここではじめて Grid Layout の難しさを感じた
- 使える？
- どうすればいいか
- 矩形以外の領域は Grid Layout では指定できない
- Media Query は条件分岐とはいえない
- CSS の上書きにすぎない
- 上書きはスタイルの依存を増やしてしまう
- Media Query は CSS の依存関係を増やして、CSS の見通しを悪くしてしまう
- できるだけ使わないようにする
- 使わないようにするには、Media Query を Modifier と捉えるよう意識する
- Modifier が増えるのは嫌だよね
- Grid Layout は大枠のレイアウトだけではなく、コンポーネント内部のレイアウトにも使える
- サンプル
- Code Grid 著者一覧ページが、今後 Grid Layout を使う予定
- Edge は 10月のアップデートで対応、他はすでに使える
