はじめに
LINE DEVELOPER DAY 2019の参加レポートについてまとめます。
今回わたしはフロントエンドに関するセッションを中心に聴いてきました。
聴いてきたセッション
- What’s New in LINE Front-end Framework
- LINEのデザインシステム：一貫性を損なうことなくLINEのサービスの速度を上げる
- デザインシステムにおけるフロントエンド
- つながろういつでも、何とでも。LINE Thingsからはじまるモノと人との新しいコミュニケーション
- 顔認証受付の仕組み
今日話ししたいのは太字で書いたやつ
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についてはそこそこ大きなシフトがあったので、今後も注目していきたいです。