LINE DEVELOPER DAY 2019に参加してきたまとめ

# はじめに
[LINE DEVELOPER DAY 2019](https://linedevday.linecorp.com/jp/2019/)の参加レポートについてまとめます。
今回わたしは**フロントエンド**に関するセッションを中心に聴いてきました。

---

# 聴いてきたセッション
- **[What’s New in LINE Front-end Framework](https://speakerdeck.com/line_devday2019/whats-new-in-line-front-end-framework)**
- **[LINEのデザインシステム：一貫性を損なうことなくLINEのサービスの速度を上げる](https://speakerdeck.com/line_devday2019/line-design-system-making-line-product-faster-without-losing-consistency)**
- **[デザインシステムにおけるフロントエンド](https://speakerdeck.com/line_devday2019/front-end-in-design-systems)**
- [つながろういつでも、何とでも。LINE Thingsからはじまるモノと人との新しいコミュニケーション](https://speakerdeck.com/line_devday2019/evolution-of-line-things-and-inside-of-released-products)
- [顔認証受付の仕組み](https://speakerdeck.com/line_devday2019/face-recognition-check-in-mechanism)

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

---

# 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での非公式の実装方法もある](https://qiita.com/ufoo68/items/3e6ff0613ebd87a8edd9)）

---

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

- scanQR
- shareTargetPicker
- login

---

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

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

---

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

---

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

```javascript
liff.login()
```

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

```javascript
liff.isLoggedIn()
```

---

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

---

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

---

## LINEにおけるDesign System
注目したtopicは以下

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

---

## ６つの原則
1. 私達はユーザーではない 
2. 優先順位を明確化する
3. チャットファーストである
4. 信頼性のあるデザイン
5. 継続的な経験
6. 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があったがここでは省略。詳しい内容は公式の資料を参考にするほうがいいかも。また、他の人の[まとめ記事](https://dev.classmethod.jp/etc/line-design-system-report/)もあったのでそちらも参考に。

---

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

---

## このセッションについて
**[UIT（User Interface + Technology）](https://uit.connpass.com/)**についての紹介と、**koromo**というCSSツールキットについての話がメインだった。
今回注目したtopicsは以下のもの

- LINEが用いているCSSやJS
- koromo

---

## LINEのフロントエンド開発（CSS）
![無題の図形描画.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209689/39b010c7-680d-0d50-f47b-928bf1e9e6ae.png)

---

## LINEのフロントエンド開発（JS）
![無題の図形描画 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/209689/5e6525df-8916-dbc8-9826-b248cbd4cf91.png)

---

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

---

## Pros and Cons
- Pros
  - 開発・デザイン・実装にかかる時間を短縮できた
- Cons
  - デザインガイドラインが存在しない
  
LINE Design Systemとの組み合わせを今後は行っていくとのこと

---

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

---

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