CSS Nite in Osaka, vol.52 開催レポート
2019年9月7日（土）、大阪扇町にあるメビック扇町さんにて、CSS Nite in Osaka, vol.52 「Modern Coding」を開催いたしました。参加者は80名とたくさんの方にご参加いただき、例年よりも暑い気候ではありましたが、暑さに負けず会場は盛り上がりました。それでは当日の様子をレポートいたします。
オープニング
12:30よりイベントがスタート。司会進行は松下 絵梨（ツキアカリ）さんです。
まずは恒例のプレゼントタイム。今回ご登壇いただく鹿野 壮（ICS）さんとあいこじゃんけんをし、勝ち残った方に、鹿野さんが執筆された書籍をプレゼントしました。プレゼントを発表すると会場から「欲しい〜」と声が上がっており勝ち抜いた方もとても喜んでいました。おめでとうございます！
鹿野さんより
・『JavaScript コードレシピ集』（技術評論社・共著）
セッション1 「現場で働くコーダーのためのCSS Grid + モダンコーディング」
登壇者 : 鹿野 壮（ICS）さん
鹿野さんのセッションの前半では、CSS Gridを使った複数行レイアウトについて、後半ではChromium版Microsoft Edgeをはじめとした全モダンブラウザーで使えるCSSの新機能をお話いただきました。
CSS Grid
現場でもよく使用されるFlexboxは、柔軟なボックスレイアウトが可能でfloatに替わって使ってらっしゃる方が多いのではないでしょうか。しかし、Flexboxも万能ではなく複数行レイアウトが苦手な面もあります。そこで鹿野さんが今回ご紹介くださったのが、CSS Grid。複数行レイアウトが得意なCSS Gridを、鹿野さんの世界一可愛い愛猫のうにちゃんのウェブサイトを使って解説していただきました。ウェブサイトのデザインは司会進行の松下 絵梨さんが担当しました。
全モダンブラウザで使えるCSSの新機能
- ・Microsoft EdgeがChromiumベースになることにより、使えるようになるCSSの機能をご紹介いただきました。
- ・object-fitプロパティでimgタグに設定した画像の比率を保つ
- ・SVG要素をCSS Transformで変形
- ・maskプロパティで画像にマスクをかける
この他にもモダンブラウザで使えるCSSの機能を多数ご紹介。
鹿野さんのセッションでは現場で働くコーダーがすぐに使える技術や、これからが楽しみになる新機能のお話をしていただきました。また、最後にお話されていた「当たり前だと思っていた手法を見直して、より便利にウェブ開発をしよう！」という言葉が印象的でした。新しい機能を積極的に取り入れて、作業時間を短縮し、より良いコンテンツを制作できるようにしたいと思えるセッションでした。
セッション2 「デザイナーのためのSVG基礎+アニメーション」
登壇者 : 松田 直樹（まぼろし）さん
松田さんのセッションでは、前半には「そもそもSVGとは何？」という、基礎的な内容を、後半には「アニメーションを作るにはどうすれば良いか」、など実際に使ってみる際に役立つお話をしていただきました。
SVGの特徴
SVGはデータと相性がよく、WordPressのカスタムフィールドに直接入れた値を、そのまま使ってSVGでグラフの描写ができるなど、XML文書であることのメリットを解説いただきました。また、XML文書のため、文字データを含めることができ、画像の中にアクセシビリティを確保できます。そのため、スクリーンリーダーに対応することもできます。こういったSVGのメリットをうまく活用することで、よりよいサイト制作ができますね。
SVGのアニメーション
SVGのアニメーションをいくつかご紹介いただきましたが、その中でも松田さんがJavaScriptでとにかく動かしたいなら、ということでご紹介されていたのが、「TweenMax」というライブラリです。エンジニアでない方でも使いやすいライブラリでおすすめとのこと。SVGに挑戦しようと思っている方は、試してみてはいかがでしょうか。
最後のまとめでは「ややこしかったですか？」、「大丈夫。みんな、なんとなく使ってます」と参加者に笑顔で話される松田さん。デザイナーとしてSVGの使い方を知っていることで、構築するエンジニアとのコミュニケーションが取りやすくなります、という松田さんの言葉に参加者の皆さまも頷いてらっしゃいました。これからSVGを使う人も肩の力を抜いて、試してみようと思えるセッションでした。
パネルディスカッション
パネルディスカッションでは、事前にいただいていた質問と、当日ツイートでいただいた質問に登壇者のお二人にお答えいただきました。
いくつかピックアップしてご紹介します。
ーSass（SCSS）を書いているとついつい深くなってしまう。
鹿野さん : フレームワークを使用するとネストが深くならずに済むのではないでしょうか。
松田さん : フレームワークはコンポーネント単位で書け、お互いの記述の干渉もしないので、良いと思います。
ーコーディング開発環境
鹿野さん : 私はWebStormを使っています。
ーデザイン（Adobe XD, Sketch, Figma）からコーディングのワークフロー
松田さん : どのツールも良いと思います。実際にコードにすることを想定して作成することが大事。また想定できないときは、コーダーに相談すること。渡すまでにコミュニケーションをしっかりと取ることが大切だと思います。
鹿野さん : Avocodeのようなツールを使うとデザイナーとコーダーのコミュニケーションの助けになると思います。
質問内容がスライドに投影されるのでわかりやすいですね！
告知とお知らせ
CSS Nite in Kobeの岡田 陽一さんより、CSS Nite in Kobe, vol.48について告知していただきました。松田さんはこちらでも登壇されるそうで、じゃんけんをして勝った方には懇親会を無料でご招待するプレゼントもありました。
- ・CSS Nite in Kobe, vol.48
9月21日（土）「ウェブサイトの課題発見とアイデア創出の方法を学ぶワークショップ」
http://cssnite-kobe.jp/vol48/ - ・CSS Nite in Okayama, vol.9
10月26日（土）「現場の視点で工夫するウェブ制作」
https://cssnite-okayama.jp/vol9/
こちらは9月26日まで早割があるので、興味のある方はお申し込みください。
懇親会
懇親会は引き続きメビック扇町さんで行いました。美味しそうなオードブルやお菓子がたくさん並んおります！
お酒やソフトドリンクを片手に、自然と輪ができて初対面の方でも、皆さま楽しそうに談笑されていました。また、登壇者のお二人を囲んで質問をしたりお話しを聞いている方もいました。セミナー中だと聞きにくいことでも、こうやって質問できるので懇親会はいいですよね！
report by 藤次 夏月（TSUGU）
