Frontend Nagoya #10 に参加してきました
Frontend Nagoya #10 に参加してきました！今回のテーマは「SVG」。応用的な話が多くついていくのが大変でしたが、SVGの可能性について知ることができて参加して良かったなと感じています。
LT一覧
- 「アイコンシステム考え直してみた」 森田かすみ さん
- 「Animating SVG with JavaScript」Brandon Pittman さん
- 「SVG画像 破損事例の解説」T.Motooka さん
- 「SVG Typography ~ 汚し系に挑戦 SVG & Web Audio API」kaave さん
今回は、メインセッションというのはなしで4つのLT、そのあとはもくもく会＆発表したいことを思いついたら誰かが突然発表しだす！という内容でした。しかし、LTと言いつつライトニングトークでなくても良いそうで、ロングトークでもOKだったので ^^; 、結構みなさんしっかりとした話題を持ってきてくださいました。
それでは、以下話のまとめと感想です。
アイコンシステム考え直してみた
アイコンフォントはあんまり良くないという噂があるそうです。その理由は、
- 気をぬくとTofuになってる...。XDファイルもフォントが入っていないとTofuになる。
- 別ファイルが必要なところが煩わしい。
- 単色しか使えない。
- CSSでの配置指定が面倒（line-height とか vertical-align とか）
- icoMooonなどで生成する必要がある（svgなどをicoMooonなどにインポートしてアイコンフォント生成する）
反対にメリットもあります。その一つとして、"IE6にも対応している！" しかしIE6ではなく、IE11またはIE9くらいまでの対応で良いのではないかと言われているのでそこまでのメリットではないです。
そこで出てくるのが "SVGアイコン" 。SVGアイコンはIE9まで対応しているようです。 話の中で、phpのインクルードでsvgのサイズ指定する話が出てきたのですが、phpをあまり使ったことがないのであまりピンときませんでしたが、a-blog cmsだと@includeで変数として svgの大きさを渡すということに当てはまるようです。
次に、アクセシビリティ対応について。アクセシビリティ対応するなら svg要素の中に title要素や desc要素や role属性、aria-labelledbyプロパティをつける必要があるようです（参考URL：http://blog.e-riverstyle.com/2014/12/svg.html ）。しかし、title要素にidをする時に「idが被ってしまうかもしれない！」という問題が発生します。もしidが被ってしまうとsvgが表示されなくなってしまうこともあるようです。それを解決するために、id名の前に接頭辞（プレフィックス）をつけるなどの工夫も必要なようです。
SVG Typography ~ 汚し系に挑戦 SVG & Web Audio API
kaaveさんによるLT。このセッションでは「SVGでそんなこともできるんだ」とワクワクするような内容でした。LTのスライド情報や今回のイベント用に作成されたSVGで作成した汚し系テキスト画像へのリンクなども公開されていました！
→ SVG Typography ~ 汚し系に挑戦 | SVG & Web Audio API
上記URL先をみるならIE以外がおすすめです。IEだとWeb Audio対応がされていないようなので...。
SVG画像 破損事例の解説
T.MotookaさんのLTです。safariで発生したSVGの破損事例の紹介と、それをどう発見したのか、最後にトラブルから遠ざかる方法についてお話いただきました。スライド情報を公開されていましたのでURLを載せておきます！
SVGが破損している原因を調べるために、「二分探索」という手法を使ったそうです。これは普段のJavaScriptのデバッグにも活かせるものででした。
例えば、もしJSが動かなくなってしまった時は問題になりそうな怪しいソースコードを半分コメントアウトして動かし、その状態で動くのであれば問題のソースコードはもう半分のソースにあると分かる。そして問題のソースコードがあるとわかった方をさらに2分して絞り込んでいくというやり方です。（この方法が適しているかはJSの内容にもよります...）
また、SVG-Editというツールの紹介もしていただきました。昔からあるWeb上でSVG画像を編集できるツールです。SVG画像編集ツールについて調べてみるとSVG-Edit以外にもWeb上でSVG画像を編集できるツールがいくつかあったので自分にあったツールを探してみようと思っていますが、本岡さんのLT最後「トラブルから遠ざかる方法」では、"SVGのマイナーな機能は怖い"というお言葉があったのでツールを使ったり、SVGを書いたりする時はしっかり信頼性やブラウザ動作などを確認したほうが良さそうです。
スライドにはないのですが、SVGのmarker-start, marker-end（矢印書くやつ）は、Window7のIE11だけクラッシュするらしいので要注意だそうです...
Animating SVG with JavaScript
Brandon PittmanさんによるLT。BrandonさんすごいホラーなTシャツきているなぁと思っていたら、full stack radioというところのTシャツでした。
Full Stack Radio T-Shirt
最近読んでいる本の紹介もされていました。特に気になった本はこちら。
英語なので気が向いたら読むことにします。
SVG画像をスムーズに切り替えるためのライブラリ紹介もされていました。
また、「svgの編集するならFigmaが描きやすい！」という話も聞けました。
もくもく会中の小話
LT発表後はもくもく会。もくもくしながらも共有したいことがあれば発表しちゃうという時間でした。その中ででた話の中に「grid-template で class名を設定すると直感的にわかりやすくなるのでは？」という話が出ました。私はまだ CSS Grid Layout の動作がブラウザによって安定しないとかいう噂を耳にするのであまり手を出せていませんが、この話は頭の片隅に置いて置こうと思います。
