業務ハックLab -とある情シスの備忘録-

とある情シスの備忘録的なものです。

【スポンサーリンク】

IT機器棚卸アプリを作ってみよう(Sharepointリストの構成～HomeScreen編)

Power Apps

皆さん、こんにちは！
業務ハックLabのよーよんです。

今回はIT機器棚卸用のアプリ作成方法について案内していきたいと思います。
実はこれ2021/9/18にアキラさんが主催している「Power Platformビギナー会」というコミュニティでハンズオンさせて頂いた内容になります。
アキラさんお声かけありがとうございます～

ai-powerplatform.connpass.com

主催者のアキラさんのブログはこちらです！

hanakuso365.hatenablog.com


今回作るアプリはこんな感じです。

はい、では早速行ってみましょう～

基となるリストの構成

今回は別のアプリで作成した機器リストの情報を改定していくアプリになります。
ちなみに今回も機器リストはSharepointリストを使用しています。
機器リストの構成は下記のような感じ。

列名 用途 種類
Title 登録日 1行テキスト
type タイプ 1行テキスト
controlno 管理番号 1行テキスト
vendor ベンダー 1行テキスト
model 機種 1行テキスト
serial シリアル 1行テキスト
os OS 1行テキスト
cpu CPU 1行テキスト
pcname PC名 1行テキスト
phoneno 電話番号 1行テキスト
introductiondate 購入日 1行テキスト
purchasetype 購入形態 1行テキスト
conservation 保守期限 1行テキスト
leaseterm リース期限 1行テキスト
price 購入金額 1行テキスト
monthlycost 月額費用 1行テキスト
distributiondate 配布日 1行テキスト
fullname 氏名 1行テキスト
dept 部署 1行テキスト
location 設置場所 1行テキスト
remarks 備考 1行テキスト
qrurl QR URL 1行テキスト
devicetypeflag デバイスタイプ 1行テキスト
inventoryconfirmor 棚卸実施者 1行テキスト
lastcheckdate 直近棚卸日 1行テキスト
revisionrequests 修正依頼内容 1行テキスト

 

サンプルはここに置いてあります。

github.com

Power Appsでアプリを作成していこう

キャンバスアプリの作成

  1. make.powerapps.comで「キャンバスアプリを一から作成」をクリック

    f:id:yo-yon:20210928170707p:plain

  2. アプリ名を任意でつけて形式は「電話」を選択、最後に「作成」をクリック

    f:id:yo-yon:20210928170846p:plain

  3. Power Apps Studioが立ち上がったら「ファイル」タブで「名前を付けて保存」を実行する

    f:id:yo-yon:20210928171733p:plain

  4. 矢印をクリックしPower Apps Studioに戻る

    f:id:yo-yon:20210928201757p:plain

※Power Appsは自動保存ではないのである程度作成が進んだら、都度都度保存することを強く強くお勧めします。
僕は何回かそれまでの進捗をすべて無にするというやらかしをしています(笑)

HoneScreen

では最初にHomeScreenから作成します。
HomeScreenの構成は「アプリタイトル」、「棚卸開始ボタン」、「連続棚卸ボタン」、「ログインユーザー情報」という構成になっています。

アプリタイトル作成 & 背景設定
  1. ツリービューに表示されているScreen名称を「HomeScreen」に変更

    f:id:yo-yon:20210928205127p:plain

  2. サイドメニューで「+」をクリック

    f:id:yo-yon:20210928205157p:plain

  3. 表示された中から「四角形」をクリック

    f:id:yo-yon:20210928205258p:plain

  4. コントロールの名称を「Titlebar_Home」へ変更

    f:id:yo-yon:20210928205510p:plain

  5. 下記のように設定
    プロパティ 設定値 補足
    Fill RGBA(55, 175, 75, 1) 塗りつぶしの色
    X 0 キャンバス上の縦の位置
    Y 0 キャンバス上の縦の位置
    Width 640 コントロールの横幅
    Height 70 コントロールの縦幅

    f:id:yo-yon:20210928211054p:plain

  6. ラベルを挿入

    f:id:yo-yon:20210928211228p:plain

  7. コントロール名を「Title_L_Home」に変更

    f:id:yo-yon:20210928211331p:plain

  8. 下記のように設定
    プロパティ 設定値 補足
    Text "IT機器棚卸" コントロールに表示するテキスト
    Size 40 フォントサイズ
    Color RGBA(255, 255, 255, 1) フォント色
    Align Align.Center テキストのアライメント
    FontWeight FontWeight.Bold フォントの強調種類
    Width 640 コントロールの横幅
    Height 70 コントロールの縦幅

    f:id:yo-yon:20210928211802p:plain

  9. ツリービューで「HomeScreen」を選択し右側のプロパティからお好みの画像を挿入する

    f:id:yo-yon:20210928212033p:plain

  10. こんな感じになったらOKです。

    f:id:yo-yon:20210928212117p:plain

ちなみに僕は背景画像を作るときにPowerPointを利用しているのですがスライドサイズを幅5.42cm、高さ9.622cmにするとちょうどキャンバスアプリの背景画像としてフィットするものが作れるのでお勧めです。

ボタン作成
  1. 挿入タブの「ボタン」を2回クリック(ボタンを二つ配置する)

    f:id:yo-yon:20210928212330p:plain

  2. ツリービューで上のほうに表示されているボタンの名称を「StartF_B_Home」、その下に表示されているボタンの名称を「StartB_B_Home」に変更

    f:id:yo-yon:20210928212537p:plain

  3. Ctrlキーを押しながらボタンを二つとも選択し下記のように設定
    プロパティ 設定値 補足
    Text "棚卸開始" コントロールに表示するテキスト
    Size 45 フォントサイズ
    FontWeight FontWeight.Semibold フォントの強調種類
    Width 350 コントロールの横幅
    Height 280 コントロールの縦幅

    f:id:yo-yon:20210928212913p:plain

  4. 「StartF_B_Home」を選択し下記の通り設定
    プロパティ 設定値 補足
    Fill RGBA(30, 200, 100, 0.7) 塗りつぶしの色
    HoverFill ColorFade(Self.Fill, -0.2) マウスオーバーした際の塗りつぶしの色
    RadiusTopLeft 20 ボタン左上の角の境界半径
    RadiusTopRight StartF_B_Home.Width/1.5 ボタン右上の角の境界半径
    RadiusBottomLeft StartF_B_Home.Width/1.5 ボタン左下の角の境界半径
    RadiusBottomRight 20 ボタン右下の角の境界半径
    X 140 キャンバス上の横の位置
    Y 125 キャンバス上の縦の位置

    f:id:yo-yon:20210928213205p:plain

    ColorFade関数は指定した色をベースに白方向、黒方向それぞれの方向に色調整ができます。
    今回の場合は「Self.Fill」つまりこのボタンで指定したFillの色をベースに黒方向へ20%色調整するようになっています。

  5. StartB_B_Homeを選択し下記の通り設定
    プロパティ 設定値 補足
    Fill RGBA(30, 180, 100, 1) 塗りつぶしの色
    HoverFill Self.Fill マウスオーバーした際の塗りつぶしの色
    Color ColorFade(Self.Fill,-0.7) フォント色
    RadiusTopLeft StartB_B_Home.Width/2 ボタン左上の角の境界半径
    RadiusTopRight 20 ボタン右上の角の境界半径
    RadiusBottomLeft 20 ボタン左下の角の境界半径
    RadiusBottomRight StartB_B_Home.Width/2 ボタン右下の角の境界半径
    X StartF_B_Home.X+10 キャンバス上の横の位置
    Y StartF_B_Home.Y+10 キャンバス上の縦の位置

    f:id:yo-yon:20210928213450p:plain

    XとYの値を上記のようにしておくことで「StartF_B_Home」の位置を動かした際に「StartB_B_Home」が追従して動くようになります。

  6. Ctrlキーを押しながら「StartF_B_Home」「StartB_B_Home」を二つとも選択し、コピー & ペーストする

    f:id:yo-yon:20210928213603p:plain

  7. 「StartF_B_Home_1」の名称を「CStartF_B_Home」、「StartB_B_Home_1」の名称を「CStartB_B_Home」へ変更

    f:id:yo-yon:20210928214545p:plain

  8. 「CStartF_B_Home」を選択し下記の通り設定
    プロパティ 設定値 補足
    Fill RGBA(100, 180, 255, 0.8) 塗りつぶしの色
    X StartF_B_Home.X キャンバス上の横の位置
    Y StartF_B_Home.Y+StartF_B_Home.Height+70 キャンバス上の縦の位置

    f:id:yo-yon:20210928214114p:plain

    Xの値を「StartF_B_Home.X」にすることで「StartF_B_Home.X」を横方向に動かした際に追従するようになります。
    またYに関しては上記のような値にすることで「StartF_B_Home.X」を縦方向に動かした際に追従するようになります。
    「StartF_B_Home.X」との間隔を調整したい場合は「70」の部分を変更することで調整することができます。

  9. 「CStartB_B_Home」を選択し下記の通り設定
    プロパティ 設定値 補足
    Fill RGBA(100, 150, 255, 1) 塗りつぶしの色

    f:id:yo-yon:20210928214336p:plain

  10. 「CStartF_B_Home」、「CStartB_B_Home」の二つを選択し、下記の通り設定
    プロパティ 設定値 補足
    Text "連続棚卸" コントロールに表示するテキスト
  11. 「StartF_B_Home」を選択し「OnSelect」を下記の通り設定
    移動先のScreenがまだないのでエラー表記になりますがそのまま気にせず設定しておいていただいて大丈夫です。

    f:id:yo-yon:20210928214752p:plain

  12. 「CStartF_B_Home」を選択し下記の通り設定
    移動先のScreenがまだないのでエラー表記になりますがそのまま気にせず設定しておいていただいて大丈夫です。

    f:id:yo-yon:20211007180723p:plain

ボタンの境界半径やFillの透明度などを変更することでデザインとしても変わったものを作ることができます。
そのまま使用してもいいのですがせっかくなのでUIも考えながら見た目が良くしたほうが良いかなと個人的には思っています。

ログインユーザー情報作成
  1. 左メニューの「データ」をクリック

    f:id:yo-yon:20210929092933p:plain

  2. 「データの追加」をクリック

    f:id:yo-yon:20210929093101p:plain

  3. 「検索」に「Office 365 ユーザー」と入力(空白が入っているので注意！)

    f:id:yo-yon:20210929093235p:plain

  4. 「Office 365 ユーザー」をクリック

    f:id:yo-yon:20210929094212p:plain

  5. 「Office 365 ユーザー」の下(赤枠部分)に自分のメールアドレスが入っていることを確認し表示されたコネクタをクリック

    f:id:yo-yon:20210929094301p:plain

  6. データに「Office 365 ユーザー」コネクタが追加されたことを確認

    f:id:yo-yon:20210929100644p:plain

  7. ツリービューの一番上にある「App」をクリック

    f:id:yo-yon:20210929115904p:plain

  8. 「OnStart」プロパティを開き下記を入力
  9. ツリービューの「App」に選択した際に表示される三点リーダーをクリック

    f:id:yo-yon:20210929120430p:plain

  10. 「OnStartを実行します」をクリック

    f:id:yo-yon:20210929131537p:plain

  11. 挿入タブから「ボタン」をクリック

    f:id:yo-yon:20210928212330p:plain

  12. コントロールの名称を「Logininfoframe」へ変更

    f:id:yo-yon:20210929131722p:plain

  13. 「Logininfoframe」をクリックし下記のように設定
    プロパティ 設定値 補足
    Text 空白 コントロールに表示するテキスト
    DisplayMode DisplayMode.Disabled 表示モードの選択
    DisabledFill RGBA(0, 0, 0, 0) 無効状態の時の塗りつぶしの色
    DisabledBorderColor RGBA(30, 180, 100, 1) 無効状態の時の罫線の色
    BorderThickness 5 罫線の太さ
    Width 580 罫線の太さ
    Height 250 罫線の太さ
    RadiusTopLeft 0 ボタン左上の角の境界半径
    RadiusTopRight 20 ボタン右上の角の境界半径
    RadiusBottomLeft 20 ボタン左下の角の境界半径
    RadiusBottomRight 0 ボタン右下の角の境界半径
    X 35 キャンバス上の横の位置
    Y

    CStartF_B_Home.Y+

    CStartF_B_Home.Height+85

    		 キャンバス上の縦の位置

    f:id:yo-yon:20210929132614p:plain

  14. 挿入タブから「ラベル」をクリック

    f:id:yo-yon:20210928211228p:plain

  15. コントロールの名称を「Logininfo_L」へ変更

    f:id:yo-yon:20210929133920p:plain

  16. 「Logininfo_L」をクリックし下記のように設定
    プロパティ 設定値 補足
    Text "ログインユーザー情報" コントロールに表示するテキスト
    Size 18 フォントサイズ
    Fill RGBA(255, 255, 255, 1) 塗りつぶしの色
    Width 280 コントロールの横幅
    Height 40 コントロールの縦幅
    X Logininfoframe.X+30 キャンバス上の横の位置
    Y Logininfoframe.Y-20 キャンバス上の縦の位置

    f:id:yo-yon:20210929134335p:plain

  17. 挿入タブから「ラベル」をクリック

    f:id:yo-yon:20210928211228p:plain

  18. コントロールの名称を「EName_L_Home」へ変更

    f:id:yo-yon:20210929163527p:plain

  19. 「EName_L_Home」をクリックし下記のように設定
    プロパティ 設定値 補足
    Text "氏　　名：" コントロールに表示するテキスト
    Size 25 フォントサイズ
    Width 200 コントロールの横幅
    Height 40 コントロールの縦幅
    X Logininfo_L.X キャンバス上の横の位置
    Y Logininfo_L.Y+Logininfo_L.Height+20 キャンバス上の縦の位置

    f:id:yo-yon:20210929163801p:plain

  20. 挿入タブから「ラベル」をクリック

    f:id:yo-yon:20210928211228p:plain

  21. コントロールの名称を「EName_Home」へ変更

    f:id:yo-yon:20210929163908p:plain

  22. 「EName_Home」をクリックし下記のように設定
    プロパティ 設定値 補足
    Text varUser.displayName コントロールに表示するテキスト
    Size 25 フォントサイズ
    Width 300 コントロールの横幅
    Height 40 コントロールの縦幅
    X EName_L_Home.X+EName_L_Home.Width+30 キャンバス上の横の位置
    Y EName_L_Home.Y キャンバス上の縦の位置

    f:id:yo-yon:20210929164150p:plain

  23. Ctrlキーを押しながら「EName_L_Home」、「EName_Home」を二つとも選択し、コピー & ペーストする

    f:id:yo-yon:20210929164324p:plain

  24. 「EName_L_Home_1」の名称を「Office_L_Home」、「EName_Home_1」の名称を「Office_Home」に変更

    f:id:yo-yon:20210929172211p:plain

  25. 「Office_L_Home」をクリックし下記のように設定
    プロパティ 設定値 補足
    Text "所属支社：" コントロールに表示するテキスト
    Y EName_L_Home.Y+EName_L_Home.Height+30 キャンバス上の縦の位置

    f:id:yo-yon:20210929172621p:plain

  26. 「Office_Home」をクリックし下記のように設定
    プロパティ 設定値 補足
    Text varUser.officeLocation コントロールに表示するテキスト
    X EName_Home.X キャンバス上の横の位置

    f:id:yo-yon:20210929173005p:plain

  27. Ctrlキーを押しながら「Office_L_Home」、「Office_Home」を二つとも選択し、コピー & ペーストする

    f:id:yo-yon:20210929173122p:plain

  28. 「Office_L_Home_1」の名称を「dep_L_Home」、「Office_Home_1」の名称を「dep_Home」に変更

    f:id:yo-yon:20210929173223p:plain

  29. 「dep_L_Home」をクリックし下記のように設定
    プロパティ 設定値 補足
    Text "所属部署：" コントロールに表示するテキスト
    Y Office_L_Home.Y+Office_L_Home.Height+30 キャンバス上の縦の位置

    f:id:yo-yon:20210929173356p:plain

  30. 「dep_Home」をクリックし下記のように設定
    プロパティ 設定値 補足
    Text varUser.department コントロールに表示するテキスト

    f:id:yo-yon:20210929173758p:plain

はい、ここまでやるとこんな感じの画面になってるはずです。

f:id:yo-yon:20211007180903p:plain

(背景は任意なので違ってるとは思いますが・・・)
前述したとおりボタンにエラーが出てますが変遷先のスクリーンを作ればエラーは消えるのでご安心ください。
以上でHomeScreenの作成完了です！

如何だったでしょうか？
次回は棚卸用のスクリーンの作成について説明していきたいと思います。
それでは皆さん、良い業務ハックライフを～


免責事項