SalonUp SalonUp

LINE連携ガイド

LINE連携は、SalonUpの中でも特に重要で、同時に一番つまずきやすい設定です。 このページでは、何をどの順で作るかどの値をどこへ入れるか最後に何を確認するかを、できるだけ具体的にまとめています。 この設定を行うことでLNE上で予約と送ると予約リンクが、 キャンセルと送るとキャンセルリンクが返信されるようになります。

まず全体の流れ

おすすめの順番

  1. Messaging API チャンネルを作成する
  2. SalonUpにチャンネルアクセストークン(長期)とチャンネルシークレットを登録する
  3. Webhook URL を登録して検証する
  4. LIFF を作成し、LIFF ID をSalonUpへ登録する

この順番が大事な理由

Webhook の検証は、サーバー側に正しい チャンネルシークレット が入っていないと失敗します。 そのため、先に LINE Developers 側だけを進めるのではなく、 SalonUp側へ値を保存して有効化してから検証する必要があります。

事前準備

  • 公開URLがあること(本番または検証用の HTTPS URL)
  • SalonUp側で基本情報や予約導線がある程度できていること
  • どのサロンにどの LINE 公式アカウントを紐づけるか決まっていること
Webhook URL
https://www.salon-app.jp/line/webhook

Messaging API チャンネルの Webhook URL に貼り付けます。

予約導線の基本URL
https://www.salon-app.jp/line/booking

LIFF や案内文、リッチメニューの設定で使います。

1. Messaging API チャンネルを作成する

まず LINE Developers 側で、予約や通知に使う Messaging API チャンネル を作成します。 この作業の目的は、あとでSalonUpへ入力する チャンネルシークレットチャンネルアクセストークン(長期) を取得することです。

  1. GoogleなどでLINE Developers を検索し、画面右上の コンソール を開きます。 LINE公式アカウントとして使いたい LINEアカウントでログインしてください。
  2. コンソールに入ったら、まず プロバイダー を作ります。 サロン名に近い分かりやすい名前を付けるのがおすすめです。
  3. プロバイダーを作成したら、その中で Messaging API チャンネル を作成します。 画面上の案内に従って、 チャンネル名・説明・業種などを入力して進めてください。
  4. 作成が進むと、LINE Official Account Manager 側へ移動する流れになります。 ならなかった場合でもLINE Official Account Managerで右上の 設定 から 左メニューの Messaging API を開き、 Messaging API を利用する を押してプロバイダーを選択で先ほど入力したアカウントの名前を選択して 同意を押し利用規約を入れる場合URLを入力後作成してください。
  5. 作成後、LINE Developers に戻り、対象チャンネルを開いて、次の2つを確認します。

チャンネルシークレット

LINE から送られてくる Webhook の署名検証に使います。
LINE Developers → Messaging API チャンネル → チャンネル基本設定 ページ下部にあります。

チャンネルアクセストークン(長期)

予約完了通知やリマインド送信などに使います。
LINE Developers → Messaging API チャンネル → Messaging API 設定 下部で発行します。

ここでの注意

LINE Login チャンネルや LIFF 用チャンネルの値ではなく、 Messaging API チャンネルの値 を使ってください。 Webhook 検証に使うのは LIFF 側ではなく Messaging API 側のシークレットです。

2. SalonUp側へ登録する

Messaging API チャンネルを作成したら、 Webhook を検証する前にSalonUp側へ値を登録します。

  1. SalonUpの 外部予約連携 を開きます。
  2. チャンネルシークレット を貼り付けます。
  3. チャンネルアクセストークン(長期) を貼り付けます。
  4. LINE連携を 有効 にして保存します。

この順番が重要です

先にSalonUpへ正しい secret / token を保存しておくことで、 あとから LINE Developers 側で Webhook の検証をしたときに、 サーバー側が正しい値で署名確認できるようになります。

LINE設定

LINE設定ページ

ここにチャンネルシークレットとチャンネルアクセストークン(長期)を入力して保存します。

3. Webhook URL を登録して検証する

次に、LINE Developers 側で Webhook URL を登録します。 これは、LINE 側で発生したメッセージ受信やイベントをSalonUpへ送るための入口です。

  1. LINE Developers で先ほど作成した Messaging API チャンネル を開きます。
  2. Messaging API 設定 を開きます。
  3. Webhook URL に、下のURLを貼り付けます。
  4. 保存したら 検証 を押すことを推奨します。 検証後 成功 が出ない場合、チャンネルシークレット チャンネルアクセストークン(長期)Webhook URL 等が間違っている可能性があります。
  5. 検証の結果が成功になったら、Webhook の利用 をオンにします。
Webhook URL
https://www.salon-app.jp/line/webhook

検証で失敗するとき

まず確認したいのは URL よりも、 SalonUp側に正しいチャンネルシークレットが保存されているか です。 先にSalonUpへ保存してから検証することを推奨します。

4. LIFF を作成し、LIFF ID をSalonUpへ登録する

Webhook が通ったら、次は予約ページやキャンセルページ、お問い合わせページを LINE 内で開くための LIFF を作成します。 ここでは、予約用・キャンセル用・お問い合わせ用の3つを作ります。

  1. LINE Developers で先ほどのプロバイダー配下に新規チャンネルを作成し、 LINEログイン を選択します。 チャネル名・説明などを入力し、ウェブアプリ を必ず選んでください。
  2. 今作った LINEログイン を開き、上部またはメニューから LIFF ページを開いてください。
  3. LIFFアプリを 予約キャンセルお問い合わせ の3つ分作成します。
  4. 「LIFFアプリを追加」を押し、分かりやすい名前 (例:予約、キャンセル、お問い合わせ)を付けます。
  5. サイズは基本的に Full を選んでください。
  6. エンドポイントURL に、下の3つのURLをそれぞれ設定してください。
  7. Scope では openidprofile の2つを選択してください。
  8. 友だち追加オプションは、公式アカウントと未友だちの LINE アカウントでも使えるかどうかの設定です。 基本的には On (Normal) を推奨します。
  9. Scan QR は現状のSalonUpでは使わないため、基本は off 推奨です。
  10. 作成後、同じ LIFF ページで各LIFFアプリの LIFF ID を確認し、 SalonUpの外部予約連携にある LIFF ID(予約用)LIFF ID(キャンセル用)LIFF ID(お問い合わせ用) にそれぞれ保存してください。

ここまで設定すると

予約・キャンセル・お問い合わせの3つを LINE 上から開けるようになります。 お客様とのやり取りをSalonUp上でまとめて管理しやすくなります。

予約用 LIFF のURL
https://www.salon-app.jp/line/booking
キャンセル用 LIFF のURL
https://www.salon-app.jp/line/cancel
お問い合わせ用 LIFF のURL
https://www.salon-app.jp/line/contact

LIFF ID は何に使う?

LIFF ID は、LINEアプリ内から予約ページ・キャンセルページ・お問い合わせページを開くために使います。 これは導線用の設定であり、Webhook 署名検証の secret とは役割が違います。

LINEでの使い方と自動応答

設定が終わると、お客様は LINE 上で次のように利用できます。

「予約」と送った場合

お客様が LINE で 予約 と送ると、 予約ページへ進むための 予約リンク が届きます。

「キャンセル」と送った場合

お客様が LINE で キャンセル と送ると、 キャンセル手続き用の キャンセルリンク が届きます。

「お問い合わせ」と送った場合

お客様が LINE で お問い合わせ と送ると、 お問い合わせフォームへ進むための お問い合わせリンク が届きます。

伝えておきたいこと

LINE連携ができていれば、お客様は「予約」「キャンセル」「お問い合わせ」と送るだけで必要なリンクを受け取れます。 リッチメニューを設定しなくても動きますが、ボタンを付けるとさらに分かりやすくなります。

番外編:リッチメニューの設定方法

LINE公式アカウントの下部に表示される リッチメニュー を使うと、 お客様がワンタップで予約やキャンセル、お問い合わせへ進めるようになります。

  1. LINE Official Account Manager を開きます。
  2. リッチメニュー を新規作成します。
  3. ボタンのアクションを テキスト に設定します。
  4. 予約ボタンには「予約」、キャンセルボタンには「キャンセル」、 お問い合わせボタンには「お問い合わせ」(または「問い合わせ」)と入力して保存してください。

リッチメニュー画像ダウンロード

当アプリが公開しているメニュー画像です。(AIを使い作成しております。)

リッチメニューについて

現在のSalonUpでは、主に 予約キャンセルお問い合わせ の導線を案内できます。今後も順次拡張予定です。

最終テスト

  1. Webhook の検証が通るか確認する
  2. 自分の LINE から「予約」と送って予約リンクが返るか確認する
  3. 予約ページが開き、カレンダーまで進めるか確認する
  4. 「キャンセル」と送ってキャンセルリンクが返るか確認する
  5. 必要ならリッチメニューからも同じ導線が開くか確認する

よくある詰まりどころ

Webhook 検証で失敗する

先にSalonUp側へチャンネルシークレットを保存していないと、署名検証で失敗しやすいです。

LIFF はあるのに予約画面が開かない

LIFF のエンドポイントURLや、SalonUp側に登録した LIFF ID がずれていないか確認します。

通知は届かない

チャンネルアクセストークン(長期)が古い、または別のチャンネルのものになっていないか確認します。

迷ったときの確認順

まず Messaging API の secret / token、次に Webhook、最後に LIFF ID の順で確認すると整理しやすいです。

ログイン 無料で始める

SalonUp を始める

現在、インストール版は準備中です。
いまは Web版ですぐに始められます。

Webで始める