4
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

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

概要

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

全体の方針

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

アーキテクチャ

image.png

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

前提条件

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

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

LINE Bot アカウント作成

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

image.png

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

image.png

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

image.png

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

image.png

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

image.png

アプリを作成

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

image.png

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

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

としています。

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

CDS のエンティティ

image.png

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

Flow

全体像

image.png

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

流れとして、

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

レコード一覧のOData

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

init GoodMessageList(アレイ)

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

init init BadMessageList(アレイ)

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

上記 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 + アダプティブカードを利用すれば個人だけでなく、企業内の学習アプリとしても役立ちます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
4
Help us understand the problem. What are the problem?