Power Apps Studio の操作

Power Apps 入門

Luise Freese

Azure & Power Platform Architect

メーカーポータル

 

  • 職場アカウントで make.powerapps.com にサインインします
  • 左側のナビゲーション: Home、+ Create、Apps、Tables、Flows
  • このコースで作成するものはすべてここに保存されます

 

make.powerapps.com の Power Apps メーカーポータルのホームページ。左側のナビゲーションと、スタート用タイルが表示されたウェルカム画面

Power Apps 入門

空白のキャンバスアプリを作成する

 

  • 左側のナビゲーションで + Create をクリックします
  • Start from design の下で Create from blank を選択します
  • Tablet または Phone を選びます。名前は保存時に入力します

 

make.powerapps.com の Power Apps 作成ページ。Create from blank、Split-screen、Sidebar、Header などの Start from design オプションを表示

Power Apps 入門

モダンコントロールを有効にする

  • アプリレベルの設定
  • デフォルトではオフ
  • チームメンバーが先に有効にしていればオンになっています

 

Power Apps Studio のコマンドバーで三点メニューを開いた状態。Insert、Add data、New screen、Theme、背景オプションの下に Settings が強調表示されている

 

Power Apps の Settings ダイアログ。Updates タブの New サブタブを選択し、Modern controls and themes のトグルをオンにした状態

Power Apps 入門

スタジオエディターの構成

 

1. Tree View（左側）: すべての画面とコントロール。クリックで選択、ダブルクリックで名前変更

2. Canvas（中央）: コントロールを視覚的に配置

3. Properties panel（右側）: 選択したコントロールの設定

4. Formula bar（上部）: Power Fx の数式を記述

 

Power Apps Studio の画面に4つの番号付き吹き出し。1は左側の Tree view、2は中央のキャンバス、3は右側の Properties panel、4は上部の formula bar を示す

Power Apps 入門

コントロールの追加

 

  • + Insert をクリックしてカタログを開きます
  • Text label、Text input、Button を配置します
  • 各コントロールには Text、Fill、Size などのプロパティがあります

 

ツールバーから開いた Power Apps Studio の Insert パネル。Text label、Button、Gallery などのコントロールカテゴリを一覧表示

Power Apps 入門

アプリをプレビューする

 

アプリを実行中の Power Apps Studio プレビューモード

 

  • 右上の ▷ 再生ボタンをクリックしてアプリを実行します
  • ボタンをクリックしたり入力欄に入力したりすると、実際のアプリのように動作します
  • ✕ をクリックしてエディターに戻ります
Power Apps 入門

Save と Publish の違い

 

  • Save: 作業内容を保存します
  • Publish: 共有相手にそのバージョンを公開します
  • 本格的な公開は第4章で行います

$$

右上に Save と Publish のアイコンが強調表示された Power Apps Studio のツールバー。Editing、Properties、Comments、App Checker、Share、Preview の各ボタンも表示

Power Apps 入門

コンテナは後で学びます

2つのスマホアプリ画面を並べて表示。左側は「Now: blank screen」というラベルで、空のキャンバスにボタンが1つ浮かんでいる状態。右側は「Chapter 4: layouts」というラベルで、同じボタンが水平コンテナ内に他のコントロールと並んで配置されている状態

 

  • 次は空白の画面で各コントロールを確認します
  • 第4章ではレイアウトコンテナを使ってアプリをレスポンシブに保ちます
  • 配置については今は気にしなくて大丈夫です
Power Apps 入門

作成するアプリ

 

  • 空白のキャンバスアプリを作成します
  • 2つの画面と最初のコントロールを追加します
  • ▷ 再生ボタンですべてをプレビューします

$$

Power Apps Studio の実際のスクリーンショット。Library Sign-in アプリを表示し、左側の Tree View には Screen1（Label、Button、TextInput の各コントロール）と Screen2 が一覧表示され、キャンバスにはティール色のヘッダー、Welcome テキスト、名前入力欄、Sign in ボタン、Thanks Priya メッセージを含むサインイン画面が表示され、右側に Properties panel が表示されている

Power Apps 入門

練習しましょう！

Power Apps 入門

Preparing Video For Download...