2020/05/26 に公開1191 views
LINE のフロントエンドエンジニア の GW の活動を5日連続で紹介する企画 vol.2。@spring_raining が miyoshi が開発した SVG ベースの日本地図マッピングライブラリ開発について話を聞いてみました。
まとめはこちら: GWを利用した自由研究発表会を開催しました - LINE ENGINEERING
miyoshi
- Front-End Dev 1 チーム
- LINE NEWS のフロントエンド開発
- UIT INSIDE ep.3 に出演
自由研究とその経緯
COVID-19 のための開発の副産物として、SVG の日本地図に対してマッピングを行うことができる汎用の Vue Component を開発した。
- もともと LINE NEWS で COVID-19 関連の情報提供のために開発を進めた
- 実際に開発を行うことはなかったが、折角なので資産として開発することとした
- 外部のライブラリでは要件を満たしづらかった
- 描画が重い
- デザインの自由度が低い
- 地図データ自体の著作権の取り扱いがシビア
LINE における汎用コンポーネント開発の文化
- LINE NEWS では以前でもチャート描画を自作した
- 6 角形のチャート描画の SVG コンポーネント
- LINE NEWS では J リーグでの選手データの表示で活用
- 1 から SVG を描画するのはコストが高いが、フレームワークのコンポーネントにしておくと再利用しやすい
- 汎用化できそうなものは汎用化しておく
SVG と canvas の使い分けについて
- SVG の利点
- SVG 自体は初期描画を DOM として定義できるため、データを受け取る前の状態を表現できる
- SVG は XML ベースであり、フロントエンドエンジニアにとっては canvas より扱いやすい
- 変形・アニメーション観点での取り扱いやすい
- CSS などブラウザ向けの知識をそのまま利用できる
コンポーネント作成におけるハマりどころ
- SVG の頂点データと実装の齟齬
- 細かい部分ではデザイン SVG と差異が出やすい
- ある程度デザインで書き出した上で、コード向きに手直していくのが良い