はじめに

LINE DEVELOPER DAY 2019の参加レポートについてまとめます。
今回わたしはフロントエンドに関するセッションを中心に聴いてきました。

聴いてきたセッション

今日話ししたいのは太字で書いたやつ

What’s New in LINE Front-end Framework

このセッションについて

このセッションではLIFF v2の新機能について紹介された。私が注目したtopicsは以下

外部ブラウザのサポート
TypeScript用のSDKの公開
追加API

そもそもLIFFとは？

LINE Front-end Frameworkのこと。端的に言うとLINEアプリ上で表示されるWebView（ブラウザ的なやつ）にHTMLやらCSSやらJavaScriptで自由にウェブアプリケーションが作れる仕組みのこと。
LIFF独自のAPI（メッセージ送信やLINE Things）を使うことができる。

外部ブラウザのサポート

LIFFは今までLINEアプリ上でしか動作させることができなかった。しかしこのv2からChromeとかで動かせるようになった（一部使えないAPIあり）。
それに応じてか以下の２つの変化があった。

liff.init()という初期化宣言でLIFF_IDの指定が必要になった
今後はMessagingAPIではなく、LINEログインのみのサポートにシフトする予定

MessagingAPIのサポートをしなくなる

MessagingAPIとは端的に言うとLINE botの開発をするためのプラットフォーム。元々LIFFはLINE botを補助するアプリケーションという立ち位置の存在であったが、外部ブラウザのサポートを行うような動きから、今後はLINEログイン機能を備えた１つの独立したウェブアプリケーションという立ち位置に変化させようとしているのかもしれない（多分）。
とはいえ、まだMessagingAPIでもLIFFは使える。公式は非推奨と言ってはいるが。。

TypeScript用のSDKの公開

LIFF v1では、htmlのファイル内に、タグ（<script></script>のやつ）を書き込む必要があった。その際、window.liffという型定義がないのでTypeScriptでの開発は難しかった。
どうやら今後、v2からは公式から型定義とかのnpmパッケージを配布してTypeScriptでの開発をサポートしてくれるようになるらしい。（実は、独自で見つけたTypeScriptでの非公式の実装方法もある）

追加API

メインで取り上げられてたのは以下

scanQR
shareTargetPicker
login

scanQR

以下のAPIを書くだけで、QRカメラを呼び出すことができる。

liff.scanCode()
  .then(result => result.value)
  .catch(() => alert('cannot read QR'))

shareTargetPicker

今後公開される予定のAPI。このAPIを使うことで、特定のユーザー・グループへのメッセージ送信がLIFFでもできるようになるらしい。

login

LINEのログイン機能を使うことができる。ログイン画面は以下の一行で呼び出し可能

liff.login()

ログイン状態は以下の一行で可能

liff.isLoggedIn()

LINEのデザインシステム：一貫性を損なうことなくLINEのサービスの速度を上げる

このセッションについて

LINE Design Systemを用いた効率的なUI/UXデザインの開発方法についての話。
Design Systemとは、ただのスタイルガイドラインではなく、会社として保持するデザインの考え方から実装コードに落とし込まれたUIコンポーネントまで、広い範囲をさす言葉。

LINEにおけるDesign System

注目したtopicは以下

６つの原則
ラベルを統一したカラーライブラリ

６つの原則

私達はユーザーではない
優先順位を明確化する
チャットファーストである
信頼性のあるデザイン
継続的な経験
Respect for Legacy

ラベルを統一したカラーライブラリ

かつてLINE社内には500以上の種類のカラーが存在していた。そのせいで、色の統一性がなかったり、デザイン時での繰り返しの作業があったりなどの問題が生じていた。
そこでColor Variablesを使い、色を統一させることで30種類にバリエーションを縮小させた。

Color Variables

色の指定にrow colorではなくLINEが用意したVariablesを使わせることで、デザインと開発の効率を上げた。例えば以下のWhite(#FFFFFF)はLINE Whiteを使わせる。

UIcolor(argb: 0xFFFFFFFF) // not use
UIColor.lineWhite // use this

Semantic Colors

Dark modeへの対応のためにColor Variablesから新たに拡張させた要素。各モードのために2種類の色に同じ意味をもたせる。例えばLINE whiteとLINE Gray 900にPrimryText`という共通のラベルを貼って、Light mode・Dark modeに適用させる、などといったことを行う。

その他

他にも色んなtopicがあったがここでは省略。詳しい内容は公式の資料を参考にするほうがいいかも。また、他の人のまとめ記事もあったのでそちらも参考に。

デザインシステムにおけるフロントエンド

このセッションについて

UIT（User Interface + Technology）についての紹介と、koromoというCSSツールキットについての話がメインだった。
今回注目したtopicsは以下のもの

LINEが用いているCSSやJS
koromo

LINEのフロントエンド開発（CSS）

LINEのフロントエンド開発（JS）

koromoとは

Bootstrap 4をベースとしたCSSツールキット。また、vue componentのためのkoromo-vueというものも存在する。koromoの使用例としてはLINE official account managerがある。
ちなみに社内用のツールなので検索しても出てこない。

Pros and Cons

Pros
- 開発・デザイン・実装にかかる時間を短縮できた
Cons
- デザインガイドラインが存在しない

LINE Design Systemとの組み合わせを今後は行っていくとのこと

WebComponentsの使用

今後はkoromoをReactなどの他のコンポーネントでも使えるようにすることが目的。しかしその際に各ライブラリに合わせていると互換性がなくなりメンテナンスにもコストがかかることから、WebComponentsの技術を用いたkoromo-elementを進めている。また、LIFF UIと呼ばれるkoromo-elementをベースとしたUIライブラリが今後LIFF用に公開されるとのこと（という話だった気がする）。

さいごに

今回は主に、デザインに関する開発について多くのことが学べたと思います。共通化されたコンポーネントがあると我々開発側もUIの実装などがより楽に進められると思いました。
またLIFFについてはそこそこ大きなシフトがあったので、今後も注目していきたいです。