Help us understand the problem. What is going on with this article?

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

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

by ufoo68
1 / 29

はじめに

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あり)。
それに応じてか以下の2つの変化があった。

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

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

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

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

6つの原則

  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 whiteLINE Gray 900にPrimryText`という共通のラベルを貼って、Light mode・Dark modeに適用させる、などといったことを行う。


その他

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


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


このセッションについて

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

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

LINEのフロントエンド開発(CSS)

無題の図形描画.png


LINEのフロントエンド開発(JS)

無題の図形描画 (1).png


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についてはそこそこ大きなシフトがあったので、今後も注目していきたいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away