※本サイトはプロモーションが含まれています

LINE・LIFF

LIFFアプリを作ってみたので、作り方をまとめてみた。

  /
記事内に商品プロモーションを含む場合があります

仕事で「LIFF案件を引き継いで欲しい」と言われたので、勉強がてらブログにまとめてみました。

もくじ
  1. LIFFで何が出来るの？
  2. LIFFの動かし方
  3. LIFFアプリの制作の流れ
  4. コードを書く
  5. LIFFを書くポイント、及び躓いた点
  6. 感想

LIFFで何が出来るの？

LIFFとはLINEが提供するウェブアプリのプラットフォームユーザーのLINEアカウント情報等を取得できるウェブページをLINE上に作成できる仕組みになります。

具体的には

  • LINE上でフォームを作り、ユーザーが取得しているLINEのIDを取得。当選番号はLINEのIDで管理し、あたった人にだけメッセージを送る
  • QRコードを読み込んで、モバイルメニューを表示させたりモバイルオーダーを行ったりする
  • 会員証の作成

的なことが出来る模様。

LIFFの動かし方

基本的な情報は公式ドキュメントに載っています。

WEBにはあまり載っていないので公式に載っている情報を頼りに対応する形になると思いますが、
公式の情報がすごくわかりやすいので、基本的に心配なし。

Node.jsやJSのフレームワークを使わなくても動かせる

公式ではNode.jsやJSのフレームワークを使っていますが、それは「Create LIFF App」というCLIツールを使ったやり方でLIFFを構築しているため。

単に動かすだけなら、LIFFアプリを開発するに記載されているCDNパスを設定するだけで基本的にOK。

つまり、jQueryの応用版的感じで、気軽に設置出来るというのです。

LIFFアプリの制作の流れ

  1. LINE Developers にログインする
  2. プロバイダーを作る
  3. チャンネルを作る
  4. WEBサイトと紐付ける

という行為が必要。

もしアンケートなどでデータを使いたい場合、

  1. LIFFでLINEユーザーIDを取得する
  2. 1で取得した情報を、JavascriptとかでAPIへリクエストを送る
  3. もし当選連絡などで個別に連絡したい場合は、LINEユーザーIDを使ってメッセージ送信が出来る
    ※これのやり方は未調査

という流れで対応が出来るらしいです。

プロバイダーを制作

特に複雑な行為はないので、普通に作成すればOK。公式には「プロバイダーは、LINEプラットフォームを通じてサービスを提供する個人、企業、またはそのほかの組織を意味する情報です。」と書いてあるので、チャンネルをまとめる親みたいなものだとおもってもいいだろう。

新規チャンネル作成

LINE Developersにログインして作っていくと、チャンネル制作という選択画面が出てくる。

「LINEログイン」を選択することにより、LIFFを作成できるチャンネルが作れる。

これらの違いとは？

  • LINEログイン → LIFFを使って、LINEログインをウェブアプリやネイティブアプリに組み込める。
  • Messaging API → 公式アプリを作って、公式アプリ内であーだこーだ出来るやつ※LIFF非対応
  • CLOVALスキル → AIアシスタント※LIFF非対応
  • ブロックチェーンサービス →「LINE Blockchain」を基盤としたブロックチェーンサービスを構築
  • LINEミニアプリ → LIFF上で実行されるwebアプリ。”LINEログイン”で提供されるシステムにプラスして、決済などの機能を豊富にしたバージョンの認識でOK。認証が必要なので公開に時間がかかる。

といった認識で良いと思います。

参考

LIFFを追加する

LIFFタブから「追加」を選択する。

エンドポイントURLとは、LINEがログインされたあとに表示されるサイトのこと。

Scopeはアプリ内の権限。「すべてを表示」を押したあとに表示される権限もある。
あとから外すことも可能なので、とりあえずチェック入れておいて損はない。

そのほかの設定に関しては、ヘルプを確認しながら設定すればいい。

これで「追加」を押せば、管理画面の方の設定は完了。

コードを書く

基本的にLIFFリファレンスに従って書いていけばOK。

liff.init()の指定が基本的に必要で、

liff.init({
       liffId: 'xxxx', // Use own liffId
       withLoginOnExternalBrowser: true, // Enable automatic login process
}).then(() => {
       LIFFの関数を入力
});

といった要領で書いていく。

作成したらエンドポイントURLで指定したサーバーにHTMLファイルをあげて完成。

開く時はLIFF URLを経由して開いてね。

自分の名前を表示させるだけのLIFFアプリをつくったので、時間があるときにぜひ。

https://github.com/ayaoriko/liff-app

LIFFを書くポイント、及び躓いた点

開発中はリロードボタンの設置をし、キャッシュ対策は必ず行おう

LINEの画面にはリロード画面がないので、location.reload()が動くHTMLボタンがあると、開発の作業が滞らずに済みます。

また、キャッシュの読み込みをしないように、headタグに

<meta http-equiv="Cache-Control" content="no-cache">

を書いてあるといいかも。

JSやCSSのファイルを別で扱っている場合、〜.css?20220204のように更新日時のタイムスタンプをクリエとして自動付加すると、キャッシュを新しく読み込んでくれやすい。

エラーはalertで出し、スマホで必ず挙動を確認する

LINEのブラウザ上ではコンソールが表示されないので、アラートで出したほうが分かりやすい。

スマホとパソコンで表示される内容が違うものもあるので、スマホで必ず挙動を確認します。

関数（Function）で機能別にまとめる

LIFFの関数を書き始める時は、liff.init….then…の要領で書いていき、LIFFのIDを指定するのが基本。

とはいっても、毎回LIFFのIDを書くのは面倒。

そのため、functionsで関数をまとめてあげるとシンプルで見やすくなり、別案件で使う場面が現れたとしても、再利用をしやすくなる。

パーミッションエラーだからといって、必ずしもパーミッションの設定がミスっているわけではない

LINEにメッセージを送るliff.sendMessages()関数を使おうとしたとき

Error: The permission is not in LIFF app scope.

とエラーで表示された。

その場合、まず権限(scope)を確認するが、きちんとチェックが入っている。

LIFFのAPIリファレンスには「1対1のトークルームから起動したLIFFアプリでのみ利用できます」と記載されていたので、PCのみでしか利用出来ないのは分かっていた。

しかし、scopeをチェックしていない場合とのエラーが全く一緒だったので、あれれ…?としばらく調べてしまった。PCでエラーを出すのは構わないから、せめて表記を変えて欲しい…!

scanCodeV2()はLIFFブラウザの画面サイズがFullの場合のみ利用出来る

QRコードを起動させたく、liff.scanCodeV2()関数を使おうとしたが、こちらもパーミッションエラーが表示されて全くエラーが表示されない。

LIFFの設定画面のオプションに書いてあるのScan QRもオンになってるが、エラーなのには変わらない。

あれれ…?と調べてみると、とあるブログに記載がされているのを発見。
よくよく見てみるとリファレンスに記載が。

なんと、画面サイズ制限があったという驚き…!!!

LIFFの設定画面でサイズをFullにし、再度実装。

すると…動いた！！！！！

エラー表記を変えてくれ！と思う反面、リファレンスを細かく見ていなかった自分に反省しました（泣）

liff.getFriendship()関数などの公式アプリを使ったやり取り

公式アプリを使った処理を実行したいとき。

liff.getFriendship()関数を実行すると

Error: There is no login bot linked to this channel.

というエラーが表示されるので、どこかで紐付けが必要っぽそう。

公式アプリの方のLIFFを調べて見ても

と表示され、別のところで紐付ける必要がありそうだ。

公式アカウントのIDを設定する箇所もなし。公式アカウントで送信しても動かない。

これは先輩に聞かないとわからないぞ…と思った矢先、
LINEログインチャネルの基本設定の一番下に「リンクされたボット」というエリアが。

同じチャンネル内でMessaging API設定をしているLINE公式アカウントを選択できる様になっていたので、選択したところビンゴ！！trueを返してくれました！！！

感想

エラーが分かりにくい箇所はあったけど、基本的にエラーの文章は読みやすく、レファレンスが分かりやすい。特にフロントエンドエンジニア初心者は、勉強がてら実装してみるといい経験になると思う。

ABOUT ME
あやおり子
特技はプログラミングのWEBデザイナーです。 WEB制作会社に勤めていた経験を生かして、 ちょっとマニアックな記事を作成しています。
BLOG：https://ayaoriko.com
関連記事