LINEでbotやリッチメニューを設定するお話

  • このエントリーをはてなブックマークに追加

ここ最近いろいろな意味で話題になっているLINEですが、とはいえ便利なSNSツールであることは間違いないところです。

ここでは情報セキュリティ的な部分は置いといて、LINEのAPIを利用したbotやリッチメニューを作っていきます。

事前に行うこと

LINE for Business でアカウントを開設する

こちらの方で取得してください

LINE Developers からログインする

https://developers.line.biz からログインします。

チャンネル設定から「新規チャンネル作成」を選び、チャンネルを作成

「LINEログイン」や「Messageing API」などがありますが、今回は「Messaging API」を使います。(「LINEログインはSNSログインみたいな感じですかね)
チャンネル情報はそのままですがアプリタイプは「ウェブアプリ」を選択してください。(アプリで使うならネイティブアプリ)

作成したチャンネルから必要情報をメモ

作成したチャンネルの「チェンネル基本設定」から
  • チャンネルID
  • チャンネルシークレット
  • あなたのユーザーID
「Messaging API設定」から
  • チャンネルアクセストークン(長期)
をメモしておきます。

 

Webhookを使ってBotのプログラムを用意する

LINE Officail Account Manager を使ってBotの設定をしてもよいのですが、自社のシステムから投稿管理を行いたいので、今回はWebhookを使って自社サーバーのプログラムを叩いてもらいます。
Webhookについて詳しくはグーグル先生にでも聞いてください。

 

Webhookのプログラムを用意する

言語は何でもいいですが、PHPでささっと書いておきます。

PHP用のLINE bot SDKですが、こちらもcomposerをつかってささっとインストールできますので、それが入っているという前提です。

バリデーションチェックや実際の処理はほぼ入っていなくてフォローの時、フォロー解除の時、メッセージが来たときに叩かれる時の挙動を入れてます。

Webhookの設定を行う

LINE Developers のチャンネル「Messageing API設定」から「Webhook設定」のWebhook URLに作成したプログラムのURLを入力して更新してください。

QRコードから実機でアクセスする

「ボット情報」のQRコードをLINEアプリから読み取るとアカウントが表示されて、友達登録を行うとWebhookプログラムで定義していた「友達追加ありがとう!」と表示されます。

これでbotの完成ですね。
メッセージの内容によって返す文言を返せばいい感じのbotが作れます。

 

リッチメニューの作成

公式アカウントを開くとメニューみたいなのが表示されますが、あれの作り方もまとめます。
東京都民の方はよく見るあれですが、これもAPIを使って作れますが、とりあえずLINE Official Account Managerで作っていきます。

https://manager.line.biz/

ログイン後、「アカウント」からアカウント行ってください。

その後、「ホーム」「トークルーム管理」「リッチメニュー」からトークルームを作りましょう。


表示設定ですが、基本的に管理画面に詳しく書いてあるのでそのまま入力してください。

コンテンツ設定ですが、はじめにメニューのテンプレートを選択します。
これに関してはあらかじめどういうメニューがいいか最初に決めておくのがいいでしょう


テンプレートを選択すると、アクションを設定することができます。


「リンク」はメニューをタップすると設定したリンク先へ遷移され、「クーポン」はあらかじめ設定したクーポンが表示されるようになります。

では「テキスト」ってなにかというとタップすると設定したテキストが利用者から送られてくるだけです。

「ん?意味あるの?」って思うかもしれないですが、前述したbotを駆使するとまるでLINEでやりとりをしているかのような形で案内が可能となります。

上記のプログラムの

の部分が呼び出されるので、ここに処理をつければいい感じですね。

先ほどの「リンク」だと直接リンク先へ遷移されますが、「テキスト」と「bot」を使うと、LINEアカウントからリンク先を案内すると言った形になるので、コンテンツ次第ではありじゃないでしょうか

 

執筆者:松本[ エンジニア ]

関連記事

マークアップ

背景に画像や動画を置いてパララックス効果で見せる

サイトを作っているとスクロールした時に背景画像などを固定させておきたい、パララックス効果を使いたいという時があると思います。 簡単なものであれば簡単なcssで実現できます。 目次1 背景画像をパララックス効果で見せる1.1 DEMO1.2 HTML1.3 CSS 背景画像をパララックス効果で見せる DEMO See the Pen Untitled by kkdd (@kk8kk) on CodePen. なんとなくよく見る感じの表示になっていると思います。 HTMLとcss […]

スマホアプリ

Android Studioでベクター画像を登録しよう

Androidアプリを作成しているとアプリ内のアイコン画像を追加したい、ということありますよね。 そんな時は画像の解像度を気にせず使用できる、ベクター画像を使用すると便利です。 Android Studioでは、ちょっとした手順を踏めばベクター画像をdrawableリソースの中にxmlファイルとして生成してしてくれます。 簡単なので、早速進めてみましょう。 目次1 Android Studioを開こう2 ベクター画像の登録画面を開こう3 クリップ・アートで登録してみよう4 ロ […]

マークアップ

属性セレクターを使ってファイルごとにアイコンをつけよう!

例えばpdfのアイコンをつけたいときに『pdfIcon』をというclassをつけて表示させる、という方法があります。 ただ動的に表現したい場合などにちょっと不便だなと思うこともあるかと思います。 そんな時は属性セレクターを使ってファイルごとにアイコンをつけることができます。 早速属性セレクターを使ってみよう 属性セレクターはを使えば指定された値が存在していたら指定されたcssを適用する、という感じの動作をしてくれます。 書き方としては「属性$=”値”」 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。