![見出し画像](https://assets.st-note.com/production/uploads/images/124584056/rectangle_large_type_2_3113e164c6a225e5dc68c20bf00ada30.png?width=1200)
おもちかえり.comとお店のLINE公式アカウント連携方法。
2023/9/26 のバージョンアップにより、飲食店様のLINE公式アカウントからお客様に対して、注文の受理・注文の準備完了・キャンセルなどの通知ができるようになりました。(注意: LINE公式アカウントのメッセージ通数にカウントされます。参考URL LINE公式アカウント料金プラン)
この記事では、既にLINE公式アカウントをお持ちの飲食店様向けに、設定方法を説明します。
はじめに
飲食店様のLINE公式アカウントからお客様へ おもちかえり.com の注文ステータス通知をおこなうためには、現在ご利用中の「LINE Official Manager」と「LINE Developers」が必要です。
LINE Official Account Manager
・公式アカウントの運用を目的とした管理画面です。
・公式アカウントのプロフィールやメッセージ配信、チャットなどができます。
・LINE Official Account Managerでは複数の公式アカウントを管理することができます。
・飲食店様が復数の店舗をお持ちの場合は、各店舗用のLINE公式アカウントを作成できます。
LINE Developers
・LINE Developersでは、LINE公式アカウントに対しLINE Official Account Managerではできない細かいカスタマイズが可能です。
・おもちかえり.comでは、LINE Developersを通し、飲食店様が持っている公式アカウントのチャット上で、注文ステータスを通知を送ることができるようにいたしました。
・飲食店様が本設定を導入するにあたり、LINE Developers上での設定が必要になります。
今回設定いただくもの
・MessagingAPI:LINE公式アカウントから設定をおこないます。
・プロバイダー:LINE Developpers上に作成するグループ名のようなものです。MessagingAPIを設定する際に作成します。
・チャネル:プロバイダー内に作成します。チャネルには種類がありますが、今回は「LINEログイン」というチャネルを作成します。
上記の設定をすることにより、LINE Developers上に以下のふたつのチャネルが表示されます。
・公式アカウント MessagingAP
・LINEログイン
それぞれのチャネルで おもちかえり.com との紐付けをおこないます。
以降、設定方を詳しくご説明します。
飲食店様側の設定
1.LINE公式アカウントの管理画面での設定
①LINE 公式アカウントの管理画面にログインします。
②設定 を押します。
![](https://assets.st-note.com/img/1696111100756-kqmJf5rPwU.png?width=1200)
③Messaging API を押します。
![](https://assets.st-note.com/img/1696111449779-dEHMoi1Liv.png?width=1200)
④Messaging API を利用する ボタンを押します。
![](https://assets.st-note.com/img/1696111408967-ighs5C2Swm.png?width=1200)
⑤開発者情報を登録画面で、LINE Developersを利用するユーザー入力し 同意する ボタンを押します。 (次の確認画面では、OKボタンを押してください。)
![](https://assets.st-note.com/img/1702152979857-TChuCO7p2W.png?width=1200)
⑥プロバイダー選択画面でプロバイダーを作成します。プロバイダー名(飲食店名など)を入力し、同意する ボタンを押します。
参考1: LINE ではプロバイダーのことを「サービスを提供し、利用者の情報を取得する個人の開発者、企業、組織」と定義しています。
参考2: プロバイダー名はお客様画面の赤枠部分に表示されます。
![](https://assets.st-note.com/img/1702153240922-wVonw5nRXl.png?width=1200)
既存のプロバイダーを利用する場合は、該当するプロバイダーを選択してください。
![](https://assets.st-note.com/img/1696111535891-140ovUwzYK.png)
⑦プライバシーポリシーと利用規約のURLを入力して、OK ボタンを押します。(※任意なので空欄でも大丈夫です)
![](https://assets.st-note.com/img/1696111620926-lnfdziTOdF.png)
⑧最終確認をして、OK ボタンを押します。
![](https://assets.st-note.com/img/1696111690905-29SSG0JNwE.png)
2.LINE Developersでの設定
2.1 新規チャネル作成
LINE公式アカウントとは別に、LINE Developers というサイトがあります。ここでは LINE Developers 上での設定方法について説明します。
①LINE Developers にログインします。
②ログインするとコンソール(LINE Developersの管理画面)が表示されます。
③項番1(1ー⑥)で作成したプロバイダー名を選択します。
![](https://assets.st-note.com/img/1696190658546-pnHQnM9Mac.png?width=1200)
④項番1 で設定したLINE公式アカウント名が表示されていることを確認します。
![](https://assets.st-note.com/img/1696191046484-ufuHK9lGOx.png?width=1200)
⑤新規チャネル作成 ボタンをおします。
![](https://assets.st-note.com/img/1696191159645-0nUJCQRNwz.png?width=1200)
⑥新規チャネル作成に必要な情報を入力します。
チャネルの種類: LINEログイン
プロバイダー: 今回作成したもの
サービスを提供する地域: 日本
会社・事業者の所在国・地域: 飲食店様の情報を選択
チャネルアイコン: 任意。飲食店様の情報を登録します。
チャネル名: 入力必須。飲食店様の情報を登録します。
チャネル説明: 入力必須。飲食店様の情報を登録します。
アプリタイプ: ウェブアプリにチェックを入れます。
2要素認証の必須化: 任意
メールアドレス: 飲食店様の情報を登録します。
プライバシーポリシーURL: 任意。飲食店様の情報を登録します。
サービス利用規約URL: 任意。飲食店様の情報を入力を登録します。
LINE開発者契約の内容に同意します: 内容を確認の上、チェックします。
参考: お客様にはこのように表示されます。
チャネルアイコン: 紫枠
チャネル名: 赤枠
チャネル説明: 青枠
![](https://assets.st-note.com/img/1702324516394-yD5MokI8SZ.png?width=1200)
⑦上記入力後に 作成 ボタンを押します。
![](https://assets.st-note.com/img/1696317829632-f5mqbh2KOb.png?width=1200)
![](https://assets.st-note.com/img/1696317837715-c79HMZBKbs.png?width=1200)
![](https://assets.st-note.com/img/1696317843366-faRQyJhrgs.png?width=1200)
2.2 チャネル設定
2.2.1 チャネル基本設定
①項番2.1 の設定が完了すると以下の画面が表示されます。
![](https://assets.st-note.com/img/1696318197048-Rt3xg1EjoC.png?width=1200)
②このページの下段の 友だち追加オプション の項目の 編集 ボタンを押します。
![](https://assets.st-note.com/img/1696318285998-6HPDjOrNwH.png)
③飲食店様のLINE公式アカウントを選択して、更新 ボタンを押します。
![](https://assets.st-note.com/img/1696451286740-Ku9hIjA9T1.png?width=1200)
④ここで一度、ブラウザーの別タブまたは別ウインドウで、おもちかえり.com 管理画面を開きます。
2.2.2 おもちかえり.com管理画面
①おもちかえり.com の管理画面の店舗情報より LINE連携 ボタンを押します
![](https://assets.st-note.com/img/1696318509023-iY756WORmV.png)
②LINEログイン:コールバックURL をコピーします
![](https://assets.st-note.com/img/1696318632772-oIbQ47jmGB.png?width=1200)
③先ほどの LINE Developers > プロバイダー名 > チャネル名(LINEログイン) に戻ります。
2.2.3. LINEログイン設定
①LINEログイン設定 を選択します。
![](https://assets.st-note.com/img/1696362596652-04spqDiIX1.png?width=1200)
②コールバックURL の 編集 ボタンを押します。
![](https://assets.st-note.com/img/1696362709973-8gu4BVgMss.png?width=1200)
③先ほどおもちかえり.com 管理画面でコピーした コールバックURL をペーストして、更新 ボタンを押します。
![](https://assets.st-note.com/img/1696362800457-6at4ahFEb9.png?width=1200)
LINE Developers 側の設定はこれで一旦終了です。
次は LINE Developers の情報をコピーして、おもちかえり.com の管理画面へペーストする作業です。
3. LINE Developers から おもちかえり.com 管理画面 へ転記
3.1 LINE Developers 側の準備
①LINE Developersのコンソール(管理画面)で、今回設定した プロバイダー名 > チャネル名(LINEログイン) の チャネル基本設定 を選択し、開いておきます。
![](https://assets.st-note.com/img/1696363101858-edvqJ8FwnW.png?width=1200)
3.2 おもちかえり.com 側の準備
①項番2.2.2 と同様に 管理画面 > 店舗情報 > LINE連携 にします。
![](https://assets.st-note.com/img/1702369845004-d98h9LeMA5.png)
3.3 チャネルID / チャネルシークレット の転記
LINE Developers 側のチャネル名(LINEログイン)の
①上段:チャネルID
②下段:チャネルシークレット
を、おもちかえり.com へコピー & ペーストします。
(この時点で 保存 しても問題ありませんが、最後にもおこないます)
![](https://assets.st-note.com/img/1696449641072-E4LquJ3qmY.png?width=1200)
次は LINE Developers側の作業です。
3.4 LINE Messaging API
①今回作成した Provider 名 を選択します。
![](https://assets.st-note.com/img/1696449854266-ZiBu2Ik4HQ.png?width=1200)
②LINE公式アカウント名 (Messaging API) を選択します。
※ 新しく作成したチャネル(開発中)ではなく公式アカウントのチャネルを選択して下さい
![](https://assets.st-note.com/img/1696450198424-mFTSqB6jxQ.png?width=1200)
③Messaging API設定 を選択します。
![](https://assets.st-note.com/img/1696450496176-NZkqMu8SZW.png?width=1200)
④チャネルアクセストークン(長期) の 発行 ボタンを押します。
![](https://assets.st-note.com/img/1696450406512-UDG8UGpsuj.png)
⑤チャネルアクセストークン(長期)を、おもちかえり.com へコピー & ペーストします。その後、有効にする にチェックを入れて 保存 ボタンを押します。
![](https://assets.st-note.com/img/1696450554570-Itppsh493k.png?width=1200)
4. LINE Developers での設定その2
最後に今回作成した LINE ログインを公開して飲食店様側の設定は終了です。
①今回作成した Provider 名 を選択します。
![](https://assets.st-note.com/img/1702411911658-TStAV5U7lD.png?width=1200)
②今回作成したチャネル「LIEN ログイン」(開発中)を選択します。
![](https://assets.st-note.com/img/1702411982108-IbEzTFSDF9.png?width=1200)
③開発中 ボタンを押します。
![](https://assets.st-note.com/img/1702412231864-qL6YvbboCM.png?width=1200)
④公開 ボタンを押します。
![](https://assets.st-note.com/img/1702412278282-7F6D05TCGA.png?width=1200)
⑤先ほど 開発中 となっていた箇所が 公開済み になります。
![](https://assets.st-note.com/img/1702412339961-Km9XLKWU39.png?width=1200)
以上で、飲食店様側の設定は完了です。
お客様側の設定
1. 初期設定時の注意点
お客様にはこの作業を一度だけ実施していただければ大丈夫です。 注意点としては、設定時のブラウザの種類、モードは以下で実施してください。
・iPhone ユーザー
・Safari ブラウザを利用してください
・通常モード(プライベートモードを利用しない)を利用してください
・Android ユーザー
・Chrome ブラウザを利用してください
・通常モード(プライベートモードを利用しない)を利用してください
2. 注文完了画面
注文完了後の画面上部の お店LINEから通知を受け取り をタップします。
![](https://assets.st-note.com/img/1702412693280-CNFUu6L98V.png?width=1200)
3. LINE
上記を実行すると LINE アプリへ遷移します。遷移後、許可する ボタンをタップします。
以上でお客様側の設定は完了です。
![](https://assets.st-note.com/img/1702412807220-Yjx7byvWwy.png?width=1200)
この記事が気に入ったらサポートをしてみませんか?