前章にて、必要な記録を入れる器（SharePointリスト）を用意しました。次に記録を入れる仕組みであるPowerAppsアプリの設計と開発を行なっていきます。
リストからの自動生成を利用する
設計と書きましたが、特にこだわりがないようでしたら、自動生成を利用するのが早いと思います。機能の追加や削除は容易に行えるので、自動生成でできたものに対して設計を行なっていくのが良いと思います。
PowerAppsホームに表示されている、「SharePoint」を選択します。
データソースの接続画面になります。SharePointを選択（無ければ「＋新しい接続」を選んで登録）した後、「SharePointサイトに接続」のテキストボックスに、リストを含んでいるサイトのURLをコピペして「移動」を押してください。サイトのトップページのURLです。
サイトに含まれるリストの一覧が表示されます。ここではリストを１つしか選択できません。１つのリストに対して１つのアプリが自動生成されると考えてください。選択したら「接続」を押します。
接続が完了すると、アプリが自動生成されます。初級編でも説明しましたが、「一覧表示」「詳細表示」「編集」の３画面で構成されています。これをもとに、必要なアプリの機能やレイアウトの見直し等を行なっていきます。
アプリの設計
自動生成されたアプリに対して、足りない機能や不備を列挙します。下記内容は、実は作りながら足りないなと思って追加したものも含んでいます。大幅な仕様変更にならないような内容なら一緒くたにして考えてしまって問題ありません。（開発後追加設計したものは赤字で表記）ちなみに、このアプリは当方ないしITに疎い当方の家族（子供含む）の利用を想定しています。
- 入力アプリは、１アプリで３項目全ての入力を行いたいが、現状は1項目しか入力できない。
- アイコンだとよく分からないので、ボタン表記に変更したい。
- 特に使わない機能（並び替えとか）がある。
- 入力が主内容なのに、一覧表示がトップ画面に来てしまっている。
- 表示や入力の際、１行に対して１項目の並びのため、１画面に収まりきっていない。
- 基本的にリアルタイム入力（餌をあげたら即入力）を想定しているのに、日時が空っぽ。
- 各アクション（登録、編集、削除）に対しての確認画面が無いので、不安を感じる。
- PowerAppsアプリを開いて当アプリを選択して、という流れが面倒。
- 一覧表示が日時順になっていないので見づらい。
他にも細かい部分で言うと、例えば開発当初は消耗品が切れたという報告は備考欄に入れる想定でしたが、備考欄に入れるのは入力をし忘れるケースが多く、項目として目で見てあった方が入力忘れのリスクが減るということで、SharePointリスト内に「◯◯（消耗品名）終了」という項目を作るよう追加設計したりしました。これはリスト自体に項目を追加することで対応しています。
これらの内容を順にアプリに盛り込んでいくと、次項のようになります。
アプリ開発 入力/編集画面
まずは核となる「入力/編集画面」の説明です。
自動生成された編集画面がもとになっています。この画面をトップにしたいので、AppのStartScreenプロパティをこの画面に設定します。（餌の入力頻度が一番高いので餌にフォーカス）
使用日時/購入日時はアプリを開いた瞬間の日時に設定したいので、日時のカードのdefaultプロパティを変更します。ここで同時に、編集として開いた場合は、元の記録の日時を保持したい為、今が編集画面か新規画面かを変数で保持し、
「If([変数]=false, Now(), ThisItem.使用日時」
といった感じで設定しました。変数は画面遷移時に都度仕込んで、編集ボタンからの遷移時にフラグ立てを行なっています。
レイアウトは、自動生成時１行に対して１項目となっていますが、これを３項目に変更します。各フォームの「列」プロパティを1→3に変更するだけです。全行3項目の詰めたレイアウトになりますが、項目は2項目分にも3項目分にも広げられます。柔軟なレイアウトにしたい場合は列を増やして項目を伸縮させるのが良いです。（Excelのセルの結合みたいなイメージです）
「登録する」というボタンは、挙動としては「レ」アイコンと同じです。「レ」アイコンは使わないので非表示にしています。このように、アイコンではなくボタンを使いたい場合は、挙動（OnSelectプロパティ）をボタンにコピーすれば良いです。
下部のアイコンは新設し、今開いている画面のアイコンは反転、それ以外の画面のアイコンは通常色としています。こちらもOnSelectプロパティに遷移の挙動を書いています。
基本的にほとんどの入力は選択制にして、誤表記による記録の揺れを防止しています。はい/いいえ項目はチェックのみ、数量部分も手入力では無く、リスト選択制にしています。
やり方として、まずコントロールの種類を「許可値」に変更します。コントロールがドロップダウンに変更しますので、次に入力の選択肢を設定します。
今回、数値に関しては０〜５の整数から選択させるようにしました。ドロップダウンのItemsプロパティに
[“0″,”1″,”2″,”3″,”4″,”5”]
と入れておけば、０〜５のリストの完成です。SharePointリストで初期値０としているので、０が表示されます。
「登録する」を押した際、自動生成時挙動ですと画面が初期化されるだけで、本当に登録されたかどうかが不安になります。
そこで、「登録する」を押した際に１画面を挟み、登録が正常に完了したことを通知するようにします。画面を挟むといっても画面遷移させる訳ではなく、ダイアログっぽいラベルとボタンを表示させ、ボタンを押したらそれらが消えるという仕組みを使います。
ラベルを表示させるかさせないかは、変数を用います。ラベルとボタンをグループ化し、グループのVisibleプロパティに変数を設定しておけば、「登録する」ボタン押下時に変数＝True、「OK」ボタン押下時に変数＝False とすれば想定通りの挙動になります。
アプリ開発 一覧表示画面
こちらも３画面分用意していますが、内容は同じです。
入力/編集画面の虫眼鏡をクリックするとこの画面になります。基本的に時系列（降順）で並んでいれば何も問題ないのですが、現状順番通りに並びません。原因は、使用していない「Title」列でソートされているからです。ソートの内容を変更します。
以下は餌の例ですが、ギャラリーのItemsを書き換えます。
SortByColumns(Filter([@’消耗品使用（餌）’], StartsWith(Title, TextSearchBox1.Text)), “OData__x4f7f__x7528__x65e5__x6642_”, Descending)
“OData__x4f7f__x7528__x65e5__x6642_” とは何でしょうか？
これがしつこく書いてきた 名称は英数字で という部分です。この謎の文字列は「使用日時」の内部列名のことなのです。「使用日時」と書いても指定できません。この内部列名を調べるには、SharePointリストのリストの設定で当該のリストまで行き、そこのURLの「Field」以下で確認できます。さらにその前に「OData_」を付与して完成、と非常に面倒なことになってしまっています。
可読性も悪く、コードの修正をする際も面倒ですので、初めから英数字でわかりのいい名称を付けておいた方が作業が捗ります。
アプリ開発 詳細画面
詳細画面も３画面用意していますが、大幅にいじっている部分はありません。新規/編集画面で説明した変数による管理は、編集アイコンを押した際にTrueになるように設定してあります。
また、この画面で項目の削除ができます。削除についても登録と同様、画面を挟みます。削除の場合は消すかどうかの確認が欲しいので、削除前にダイアログを表示し、削除OKのボタンを押した時点で削除を実行するという流れにしました。（登録同様、変数での制御になります）
アプリ開発 注意点、その他工夫点
当アプリは修正含め４時間程度で作成できました。うち２時間程度はいわゆるデバッグ作業（不具合修正）に費やされたので、注意点としてお伝えしておきます。
今回、１つのアプリの中で同じような機能の画面を３項目分増やすというのが一番のポイントでした。当然同じような画面なので、画面を複製して作っていく方法となると思いますが、ここにネックがあります。
コピーをするとプロパティまで全てコピーされる ということを覚えておいてください。例えばコントロール間の繋がりはコピーしたもの同士が繋がりますのでそのまま使えますが、変数等固定されたものの情報はそのままコピーされてしまいます。今回画面遷移で変数を使っていますので、コピーしたままの状態ですと画面遷移がめちゃくちゃになってしまいます。
また、見落としがちなのは 非表示にしたコントロールもコピーされている という事です。一番時間がかかったデバッグ作業はこの部分で、使わないので非表示にしていたアイコンが挙動に悪影響を及ぼし、登録がうまく行かなかったケースがありました。
ですので、画面コピーは便利ですが、
- 必ず一度、挙動するコントロールに関してはプロパティに目をやる
- 不要なコントロールは非表示ではなく削除する
というような事を意識した方が良いと思われます。
また、アプリ自体の工夫点ではありませんが、iOSのPowerAppsアプリは、内部アプリごとのショートカットが作成できます。これをしておく事により、起動が速くなります。ちょっとの事ですが、毎日の事ですのでインパクトは大きいです。是非お試しください。
アプリ内で右にスワイプすると、「ショートカット」が現れます。それを押すとショートカットアプリに入ります。右下の↑を押して、「ホーム画面に追加」を押せばアプリのショートカットが作成できます。
以上をまとめて、ショートカットから起動し、餌の入力を行うテスト画面は以下の通りです。
アプリの運用
これで記録の入力ができるようになりました。実際に使ってもらって、不満点を直しながら今に至っています。ただ、やはり問題となるのは前章でも述べましたが、入力忘れというリスクです。
特に消耗品の購入はリアルタイムで行うことはちょっと難しい（外出中）ので後回しにしてしまうと忘れてしまいます。通知というのは非常に重要な意味を持ってきます。
次のステップ
PowerAutomate（クラウド）を使い、入力の有無という条件を使ったクラウドフローについて説明します。
コメント