- 現場で撮った写真の整理が大変
- 写真やメモを簡単にチームで共有したい
- 事務所に戻ってから報告書を書いている
- Power Appsの開発のしかたを知りたい
はじめに
現場で設備や製品の不備を発見した時、写真を撮って、ノートにメモして、事務所で報告書を作成して・・・と手間のかかる作業をしていませんか？
写真の整理も大変で、共有サーバにアップロードするのも面倒。
気を抜くとどの写真が何を撮ったものかわからなくなることもあります。
今回は、このような写真付き報告業務を改善したいと思います。
最終回のこの記事では、いよいよPower Appsを開発します。
前回までのおさらい
第２回で実施した要件定義では、簡単な画面スケッチを作りました。
今回は、データ登録に特化した1ページのアプリを作ります。
少しPower Appsがわかってくるとたくさんの機能を付けたくなりますが、できるだけシンプルに作ることを心がけます。
当初の目的以上のことをする必要はありません。
また前回の記事ではデータの保管場所となるSharepointリストを作成しました。
Power Appsを開発する準備は整いました。
さっそく取り掛かりましょう。
Power Appsアプリを作成する
今回は1ページのみのスマホ用アプリを作りますので、スマホサイズの白紙のキャンパスアプリから作ります。
まずはデータに接続します。
前回作成したSharepointリストに接続します。
コンポーネントを配置する
次に、要件定義で作成した画面スケッチを参考にフォームやボタンを配置していきます。
コンテナーの配置
最初にコンテナーを配置することでレイアウトを整えやすいです。
まずは画面全体に1つの垂直コンテナーをおきます。
[Height]と[Width]のプロパティはスマホの画面サイズが変わっても追従するように、ページのサイズに合わせておきます。
- Height = Parent.Height
- Width = Parent.Width
次に、こちらの大きな垂直コンテナーの中に、ヘッダー、メイン、フッターの3つのコンテナーを挿入します。
ヘッダー、メイン、フッターのサイズは１対８対１くらいがキレイです。
さらにヘッダーに背景色を設定してアプリタイトルを入れるとそれっぽく見えます。
ボタンの配置
フッターにはボタンを挿入しましょう。
今回は「登録」と「クリア」の2つのボタンを置きます。
編集フォームの配置
メインコンテナーに編集フォームを置き、データソースには先ほど接続したSharepointリストを選びます。
自動でフィールドが配置されますが、すべてのフィールドが表示されるわけではありません。
「フィールドの編集」から必要な項目は追加し、不要な項目は削除します。
また、使いやすいように並べ替えも行います。
編集フォームは常に「新規追加」になるように「規定モード」は「新規」にしておきます。
DefaultMode = FormMode.New
ボタンアクションを実装する
Sharepointリストへの登録処理
登録処理の設定は簡単で、「登録」ボタンの[OnSelect]プロパティに「SubmitForm」を設定するだけです。
OnSelect = SubmitForm(Form1)
クリアボタンの実装
今回は、入力内容をすべて初期値（空白）に戻す「クリア」ボタンを実装します。
クリアボタンの[OnSelect]プロパティに「ResetForm」を設定しましょう。
OnSelect = ResetForm(Form1)
登録成功時と失敗時のアクションを設定する
「登録」ボタンをクリックしてSharepointリストに正しくデータが登録されても、無反応ではユーザーが正しく登録されたのかどうかわかりません。
そこで、登録成功時と失敗時のアクションを設定します。
登録成功時に確認メッセージを表示する
登録成功時の確認メッセージはすでにテンプレートとしてページが用意されていますのでそれを利用しましょう。
ページ中央のチェックアイコンをクリックすることで新規登録フォームが表示されるようにしたいので、チェックアイコンの[OnSelect]プロパティを設定します。
OnSelect = ResetForm(Form1); Navigate(Screen1)
「ResetForm」は編集フォームを初期値（空白）にリセットする関数です。
これが無いと、入力した内容がそのまま残ってしまいます。
「Navigate」は編集フォームのあるページに遷移するための関数です。
ここまでで、表示された確認フォームから再び新規登録フォームに戻るまでの実装ができました。
次に、登録が成功した時にこの確認フォームを表示する実装をします。
編集フォームの[OnSuccess]プロパティに「Navigate」を設定しましょう。
[OnSuccess]プロパティは入力内容が正しく登録されたときのアクションを設定するためのプロパティです。
OnSuccess = Navigate(Screen3)
登録失敗時にメッセージを表示する
登録が失敗した時は、確認ページへ遷移せずに画面上部にメッセージを出すようにします。
OnFailure = Notify(“登録に失敗しました”, NotificationType.Error)
「Notify」の関数は画面上部にメッセージを表示させるものです。
動作確認
アプリが完成したら動作確認をしましょう。
動作確認をするときは、通常の操作だけではなく誤った操作をした場合も想定してチェックします。
- 正常に入力データが登録されるか
- 登録後の確認画面は表示されるか
- 必須入力項目を空欄にするとエラーメッセージが出るか
- クリアボタンは機能するか
必須入力項目を空欄のまま登録するとエラーメッセージが表示されます。
スマホで確認する
ここまででアプリがほぼ完成しました。
パソコン上で動作確認をしたらアプリを公開し、実際にスマホで使ってみます。
スマホでトライアルをするときにはいくつかチェックするポイントがありますので抑えておきましょう。
- ボタンはタップしづらくないか
- 文字の大きさは適切か
- 入力しづらくないか
- 操作は直感的か
- 写真撮影は問題ないか
文字の大きさに関しては、基本的にデフォルトのまま作成していれば見づらいということはありません。
ボタンは、パソコンで作っているときには「スマホ操作時のタップのしやすさ」は考慮していないことが多いので、スマホ動作確認のときにしっかりチェックしましょう。
周りの人に実際に使ってみてもらうのも有効です。
自分で作っていると使いづらさやわかりづらさに気が付きにくいです。
完成
動作確認で問題なければ完成です。
さっそく共有して使ってもらいましょう。
アプリは開発して終わりではありません。
実際に運用して定着させて初めて業務改善を達成できます。
要件定義のときに書いた画面スケッチとは異なっていても気にしないでください。
要件定義がお客さんに提出する図書の１つであれば、お客さん承認された要件定義書に従ってアプリを作らないといけないですが、今回はあくまでも社内の業務改善向けのアプリ開発です。
細かいところを気にして運用開始が遅くなるくらいならば、多少のことは目をつぶってどんどん開発を進めた方が良いです。
今回の業務改善実践シリーズでは、写真付きメモアプリを開発しました。
写真とコメントを一緒に記録したい場面はよくあると思いますので、是非参考にしてみてください。
このシリーズを最初から見たい方はこちらから↓
