1. マニュアルトップ
  2. > LINEとリピモを連携させる
  3. > LINE Developersの設定

LINEとリピモを連携させる

LINE Developersの設定(LINE上の設定)

チャネルの追加設定

LINE Developersのトップページ

LINEと連動するツールを設定するためLINE Developersへログインします。

右上の「コンソール」からコンソールへ移動してください。

※時間を置くなどの理由でログイン状態が解除されている場合は「コンソールにログイン」という表示になっているかもしれません。そのときはログイン画面が表示されます。LINE Official Account Managerと同じアカウントでログインしてください。

LINE Developersへログイン後の画面

コンソールに入ると、先ほどMessaging APIの作成の項目にて設定したプロバイダー名が表示されています。(この例では「リピモ」)

※ここで何も表示されていない場合は、LINE Official Account Managerをもう一度ご確認いただき、同じアカウントでLINE Developorsにログインしたかどうかをご確認ください。

左側メニューもしくは、画面中央のプロバイダー名をクリックしてください。

LINE Developers内プロバイダー選択後の画面

プロバイダーの中に複数のチャネルを設定できます。

チャネルとは公式の説明に「チャネルは、Messaging APIやLINEログインといったLINEプラットフォームの機能を、プロバイダーのサービスで利用するための通信路です。 LINEプラットフォームを利用するには、チャネルが必要です。」とあります。
リピモがLINEと連携するために必要な通信路なのだとお考えください。

先ほどLINE Official Account Manager内で設定したMessaging APIのチャネルがすでに表示されてあります。

【Messaging APIのチャネルが見当たらない場合】

該当LINE公式アカウントのメンバーではないLINE IDもしくはLINEビジネスIDで、LINE Developersにログインしている状態です。
必ず該当LINE公式アカウントのメンバーのLINE IDもしくはLINEビジネスIDでログインして、設定を進めていってください。

ここにもう一つチャネルを追加します。 「新規チャネル作成」をクリックしてください。

LINE Developers内「新規チャネル作成」選択後の画面

モーダルウィンドウが表示され、作成チャネルの種類の指定を求められます。
ここでは「LINEログイン」を選択してください。

LINE Developers内新規チャネル作成画面

作成するチャネルの詳細を設定します。
ここで設定した内容がLINEアプリ内でユーザーの認証画面に表示されます。
各項目の説明後にある認証画面の例を見ながら入力してください。

チャネルの種類、プロバイダー、サービスを提供する地域は既に設定されています。間違いないかご確認ください。

  • ① 会社・事業者の所在国・地域:所在国を選択してください
  • ② チャネルアイコン(任意):Developersのチャネル一覧画面や、ユーザーへの認可画面などで表示されます。ロゴなどをご登録ください。
  • ③ チャネル名:お好きな名前をご入力ください。
  • ④ チャネル説明:ユーザーに対してツールの説明文を入力してください。ユーザーへの認可画面などで表示されます。
  • ⑤ アプリタイプ:「ウェブアプリ」を選択してください。
  • ⑥ メールアドレス:連絡先となるメールアドレスをご入力ください。
  • ⑦ プライバシーポリシーURL(任意):Webサイトにプライバシーポリシーが掲示されたページがあればご入力ください。
  • ⑧ サービス利用規約URL(任意):Webサイトにサービス利用規約が掲示されたページがあればご入力ください。
  • ⑨ LINE開発者契約をお読みになり、同意の印としてチェックしてください。
  • ⑩ すべて入力完了しましたら「作成」をクリックしてくだい。
LINEアプリでユーザーに表示される認証画面の例
LINEアプリでユーザーに表示される認証画面の例

プロバイダー名、①会社・事業者の所在国・地域、②チャネルアイコン、③チャネル名、④チャネル説明が表示されていることが分かります。
また、⑦プライバシーポリシーURL、⑧サービス利用規約URLに入力がある場合は、この画面をスクロールした先にリンクが表示されます。

LINE Developers内チャネル情報画面

チャネルの設定が完了し、入力された情報が表示されます。内容をご確認いただき、問題が無いようでしたら上部にある「LIFF」タブを選択してください。

LIFFの設定

LINE Developers内LIFFタブの画面

LIFFタブを選択すると、LIFFアプリの設定になります。 ここで「追加」ボタンをクリックしてLIFFアプリの詳細設定を行います。

※既に他のLIFFアプリが設定されている場合は「LIFFアプリ」というタイトル横にあるボタンをクリックしてください。

LINE Developers内LIFFアプリ作成画面

LIFFアプリの詳細を設定します。

  • ① LIFFアプリ名:お好きな名前を入力できます。
  • ② サイズ:「Full」を選択してください。
  • ③ エンドポイントURL:「https://ripimo.jp/reserve/?liff_id=」と入力してください。設定後もう一度このURLを変更することになります。
  • ④ Scope:LIFFアプリの権限を指定します。すべて選択してください。
  • ⑤ 友だち追加オプション:「On(Normal)」「On(Aggressive)」のいずれかを選択してください。
  • ⑥ 入力が完了しましたら「追加」ボタンをクリックしてください。
LINE Developers内LIFFアプリ作成後の画面

LIFFアプリの設定が完了すると、追加したアプリ情報が表示されます。

前項の③エンドポイントURLの説明でもありましたが、URLに店舗を識別するためのLIFF IDを追加する必要があります。 LIFF情報をクリックしてもう一度LIFFアプリ詳細画面に移動します。

LINE Developers内LIFFアプリ詳細情報画面

ここでは、エンドポイントURLの末尾にLIFF IDを追加します。
まず、LIFF IDが書かれてある横にある「コピー」ボタンを押して、LIFF IDをコピーしてください。
エンドポイントURLの行にある「編集」ボタンをクリックすると入力欄が現れます。

LINE Developers内LIFFアプリエンドポイントURL編集画面

先ほどコピーしたLIFF IDを末尾に追加してください。
URLの末尾が「?liff_id=xxxxxxxxxxxxx」となります。
(xxxxxxxxxxxxxがLIFF IDです。)

追加できましたら「更新」ボタンで更新してください。

LINE Developers内LIFFアプリ詳細情報画面上部

LIFFアプリの設定が完了しましたら、次にこのアプリを一般のユーザが使えるように公開しましょう。

同じページの上部に、「開発中」という文字があります。
これは、チャネルが設定の途中であること表し、他のユーザーはLIFFアプリを使えない状態となっていることを表します。
そこで、この文字部分をクリックしてください。

LINE Developers内LIFFアプリ公開確認

「公開」をクリックしてください。

※公開後も設定の変更は可能です。

LINE Developers内LIFFアプリ詳細画面

先程まで「開発中」だった部分が「公開済み」となっています。これで今回追加したチャネルが公開され、LIFFアプリを起動できる状態となりました。

LINE Developers内LIFFアプリ詳細画面

このページ内に表示されている「LIFF ID」「LIFF URL」がリピモとの連携に必要です。
コピーする際は必ず「コピー」ボタンをクリックしてコピーするようにしてください。
後ほどリピモの管理画面にて、これらを入力いただくことになります。ブラウザを閉じず、表示したままにておいてください。

以上でLINE Developersでの設定は完了です。
続いて公式アカウントからリピモを起動するための設定に移ります。