ClovaからMessagingAPIを使ってLINEへ通知

スマートスピーカー
2018.12.01

この記事では、ClovaからMessagingAPIを使ってLINEへ通知する方法について書きます。

自分でWordPressのブログサイトを作っているので、ブログ系のVUIアプリを作りたいと思っていたときに、ちょまどさんがブログの最新記事をLINEに通知するサンプルアプリをGithubに公開していました。

Azure Functions を使った C# での LINE Clova スキル開発と LINE bot (Messaging API) への接続 #LINEDevDay LINE Developer Day
LINE 社の公式大型技術カンファレンス「LINE DEVELOPER DAY 2018」にて、 『サーバーレ …
chomado.com

「これいい！」と思って動かしてみることにしましました。

アプリの使い方

アプリの動作は次の感じです。

しもたさん
しもたさん

しもたさんのブログを読みたい

clova
clova

はい、最新記事を教えてと言ってください

しもたさん
しもたさん

最新記事を教えて

clova
clova

最新記事は、○○です。

line
line

ピンポーン！

アプリの構成

  •  開発環境
    • Visual Studio 2017   （C#）
    • ngrok（ローカルテスト用）
    • clova
  • サーバー環境
    • Azure Functions
    • CEK (Clova Extensions Kit)
    • Messaging API
    • clova
  • ソース
    • https://github.com/chomado/SmartSpeakerGetLatestArticle

clova本体とスマホがあれば、あとは無料で準備することができます。このアプリを動かすためには、以下の知識が必要です。

  • Visual StudioからでAzure Functions（サーバーレス）へのリリース
  • CEK (Clova Extensions Kit) でVUIを作成できる
  • Messaging APIとCEKの連携

私が詰まった点を中心に上記のエッセンスを記載します。

Azure Functionsへのリリース

Azure Functionsへのリリース

VisualStudioからAzureFunctionsへのリリースの手順

クイック スタート: Visual Studio を使用して Azure で初めての C# 関数を作成する
このクイックスタートでは、Visual Studio を使用して、C# HTTP でトリガーされる関数を作成し、Azure Functions に発行する方法について説明します。
learn.microsoft.com

AzureFunctionsの料金体系

価格 - Functions | Microsoft Azure
Azure Functions では、豊富なイベント トリガーとデータ バインディングにより、サーバーを必要とせずに開発を行うことができます。
azure.microsoft.com

ちょまどさんがVisual Studioを使っていたので私もVisual Studioを使いました。Azureへのリリースは、プロジェクトを発行するだけでできるので、とても楽ちんですね。デバッグもやりやすいです。

でも我が家のマシンだとちょっとカクカクなので、VisualStudioCodeを使いたいです。それから、AzureFunctionsを初めて使うので、料金体系を確認しました。100万回まで無料なので、心配することはないかなと言った感じです。

Azure Functionsのアプリケーション設定

GitHubのプログラムでは、設定ファイルを読み込む記載があります。最初は何もしなくても動くのかと思っていましたが、Azure Functions側に設定が必要です。

LINEデベロッパー側の設定

LINE Developerサイトへアクセス

LINE Developers
LINE Developersサイトは開発者向けのポータルサイトです。LINEのさまざまな開発者向けプロダクトを利用するための、管理ツールやドキュメントを利用できます。LINEログインやMessaging APIを活用して、アプリやサービスをもっと便利に。
developers.line.biz

上記のURLからサイトにアクセスでき、ご自身のLINEアカウントでログインすることができます。この中の、「clova」と「Messaging API」を使います

LINE@MANAGERの設定変更

LINEにプッシュ通知を送るためには、LINE@アカウントが必要です。アカウント取得後、LINE@マネージャーから一部の設定を変更します。

LINE Messaging APIの設定

MessagingAPIのプロバイダーリストに通知用のアカウントを設定します。この設定の中で、「アクセストークン」が必要になります。

Clova Extensions Kitの設定

CEKのIntent設定

Messaging APIとの連携

Extensionと連携するLINEアカウントとという欄で、LINE@アカウントと連携させます。コンボボックスになっているところはいいですね。

ExtensionサーバーのURL

ExtensionサーバーのURLは、Azure Functionsの関数のURLをコピペします。ローカルでやるのと同じく、もっと短いと思ってました・・・。

対話モデルのテスト

対話モデルのテストでは、Messaging APIとの連動テストはできません。必ず500エラーが返ってきます。。。

開発中に嬉しかったこと

初めて、Azure FunctionsとLINE Messaging APIを使ったので、結構つまりました(笑)色々なところにつまずきながら、愚痴をツイッターでつぶやいていたら、ちょまどさんからコメントが入りましたー！！

感謝です。今度、勉強会で見かけたときは、ご挨拶に行きます。

使ってみた感想

スマートスピーカーでVUIのアプリを作っていると、音声出力（文字の読み上げ）でしか結果を得ることができず、シンプルな答えしか返せません。ブログのURLをスマホに送りたい場合はVUI単体ではできません。しかし、LINEのMessaging APIを使うと、普段使っているLINEにブログのリンクを送ることができます。

前に、自分のブログをPWA化した際に、通知許可をしてくれた人にブログを更新したことをPUSH通知する機能を実装しましたが、「PUSH通知を許可してもらうこと」が一番大変だと思っています。

このサンプルアプリでは、ブログ専用のLINEを自分のLINEに友だち追加して、ブログを読みたいと思ったときに呼び出してもらう方式です。LINE@を使っているので筆者からの通知も可能なので、新しい形の宣伝ができるかもしれません。

資料追加

ボットを LINE に接続する - Bot Service
ボットを LINE に接続する方法について説明します。 LINE アプリを介してユーザーと通信するようにボットを構成する方法について説明します。
learn.microsoft.com

まとめ

この記事では、ClovaからMessagingAPIを使ってLINEへ通知する方法について書きました。作り方がわかったので、今後は、VoiceRssReaderみたいなものかブロガーさん向けのアプリを作ってみたいです。

コメント

タイトルとURLをコピーしました