Web ViewでLINE Botの表現をよりリッチに　フロントエンドフレームワーク「LIFF」でできること

UIT室とは何か？

清水大輔氏（以下、清水）：初めまして、LINE株式会社の清水といいます。今日は「LINEでWeb Appという可能性」というタイトルで、LIFFについて話をさせていただきます。

まず簡単に、自己紹介をさせてください。東京のオフィスのUIT室に所属して、LIFFのPMとして開発を行っています。

「UIT」と聞いて、おそらくほとんどの人が何の部署なのかわからないと思います。実は社内でも伝わらないことが未だにあります。何の略かと言いますと、「User Interface Technology」の略です。

主にWebの技術、JavaScript、HTMLやCSSを使って、LINEのフロントエンドの開発をしている組織になります。今回のLIFFに関しては、Webの技術をベースに開発しているフレームワークです。

もう1つ、チームの宣伝をさせてください。東京オフィスの話になってしまうんですが、最近「UITミートアップ」というものを開催しています。これは弊社のLIFFであったり、ほかのフロントエンドの技術の紹介というよりは、フロントエンドの一般的な技術。例えば最近だと、BFF。Backend for Frontendの話であるとか、Vue.jsやNuxt.jsの勉強会などを、だいたい2ヶ月に1回くらい行っています。

LINE福岡にもUITの組織はあるので、今後福岡でもこういったミートアップをできればいいかなと考えています。

LIFFの概要

では、本題です。既に何度か話は出てきていますが、LIFFは「LINE Front-end Framework」の略です。

中嶋から既に、粗大ゴミBOTでのLIFFの活用事例や概要は紹介されていますが、私のセッションではよりエンジニア向けに、技術的に突っ込んだ内容の話をしていきたいと思います。

ちなみに、この中でLIFFを使ってなにかしらアプリケーションを作成した経験があるという方、いらっしゃいますか。

（会場挙手）

お、ありがとうございます。あまりいらっしゃらないようですね。LIFFのアプリケーションを作るのは非常に簡単なので、ぜひ試していただければと思います。

LIFFについて。先ほども言いましたが、WebViewをベースとして開発されている、LINEにインテグレーションされたフレームワークになります。

LIFFを構成する要素としては、大きく分けて3つに分かれます。

まずは繰り返しになりますが、WebViewの上で開発できて、それに加えてJavaScript SDKを提供しています。

3つ目が、u2u（User to User）メッセージのAPIを提供しているというところです。「with CORS」とありますが、これは「Cross-Origin Resource Sharing」だったかな。通常、異なるドメイン間でJavaScriptとかAPIを叩く場合は、クロスオリジンで弾かれてしまうんですけれども。そのあたりを解決するための手法も入っています。

SDK・WebViewの実装について

1つずつ、もう少し細かく見ていきたいと思います。

まずSDK・WebViewの実装に関してなんですが。これはWebViewの開発をされた方であればよくご存知だと思いますが、iOSではWKWebViewというものが、iOS9.0以上で使われています。Androidに関してはChromiumですね。

そのWebViewの中でLIFFが提供するものとしては、LINEのネイティブのAPIと、RESTのAPIを提供します。ネイティブのAPIと言っているのは、iOS/Androidのネイティブな機能を、直接JavaScriptから叩くためのAPIです。REST APIは説明不要かもしれませんが、サーバーサイドのAPIですね。

JavaScript SDKは、よくあるSDKと同じですが、scriptタグで読み込んで使うことができます。

続いて、View Typeというものがあります。WebViewのサイズが異なるタイプを、LIFFではいくつか提供しています。粗大ゴミBOTに関しては、トークルームのだいたい1/3くらいの高さのWebViewが表示されています。チャット画面が後ろに見えて、チャットとよりインテグレートさせた感じで見せるようなView Typeになっています。

あとはもう少し高さが変わって、だいたい80パーセントくらいの高さになるView Typeもあって、そちらはより情報量を多く見せたい……「フォームの入力項目が多い」とか、「出したい情報が多い」といった場合には、そちらを使ってもらったほうが良いです。

あとはフルタイプというものがあって、フルスクリーンで出るタイプのものがあります。先ほどのトールタイプはチャットの中で使うものなんですが、例えばスタンダードオンでなにか使いたいときは、フルタイプが適しているのかな、というところです。

最後に、これは最近入った機能で、すごく細かい機能なんですけれども、実はけっこう要望があったというものです。通常、WebViewの中でWeb開発するときって、aタグで新しいタブであったり新しいウィンドウを開くときに、target=”_blank”っていう指定をすると思うんですけれども。これがLINEの8.13からサポートするようになって、LIFFの中から外部サイトを開きたい場合は、こちらを使うことができるようになりました。

認証と認可について

次に、認証・認可に関してです。認証・認可の実装に関しては、OpenID Connectの使用にほぼ準拠したかたちで作られています。下に、コードのスニペットがあります。

先ほど紹介したLIFFのSDKを組み込んでいただいて、「LIFF.init」とすることで、認証周りのことはすべてSDK内で行われて、それが成功するとユーザーIDであったり、ユーザーのプロフィール情報が取得できるようなかたちになっています。

次に、u2uMessaging APIです。

BotのMessaging APIはLINEでも数年前から提供していますが、ユーザーからユーザーに送るメッセージングのAPIというのは、実はLIFFを提供してから始めた機能です。

これが提供されることで、粗大ゴミBotのようなアプリケーションが作成可能になって、誰か友達と話すときに、LIFFで入力を補助するようなもの。このあとデモでもやるんですけれども、テキストとは違うコンテンツを送りたいといった場合に、LIFFでUIを見せて送ることが可能になります。

実際に使われているケースとしては、テレビCMでもされているのでご存知の方、いるかもしれないんですが。「QUICK GAME」と「tenor」というGIFを送るサービスですね。

「QUICK GAME」はHTML5ゲームをLIFF上で可能にしたもので、「tenor」に関してはトークの中でユーザー同士でGIFのアニメーションを送り合うことができるものです。

フロントエンドエンジニアでもサーバレスで開発可能

最後にTipsですが、LIFFはチャンネルに対して今まで10個しか作れなかったんですが、やはり「もっと作りたい」というケースがあって、30個作れるようになっています。あとLIFFの中でノードできるスキーマに関しては、httpsに限定されています。httpは開くことができません。

次に、外部からなにかLIFFアプリケーションに対して動的に情報を与えたいケースもあると思うんですが、その場合はパスを使うことはできない仕様になっていて、代わりにクエリストリングを使ってください。

最後に、LINEはポートレートモードとランドスケープモードの両方に対応しているんですが、LIFFも同様にランドスケープモードも考慮してあげる必要があります。

まとめです。

LINE上で、Webアプリケーションを簡単に作ることができます。デモはお見せできなかったんですが、CORSに対応していることで、サーバーレスで簡単に開発することができます。フロントエンドエンジニアが「サーバーないけどどうしよう」という場合でも、JavaScriptやHTML、CSSを書くだけで、簡単なものであればLIFFアプリケーションは作ることができます。

あとはフレックスメッセージなども送ることができるので、こういったものと組み合わせることで、粗大ゴミBOTのように表現力豊かなものが提供できます。

今後もいろんなAPIを提供していくことを計画していますので、ぜひ楽しみにしていただければな、と思います。

最後にデベロッパーサイトのリンクであったり、GitHubのリンクです。興味ある方はこちら、見てみてください。本日はありがとうございました。

（会場拍手）

Flex Messageとクイックリプライは何がすごいのか

小野侑一氏（以下、小野）：LINEの小野と申します。よろしくお願いします。

LINEの東京のオフィスでBot API関連の機能を開発している者です。今日は、福岡市粗大ごみ受付Botでも使われているFlex Messageとクイックリプライについてご紹介させていただきます。時間もかなり短いので、さわりだけになってしまいますが、何かあればこのあと懇親会で聞いていただければと思います。

ご存知の方もいるかもしれませんが、もともとBotのAPIではTemplate Messageというものを提供していました。

これは今表示されている4パターンを使って、少しリッチな、普通のメッセージとは違うテキストだけではないコンテンツを送れるというものです。

ただ、文字数制限が存在したり、レイアウトも全然変更できなかったりと、かなり制限が厳しかったです。

言い訳させていただくと、LINEを使っている方でもかなり古いバージョンを使っていたり、いろいろな方がいますので、あらゆるLINEのバージョンで正しく表示させるためには、制限を厳しくせざるを得なかったという背景があります。

あと、これは完全に内部的な事情なんですが、デスクトップ版というものが比較的使われていまして、パソコンでは表示できないとかそういう制限がありました。

そういった課題を一気に解決してしまおうということで、去年から始まったプロジェクトとしてFlex Messageがスタートしまして、今年の6月にリリースすることができました。

Flex Messageの特徴

どういうものかといいますと、これを見ていただくと一目瞭然なんですが、いろいろなフォーマットでメッセージを自由に送ることができます。

ここに表示させているものはあくまで一例で、この画像の場所や文字の配列も自分で自由に変えることができます。

特徴としては、テキストや画像、ボタンを自由に配置したLINEのメッセージをつくることができます。

レイアウトはJSONで記述します。そしてJSONで記述したものをそのままAPIを使って送信することができます。

あとで少しお見せしますが、シミュレータも提供していますので、JSONを書いてそれをシミュレータにぶち込むと、どんな感じのメッセージになるのか表示させることができます。

そしてデスクトップ版もサポートしています。

開発の流れ

すごくざっくりですが、どのように開発していくのか流れをお見せしたいと思います。

まずこれがHello, Worldで、もっともなシンプルなFlex Messageになります。

上からバブルという一番大きな構造があって、そのなかにボディがあり、そのなかにレイアウトするためのボックスを配置して、そのなかにテキストというコンポーネントを入れています。これがもっとも単純なかたちになります。

デベロッパーサイトにFlex Simulatorというものを提供しておりまして、ここにJSONを入れていただくと、実際のユーザーに表示される状態のメッセージをこのように見ることができます。

ここで書いたJSONをどうやって送信するかというと、LINE Bot APIのプッシュやリプライという送信APIがありますので、そのなかにメッセージの1つとして送ることができます。

ここでハイライトしている部分が先ほどシミュレータにぶち込んだJSONになっています。これを送ると実際にこの右に表示されているように、クライアント上で先ほどシミュレータで見たものと同じものが表示されているのがわかると思います。

Flex Messageの構成

ここからFlexのおおまかな構成について紹介したいんですけれども、2つタイプがあります。バブルというものと、バブルが横に繋がっていて、スワイプしていろいろ見られるようなカルーセルという2つのコンテナを提供しています。

さらにそのバブルのなかでもブロックがあり、4つのブロックに分かれていて、ヘッダー、ヒーロー、ボディ、フッターと分かれています。

なぜ分かれているかというと、それぞれデザインのマージンや幅が最適になるように調整されていますので、何も考えずにこのブロックにテキストやイメージを入れていただくと、いい感じにデザインされたメッセージがつくれるようになっています。

このなかで使えるコンポーネントなんですが、ボタンやテキストの画像とか、あとはボーダーなど、いろいろなものがあります。

これを組み合わせてメッセージをつくっていただくことができます。

かなり細かい話なので少し割愛しますが、ボックスレイアウトシステムというものを採用していまして、ボックスのなかで縦とか横とかにコンポーネントを配置して、それを入れ子状にしていくことによって、自由なレイアウトをつくることができます。

Flexプロパティはボックスのなかで一つひとつの要素をどのぐらいの大きさで表示するか、みたいな設定になっています。

このあたりはかなり細かな話になるので割愛します。

LINE以外の応用事例として、ペコッターのLINE Botというものがあります。

こんな感じでFlexの機能を使って、独自のカレンダーっぽいメッセージをつくっています。こういったこともできます。

ですが、Flexはかなり仕様が複雑なので、まずはサンプルですね。シミュレータのサンプルのメッセージから新しいFlexをつくることができますので、ここで自分がつくりたいメッセージに近いものを選んでいただいて、そこから少しずつ拡張していくというのをおすすめします。

実際にBotを開発される場合は、LINEから提供しているOfficial SDKがありまして、それを使われている方が多いと思うんですけれども、今こちらに書いているJava、nodejs、python、go、phpではFlex Messageに対応していますので、そちらを使われるのもおすすめします。

クイックリプライとは何か

そしてクイックリプライです。クイックリプライとは何かというと、今ユーザーに何をしてほしいかというのをトークルームの一番下でさりげなく表示させる機能です。

このボタンはいろいろなことができるんですが、まず、押した時に特定のメッセージをユーザーから送ったように見せるものと、あとはポストバック、日付選択、カメラ起動、カメラロールを開く、ユーザーの位置情報を送信するみたいな、いろいろなアクションをここから起動できます。

送信の仕方です。やはり先ほどのようにプッシュAPIとかリプライAPIで、既存のテキストとかそういったメッセージに付加するかたちでQuick Reply Actionを記述していただくと、トークルームに表示されるようになります。

これどういう時に使ってほしいかという話なんですけれども、まずは本来の使い方なんですけれども、チャットボットでは自由にテキストを入力できてしまいます。先ほどの福岡市粗大ごみ受付Botでもそうですが、あまりにも自由すぎて、ユーザーが何をしていいかよくわからないということもけっこうあると思うんです。

ですが、何をできるかをボタンにしてしまうと、本当にこれしかできないようにユーザーは感じてしまいます。そうではなくて、クイックリプライとしてトークルームの一番下にさりげなくこんなことができますよと表示しつつ、それを押すと実際にユーザーがそれを発言したかのようにふるまうことができます。

これがけっこうメインの使い方かなと思っています。

少し応用的な使い方としては、このようにすごく選択肢がある時に、それをボタンにしてしまうとかなり幅をとってしまって美しくないので、クイックリプライとして選択肢を提示してあげるというと、かなりトークルームもすっきりして使いやすいかなと思います。

というわけで、LINE Bot APIのいろいろなUIのモジュールを提供していまして、Flex Message、クイックリプライ、LIFFというものを提供しています。このあたりは他社さんのチャットボットのフレームアプリもなかなかないものもありますので、こういったものを駆使して独創的なBotをみなさんでつくっていただけることを期待しておりますので、ぜひお願いいたします。

以上になります。

（会場拍手）