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

スマートスピーカー

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

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

Azure Functions を使った C# での LINE Clova スキル開発と LINE bot (Messaging API) への接続 #LINEDevDay LINE Developer Day – Chomado – Madoka Chiyoda

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

スポンサーリンク

アプリの使い方

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

しもたさん
しもたさん

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

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 で初めての関数を作成する
Visual Studio を使用し、HTTP によってトリガーされる Azure 関数を作成して発行します。

AzureFunctionsの料金体系

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

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

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

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

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

LINEデベロッパー側の設定

LINE Developerサイトへアクセス

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

上記の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@を使っているので筆者からの通知も可能なので、新しい形の宣伝ができるかもしれません。

まとめ

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

コメント