令和のワードアートを発表してきた@LINE UIT
UIT meetup vol.7で登壇してきました。
普段はReactやVue, BFFなどのゴリゴリの内容をやっているmeetupだそうです。 ただ、最近堅い内容が続いたので「○○芸人」を集める箸休め的な回をやりたかったそうです。
ということで、SVG芸人を名乗っている私にも声がかかりました。 (自分で言うのもなんですがSVG芸人ってなんなんだ…?)
スライドはこれです。
「ワードアートの歴史」から始まって「ベジェ曲線の手書きの仕方」とか横道にそれつつ、 最後はTシャツという謎終着点に行き着くような内容なので、あんまり真面目に見なくていいです。
話下手なので終始しどろもどろになりながらの発表でしたが、 徹夜で仕込んだ「令和のワードアート」やワードアートエディタがそれなりに受けてくれたようです。
「contenteditable」の単語だけで笑いが取れる場は貴重ですね。 これで笑いが取れるということは、会場にcontenteditableを使ってみて痛い目にあった人がかなりいたということでしょう。
平成のワードアート
そもそもMicrosoft Officeでいう「ワードアート」(デザイン用語としてのワードアートも別に存在するので注意)は25年以上の歴史があるらしく、 Windows 3.1の時代からすでに現在のワードアートの原型ができていたのにかなり驚きました。
スクリーンショットから、現存するワープの多くもすでに実装されていることが伺えます。
※Tech Flashback: Microsoft PowerPoint Version 3.0 (1992) & 4.0a (1994) | Gough's Tech Zone から引用
Windows95以前にパワポプレゼンの概念があった事自体にも、今更ですが結構驚いています。そんな前だとせいぜいOHPぐらいしか想像できません。
令和のワードアート
25年経って、Word上で恐竜が暴れる時代になったことですし、ワードアートも進化したものを作りました。
踊るワードアート
回るワードアート
セレクタブルなワードアート
contenteditableなワードアート
これらはSVGで作られています。SVGに3D表示の機能はないので、s14garnetさんの講座で教わった3D CSS芸もねじ込んであります。
恐ろしいことに、SVGのtextPathやCSS 3D Transformでめちゃくちゃになったものでも、テキスト選択におけるSVGの当たり判定が正確です。 chromeがいかにしっかり作られているかわかります。キャレット表示は流石におかしくなります。
ちなみにcontenteditableでSVGテキスト編集はさすがにネタで、業務では絶対にやらないほうがいいです。
ワードアートエディタの実装
SVGの良さを伝えたいということで、Vueのバインディングを使ってワードアートを編集できるようなものを作りました。
昨日の発表のために作ったワードアートエディタです。
— はしゅろ (@hashedrock) July 25, 2019
SVG + Vue製でフルスクラッチです。なんの役にも立ちませんが、遊んでやってください!https://t.co/r4mA0lkmA7 pic.twitter.com/fmJ9bNc77z
https://hashrock-201907-uit.netlify.com/
※PC Chrome以外では動作確認をしていません。Pointer Eventsとか使ってるので iOS12以下だと確実に動かないと思います。
もともと作成に興味があったSVGのpath要素のエディタをこの機会に作ってしまいました。 車輪の再発明というか再実装が趣味なので、カラーピッカーなどもフルスクラッチで作りました。 依存するライブラリはVue.jsのみです。 これで別に実装量も大したことない、というのがSVGの強みだと思います。
ただ実装はめちゃめちゃ汚いです。すみません。 カラーピッカー以外は一枚のvueファイルにベタ書きです。
本当はイラレのペンツールの機能に相当するものを作りたかったのですが、流石に力量不足だったようで、 今回は制御点4つしか扱うことができません。次の機会にじっくり取り組んでみたいと思います。
また、複雑GUI会でSTUDIOの二人から教わった、不可視の要素で制御点の当たり判定を見た目より広げる技も入れてあります。
質問を受けて思ったこと
SVGの知見を共有できる場というのはそもそもほとんどないためか、いくつか質問を受けました。 ですが自分も知らないことが大半で、うまく答えることはできませんでした。
SVGの少し詳しい話となると、私が思い当たるのがDEFGHIさんのSVGメモか、MDNか、W3C仕様書ですが、ブラウザの挙動が絡む部分に関しては、正直どこを参照すればいいのか自分にも見当が付きません。
わかる範囲ではSVG Wikiに書くようにはしていますが、知識不足もあり難航しています。
パフォーマンスについて
質問時間にSVGのパフォーマンスは遅くないのか、という質問が出ましたが、SVGのパフォーマンスについては正直良く知りません。数千要素なら問題なく動くという程度の認識です。 かなりシビアな使い方をしていると見られる、Cacooのブログで速度に言及があります。
登壇にあたり、せっかくだから普段調べてないような箇所も調べてみようと思い、Chromiumのソースコードを読んでいましたが、SVGに絞って眺めてもまぁ1割も意味がわかりません。
下記はRect要素に絞って描画周りを理解しようとして書いたメモです。
かろうじてわかったのは、ChromiumがやっているのはSVGからパス形状ベースの描画命令への変換のみで、実際の描画(ラスタライズ)はすべてSkiaというマルチプラットフォームの描画ライブラリにぶん投げているらしいということでした。SkiaはAndroidやChrome OSの描画も担当しています。
ということは、描画速度のことを考えるのであれば、Chromeを知るだけでは不十分で、Skiaについても知らなくてはならなそう、という感触でした。 この辺のことはLife of a Pixelという資料を読むのがベストらしいのですが、これ何度読んでも全然頭に入ってきません。つらい。
ブラウザがタイル状にレンダリング結果を持ってるとか、初めて知りました。ブラウザ作るような人たちは本当に頭がいいですね。 また、2018にやってることと2019にやってることが全然違ってもおかしくないです。正確なことを知りたければChromiumのディレクトリドキュメントを見たほうが良さそうです。
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/paint/README.md?dr=CSs&g=0
複数選択について
複数選択が辛いです的な話題をもらったのですが、複数選択を実装したことがなかったので、つらそうですねぐらいしか返答できませんでした。
今回のワードアートエディタでイラレ等のベクターグラフィックスエディタでよくあるUIを実装したことになりますが、本格的に使えるものにはまだほど遠いです。イラレが非常によく出来すぎているために、同等のものを期待されるとつらすぎる…というところがあると思います。
グラフィックエディタのGUI構築は、もうほとんど特殊技能で、高水準なものを顧客が欲しがるとエンジニアが疲弊していくんでしょうね。リターンも大変さに見合っていません。 こういう話、Excelみたいなものを客が欲しがる問題とか、各所にありそうだなと思います。
こういう職人芸的なGUIを実装するときには、もちろんオープンソースのドローエディタを片っ端から眺めに行きます。特にモデル設計をミスると後々まで響きますので、先人の試行錯誤を見ておいたほうがいいのは確かです。
その他
他にもIE / Edgeでのレンダリングがおかしくて~みたいな相談も受けました。 flexbugsみたいな集約された情報源を知っていればよかったのですが、思い当たるものがなく、一般的なバグ切り分けの話をするにとどめました。
SVGを使うのは大好きなんですが、仕様書以外で確実な情報源はどこか、という点で毎回返答に詰まってしまいます。もう少し探せば色々見つかりそうですが、一人だけで調べるのは限界がありますね。 もう少しなんとかしたいところです。
最後に、他の芸人さんの発表も素晴らしかったので、ぜひ見てみてください。