kondoh

2018.06.14

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

Webアプリケーションフレームワーク

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

LIFFとは？

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

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

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

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

動画プレーヤー

00:00

ボリューム調節には上下矢印キーを使ってください。

作ってみよう

必要なもの

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

window.onload = function (e) {
  liff.init(function (data) {
    initializeApp(data);
  });
};
function initializeApp(data) {
  var color = '#' + parseInt(Math.random() * 0xffffff).toString(16);
  document.getElementById('sendmessagebutton').addEventListener('click', function () {
  liff.sendMessages([
  {
    type: "template",
    altText: "ラッキーカラー",
    template: {
      type: 'buttons',
      thumbnailImageUrl: 'https://{herokuに追加したウェブアプリのURL}/img/spacer.gif',//背景はファイルサイズ抑えるため透過のGIF画像を入れて見ました
      imageAspectRatio: 'square',
      imageSize: 'contain',
      imageBackgroundColor: color,
      text: color + ' がラッキーそうです。',
      actions: [//トーク内に表示される投稿からのリンクが設定できる
        {
          type: "uri",
          label: "ラッキーカラーを見てみよう",
          uri: "line://app/{liffId}"//ここに先ほど取得したliffIdを
        }
      ]
    }
  }
  ]).then(function () {
    liff.closeWindow();
  }).catch(function (error) {
    window.alert("Error sending message: " + error);
  });
});
}

window.onload = function (e) {

liff.init(function (data) {

initializeApp(data);

});

};

function initializeApp(data) {

var color = '#' + parseInt(Math.random() * 0xffffff).toString(16);

document.getElementById('sendmessagebutton').addEventListener('click', function () {

liff.sendMessages([

{

type: "template",

altText: "ラッキーカラー",

template: {

type: 'buttons',

thumbnailImageUrl: 'https://{herokuに追加したウェブアプリのURL}/img/spacer.gif',//背景はファイルサイズ抑えるため透過のGIF画像を入れて見ました

imageAspectRatio: 'square',

imageSize: 'contain',

imageBackgroundColor: color,

text: color + ' がラッキーそうです。',

actions: [//トーク内に表示される投稿からのリンクが設定できる

{

type: "uri",

label: "ラッキーカラーを見てみよう",

uri: "line://app/{liffId}"//ここに先ほど取得したliffIdを

}

]

}

]).then(function () {

liff.closeWindow();

}).catch(function (error) {

window.alert("Error sending message: " + error);

});

}

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

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

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

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