ハッカソン広島 #2

「コンテナー」 の理解を深めよう ― レスポンシブ・アプリのすゝめ ― 2024年2月24日（土） ハッカソン広島 #2 1

自己紹介 kuro. : https://pedantet.com : https://twitter.com/eigogakuto フリーランス Power Platform 講習/伴走支援 Power Platform を起点に、市民開発者の養成を支援しています。 自身が非開発者の出身であることや、非IT部門の方々に対する技術・教育支援の経験を活かし、皆さまの 「でき るようになりたい」 という声にたぶん応えます。 講習内容の詳細や日程など、お気軽にお問い合わせください。 全国各地、喜んで足を運びます。 でも、そろそろ広島の案件も欲しい。 趣味 ： 読書、写真撮影、バイク、イラスト制作、料理、他 近況 ： 蔵書管理アプリを作りました。 やっと重複買いを防止できそうです 2024/2/24 2

• https://pedantet.com/
• https://twitter.com/eigogakuto

目次 1. 学習の目的 2. 自動生成アプリの中身を読み解く 3. 実際に手を動かしてみる 3

学習の目的 ✓ コンテナーと仲良くなる ✓ 使っているツールの構造は知っておく 4

コンテナーコントロールの一般的な利用場面 ✓ レスポンシブ・デザインを意識するとき 5

レスポンシブ・デザイン とは • 使用する端末や画面の大きさによって、使用感に影響を与えないデザイン 6

例 ： モデル駆動型アプリ 7

わざわざキャンバスアプリで 「レスポンシブ」 にする利点 ✓ モデル駆動型アプリにないコントロールを使用してアプリを作れる点 • • • • バーコードリーダーを使用したい カメラ機能を使いたい ゲームアプリを作りたい （タイマーコントロール） オーディオ、マイク、ビデオといったメディアを活用したい ✓ 他にも • モデル駆動型アプリ （Dataverse） のライセンスを持っていない • ちょっとデザインに凝りたい 8

最大の利点 ： 自動生成アプリの拡張に役立つ 9

自動生成アプリの中身 実際に作ってみましょう 10

データソースを用意する （SharePoint リストの作成） リスト名 ： SampleData 列名 （作成時） データ型 タイトル列 （既存） 入力内容 Power Apps 入門 Author 一行テキスト 自分の名前 Genre 一行テキスト コンピュータ Date 日付と時刻 今日の日付 完成見本 既に何かしらの SharePoint リストを作 成している人は、お好きな リストでアプリを自動生成 してもらって構いません。 11

アプリを自動生成してみよう ① クリック ② クリック 12

アプリを自動生成してみよう クリック 13

アプリを自動生成してみよう ① SharePoint から ② SharePoint サイト ③ SharePoint リスト ④ クリック 14

完成見本 15

画面構成 ツリービューの上から順に見ていきましょう 16

ScreenContainer1 ： 垂直コンテナー • 縦方向に伸縮するコンテナー • TableNameContainer1 と BodyContainer1 が入っている TableNameContainer1 BodyContainer1 17

TableNameContainer1 ： 水平コンテナー • 横方向に伸縮するコンテナー • リスト名が書かれたテキストラベルが挿入されている TableNameContainer1 18

BodyContainer1 ： 水平コンテナー • SidebarContainer1 と RightContainer1 と DCD Container1 が入っている SidebarContainer1 RightContainer1 DeleteConfirmDialogContainer1 19

以下略 まるでマトリョーシカ 20

なぜ伸縮するのか 画面サイズを検出したり、変数が入っていたり… 21

まずは動きを確認してみましょう （※削除時に注目） 22

ポイント （１） Visible プロパティ • DeleteConfirmDialogContainer1 の Visible プロパティ 内 ✓ 変数 (deleteMode) が true なら Visible は true, それ以外なら false • 変数宣言のタイミングは、DeleteIconButton1 を押した時 （＝ OnSelect プロパティ） OnSelect プロパティ 23

ポイント （2） 画面サイズの検出 （なぜ画面が切り替わるのか） 24

ポイント （2） 画面サイズの検出 • 画面が切り替わっているのではなく、Visible プロパティの true / false • スマートフォン操作の時は SidebarContainer1 の Visible プロパティ は false • それ以外の端末での操作は SidebarContainer1 の Visible プロパティは true のまま ✓ スクリーンサイズが small で、次の変数のどれか1つでも true だったら Visible を false に • 画面サイズは App の SizeBreakingpoints プロパティで確認 ✓ 左から、ScreenSize.Small, Medium，Large （1200 以上は ExtraLarge ） 25

ポイント （3） 幅と高さを数式で制御する • 何も設定していない場合は右側が見切れてしまう問題 ✓ コントロールの Width プロパティ と Height プロパティに 定数が入力されている ✓ スクリーンサイズよりもコントロールのサイズが大きくなった時に生じる • TableNameContainer1 の Width プロパティ ✓ 500 Parent.Width に変更し、アプリをプレビューに 26

各ポイントを整理 1. 各機能・画面ごとにコンテナーが区分けしている 2. Visible プロパティの true / false の切り替えを変数で制御する 3. どの画面サイズの時に 2. の制御を行うかを同時に考えなければならない （難所？） 4. 画面サイズよりもコントロールのサイズが大きくならないようにプロパティを設定 ※ Microsoft Learn を一読しておきましょう 27

• https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/create-responsive-layout

コンテナーを配置する 要点のみの解説 28

垂直コンテナー （Main） を配置 Height ： Parent.Height Width ： Parent.Width 配置 ： 拡大 レイアウトグループ ： 垂直コンテナー 29

水平コンテナー (TableName, Body） を配置 ✓ 1つ水平コンテナーを配置したら、一度ツリー ビューに戻ってMainを選択し、2つ目の水平コ ンテナーを配置するのがポイント 30

TableName （ヘッダー） の設定 ✓ 高さ （伸縮可能） ： オフ ✓ 高さ ： 70 31

TableName と Body の間に余白を設ける ✓ ギャップ ： 15 Main を選択 32

TableName にテキストラベルを挿入 ✓ コンテナー内に配置 ： 拡大 ✓ 幅 （伸縮可能） ： オン ✓ その他、フォント、塗りつぶし などは自由 33

余白を大切にする （デザインの知識） TableName ✓ パディング ： 各 5 ～ 10 ✓ ドロップシャドウはお好みで 34

コントロールの位置を変えたい場合は 「再配列」 で 35

注意点 ： 自動生成しない場合 設定することがもうひとつあります 36

設定 表示タブ 画面に合わせて倍率を変更 オフ ※ 既定ではオン 37

課題 レスポンシブアプリを作成してみましょう 38

データ入力、表示、編集ができるアプリ 1. テーマは自由 2. レスポンシブアプリであることが条件 3. 自動生成アプリ可 （デザイン特化でもOK） 39

どうしてもアイディアが思い付かない人へ • 書籍購入申請アプリを作成してみましょう （チームを組んでもOKです） • 背景 あなたの職場では、承認が必要な申請業務があります。 会社の経費で購入してよいものか どうかを 「申請書」 と名付けられた Excel シートに記入してメールに添付して送信したり、 場合によっては紙の書類を提出したりするなどしています。 これだけでも鬱陶しいのに、その申請の許可が下りるまでに時間を要してしまいます。 承 認担当者が外出していたり、その承認に押印が必要だったり、書類の不備を修正することが あったりと、様々な理由で円滑に承諾を得られないことが起こります。 さらには、その結果 が戻って来るまでにも時間を要します。 なんとかならないでしょうか。 40