Power Platform学習アプリ作成会#2

おはようございます、こんにちは、こんばんは。先日は学習アプリ作成会にご参加いただきありがとうございました。今回もレポートとして記事を投稿いたします。分かりにくかった点は以下の動画(#2)をご覧ください。

また、記事に誤りがあった場合は、優しくご指摘いただけますと幸いです。なお、この記事は筆者が一方的に書いているものなので、文責はkuro.が負うものです。ご理解いただけますと幸いです。

動画#2

マグロの生態 Akira ちゃんねるより

前回の復習(#0と#1)

復習に関しては動画を視聴していただくか、当ブログの『Power Platform学習アプリ作成会#0』をお読みいただければと思います。Akiraさんのチャンネルは高評価と登録をよろしくお願いします。

今回(#2)の目指すところ

日本語データと英単語データが連動する形で表示されるまでが第3回での目標

前回は、SharePointリストの単語データをPower Appsと紐づけて4つの選択肢を作る手前まで作りました。第3回は「4つの選択肢を作成し、問題作成ボタンを押したらそれらがランダムで表示される」ように作成します。毎度ながら、きちんと動くと感動モノです。この気持ちは忘れないでいたいところです。箇条にすると以下の通り。

  1. 骨組みとなる4つの選択肢を作成する
  2. データソースから4つの英単語を抽出する
  3. 4つの英単語データがランダムに表示されるようにする

箇条で書くと3つだけの工程ですが、きちんと手順を追わなければ骨組みの作成段階で躓きかねません。Akiraさんも話していましたが、いきなり完成させようとしないこと、一つずつ積み上げることを今回も意識して取り組みます。

選択肢を作る前に

早速ですが、骨組みとなる4つの選択肢を作る前に必要な作業があります。現在、ギャラリーには縦に英単語が1つずつ並んでいますが、これを4つずつ表示できるようにしなければなりません。最も簡単と思われる方法が、このギャラリー(以下、gal4choices)のプロパティから折り返しの数を1から4に書き換えてあげるものです。

書き換えた後、このようになっていればOKです

このままだと3つしか表示されていないので、もう一つ作業を加えます。2通りの方法があるので、どちらか好きな方でやってみてください。

1つ目の方法:マウス操作で
2つ目の方法:プロパティペインから
結果

これで準備完了です。ここから関数で横4つの英単語を絞り込んでいく作業が始まります。

使用した関数の振り返り

ここから「関数おじさん」こと、ようさんの解説が始まります。今回も土台から丁寧に教えていただきました。全くの初心者にとっては難しく感じたはずですが、この1回の説明だけで理解しようとするのではなく、何度も動画を見返し、実際に触れ続けることが大切なのではないかな…と個人的には思います。

First, FirstN, Last, LastN関数

今回は4つに絞り込みたいのでFirstN関数を使用

いきなり4つのレコードを絞り込むのではなく、まずは内1つを絞り込めるようになりましょう…ということで、First (N) 関数を学習しました。First関数は、最初のレコードのフィールド値を教えてくれる関数で、FirstN関数は、最初からN番目のレコードのフィールド値を教えてくれる関数です。Last関数、及びLastN関数は英単語の意味からも連想できることと思います。

  • First (データソース名)
    • colQuestionに入っている最初のレコードにおけるフィールド値である “culture” を抽出する
  • FirstN (データソース名, いくつ絞りたいか)
    • colQuestionに入っている最初のレコードにおけるフィールド値 “culture” から “strategy” までの4つを抽出する

ここまでの要領が理解できた段階で、選択肢らしい見た目に変える作業を行います。まず、gal4choices 内の lblWords を削除します。次に、選択肢を作る準備段階で紹介した同手順でボタンをギャラリーテンプレートに置き換えます。最後に、コントロールの名称を btnChoice に変更し、Textプロパティには ThisItem.answer を入力します。これで選択肢の骨組みが完成しました。

lblWords での作業内容と同じです

ギャラリーテンプレートの高さを変更し、btnChoice を選択肢っぽく整えてあげれば作業完了です。手動で整えても構いませんが、btnChoice HeightプロパティParent.TemplateHeight と入力する方がスマートな気がします。

Index関数

選択肢を作り終えたら、設問を用意しなければなりません。でないと学習アプリになりません。ここで作成した選択肢4つの中のどれか1つと日本語を紐づける作業が必要になります。ただし、いきなり4つを紐づけようとすると頭がパンクするので、まずは最初のフィールド値である “culture” と、その日本語訳を紐づけるところから始めます。

新規ラベルを作成し、First(gal4choices.AllItems).Title と入力することで日本語と英語の紐づけができました。しかし、このままだと一番左側に表示されたボタンが解答になるので問題として成立しません。

Last関数とFirstN関数を組み合わせたり、LastN関数のNに相当する部分を変数化したりして対応することも可能ですが、今年、以下で紹介するIndex関数が登場しました。

さすが関数おじさん…。

というか、Index関数が登場するまではLast関数とFirstN関数を組み合わせて対応していたそうです。これは神アプデだと言えますね。そのご利益を享受するべく、設問用に作成したラベルのFirst関数を以下のように書き換えてみます。

  • Index(gal4choices.AllItems, 2).Title
    • gal4choices に紐付けられたテーブルの中から2番目のレコードを表示する

Rand, RandBetween 関数

gal4choices をIndex関数で抽出することができました。しかし、Index関数を用いたところで、First, FirstN関数を用いていた時と似たような結果が得られるようになっただけです。このままでは左から2番目のボタンが解答になってしまいます。

そこで登場するのがRandBetween関数です。この関数をIndex関数の引数(2の場所)にネストさせることで、1から4の中でランダムに抽出してください…という指示を与えることができます。

  • Index(gal4choices.AllItems,RandBetween(1,4)).Title

Rand関数は、乱数を発生させる関数です。乱数とは規則性のない数列のことです。詳細は#2の動画をご視聴いただければと思います。Amagas….ピー。

次回に向けて

問題作成ボタンを押したらランダムで日本語の設問と4つの選択肢が生成されるようになりました。ここから正誤判定できるようにしなければなりません。

新規ギャラリーのItemsプロパティに、先ほどと同じ Index(gal4choices.AllItems,RandBetween(1,4)).Title を入力し、その中に新しくラベルを2つ作成します。Textプロパティに ThisItem.answerThisItem.Title とそれぞれ入力し、英単語データの方のラベルを非表示にします。

元々あったギャラリーを削除し、見た目を整えたところで次回に向けた準備が完了しました。Index関数とRandBetween関数の入れ子がヤマ場だったかもしれませんが、なんとかついて行けました。

さて、次回はPatch関数を用いることになっています。徐々に手強くなることが予想されますが「できる」という感覚が養われつつあって、あっという間に時間が過ぎてしまいます。ワクワクする授業参観は生まれて初めてかもしれません。

こちらにイベントページを添付します。ラジオ感覚でも構いませんし、保護者感覚でも構いませんし、もちろん、イベント概要欄記載のデータを予め準備した上で一緒に学習するために視聴していただいても結構です。

sumida
sumida
Power Platform学習アプリ作成会#3 – connpass
隅田智尋

PAGE TOP