kondoh

2018.06.14

LINE Frontend FrameworkでLINE内ウェブアプリを作ろう

はじめまして。Webインテグレーション部の近藤です。
今回は、ちょっと前にリリースされたLINEのフロントエンドフレームワークを使って遊んでみた話をしようと思います。

LIFFとは?

2018/06/06にリリースされた、LINE Front-end Frameworkのことです。
https://engineering.linecorp.com/ja/blog/detail/299
略してLIFF。リフと読むか、ライフと読むのかはまだわかっておりません。お分かりの方いらっしゃいましたら、こっそり教えていただければ幸いです。

LIFFのおかげで、LINEのトークルーム内からウェブアプリを直接立ち上げられるようになりました。
サンプルにもありますが、お絵かきツールなどのウェブアプリをLINEトークルーム内で起動してトークルームに投稿するなど、これまでできなかったことが沢山できるようになりそうです。

トーク内からのウェブアプリの起動方法

トークルーム内で、LINE URLスキームをタップするだけでアプリが起動します。

 

作ってみよう

必要なもの

  • LINEと、LINE@(一般アカウントでOKです)のアカウント
  • Herokuアカウント(SSL対応必須なのと、スターターアプリがHeroku向けにチュートリアル用意してくれているので)

LINE@アカウントは、以下のページから作成できます。
https://entry-at.line.me/

制作の流れ

今回は、無料のLINE@アカウントを利用した制作方法をまとめたいと思います。
作るのは、ボタンを押すとランダムで色を選択し、トーク上にその色の投稿を行うだけ、という、
すごくシンプルなラッキーカラーウェブアプリ?です。

チャネルの作成

LIFFは、LINEのMessaging APIを利用するので、まずはLINE@アカウントの作成と、
LIFFアプリの作成に必要となるチャネルアクセストークンの発行までを行います。

以下を参考に進めます。
LIFFを利用するには https://developers.line.me/ja/docs/liff/getting-started

  • LINE Developersコンソールにログイン
  • 開発者登録
  • 新規プロバイダー(アプリを提供する組織・人。個人名でもOK)登録
  • チャネルアクセストークンの準備
  • LINE Developersコンソールの[Channel基本設定]でチャネルアクセストークンを発行
  • 発行されたトークンをメモ

LIFFのウェブアプリを作成

公式リファレンスの、「LIFFアプリを試してみる」の手順で進めました。
スターターアプリも簡単にデプロイできるので、非常にらくちんです!
https://developers.line.me/ja/docs/liff/trying-liff-app/

  • スターターアプリをデプロイ
    GitHubでline-liff-starterリポジトリのページから、簡単にHerokuにデプロイできるので、ここでデプロイして、ウェブアプリのURLを記録しておきます。
  • LIFFにスターターアプリを追加
    先ほどメモしたトークンと、たったいまデプロイしたウェブアプリのURLを元に、スターターアプリをLIFFに追加。
    curlでちょちょい、といけますので、レスポンスとして帰って来たliffIdをメモします。
  • スターターアプリを更新
  • スターターアプリをダウンロードして、更新、HerokuのMasterブランチにプッシュ。
  • 完成

スターターアプリが利用できる機能をわかりやすく実装してくれています。
今回は、sendMessageのみ利用する簡単なものにしたので、スターターアプリのHTMLとJSをちょっと更新した程度、です。

HTML -index.html

ラッキーカラーはなんでしょう?



JavaScript -liff-starter.js

liff.sendMessagesは投稿のタイプも「テキスト」「画像」「動画」「音声」「位置情報」「テンプレート」と種類が豊富で、
コンテンツの届け方も色々できそう。
https://developers.line.me/ja/docs/liff/reference/#liff-sendmessages

今回は、sendMessagesのテンプレートタイプを利用し、「画像」+「背景色」を投稿内に表示させて、
ラッキーカラーがすぐわかるようにしてみました。

さらにトークルームのタイプやID、ユーザーIDもフロントエンド側で取得できるので、
トークに参加しているユーザーさんたちへのコンテンツなど、面白い利用方法がたくさん考えられますね。

LIFFの開発上のガイドラインをしっかり守って、
ユーザーさんに迷惑のかからない、楽しいコンテンツを作って見たいと思います!