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

Microsoft MVP(Business Applications 2022)のAkiraさん主催のイベント「Power Platform学習アプリ作成会」に、ようさんと共に登壇しました。自身、生徒役として「大切」だと感じた内容を自分なりに以下にまとめてみました。

趣旨

以下のような人々を対象に、Microsoft365 や Power Platform を用いて塾や学校の課題解決に繋がる方法を考えていく様をお届けすることになっています。

  • 勉強に使うアプリを自分で作りたい!
  • 楽しく学べるようなアイデアをカタチにしたい!
  • Power Platformを利活用したい!
  • 学習事業、塾経営などをしている・これからしたい!

ひとえに学習アプリケーションと言っても、英単語学習アプリ、漢字練習アプリ、一問一答アプリ、年号記憶アプリ…など様々あります。そんな学習アプリを「ワイワイガヤガヤとみんなで考えていく会って面白くね?」っていうノリで開催が決まりました(参考:イベント概要

簡単に雰囲気をお伝えしますが、心地よい速度感と易しい言葉で丁寧に指導していただいております。私のような初級者には根本から開発の「いろは」を、玄人には社内講習などで使えそうな説明の仕方を、それぞれ学習できる場になりそうだな…という印象です。幅広い層に受け入れられるイベントになるかと思いますので、皆さまも一緒にスキルアップを目指しましょう!

こちらAkiraさんのブログで参加にあたっての準備物など、当イベントに関する情報がまとめられています。興味を持たれましたらご確認ください。

#0:要旨

まずは四択形式でサッと試験前などに確認できるような英単語学習アプリを作成していきます。その正答率や進捗状況で学生たちを競わせ、意識高揚を狙えるのではないでしょうか。#0は、以下の内容で進行しました。順を追って整理しておきます。

  1. ホーム画面の制作
    • 各コントロールの配置と名称変更、ボタンの設定
  2. アプリ画面の制作
    • データソースの用意、ギャラリー配置、ClearCollect関数、Shuffle関数

ホーム画面の制作

このあたりの説明は「関数解説おじさん」こと、ようさんがブログや動画で丁寧にまとめてくださるはずですが、復習のためにまとめておきます(ようさんのブログはコチラより)

各コントロールの配置と名称変更

まずはアプリケーションのタイトル画面の作成です。左側のツリービュー(緑色の枠)にある通り、コントロール 1 を追加します。その際、ラベルであれば “lblName”、ボタンであれば “btnName”、図形であれば “shpName”…のように、開発者間における暗黙のルール コーディング規約に沿って、半角英数字で名称を変更します(Nameは任意の名称)。規約に沿っていなくてもアプリ開発は可能ですが、共同開発をしたり、アプリを編集したりする際に「どこにどんな部品を組んだのか」を見失わないようにすることなどが主な目的です。市民開発者といえども「開発者」の名に恥じぬよう、共通認識は重要です(2022年5月31日訂正)

このホーム画面制作における「目からウロコ」な情報は、図形(shpHeader)をハンドル 2 操作なしに画面の幅に合わせる方法でした。各プロパティ 3 に具体的な数値を入力するのではなく、Heightプロパティには「Parent.Height/7」と、Widthプロパティには「Parent.Width」と入力することによって、上の画像のような配置に shpHeader を設置できる…というものでした。

この時の Parent とは、shpHeader が設置されているスクリーン(=Top)を指しています。つまり、それぞれのプロパティに「高さをスクリーンの7等分にして欲しい」という指示と「スクリーン全体に幅を広げて欲しい」という指示を与えています。これはスマートだと感じました。

2022.5.31 訂正とお詫び

このコーディング規約について、やま(Yama)さんよりご指摘のコメント を賜りました。よしだたいきさん監修の日本語版と掲載元のWebサイトを添付すると共に、謹んでお詫び申し上げます 4 。なお、本稿における記載内容の責任は全て筆者が負うものであり、以上の関係者各位が負うものではありません。

ボタンの設定

次に、四択クイズが出題される画面にジャンプするように「スタート」ボタンを設定します。ただし、ボタンを設置したら自動的に任意のページに飛べるようになるわけではありません。そこで「ユーザーがボタンを押したら○○する」という意味の OnSelect というプロパティ(赤色の枠組み)にコードを書く必要があります。

ここではNavigate関数を使用します。直接「数式バー」に入力するか、画面右側の「プロパティ」から設定できます。この Navigate 直後の( )内に、ジャンプ先(=Question)を記入し、コンマ( , )に続く形でアニメーションを設定します。今回は .Fade とありますが、ここは個人の好みの問題です。Question と入力してコンマを打った段階で Power Apps 側からの提案がいくつかあるので、色々と触って試してみると良いでしょう。

これでトップ画面の機能面は終了です。ここまでの作業に5分もかからないというのは改めて感動です。ローコード・ツール様々。

アプリ画面の制作

データソースを用意する

個人的に、アプリを作成する上で最も大切なのは「データの取り扱い」であると考えています。学習アプリにおけるデータは「学習内容そのもの」なので、正直、アプリを作成することよりもデータバンクを作ることの方が苦労します。辞書一冊分の単語データを抜き出して品詞ごとに分類し、用例とその日本語訳を作成していた頃のツラい記憶が蘇ります。

今回の四択クイズアプリでは、高校生を対象にした英単語帳から名詞(405語)を抜き出し、英語と日本語訳を付したデータを SharePoint に保存し、それを紐付けました。もちろん、Excelファイルを OneDrive や Dropbox のようなクラウド上に保存するなどしても同様のアプリを作成できますが、今回のように総語数400語程度であれば SharePoint を利用するのが良いでしょう。

なお、どのデータソースでアプリを作成するかという問題は、りなたむさんの「あなたが作りたいアプリ どのデータソースを選べばいいか教えます」を参照のこと。有料級のスライドです。

ギャラリーを配置する

データソースが用意できたら、これらの英単語データを画面上に呼び出すための準備を行います。まずは画面上部のメニューバーから「挿入」あるいは、画面左側の「アイコン表示部分」の「+」から、縦方向ギャラリー(空)を挿入します。

次に、左側の円柱型のアイコンをクリックするか、プロパティの「データソース」より SharePoint を選択し、挿入したギャラリーと任意のファイル(=EnglishQuestion)を紐付けます。もちろん、挿入して紐付けただけでは真っ白の状態です

データを紐付けられたら、ギャラリーの中にラベルを2つ挿入し、 Textプロパティに、それぞれ ThisItem.TitleThisItem.answer を入力します。なお、この .Title.answer はレコードに付けられた名前なので、人によって異なるという点に注意が必要です。これでデータが目に見える形で現れてくれました。

ClearCollect関数とShuffle関数

今回のクイズアプリを言語化すると「英単語データの中からランダムに4つ抽出して画面に表示することを10回繰り返す」というものなので、Clear関数Collect関数を組み合わせたClearCollect関数Shuffle関数を組み合わせます。

「問題作成」ボタンの “OnSelect” にコードを記入する

Collect関数とは、語弊はありますが「元データのテーブルとは別にアプリ上に新規テーブルを作成する関数」のことだと考えておけば良いと思います。元データを直接操作しないため、大切なデータを損なうことなく安全に削除したり、反対に、追加したりといった編集作業をすることができます。今回のクイズアプリは、紐付けたデータソースのレコード(=英単語)を並び替える編集作業が必要なので、ほぼ必須の関数であるといえるでしょう。

一方、Clear関数とは、Collect関数で拾ったレコードを削除する関数のことです。今回のアプリでは、ランダムに英単語を4つ出題し続けるために、一度拾い集めたレコードを削除した上で、別のレコードを再表示する必要があります。

ClearCollect関数とは、この2つの関数を組み合わせた関数のことで、拾い集めたレコードを削除して再び拾い集める…という一連の動作を担ってくれます。

さらに、Shuffle関数は、Collect関数で集めたレコードをランダムに配列するものです。これをClearCollect関数と組み合わせることによって、拾い集めたレコードをランダムに並び替えて表示し、次の問題ではそのレコードを削除して、再びシャッフルされた新たなレコードを表示する…といった制御が可能になります。

組み合わせ方ですが、問題作成ボタンのOnSelectプロパティに ClearCollect(colQuestion,Shuffle(EnglishQuestion)) と入力すればOKです。なお、この時の colQuestion は、Collect関数で作成するテーブルの名前なので、自由に決めてもらって構いません(※コーディング規約に沿って、半角英数字が望ましい)

データソースから「コレクション」を紐付けて完了

#1:次回に向けて

次回は、このギャラリーに4つの選択肢を作ります。自身、ここまでは使用したことのある関数なのですが、次は使ったことのない関数を学習します。指導者2名の解説が丁寧なので、恐らくは、きちんと懐に落とし込めるのではないかな…と思いますが、いかに。

次回のイベント(6月25日 [土曜日14時~])でお会いしましょう!

sumida
sumida

追記:動画が投稿されました

隅田智尋

  1. アプリを構成する部品のことを指す
  2. 画像(今回はshpHeader)を拡大したり縮小したりする際に現れる白丸を指す
  3. コントロールに機能を与えたり、そのサイズや色を変更したりする、一種の「箱」のようなもの。必要最低限のコードを書くことによって非エンジニアがアプリを作れるのは、このプロパティのおかげと言っても過言ではない気がする。「どんな機能を与えたいの?」という問いに対して、開発者がコードを書いて依頼するような感覚…?
  4. 原典: PowerApps canvas app coding standards and guidelines
PAGE TOP