多言語学習アプリを作成してみよう

～Power Platform～ 多言語アプリを作成してみよう！！

自己紹介 Name コルネ Twitter @koruneko32767 よろしければチャンネル 登録お願いします！ Blog koruneko.hatenablog.com YouTube https://www.youtube.com/channel/UCYvIgC9JYS6VFumWdwi5QMA

• https://twitter.com/koruneko32767
• https://t.co/Pb0lI90obA?amp=1
• https://www.youtube.com/channel/UCYvIgC9JYS6VFumWdwi5QMA

こんなアプリ作ってます！ オセロ パズルゲーム ローグライク(作成途中) ボンバーマン 作曲アプリ 勤怠管理アプリ

Agenda ・こんなアプリ作成してみました！ ・ざっくり要件 ・全体構成 ・Power Automate の構成 ・Power Apps の構成 ・さいごに

こんなアプリ作成してみました！

ざっくり要件

・色々な言語を選択できる ・選択した言語で問題を読み上げてくれる ・日本語訳を表示できる ・キーフレーズの抽出ができる あれ…この要件は…？

Microsoft Translator で実装できるじゃん！！ * キーフレーズの抽出にはText Analytics が必要です。

アプリの全体構成

英文取得 テーブル参照 テーブル作成 キーフレーズの 生成 Text Analytics こちらのツイートを 参照させていただきました。

Power Automateの構成

フローはこのような構成。 トリガーにはツイートの更新頻度が不明だったため 手動での実行にしていますが、スケジュールに変更しても いいですね。 フローの実行を行うと・・・ 1. ユーザーのツイートを取得します。 2. その結果をApply to eachにて ・英文のみ ・重複なし のルールに従ってExcel のテーブルに格納しています。

@{body('ユーザー_タイムラインの取得')} Apply to each の中身はこのようになっています。 「ユーザータイムラインの取得」で得られた 結果数だけ処理を行っています。

取得対象のツイートをみてみると 英文 + 翻訳 といった形式で呟かれています。 また、英文以外も呟かれています。 今回取得したいのは英文なのでフローを用いて フィルタリングを行いましょう！

@{first(split(items('Apply_to_each')['TweetText'], uriComponentToString('%0A')))} そのフィルターを行っている箇所がこちらです。 変数の値に設定しているのは、取得したツイートの 最初の行です。 式の関数を1つずつみていくと・・・ items(‘Apply_to_each’)[‘TweetText‘] ┗取得したツイート uriComponentToString(‘%0A’) ┗改行コード “¥n”などのエスケープ文字 split(text, separator) はsplit()では認識されない ┗textをseparatorで区切ります ので注意!! first() ┗配列の1つ目のデータを取得します となっています。 あとは、取得された文章の言語が英語だった場合のみ 処理を行うように設定しています。

重複データの確認を行います。 「行の取得」にて取得した英文でフィルタを行います。 フィルタを行っている設定は、 対象の列 ：キー列 キーワード：キー値 です。 こちらの処理ですが、何も取得できなかった場合 空の結果を返すのではなくエラーを返します。 なので「表に行を追加」する処理では、 「実行条件の構成」より、「行の取得」に「失敗」に チェックをつけましょう！ 実行条件の構成

Power Appsの構成

今回使用するデータソースは主にこの2つ!! 翻訳・読み上げを行うためのデータソース Microsoft Translatorに関する公式docはこちら Power Apps から Microsoft Translator に接続する 先ほどPower Automate で作成した Excel のテーブルを選択

• https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/connections/connection-microsoft-translator

メイン画面を構成しているのは・・・ ・タイトルラベル ・「言語を選択」ラベル ・言語一覧ドロップダウン ・問題ボタン ・問題一覧ボタン 下線がMicrosoft Translator を使用している箇所

まずは言語を選択するドロップダウンを作成してみましょう! ドロップダウンのItemsに下記のような式を記載します。 MicrosoftTranslator.SpeechLanguages() この式でこのようなテーブルが作成されます。 ドロップダウンに表示させたいのは”Name”なので ”Name”を選択しましょう。

問題画面を構成しているのは・・・ ・タイトルラベル ・設問ラベル×3 ・読み上げを行うオーディオ ・翻訳表示/非表示トグル ・翻訳テキスト ・解答入力欄 ・解答ボタン ・ヒントテキスト ・諦めるボタン ・結果を表示するラベル 下線がMicrosoft Translator を使用している箇所

問題画面の課題 やりたいこと 課題 選択した言語で問題を よみあげたい！ 音声は「オーディオ」コントロール で再生可能 でも音声はどうやって用意する？ (言語毎に用意するのは凄く手間…) 問題文の日本語訳を表示したい！ 英文しかテーブルにはないが 翻訳した文章も用意する？ ヒントとなるテキストを表示した い！ (問題と解答で一致している箇所の み表示を行いたい) どうやって判断する？ 解決策

問題画面の課題 やりたいこと 課題 解決策 選択した言語で問題を よみあげたい！ 音声は「オーディオ」コントロール 音声のメディアは で再生可能 MicrosoftTranslator.TextToSpeech() でも音声はどうやって用意する？ で簡単に作成が行える！ (言語毎に用意するのは凄く手間…) 問題文の日本語訳を表示したい！ 英文しかテーブルにはないが 翻訳した文章も用意する？ MicrosoftTranslator.Translate() で簡単に翻訳を行える！ ヒントとなるテキストを表示した い！ (問題と解答で一致している箇所の み表示を行いたい) どうやって判断する？ 文字列をSplit()で分割してForAll()で ごにょごにょ頑張れば実装できそう だ

問題の読み上げ 「オーディオ」コントロールを追加して Mediaに以下のような関数を適応 MicrosoftTranslator.TextToSpeech(query, language) ・query：読み上げを行う文章* ・language：読み上げを行う言語 *読み上げを行う文章は読み上げを行う言語で翻訳しておきましょう

文章の翻訳 文章の翻訳には以下の関数を利用します。 MicrosoftTranslator.Translate(query, languageTo) ・query：翻訳を行う文章 ・languageTo：翻訳先の言語

ヒントとなるテキストの表示 こちらは関数を用いて独自で実装していきます。 その前に要件の再確認… 問題：What is indicated on the Web page? 回答：What is indicate in the Web page? と入力した場合表示されるヒントは… What is ??? ??? the Web page? としたい。

ヒントとなるテキストの表示
Clear(tmpCol);
ForAll(
Split(
MicrosoftTranslator.Translate(
Last(FirstN(table, _count)).Sentence,
ChoiceLangDropDown.Selected.Code
),
""
),
Collect(
tmpCol,
{
ID:CountRows(tmpCol), // IDを連番で設定
Result:Result
// 単語を設定
}
)
);

“tmpCol”というコレクションに
スペース区切りを行った問題
文とIDを設定します。
Power Apps での ForAll 関数

ここにIDが大事！！

• https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/functions/function-forall

ヒントとなるテキストの表示 UpdateContext( { _hintText: Concat( ForAll( tmpCol, If( Result = Last(FirstN(Split(AnswerTextInput.Text, " "), ID + 1)).Result, Result, // 回答と問題が一致した場合 “???” // 回答と問題が不一致だった場合 ) ), Value & " " ) } ) 左の式で行っていることは… 1. 2. 3. 4. 5. 先ほど作成したテーブルのレコード分処 理 問題(レコードのN番目)と回答をスペース で区切った際のN番目の単語を比較 一致した場合は”Result”(問題の単語)を一 致しなかった場合は”???”をレコードに設 定 レコードに設定された文字列をスペース で結合 “_hintText”に設定

解説画面を構成しているのは・・・ ・ラベル×3 ・読み上げを行うオーディオ ・翻訳テキスト ・キーフレーズ表示ギャラリー ・Nextボタン 下線がMicrosoft Translator を使用している箇所

キーフレーズの抽出 キーフレーズの抽出にはText Analytics(テキスト分析) を利用します。 Text Analytics はAzure Cognitive Service のAPIです。

Text Analytics とは？？ Text Analytics は未加工のテキストに対して高度な自然言語処理を実行で きるクラウドベースのサービスであり、主要な機能として感情分析、 キー フレーズ抽出、言語検出、名前付きエンティティの認識の 4 つを備 えています。 Text Analytics API とはより引用 Power Apps でText Analytics を試す際はこちらの公式チュートリアルが参 考になります。 Power Apps の Cognitive Services を使用する

• https://docs.microsoft.com/ja-jp/azure/cognitive-services/text-analytics/overview
• https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/cognitive-services-api

Text Analytics のPower Apps への追加は Power Apps の Cognitive Services を使用する の「アプリの作成と接続の追加」を参照してください。 上記サイトの通りやってるのに上手くいかない… そんなときはText Analytics の「エンドポイント」を 「Site URL」に入力してみてください。

• https://docs.microsoft.com/ja-jp/powerapps/maker/canvas-apps/cognitive-services-api

キーフレーズの抽出 キーフレーズの抽出には以下の関数を利用します。 テキスト分析.KeyPhrasesV2( {text:Text , language:Text} ).keyPhrases ・text：分析を行う文章 ・language：分析を行う言語

キーフレーズの抽出 テキスト分析.KeyPhrasesV2().keyPhrase は結果を コレクションで返します。 なのでこの結果を表示する際はギャラリーを 利用しましょう！

さいごに

Power Platform の可能性は無限大！ あなたのアイディア一つで日々の業務や生活を豊かにすることが できます！！ でもそのためには… ある程度の学習により知識をつけることが必要です。 もしなにか困ったことがあった際はこちらのコミュニティで質問 するといいかもです。 Japan Power BI User Group https://www.facebook.com/groups/JapanPBUG Microsoft Power Apps Japan https://www.facebook.com/groups/powerappsjp/ LogicFlow-ja https://www.facebook.com/groups/logicflowja/ Office 365 コミュニティ https://www.facebook.com/groups/Office365Com.jp/ Japan Power Virtual Agents User Group https://www.facebook.com/groups/JPVAUG/

• https://www.facebook.com/groups/JapanPBUG
• https://www.facebook.com/groups/powerappsjp/
• https://www.facebook.com/groups/logicflowja/
• https://www.facebook.com/groups/Office365Com.jp/
• https://www.facebook.com/groups/JPVAUG/