2.8K Views
February 24, 24
スライド概要
第2回ハッカソン広島にて使用したスライドです
「コンテナー」 の理解を深めよう ― レスポンシブ・アプリのすゝめ ― 2024年2月24日(土) ハッカソン広島 #2 1
自己紹介 kuro. : https://pedantet.com : https://twitter.com/eigogakuto フリーランス Power Platform 講習/伴走支援 Power Platform を起点に、市民開発者の養成を支援しています。 自身が非開発者の出身であることや、非IT部門の方々に対する技術・教育支援の経験を活かし、皆さまの 「でき るようになりたい」 という声にたぶん応えます。 講習内容の詳細や日程など、お気軽にお問い合わせください。 全国各地、喜んで足を運びます。 でも、そろそろ広島の案件も欲しい。 趣味 : 読書、写真撮影、バイク、イラスト制作、料理、他 近況 : 蔵書管理アプリを作りました。 やっと重複買いを防止できそうです 2024/2/24 2
目次 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
ポイント (1) 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
コンテナーを配置する 要点のみの解説 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