三島正裕のOffice365コラムOffice365徹底活用編(第3回)~PowerAppsでモバイル掲示板を作成しよう~

先日、MicrosoftウェビナーにてPowerAppsを使ったモバイルアプリケーションの作成方法について説明をさせて頂きました。「働き方を変えてみよう」ということで当社の活用事例を紹介させて頂きながら、モバイルアプリケーションが出来上がるまでの過程をスライド形式で説明をさせて頂いたのですが、たくさんの方々にご視聴頂いたようで大変嬉しく思います。ご参加頂いた視聴者の皆様方、お忙しい中本当にありがとうございました。
さて、ウェビナーの中でもご案内させて頂いたとおり、今回のコラムではPowerAppsを使ったモバイル掲示板の作り方について説明をさせて頂きたいと思います。データソースは前回SharePoint Onlineで作成しましたリスト「行動予定掲示板(list_ActivityBoard)」を使います。リストの作成方法がわからない方は前回の記事を参考にして下さいね。
前回の記事:SharePoint Online で掲示板を作成しよう
https://www.si-jirei.jp/2018/05/31/office365%E3%82%B3%E3%83%A9%E3%83%A0-2/

1.PowerAppsとは

今回のコラムで取り扱う「PowerApps」ですが、ご存じないという方もおられるかもしれませんので、簡単に製品について紹介をさせて頂きます。PowerAppsというのはOffice365のアプリケーションの1つで、モバイルアプリケーションを作成することが出来ます。一覧表やグラフも自由なレイアウトで作成することが可能で、分析ツールを埋め込んでデータを可視化したり、画像や地図情報等のコンテンツを作成して埋め込んだり、スマートフォンに内蔵されているカメラやコンパス、加速度センサーやGPSなどの情報も取得することができます。こうした情報とリアルタイムに連携したアプリケーションが簡単に作成出来てしまうのがPowerAppsです。

2.SharePoint Onlineからアプリケーションを作成する

SharePoint Onlineでリストが完成しているならば、PowerAppsでアプリケーションを作成するのは非常に簡単です。開いたリストの上部に「PowerApps」と書かれたボタンがありますので、そこから「アプリの作成」を選択します。すると「アプリの作成」ウィンドウが開きますので、アプリ名を入力します。ここでは「ActivityBoard」と入力しておきます。


「作成」ボタンを押すと「アプリのビルド」が始まり、しばらくするとPowerAppsが起動し、アプリケーションが作成された状態で表示されます。

3.ラベルを追加する

アプリケーションを作成した時点では、ギャラリー(BrowseGallery1)に帰社時間が表示されていませんでしたので、帰社時間を表示するためのラベルを追加します。①メニュー「挿入」から「ラベル」を選択して、②ギャラリーの任意の場所に追加します。③ラベルの追加が出来たら、パラメータTextを「ThisItem.ReturnTime」に書き換えます。すると帰社時間が表示されるようになります。

4.画像データを張り付ける

顔写真も入れてみましょう。今回はフリー素材から顔のデータを10枚用意致しました。ギャラリーに写真を埋め込むためにはExcelのテーブルを使用します。Excelでのテーブルの作成方法は今回割愛させて頂きますが、テーブルの列には、Image [image]、__PowerAppsId__、Nameの3列を設定します。Image [image]には写真ファイルのパスを設定します。テーブル名はActivitiyBord_faceとします。

OneDriveにはこのように配置します。場所は任意の場所で良いのですが、顔写真を入れたフォルダとExcelファイルを同じ場所に設定します。


アップロードしたExcelに接続してみましょう。メニューにある「ビュー」から「データソース」をクリックすると、下図のようなメニューウィンドウが表示されますので、「+データソースの追加」を選択します。データソースは「OneDrive for Business」を選択して「作成」ボタンを押します。Excelファイルを置いたOneDrive for Businessのフォルダを選択してExcelファイルを開くと、テーブル「ActivitiyBord_face」が表示されますので、チェックをつけて「接続」ボタンを押します。


続いて一覧に写真を貼り付けたいと思います。「メディア」から「画像」を選択して、任意の位置にアイテムを張り付けます。初期表示としてサンプル画像が表示されていますので、これをOneDriveに保存した画像を表示するようにします。画像の張り付けにはLookUp関数を使います。LookUp関数は、テーブル内で数式を満たす最初のレコードを検索します。データソースは「ActivitiyBord_face」、条件には「テーブルのNameがギャラリーのNameと一致する場合」と設定し、結果には列名Imageを返すように設定しています。これでOneDriveに保存した画像が表示されます。

5.データの並び替えと検索ボックスを設定する

次にギャラリーに表示されているアイテムの並び替えと、検索ボックスが使えるように、ギャラリーのプロパティを設定します。アイテムの並び替えはSortByColumns関数を使います。SortByColumns関数は、1つまたは複数の列に基づいてテーブルを並べ替える場合に使用します。今回の例では、データソース「list_ActivityBoard」の列「ID」が昇順「SortOrder.Ascending」となるように設定します。
続いて、並び替えた結果から検索ボックス「TextSearchBox1」に入力された値(Text)を含むName列のレコードのみを表示するように設定します。ソースは先程設定したSortByColumns関数、抽出条件となるテキストは検索ボックスの値(TextSearchBox1.Text)、列は社員名(Name)を指定します。ギャラリー(BrowseGallery1)のプロパティItemの内容を下図に記載しましたので参考にして下さい。

6.タイトルと項目名を修正する

最後にタイトルと項目名を修正します。アプリケーションを作成した時点では元のテーブル名とその列名が表示されていますので、アプリケーションではわかりやすい名前に修正します。各アイテムのプロパティTextを直接修正します。初期状態では「Parent.DisplayName」となっており、修正しようとしてもロックされている場合がありますが、その際は鍵マークをクリックして解除します。

7.アプリケーションの発行と共有設定

アプリケーションを発行して、自分以外のメンバーもアプリケーションが使用出来るようにします。メニュー「ファイル」から「保存」を選択すると、「保存」ボタンが表示されます。続けて「発行」ボタンをクリックすると「このバージョンの発行」ボタンが表示されますのでクリックします。これでアプリケーションが公開されました。この時点では作成した本人しか公開されていませんので、保存画面にある「このアプリを共有する」をクリックします。公開したいメンバーを名前や電子メールで検索して追加します。アクセス許可は「使用可能」と「編集可能」が選べますが、編集を行わず、アプリケーションの利用のみ許可するのであれば「使用可能」としておきます。設定がおわりましたら「保存」ボタンをクリックすると内容が反映されます。

アプリケーションが利用出来るようになりました。完成すると下図のような画面が出来上がっていると思いますが如何でしょうか。もしも仕様が固まっているのでしたら、今回のようなアプリケーションは、慣れてくれば1~2時間程度で作成出来るのではないかと思います。

8.おわりに

PowerAppsとSharePoint Onlineを使えば、想像以上に手早く簡単にアプリケーションが作成出来ることが実感出来ると思います。PowerAppsは様々な業務で活用出来る非常に便利なツールですので、ぜひ皆さんもトライしてみて下さいね。それでは次回もお楽しみに。

◆Office365について

以下のページをご覧ください。
https://www.si-jirei.jp/office365/

Related post

更新情報

最新コラム

  1. 先日、MicrosoftウェビナーにてPowerAppsを使ったモバイルアプリケーションの作成方法に…
  2. はじめに 初夏の暑さを感じる季節になりました。早くも30℃超えを観測している所もありますね。そんな…
  3. みなさん、こんにちは! プライム・ストラテジーでコンサルタントをしております、穂苅 智哉 (ほ…

ログインステータス

You are not logged in.
Return Top