まとめはこちら: GWを利用した自由研究発表会を開催しました - LINE ENGINEERING

miyoshi

• Front-End Dev 1 チーム
• LINE NEWS のフロントエンド開発
• UIT INSIDE ep.3 に出演
  • https://uit-inside.linecorp.com/episode/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 と差異が出やすい
  • ある程度デザインで書き出した上で、コード向きに手直していくのが良い

Refs

• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic