三島正裕のOffice365コラム第12回「PowerAppsでペン入力が可能な工場機械点検アプリを作ってみよう!」

Print Friendly, PDF & Email

こんにちは!クラウドビジネス担当の三島です。先日、マイクロソフト様主催のPower Platformセミナーにて、Office365アプリケーションの活用事例紹介ということで登壇をさせて頂きました。ご参加頂いた皆様方本当にありがとうございました。今回発信させて頂いた内容が少しでも皆様のお役に立つことが出来ましたら幸いに思います。

1.PowerAppsのペン入力パーツについて

さて、今回のコラムのお題ですが、PowerAppsのペン入力機能について触れてみたいと思います。最近のPCはタッチパネルが搭載されているものが多いですよね。会議資料や図面等にふと書き留めたい内容があったとき、ペンをとりだして直接メモが書き残せるのは大変便利です。PowerAppsにも簡易ではありますが、ペン入力機能はパーツとして用意されていて、「挿入」から「ペン入力」を選択してキャンパスに配置するだけで使用することが出来ます。しかし、入力した内容を保存する機能はパーツ自体には用意されていませんので、保存をするには何かしらの仕組みを設ける必要があります。

2.とある工場の機械の点検記録をアプリで行う

さて、このコラムのタイトルはOffice365徹底活用ですので、今回はこういう場面を考えてみたいと思います。

◇とある工場で管理者が機械の点検を実施して報告をする。

① 管理者は確認箇所をアプリで撮影
② 写真で気になる箇所はアプリのペン入力でメモをする。
③ 機械担当者宛にメモを保存。
④ 機械担当者はアプリでメモの箇所を確認する。

このアプリを実現するには写真とペン入力の内容を同時に保存しなくてはなりませんよね。閲覧する際には、それぞれに保存した内容を重ね合わせて呼び出す必要があります。少し複雑かなと思うかもしれませんが、仕組み自体はとてもシンプルですので、ちょっとした工夫で作成することが出来ます。

3.写真を管理するためのExcelファイルを用意する

まずは画像を保存するためのExcelファイルを作成します。Excelファイルを使った画像管理の仕方は何度かこのコラムで紹介させて頂いていますので割愛させて頂きますね。初めての方はこちらのリンクを参考にしてみて下さいね。

◇PowerAppsで画像認識!?スマートフォンを活用した働き方改革

https://www.si-jirei.jp/2018/08/30/office365%e3%82%b3%e3%83%a9%e3%83%a0powerapps/

用意頂くExcelファイルの内容は下記の通りです。テーブル名は任意でOKですが「Handwriting」としています。テーブル項目の”Image [image]”と”__PowerAppsId__”は決まり文句です。画像を識別するIDがあるのにわざわざ画像番号”No”を設けているのは、複数の画像ファイルを重ね合わせて1枚の画像として表示させるためです。”Layer”という項目に入る値が重ね合わせる画像の順番を表します。Receiverは画像ファイルを閲覧させたい相手(今回は機械担当者)。”Sender”は自分自身です。”SendDate”には送信日がセットされます。このExcelファイルをテーブル形式にしてOneDrive上の任意の場所に保存して下さい。

4. アプリケーションの作成

PowerAppsの起動画面より[アプリ]-[+アプリの作成]を選択してアプリケーションを作成して下さい。アプリはキャンパスを選択します。レイアウトは任意でOKですが、ここでは携帯電話レイアウトを選択しています。次にデータソースを追加します。今回はOffce365ユーザー、Offce365(Outlook)、Handeriting(Excelを保存したOneDrive)を追加します。最初に作成されるScreen1のプロパティ「OnVisible」に下図のように関数をセットします。少々複雑ですので、まずはこのまま打ち込んでみて下さい。内容を解説すると、最初のClearCollectでOffce365ユーザーの情報を取得して”UserProfile”にコレクションとしてセットしています。また、特定の担当者のみに絞り込みたいので、

ここではFilter関数で”Group1”に含まれるユーザーのみに絞り込みを行っています。2つのめのClearCollectでグループ化されている”UserProfile”を展開して”UserProfile2”にコレクションとしてセットしています。最初のSet関数ではこれから作成するウィンドウを制御するためのフラグ(WindowFlg)を設定しています。2つめのSet関数では画像を取得したデータソースを判別するためのフラグ(ImageFlg)を設定しています。

画像の送信先を選択するドロップダウンを設定してみましょう。[挿入]より[コントロール]-[ドロップダウン]を選択してキャンパスに配置します。作成されたドロップダウン(Dropdown1)のプロパティItemには下図のようにセットします。すると、リストにはOffce365に登録されているユーザーがリストとしてセットされるはずです。

ペン入力のパーツを設定します。[挿入]より[テキスト]-[ペン入力]を選択してキャンパスに配置します。下図にペン入力パーツの画面を載せていますが、最初にお見せしたパーツよりもボタンが増えているはわかりますでしょうか。今回はカメラやファイル選択で画像を取得出来るようにしますので、オリジナルボタンも作成しています。

撮影画面の仕様は下図のようになっています。この画面はカメラボタン(icon_Camera)をクリックすると、WindowFlgに2がセットされ、それをトリガーに下図の撮影用ウィンドウが表示される仕組みとなっています。カメラパーツは[挿入]-[メディア]から[カメラ]を選択してキャンパスに配置します。カメラパーツ(Camera1)をタップするとカメラの画像が静止画として切り取られます。同時にフラグ(ShootingFlg)に1がセットされ、そのタイミングで画像パーツ(Image_Camera)が表示され、カメラ画像が表示されます。ペン入力の背景となる画像は、この画像パーツの情報を参照しています。

ファイルからの画像を取得する仕様は下図のようになっています。この画面はファイルボタン(icon_File)をクリックすると、WindowFlgに1がセットされ、それをトリガーに下図の撮影用ウィンドウが表示される仕組みとなっています。画像を追加するパーツは。[挿入]-[メディア]から[画像の追加]を選択してキャンパスに配置します。「画像を追加」ボタンをクリックすると、ファイルを選択するウィンドウが表示されます。

画像番号を表示するラベルを作成します。今回は、ペン入力をした画像と背景画像をセットで保存しますが、呼び出すときも同様にセットで呼び出しますので、2つの画像を結びつけるための共通の番号が必要になります。方法は色々とありますが今回は時間と乱数を使って一意な番号を作成しています。番号については、運用側は意識をする必要はありませんので非表示にしておきます。

続いて保存ボタンを設定します。保存ボタンの内容は下図の通りです。ペン入力された画像と背景画像を続けて保存します。画像番号はラベル(Label_Image_No)で設定した値を登録します。項目Layerには画像の取得先によってフラグをセットします。ペン入力された画像には1を、背景画像には2をセットしています。

最後にギャラリーを配置して、登録した内容が確認出来るようにします。表示する画像は項目Layerの1,2の順に重ねてセットします。ギャラリーにはゴミ箱のアイコンを配置して削除出来る仕組みを設けています。ペン入力された画像と背景画像をセットで削除する必要がありますので、RemoveIf関数を使い画像番号を条件に削除をさせています。

完成すると下図のようになっているはずです。カメラまたはファイルから背景画像を選択して、ペン入力のパーツの後ろに背景画像をセットします。ペン入力パーツで画像の上にメモ書きをして、送信先を選択して登録ボタンを押すと画像が保存されます。文章だけだと説明しづらい写真の内容も、ペン入力と合わせて保存出来たなら確認する側もわかりやすくて良いですよね。使用しているのはOffice365のアプリケーションだけですが、少しの工夫でこのようなアプリも作れてしまいます。

5.おわりに

ペン入力を活用したPowerAppsアプリ作成は如何だったしょうか。今回は複雑な箇所も多かったと思いますが、このテクニックが使いこなせるようになると、Office365と連携する様々なアプリでペン入力によるメモが残せるようになります。今回は紹介しませんでしたが、例えばPowerBIのダッシュボードと手書きメモを合わせて管理したり、カレンダーアプリと重ね合わせて使ったりするのも面白いかもしれませんね。他にも色々と応用されている事例はたくさんありますので、興味が湧きましたら皆さんもぜひ試してみて下さいね。

それでは次回もお楽しみに。

※Office365 PowerAppsについては以下のページをご覧ください。

https://www.si-jirei.jp/office365/powerapps/

  • このエントリーをはてなブックマークに追加

Related post

更新情報

最新コラム

  1. こんにちは。吉政創成の吉政でございます。今日は「Webコンサルタントの経験値だけを信じてはいけない…
  2. 三島正裕のマイナビニュース連載第2回「Microsoft Power Platformでアプリの導…
  3. はじめに 先日、マイナビにて新連載 「5分で理解するITセキュリティ最新動向コラム」 を始め…

ログインステータス

Return Top