UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. miyoshi さん自己紹介
    00:50
  • 2. GW の自由研究結果について
    01:20
  • 3. 開発の経緯について
    03:25
  • 4. コンポーネント共通化事例
    06:09
  • 5. 実装上の悩みや体験談
    13:50
  • 6. クロージング
    20:20

ep.44『SVGで実現する日本地図マッピングライブラリ』 - LINE のフロントエンドエンジニアの GW

2020/05/26
599 views
Miyoshi Kosuke 緑豆はるさめ

LINE のフロントエンドエンジニア の GW の活動を5日連続で紹介する企画 vol.2。@spring_raining が miyoshi が開発した SVG ベースの日本地図マッピングライブラリ開発について話を聞いてみました。
まとめはこちら: GWを利用した自由研究発表会を開催しました - LINE ENGINEERING

miyoshi

自由研究とその経緯

https://static.line-scdn.net/uit-inside-assets/edge/assets/20200526_001.png

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 と差異が出やすい
    • ある程度デザインで書き出した上で、コード向きに手直していくのが良い
10秒前へ 10秒次へ