LINE Official Account Managerで作成したアカウントでLIFF（リフ）を出す方法

2022年9月1日

LINE Official Account Manager（通称：LOA）で作成した公式アカウントで、難しいからボット連携はしなくても良いけど、それっぽい動作をしてみたい！と思っている画面の前のあなたへ問いかけます。

意味さえ理解すれば誰でも簡単にそれっぽい事が出来てしまいます！

本日は、その一例として、LINEトーク内で表示させることができるブラウザを少し改造してみましょう。

少し見た目が変わったページの表示方法

通常、LINEトーク内にURLが送られ、それをタップするとWEBページが起動します。

ですが、ページが表示されても、当たり前ですが全画面で表示されます。

ここで、LINEにて用意されているLIFF（リフ）と呼ばれる機能を使えば、少しこだわったページの表示方法に変更することが出来ます。

見た目が通常とは異なる方法でWEBページを表示させるので注目される事間違いなし！？

まずLIFF（リフ）ってなに？

LIFFとは、LINEが提供する「LINE Front-end Framework」の略で、簡単に言うと、LINE内で特殊な方法で好きなWEBページを表示させることが出来る機能の事です。

LIFFを使うと、下記のような特殊な形態のWEBページを表示ができます。

画面白色のエリアに任意のWEBページを表示させる事が可能
画像はLINEデベロッパーより引用

通常は、Fullと呼ばれる、全画面での表示となるが、LIFFを使えば、画面4分の３程度を埋めるタイプと、画面半分を埋めるタイプ２種類を使用する事ができます。

設定方法

特殊な方法でWEBページを表示させるには、いくつかの手順があります。全て画像付きで紹介しますので、マイペースで真似しながら作成していきましょう。

Google検索にて「LINEデベロッパー」と検索

まずは、Google検索にて、「LINEデベロッパー」と検索しましょう。

検索結果に「LINE Developers」と出てきますので、そちらをクリックしましょう。
下記ボタンをクリックしても移動できます。パソコンからのアクセスを推奨します。

LINEデベロッパーをひらく（PC推奨）

初回のみ開発者登録を行う

初めてLINEデベロッパーにアクセスした方のみ、開発者登録を行う必要があります。

登録は簡単で、名前（ニックネームでOK）とメールアドレス（特に連絡は来ません）を入力するだけで登録できます。

登録するには、まずは「コンソール」をクリックしましょう。

クリックすると、ログイン画面が表示されます。

「LINEアカウントでログイン」をクリックしましょう。

メールアドレスとパスワードを入力し、ログインしましょう。

パスワードが分からなくて困っている方は、「QRコード」を使って簡単にログインすることも出来ます。

ログインが完了したら、初回のみ開発者登録を要請されますが、サクッと済ませましょう。

プロバイダーの作成

開発者登録が完了すると、開発者用メインページにアクセスすることが出来ます。

英語表記→日本語表記へ

このままだと、恐らくですが画面がすべて英語表記になっているか、Googleの自動翻訳の影響でおかしな日本語になっているかもしれません。
画面右下に「English」と書かれたボタンがあるので、そちらをクリックし、「日本語」へ変更すると日本語表記になります。

画面真ん中に、「新規プロバイダー作成」という緑色のボタンがあります。こちらをクリックしましょう。

※プロバイダーについては、詳しは省略しますが、簡単に言うと分類分けする為の引き出しというイメージです。

プロバイダー名は、一旦は自身のフルネームや、ニックネーム、又は屋号・会社名でOKです。（適当でOK）

LINEログインの作成

プロバイダーを作成したら、「新規チャネル作成」をクリックしましょう。

クリックすると、沢山の項目が表示されますが、一番左に表示されている「LINEログイン」を選択しましょう。

選択すると、情報入力画面へ移動します。

上から３つの項目は既に入力されてますので、操作は不要ですが、４項目以降からは入力が必要です。

入力する内容は参考を見ながら行ってみましょう。

入力する項目について

※チャネルの種類・プロバイダー・サービス提供地域は操作不要です

１．「会社・事業者の所在国・地域」は「日本」を指定しましょう。
２．「チャネルアイコン」は省略して頂いてもOKです。
３．「チャネル名」は、LIFFを表示させたい公式アカウントと同じ名前でOKです。
４．「チャネル説明」は「チャネル名」と同じ文章でOKです。
５．「アプリタイプ」は「ウェブアプリ」にチェックを付けます。
６．メールアドレスは既に入力されているもので良ければそのままにします。
７．「プライバシーポリシーURL」は省略でOKです。
８．「サービス利用規約URL」も省略でOKです。

最後に規約に同意し「作成」ボタンをクリックしましょう。

作成したら、LINEログインの設定画面にアクセスすることができます。

LIFF（リフ）の作成

設定画面にアクセスしたら、「LIFF」をクリックしましょう。

「LIFF」を選択したら、緑色の「追加」ボタンをクリックしましょう。

クリックすると、LIFF作成画面へ移動します。

入力する内容は参考を見ながら行ってみましょう。

LIFF設定項目

１．「LIFFアプリ名」は、管理上の名前です。今回はWEBページとしましょう。
２．「サイズ」は、LIFFのサイズ設定です。今回は、「Tall」を選択しましょう。
３．「エンドポイントURL」は、LINE内で表示させたいWEBページのアドレスを入力します。
（httpで始まるURLは指定できません。必ずhttpsから始まるURLを貼り付けます）

４．「Scope」は、「profile」にのみチェックを付けましょう。
５．「ボットリンク機能」は、「off」にチェックを付けましょう。
６．「オプション」は触らずそのままにしましょう。

入力が終わったら、「追加」ボタンをクリックしましょう。

LIFFが出来上がると、画面が１つ戻り、LIFF一覧ページが表示され、先ほど作成したLIFFがリストに登録されています。

リスト内に、https://liff.line.me/から始まるURLが生成されます。そちらのURLをコピーし、メモ帳など一時的に控えておきましょう。