40代からのフロントエンドエンジニアリング。

フロントエンドを中心に、Web関連話をゆるく書いていきます。

CSS Nite in Osaka, vol.52 に参加しました。

CSS Nite in Osaka, vol.52

9月7日に扇町の関西テレビ(関テレ扇町スクエア)内にあるメビック扇町で開催された「CSS Nite in Osaka, vol.52」に参加いたしました。

CSSとSVGについてのセッションがメインでしたが、業務および個人のサイトでフロントエンドを扱っている身としてはとても役に立つ技術情報や知見が得られました。

以下、いつものようにざっくりではありますがレポートです。

ちなみにCSS Nite in Osaka公式のレポートはこちらにあります。

セッション開始まで

天神橋筋でまぜそばを食べて、12時過ぎに会場へ。はじめての関テレ。

12時半にスタート。まず概要説明の後にジャンケン大会……ただ、池田さん＆鹿野さんの本は既に持っていたので参加資格なしでした(；´∀｀)

現場で働くコーダーのためのCSS Grid + モダンコーディング

鹿野 壮さん(株式会社ICS)

最初のセッションはICSの鹿野さん。実は2月のCSS Nite in Osaka, vol.49でICSの池田さんが大阪に来られた際、懇親会で「(同じICSの)鹿野さんにも来て欲しい！」という声が何名かの方からありましたが、半年経ち実現しました。ということで私も楽しみにしていたセッションです。

1. CSS Gridとボックスレイアウト

最初はCSSによるレイアウト方法の歴史について。float → Flexbox → CSS Gridと移り変わってきたわけですが使い分けることが大事。

  • float → テキストの回り込み
  • Flexbox → 1行の横並び、縦並び
  • CSS Grid → 格子状のレイアウト、ページ全体のレイアウト

そして、実際にライブコーディングを行いながらCSS Gridの実装方法の説明。私もCSS Gridは実際に業務へ取り入れていますがgrid-templateプロパティでエリアに名前をつけてgrid-areaプロパティで配置する手法は初めて知りました。

うにちゃんかわいい。

あとはgapプロパティやrepeat()メソッド、そしてみんな大好きIE11の対応方法。IE11対応は以前このブログでも書いたように読み替えがめっちゃ面倒くさいのですが、最近はAutoprefixerも対応したり、Autoprefixer CSS onlineですぐに変換内容を確認できたりと対応するための補助ツールが充実してきたので少しは楽にできるようになった……はず。

2. 抑えておきたいCSSの新機能

後半はCSSの新機能について。ざっくり箇条書きで。

最近のモダンブラウザーで使える新機能

  • CSS変数
  • object-fitプロパティ
  • SVG要素をCSS Trsnsformで変形する
  • 画像にマスクをかけるmaskプロパティ
  • 一つのフォントファイルが複数のフォントの見栄えを設定可能な「variable font」

近い将来使えるようになるCSSの機能

  • 円錐状のグラデーション「Conical Gradients」
  • OSのダークモードを判別できる「prefers-color-scheme」
  • OSのアニメーションがOFFかを判別する「preferd-reduce-motion」
  • display: contents

こうして列挙するとCSSだけでもさらにいろいろなことができるようになってくるんだなぁと実感。 また、関連するトピックスで興味深いものが2つ。

  • Can I Useのcompare browsers機能でブラウザで対応している機能の比較ができる
  • EdgeはChromiumベースになりますが、そのためかバージョン18の次が76

3. 情報のキャッチアップ方法

どうやって最新情報をキャッチアップするか。鹿野さんは各ブラウザベンダーのサイトでPlatform Statusを追ったりβ版をダウンロードして試すこと、またCan I Useで対応状況をキャッチアップすることを挙げられていました。

まとめ

  • CSSは新しい機能が増えてきている
  • これまでの開発のスピードを上昇させ、楽にしてくれる
  • 積極的に取り入れ、作業時間を減らし、コンテンツのブラッシュアップに時間をかけよう
  • 当たり前だと思っていた手法を見直してより良いウェブ開発をしていこう

所感

私自身も業務を中心にCSSを扱うことが多いだけに非常に興味深い内容であり、またとても参考になりました。その一方で、今回の内容の3分の1くらいは初めて知った情報だっただけにまだまだ自分の技術知識が時代の流れに追いついていないことを痛感しました。 今回得た技術や知見をとう使っていくか、そして周りへどう伝えていくか、じっくり考えていきたいと思います。

デザイナーのためのSVG基礎+アニメーション

松田 直樹さん(株式会社まぼろし)

セッション2つ目は株式会社まぼろしの松田さん。SVGについての基礎とアニメーションについてのセッションでした。「デザイナーのための」とありますがフロントエンドエンジニアとしても参考になるものでした。

プロローグ

SVG1.0が勧告されたのが2001年ということでもう18年も経つのですね……時が経つのは早い。

こんなところにSVG

最初はSVGが使われるシーンについて。やはり多いのはロゴ、アイコン。松田さんが(ロゴ、アイコンにSVGを)使っている人を参加者に聞いたところ8割の方が挙手されていました。しかしながら自動車業界は少ない……どうもメタリックなデザインにはSVGは不向きのようです。

また、SVGはコードとして読めるものなのでコピーガードができないという弱点も……私もこのため泣く泣くSVG使用を諦めることがあります。

最近はSVGアニメーションを使っているサイトも。特にグラフを使ったデータビジュアライゼーションとの相性は良いとのこと。

SVGの特徴をおさらい〜SVGのメリット(どう便利なのか)

次にSVGの特徴としてXML文書である点などの紹介があり、そのあとこれらの特徴から得られるメリットの説明がありました。

  • XML文書である→画像であり文書である
    • すべてが要素(DOM)であり、CSSやWebフォントも適用可能。
    • 文字情報を内包することができ、画像の中身をアクセシブルにできる
  • モジュールを定義できる(再利用性)
    • defs/symbol要素で定義、use要素で再利用
    • 同じ文書内でも外部のSVGも参照可能
    • SVG Sprites(svgstore)
  • 多彩なアニメーション方法(SMIL/CSS animation/各種ライブラリ)
  • filter効果

viewBox(これだけは理解しておきたい)

そのあとSVGの見える範囲を提供する「viewBox」の説明。イラレで言う「アートボード」のようなものという説明でしっくり来た人も来ない人も。

正直SVGで一番難解なところで、松田さんも説明に苦心されていた感が(；^ω^)

JavaScriptライブラリ

TweenMaxがおすすめとのこと。タイムライン機能が強力でDOM操作がしやすく、非エンジニアでも何とかなるそうです。

greensock.com

まとめ

その後にSVGならではのことの復習とまとめ。

ややこしかったですか？ → 大丈夫、みんななんとなくで使っています

……いいのかそれで(；´∀｀)

所感

普段SVGは外部ファイルで画像として読み込んで終了ということが多いのですが、今回のセッションで奥の深さを感じることができました。積極的に活かしていきたいですね。ただ、viewBoxを初心者に理解してもらうのはちょいハードルが高いかも。

パネルディスカッション

鹿野さん、松田さん、そして司会進行の松下さんによるパネルディスカッション。参加者から寄せられた質問に答えつつ進んでいきました。ここでは印象に残ったものを2つピックアップ。

「モダンコーディング」とは

鹿野さん

  • コードの短さで表される。CSS Gridだとこれまで多くの行数が必要だったものが簡単になる
  • (効率よくコーディングして)早く帰ってビール飲んでつけ麺食べましょう

松田さん

  • 視認性(人に見せた時のわかりやすさ)
  • 人とやる時に触るのでその時にやりやすくなる

所感

  • 確かにモダンコーディングを行うことによって効率よく、わかりやすく、短くなるということは事実。私も積極的に取り入れて早く帰ってまぜそば食べたい。

IE/Android 4/iOS 10.2の対応はどうする？

鹿野さん

  • CSS Gridは何とかなる
  • 後半に話した新機能について
    • 「Progressive Enhancement」という考え方
    • サイトの目的は情報を伝えること。ブラウザによって情報の欠落がない範囲で対応方法を変えていく。
    • (対応するかどうかは)クライアントとのコミュニケーション
    • 工数が跳ね上がるのであれば対応範囲を絞るなどする
    • IE11対応は腕の見せ所

松田さん

  • 基本的には非対応、どうしてもという場合別料金

所感

対応するか否か意見が分かれるところですが、(どうしても対応せざるを得ないのであれば)情報の欠落がない範囲で対応方法を変えるというところが妥当でしょうね。鹿野さんの「IE11対応は腕の見せ所」は金言。

本音は対応したくないのですが。

ということで本編終了。そのまま同会場で懇親会へ。

懇親会では鹿野さん、松田さんや参加者の方々といろいろな話で盛り上がりました( ´∇｀)

そして2次会はたこ焼き＆鉄板焼き。22時過ぎに解散となりました。

まとめ

今回のセミナーの内容は自分の業務/個人でのWeb開発/制作を行っていく上でとても参考になりました。パネルディスカッションにあったようにCSS、SVGのどちらも活用していくことで効率を上げることが期待できますし、自分で活用していくのみならず職場のメンバーに共有してチーム全体の効率アップができるようにしていきたいです。

鹿野さん、松田さん、そして参加者とスタッフの皆さん、ありがとうございました＆お疲れ様でした！

ざっくりと最初に書きましたがかなり長くなってしまいました(；^ω^)