ノンコードで個人利用の英単語学習アプリを作成する

概要

PowerApps を利用して英単語学習アプリを作成します。
今回は英単語の学習アプリですが、同様の仕組みで様々な学習アプリが作成できます。

全体の方針

• 使いやすい
• ワード登録機能
• 登録されているワード確認機能
• ランダム学習機能
• モチベーションの維持

アーキテクチャ

モチベーションの維持として、LINEのMessagingAPIを利用し、JapanPowerAppsUG のキャラクターがその日の実績をほめてくれる機能を実装しています。

#PowerApps#MicrosoftFlow#LINE
ぱわーちゃん（ボット）が頑張ったらLINEで褒めてくれる
画像は@yakandows10さんが作成したものです。 pic.twitter.com/cjxK57fJ3z

— たく丸 (@taku_ma_ru) August 27, 2019

前提条件

各種アカウントが必要です。

• PowerApps Plan1相当（Plan2-traialなど Office365プランでは今回のアーキテクチャは作成できません（MicrosoftFlow のプレミアムコネクタと CDS を利用しているため））
• LINE Bot のアカウント(LINE 連携済み) MessagingAPI を利用するため、LINEアカウントが必要になります。

LINE Bot アカウント作成

1 LINE Developer コンソールにアクセス(https://developers.line.biz/ja/)

2 右上のログインから LINE アカウントでログイン

3 新規プロパイダを流れに従って作成

4 チャンネルを作成。Messaging API を選択

5 チャンネル作成後、下のほうのアクセストークンを発行。この時、失効時間は 「0」 を指定することで失効しなくなる

アプリを作成

特に難しいことはしていません。
好きなように見た目を作りましょう。
サンプルとして、アプリの画像を配置しておきます。

スマホでの英語入力が個人的に苦手なので、ボタンをキーボードのように配置しています。それぞれ選択時に

UpdateContext({ctxInputItem: ctxInputItem & Button.Text})

としています。

後ほどアプリのサンプル（.msapp）も別に公開します。

CDS のエンティティ

もう少し作りこんでもいいかもしれません。例えばそれが単語なのかとか、どのタイミングで利用するかなどほかのアプリでも使えるように汎用的に作ってもいいかも。

Flow

全体像

最後の HTTP は1つにしたほうがメンテナンスの面からみても楽ですので、まとめてしまうことをお勧めします。

流れとして、

今日登録した一覧を取得 → 1件でも登録していたらほめるメッセージ、登録していなかったら、応援メッセージといった感じです。

レコード一覧のOData

createdon ge body('過去の時間の取得')

init GoodMessageList(アレイ)

[
  "これからも続けて入力しよう！！",
  "今日もお疲れ様！",
  "この調子で頑張ってね",
  "今日も１日お疲れ様",
  "今日の勉強はどうだったかな？",
  "英語は覚えられそう？明日も続けて入力しよう！"
]

init init BadMessageList(アレイ)

[
  "今日は忙しかったのかな？明日こそは頑張ろう！",
  "入力を続けて頑張ろう！",
  "今日は入力がなかったなぁ。。。",
  "まずは１日１単語から！"
]

上記 init の2つに関しては Excel や CDS なんかでメッセージを管理するのもありです。

作成

[
  {
    "type": "text",
    "text": "first(skip(variables('GoodMessageList'),rand(0,length(variables('GoodMessageList')))))"
  },
  {
    "type": "sticker",
    "packageId": "11537",
    "stickerId": "rand(52002734,52002743)"
  }
]

作成2

[
  {
    "type": "text",
    "text": "first(skip(variables('BadMessageList'),rand(0,length(variables('BadMessageList')))))"
  },
  {
    "type": "sticker",
    "packageId": "11538",
    "stickerId": "rand(51626522,51626532)"
  }
]

MessagingAPI の送信オブジェクトの内容になります。
詳しくはこちら（https://developers.line.biz/ja/reference/messaging-api/#text-message）
今回の内容は テキスト + スタンプのメッセージです。

HTTP

方法 POST

ヘッダー

キー	値
Content-Type	application/json
Authorization	Bearer {accessToken}

{accessToken}には最初に発行したチャンネルのアクセストークンを設定します。

本文

{
  "to": "{userId}",
  "messages": outputs('作成')
}

{userId}には作成したチャンネルの一番下にあるIDを指定します。
今回は個人利用が想定なのでいいですが、いろんな人に利用してもらう場合は、別途 webHook 先を用意し友達登録時にデータベースなどに登録する流れになります。

以上で完成です。

まとめ

個人学習用のアプリは環境さえ整えられれば、プログラミングをしなくても作成できます。
また、LINEのほかにメールやSlack、Microsoft Teams + アダプティブカードを利用すれば個人だけでなく、企業内の学習アプリとしても役立ちます。