Go to Qiita Advent Calendar 2024 Top
LoginSignup
24
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kuwazzy(義行 桑島)

LINEメッセージをkintoneに記録するMicrosoftFlowを用いたサーバーレスアプリケーションの作成

Last updated at Posted at 2017-02-09

#はじめに

##概要

本記事では、LINEアプリから送信したメッセージをLINE MessasingAPI経由でkintoneに記録する処理をMicrosoft Flowで作成する手順をご紹介します。この手順を応用することでLINEアプリを登録UI、kintoneをWebデータベースとしたサーバーレスアーキテクチャのアプリケーションを作成することができます。

##利用イメージ

image

##構成図

image

##使用アプリ・サービス

・LINEアプリ
・LINE Messaging API
・Microsoft Flow
・kintone

##参照APIリファレンス

・kintone REST API
・LINE Messaging API

#環境の準備

##LINE Messaging API

LINE Business Center に自身のLINEアカウントでログインします。※ログイン時にLINEアプリ上での本人確認が必要な場合があります
image

サービスタブからMessaging APIを始めるを選択して、アカウント名（kintone登録）、必要に応じてアイコン、業種を指定してアカウントを作成します。申し込み完了画面からLINE@MANAGERを開きます。
image

LINE@MANAGERからBot設定を行います。まず、「API利用する」のボタンをクリックします。確認画面が表示されますがそのまま進みます。
image

続いて、リクエスト設定内の「Webhook設定」を「利用する」に設定して、詳細設定内の「Botのグループトーク参加」「自動応答メッセージ」「友だち追加時あいさつ」を全て「利用しない」にします。設定が終わったら下部の「保存」ボタンをクリックして設定を保存し、BOT設定内の「LINE Developersで設定する」を開きます。
image

LINE developersの画面が開きます。作成したアカウントの以下の値をメモしておきます。

  • Channel ID
  • Channel Secret ※「show」ボタンをクリックすると表示されます
  • Webhook URL　※後の手順で設定しますので現時点では空白で構いません
  • Channel Access Token　※「issue」ボタンをクリックすると表示されます

image

画面下部にQRコードが表示されるので、モバイルデバイスなどのLINEアプリから友だち追加でQRコードを読み取り友達として追加します。
image

「トーク」から何かメッセージを送ってみましょう。この時点では何も応答がありませんね。これで（WebHookの設定を除く）LINE側の準備ができました。

##Microsoft Flow
Microsoft Flowの環境を準備します。Microsoft Flowのページを開きます。既にMicrosoftアカウントもしくはoffice365のアカウントを持っている方は右上の「サインイン」、持っていない方は「無料でサインアップ」をクリックしてアカウントを作成します。
image

サインインされていることを確認して、マイフロータブを開きます。これで処理フローを作成する準備ができました。
image

##kintone

WebデータベースとしてLINEメッセージを蓄積するkintoneの設定を行います。アカウントをお持ちでない場合は、サイボウズ社のkintoneのページを開き、30日間無料お試しを申し込みます。
image

アカウントが準備できたら準備されたURLからkintoneにログインします。ポータル画面が表示されたら右下のアプリの「＋」ボタンをクリックして「はじめから作成」を選択します。
image

アプリ設定が開くので、アプリ名称を変更（LINEメッセージ）します。フォームタブにて、以下の内容で配置します。配置したら「アプリを公開」します。

フォーム種類 フィールド名 フィールドコード
文字列（1行） メッセージ メッセージ
文字列（1行） ユーザー ユーザー
作成日時 - -

image

続いて一覧タブを開き、「＋」ボタンから「一覧」を追加します。
image

任意の一覧名（LINEメッセージ一覧）をつけ、レコード一覧の表示形式を「表形式」のままで、「メッセージ」「ユーザー」「作成日時」を右側のエリアにドラッグ＆ドロップして「保存」、続いて「アプリを更新」します。
image

「メッセージ」「ユーザー」「作成日時」の一覧ができましたね。これでkintone側の準備ができました。
image

#処理の作成

##トリガーの作成

準備が終わりましたら、いよいよ処理のフローを作成していきます。MicrosoftFlowの「マイフロー」タブを開き、画面右上の「一から作成」をクリックします。
image

新規フロー作成画面が表示されるので、フロー名（LINEメッセージkintone登録）を設定して、検索ボックスから「要求」と入力して検索結果として表示された「要求と応答 - 要求」トリガーを選択します。
image

本トリガーで生成されるURLをLINEサーバーのWebHookURLで指定したURLに設定することでLINEサーバーからMicrosoftFlowで作成している本フローを起動することができるようになります。
image

「要求本文のJSONスキーマ」にLINEサーバーから送られたRequestのBodyを読み込めるようにJSONスキーマを設定します。WebHookAPIでリクエストされるJSONを取得するためにLINE API Reference - Messaging API内のWebhookエンドポイントを開き右側の「Webhook request bodyの例」のJSONをコピーしてjsonschema.net等のサイトを利用したりしてJSONスキーマを生成します。作成したJSONスキーマを「要求本文のJSONスキーマ」に貼り付けます。
image

これで処理のトリガーは作成できました。「フローの作成」ボタンをクリックして保存しようとすると一つ以上のアクションが必要な旨のメッセージが表示されるので「＋新しいステップ」からアクションを追加します。検索ボックスに「作成」と入力して検索結果の一覧から「データ操作-作成」アクションを選択します。
image

「作成」アクション内の「入力」には、「要求と応答 - 要求」トリガーで指定したJSONスキーマ内の項目を選択できるので、LINEメッセージに該当する「Text」を選択します。JSONスキーマが配列構造になっているので「Apply to each」が自動的に定義され「作成」アクションが中に含まれる処理となります。
image

ここまで出来ましたら一度「フローの作成」ボタンをクリックして保存して完了します。そうすると「完了しました。新しいフローは実行中です」とのメッセージが表示された画面となります。
image

続いてマイフロータブから作成したフローを再び開きます。「要求と応答 - 要求」トリガーを開くと「この URL に HTTP POST」にURLが生成されますのでコピーします。これでトリガーは作成されました。
image

##LINEサーバ側のWebHookURLの設定

LINE@MANAGERから該当アカウントの「LINE developers」の画面を開き、「Webhook URL」に、前の手順でコピーしたURLを張り付けて保存(Save)します。
image

##LINE側のWebHook設定とMicrosoftFlow側の要求トリガーの接続確認

これで、本アカウントにLINEメッセージが送られると、本WebHookで指定したMicrosoftFlowの「要求」トリガーが自動的に起動されるようになりました。それでは動作を確認してみましょう。
モバイルデバイスのLINEアプリから作成したアカウント（kintone登録）にメッセージを送信します。
image

Microsoft Flowにてマイフローから作成したフローの右横の青の「i」ボタンを開きます。
image
処理結果の一覧画面にて状態がSuceededになっていることを確認して処理結果を確認します。「作成」アクションの出力にLINEアプリから送信したメッセージが表示されていればここまでは成功です。
image

##LINEユーザ名の取得

次に誰から送られてきたメッセージなのかを判別するために、LINEのユーザ表示名（DisplayName）を取得します。作成したフローの実行結果の「要求」の出力結果には、useridが含まれていることを確認します。
image
LINE APIリファレンス Messaging API内のProfileエンドポイントを参照するとuseridをパラメータにユーザの表示名を取得できることがわかります。
image
それでは、フローにユーザ表示名を取得するアクションを追加します。「作成」アクションの下に新たにアクションを追加します。検索にて「HTTP」と入力して検索結果に表示された「HTTP - HTTP」アクションを追加します。
image
以下の内容をセットします。

項目 値 補足
方法 GET -
URI https://api.line.me/v2/bot/profile/[userId] [userId]には「要求」トリガーのレスポンス値を指定
ヘッダー {
"Authorization": "Bearer [Channel Access Token]"
}		 [Channel Access Token]はLINE Developersで取得した値をセット
image
作成したHTTPアクションの名前を分かりやすい名称（GetLineUsername）に変更します。HTTPアクションを追加したので「作成」アクションは削除します。「フローの更新」で保存して「完了」します。
image

そこまで出来ましたら、もう一度、LINEアカウントからメッセージを送信してフローの実行結果を見てみましょう。追加したHTTPアクションの出力の本文内のdisplayNameにLINEアカウント表示名（kuwazzy）が表示されていれば成功です。
image

##kintoneアプリへの登録

いよいよ取得したメッセージとユーザ表示名をkintoneのアプリに登録する処理を作成します。前の手順と同様にHTTPアクションを追加します。kintoneアプリへの登録には、kintone REST APIのレコードの登録(POST)を使用します。

項目 値 補足
アクション名 PostKintone -
方法 POST -
URI https://[SubDomain].cybozu.com/k/v1/record.json [SubDomain]にはサブドメインをセット
ヘッダー {
"Content-Type": "application/json",
"X-Cybozu-Authorization":"[Base64 encoded UserID:Password]"
}
 [Base64 encoded UserID:Password]はkintoneへのログインUserIdとPasswordをコロンで繋げてBase64エンコーディングした文字列をセット
本文 {
"app": [AppId],
 "record": {
  "ユーザー": {
   "value": "@{body('GetLineUsername').displayName}"
  },
  "メッセージ": {
   "value": "[text]​​"
  }
 }
}		 [AppId]にはkintoneのアプリ管理画面から確認できるIｄをセット、「@{body('GetLineUsername').displayName}」は上流のHTTPリクエスト（GetLineUsername）の出力本文からdisplayNameを取得、[text]には要求トリガーの値をセット
image
「フローの更新」で保存して「完了」します。それでは、LINEアプリからメッセージを送信してテストを実施してみましょう。追加したHTTPアクション（PostKintone）の実行結果を確認します。出力の状態コードが200（正常）、displayNameにLINEのユーザ名が表示されていることを確認します。
image
続いてkintoneのアプリ（LINEメッセージ）にLINEアプリから送信したメッセージとLINEのユーザ名のレコードが追加されたことを確認します。レコードが追加されていれば成功です。
image

##LINEアプリへの登録内容の返信

最後にLINEアプリにkintoneへ登録できた旨のメッセージを返信する処理を追加します。LINE APIリファレンス Messaging API内のReply Messageエンドポイントを参照するとリクエストの本文にReplyTokenとMessageが必要であることを確認できます。

項目 値 補足
アクション名 PostLineReply -
方法 POST -
URI https://api.line.me/v2/bot/message/reply -
ヘッダー {
"Content-Type": "application/json",
"Authorization": "Bearer [Channel Access Token]"
}		 [Channel Access Token]はLINE Developersで取得した値をセット
本文 {
 "replyToken": "[replyToken]​​",
 "messages": [
  {
   "type": "text",
   "text": "メッセージ「[text]​」を登録しました"
  }
 ]
}		 [replyToken]​​と[text]は要求トリガー内の値をセット
image
「フローの更新」で保存して「完了」します。それでは、LINEアプリからメッセージを送信してテストを実施してみましょう。メッセージを送信して間もなく登録した旨の返信が届くようになれば成功です。
image kintoneアプリにもレコードが追加されていることも確認します。 ![image](https://qiita-image-store.s3.amazonaws.com/0/123181/3ad6d32a-f1b3-c51c-b57c-dff110a0463e.png)

#まとめ

今回の手順では処理を簡略化したため、各エラーハンドリングやLINE Messaging APIを利用する場合の下記の内容については実装していません。実際に運用する場合には必要となりますのでご注意ください。

  • WebhookのHTTPS POSTリクエストに対しては、常にstatus code 200を返してください。
  • Signature validation

今回作成したフローと同じものはMicrosoft Azure内のLogic Appsでも作成することができます。Logic AppsだとAzure Functionsと呼ばれるサーバー不要のコードアーキテクチャを呼び出せる、更にリージョンの指定や処理スペックの指定が出来ますので、組織として運用する場合、複雑な処理が必要な場合にはLogic Appsの方が向いています。個人レベルの運用で処理も本フロー程度のものであればMicrosoft Flowで実現できることを確認できたと思います。

#最後に

本サンプルを作成するきっかけとなったのはnkjmさんが主催するnode.js×Herokuの環境でLINEChatBotを作成するOracle Cloud Developers Meetupでおこなうワークショップに出席したことでした。本ワークショップに参加することでLINE Messaging APIについて理解することができました。この場を借りてお礼申し上げます。

24
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
24
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?