- 脱IE時代のイマドキCSS／鹿野 壮（マネーフォワード）
- 構造化データマークアップ2022／サトウ ハルミ（FLAT）
- 開発でトラブルに合わないためのhuskyとGitHub Actionsとソースコードレビューの取り組み／関口 勇樹（HAMWORKS）
- Webで3Dを使う／綿貫 佳祐（Qiita）
セッション概要
4つのショートセッションで構成します。
脱IE時代のイマドキCSS
2022年6月、MicrosoftはIE11のサポートを終了しました。モダンブラウザに比べてCSSの対応が遥かにすくなったIE11の終了により、これまで使えなかった便利なCSSをたくさん使えるようになりました。
しかし、開発の現場ではいまだにIE対応のための冗長なコードを書いている事例が多く見られます。長ったらしくて読みづらいコードは、バグを引き起こし、アプリの品質を下げ、開発者の生産性を引き下げる原因になります。
本セッションでは、IE時代に必要だったレガシーなCSSを、イマドキはどうやって書くのかを解説します。一例として、次のようなことを紹介します。
- 上下左右中央揃えは2行でOK
- スムーススクロールはCSSだけで実現できる
- 要素のアスペクト比指定に padding-top は使わない
- スマートフォンのヒーローイメージには 100vh ではなく 100sh を使う
- その他
各項目については、IE時代のレガシーコードを引き合いに出し、ライブコーディングでモダンなCSSに書き換えながら解説します。
本セッションを通して、脱IE時代を戦い抜くモダンなCSSの知識を習得し、安全で高速な開発に役立てましょう。
構造化データマークアップ2022
Google検索結果にリッチリザルトとして表示される「構造化データ」について、みなさまの制作現場ではどのように対応されていますでしょうか。
セマンティック・ウェブの概念に沿った、マシンリーダブルな構造化データマークアップを行いましょう。
構造化データの概念ついての説明と、実際のサイトを例にGoogle Developersが推奨する「リッチリザルト」をわかりやすく解説します。
開発でトラブルに合わないためのhuskyとGitHub Actionsとソースコードレビューの取り組み
ソースコードの品質チェックは、自動化していますか？
品質チェックは、プロジェクトをリリースするために必要な工程です。
これらのチェックを手動（人の目視）で行う場合、表記揺れ・バグを見落とす可能性があります。
それらを未然に防ぐために husky と GitHub Actions をご紹介します。
huskyは、コミットやプッシュのタイミングでコマンドを実行できるツールです。
GitHub Actionsは、GitHubが提供するワークフローの自動化が行えるサービスです。
これらのサービスやツールを導入することで、ソースコードレビュー（品質チェック）の自動化ができます。
ソースコードレビューを受けることは、コード品質・実装揺れ・バグの発見などを未然に防ぐことができます。
決まったルールを出来る限り自動化することで、レビューにかかる時間を最小限にできます。
本セッションでは、husky や GitHub Actions を活用した品質チェックの自動化とソースコードレビューの取り組みやポイントを解説します。
three.js + Blenderで3DCGを実装する
「今年のウェブトレンド」などでよくとりあげられる3DCGですが、具体的な実装方法を教えてくれるコンテンツはさほど多くありません。
今回は簡単な3DCGのコンテンツをハンズオン形式で実装します。
three.jsとBlenderを用いて、できるだけ簡単に3DCGを実装する方法をお届けします。
- three.jsとはブラウザ上で3DCGを描画できるJavaScriptのライブラリです。コミュニティが大きく、たくさんのチュートリアルが存在しています。
- Blenderとは3DCGソフトで、モデリングやアニメーションなど大抵の制作が可能です。非常に多機能ですが、オープンソースで作られているので無料で使えます。
当日は以下の動画で示したものを制作します。
専門的に取り組むと非常に難しい3DCGですが、要点を押さえれば最初の一歩はクリアできます。このセッションが、表現の幅を広げるのに役立てられれば幸いです。
