アプリのカスタマイズとテーマに合わせた調整

このチュートリアルでは、Power Apps プラットフォーム内のさまざまなツールと機能を使用してアプリをカスタマイズする方法を説明します。アプリをカスタマイズすると、表示したいデータを効果的に提供しながら、好みのテーマやブランドに完全に一致する独自の外観を考案するのに役立ちます。

Power Appsに関する他のチュートリアルを読んだことがある場合は、このプラットフォームの最大の強みは使いやすさであることがわかります。

目次

• アプリのカスタマイズ: マスター画面とドキュメント画面
• ドキュメント画面を使用したアプリのカスタマイズ
• ボタンを追加してアプリをカスタマイズする
• ギャラリーを追加してアプリをカスタマイズする
• ボタンとアイコンにナビゲーションを追加する
• 結論

アプリのカスタマイズ: マスター画面とドキュメント画面

空白のキャンバスからアプリを開始する場合は、マスター画面とドキュメント画面から始めることが重要です。これら 2 つの画面があると、プロセス全体の速度が向上し、最終的に画面の数が増えても、アプリ全体で統一した外観を維持できます。

マスター画面はアプリ全体のテンプレートとして機能します。残りの画面がどのように見えるかが決まります。この例では、マスター画面は次のようになります。

ご覧のとおり、上部領域全体にタイトルがあり、その上に赤い四角形があり、その四角形も画面の長さ全体に広がっています。これは、アプリに画面を追加すると、すべてのページに常にそのヘッダーが含まれることを意味します。

ドキュメント画面に関しては、構築中のアプリ全体で使用されるすべての要素の参照ポイントとして機能します。マスター画面にはタイトルとトップバーがすでにあるので、ドキュメント画面にも同じものを設定しましょう。

ここにはすでに赤い四角形があります。

したがって、タイトルを追加するだけです。これを行うには、[挿入] リボンの下の [テキスト] ドロップダウンを使用してラベルを作成するだけです。

ここにテキスト ボックスがあるので、マスター画面上のフォント サイズと同じフォント サイズを使用したいと思います。

マスター画面のラベルに戻ると、フォント サイズが 40 であることが表示されます。

そこで、ドキュメント画面のテキストも 40 にします。

ドキュメント画面を参照点として使用するため、その中のすべての要素に適切にラベルを付けることが重要です。現時点では、ここの要素の名前は Label3 と Rectangle2 で、どちらも非常に一般的なものです。

そこで、それらの名前を変更して、代わりに Title と TopBar と名付けましょう。

ドキュメント画面を使用したアプリのカスタマイズ

ドキュメント画面の要素に適切にラベルを付けたので、他の画面のカスタマイズを開始できます。この場合、他にある画面はマスター画面のみです。

マスター画面のタイトルがまだ適切なサイズではないとしましょう。マスター画面でLabel1を選択するだけです。次に、プロパティのドロップダウン メニューで [サイズ] を選択し、ドキュメント画面で参照する要素の名前 (この場合はタイトル) を入力し、模倣するプロパティを追跡します。

Title.Size を入力して Enter キーを押すと、カスタマイズした要素が自動的に変更されます。

サイズ以外にもラベルの色もカスタマイズできます。それを白に変更したいとします。したがって、「タイトル」という要素を強調表示し、ドロップダウンから「色」を選択して、「白」と入力するだけです。

ドキュメント ページのタイトルが白になったので、マスター画面に戻って、そのプロパティも参照するとどうなるかを見てみましょう。マスター画面の下で「Label1」を強調表示し、「Title.Color」と入力します。

Enter キーを押すと、カスタマイズした要素の色が変更されるだけではないことがわかります。数式バーには RGBA カラーコードも表示されます。

ここで、ドキュメント画面を使用してカスタマイズする別の方法を紹介します。[アイコン] の下のドロップダウン メニューを見て四角形を追加します。

この四角形をマスター画面の背景の基礎にしたいと考えています。そこで、この要素の名前を「Background」に変更します。

右側のペインの「プロパティ」タブでこの要素の色を選択できます。

他の要素を画面に追加するときに、他の要素の表示を妨げないように、明るいグレーの色を選択します。

さて、マスター画面に行きましょう。ここにはラベルと四角形という 2 つの要素がまだあります。ただし、画面の背景色を変更するために、ここに別の要素を追加する必要はありません。

マスター画面が強調表示されていることを確認して、ドロップダウンの下で [塗りつぶし] を探します。次に、数式バーで、前に作成した四角形とその塗りつぶしの色を参照します。「Background.Fill」と入力して Enter キーを押すと、その画面の背景が参照色と同じ色で表示されていることがわかります。

要素を 1 つずつ追加し、それぞれの色を選択していますが、[ホーム] リボンでデフォルトのテーマを使用することもできます。特にテーマのいずれかがブランディングと一致する場合は、これらで十分です。

ただし、必要なものに一致するテーマがない場合は、ドキュメント化の方法が完全に機能します。

ボタンを追加してアプリをカスタマイズする

アプリに追加できる便利な要素の 1 つはボタンです。ボタンは、ユーザーがアプリのある部分から別の部分にジャンプできるようにする優れた方法です。これはアプリのホーム画面に最適です。

ということで、まずはホーム画面を作成しましょう。すでにマスター画面があるので、それを複製するだけで、ホーム画面を一から作成する手間が省けます。

ご覧のとおり、どちらの画面にもまったく同じ要素が含まれています。

複製したマスター画面の名前を変更して、「HomeScreen」と名付けましょう。

ホーム画面の下の要素を確認すると、マスター画面をカスタマイズしたときに作成したものと同じ参照が含まれていることがわかります。たとえば、Label1_1 を見ると、ドキュメント画面のタイトルのサイズが参照されています。

これがホーム画面になるので、そのラベルのテキストを変更しましょう。これを行うには、右側の [プロパティ] ペインに新しいテキストを入力するだけです。ホーム画面に入力してみましょう。

次に、ホーム画面にボタンを追加しましょう。これを行うには、「挿入」リボンの下にある「ボタン」をクリックします。

他の要素と同様に、ボタンを任意の場所にドラッグし、要素の周囲の点をクリックしてドラッグすることでサイズを変更できます。

次に、このボタンのテキストを「顧客の表示」に変更しましょう。ボタンを強調表示し、プロパティ ドロップダウンから [テキスト] を選択し、数式バーに「顧客の表示」と直接入力するだけです。

よりプロフェッショナルな外観にするために、虫眼鏡アイコンを追加しましょう。

アイコンを移動したり、サイズを変更したりできます。この場合は、このボタンのテキストの上に配置してみましょう。

次に、右側のプロパティ ペインに移動して、虫眼鏡の色を白に変更しましょう。

これをより美しくするために、ボタンの色も変更しましょう。ただし、他の画面を構築するときに同じ色と設定を簡単に参照できるように、ドキュメント画面からこれを行う必要があります。

追加したこれらの新しい要素を強調表示し、Ctrl + C をクリックしてコピーしましょう。

次に、ドキュメント画面に移動し、Ctrl + V をクリックしてこの画面に要素を貼り付けます。

トップバーは栗色なので、ボタンの色がそれを補うようにしたいと思います。

それでは、テーマに適した色に変更しましょう。

ホーム画面のボタンがドキュメント画面で設定したプロパティと一致していることを確認する必要があります。最初に行う必要があるのは、この要素の名前を HomeScreenButton に変更することです。

次に、ホーム画面に戻り、ボタンの塗りつぶしをドキュメント画面で設定したものと一致するように変更しましょう。

表面的には、[顧客の表示] ボタンは選択した色とよく合います。しかし、カーソルを合わせると、まだ元の青色に戻っていることがわかります。

これを変更するには、HoverFill を探すだけです。

ホバー塗りつぶしの現在のプロパティを見ると、色が 20% 薄くなっていますが、特定の色が参照として使用されていますが、これは望ましくありません。

したがって、特定の RGBA カラー コードを参照する代わりに、HomeSreenButton.Fill を参照しましょう。

Enter キーを押すと、ボタンに希望の色が使用されていることがわかります。

もう 1 つ修正する必要があるのは、ボタンをクリックしたときに表示される色です。ご覧のとおり、クリックすると白くなります。

これを修正する最善の方法は、使用したアイコン (虫眼鏡) がボタンをクリックするたびに非表示にならないようにすることです。これを行うには、アイコンの色を変更し、トップバーと同じ色に設定します。

ホーム画面には 3 つのボタンが必要なので、この特定のボタンを 2 回複製する必要があります。これを行うには、要素を強調表示し、Ctrl + C をクリックしてコピーします。

次に、Ctrl + V をクリックして、同じ要素をこの画面に貼り付けます。同じことをもう一度行って 3 番目のボタンを追加します。次に、それらを適切な場所にドラッグして、画面が適切に表示されることを確認します。

それでは、テキストを変更してみましょう。2 つ目は「Add New Customer」、3 つ目は「See Agents」です。

ボタンが 3 つあるので、実際にボタンがどこかに移動することを確認してみましょう。これらのボタンが表示される画面を準備する必要があります。

ギャラリーを追加してアプリをカスタマイズする

ギャラリーは、特定の方法でレイアウトされたアイテムのコレクションまたはリストです。携帯電話の連絡先について考えてみましょう。ギャラリーの好例ですね。

ホーム画面の最初のボタンは顧客の表示用なので、このボタンが配置される新しい画面を作成します。このスクリーンはギャラリーにとって素晴らしい場所になるでしょう。

他の画面で行ったのと同じように、マスター画面を複製し、名前を ViewCustomersScreen に変更します。

次に、「挿入」ボタンの下にある「ギャラリー」をクリックします。ギャラリーにはさまざまな形式がありますが、この特定のアプリでは垂直レイアウトを使用しましょう。

縦型ギャラリーはこんな感じです。

ご覧のとおり、3 つのエントリのみが表示されています。ただし、ギャラリーを下にドラッグして画面いっぱいにすると、スペースを埋めるエントリが追加されます。

現在ギャラリーに 4 つの空白のエントリが表示されているとしても、ここに収容できるデータのセットが 4 つだけであるという意味ではありません。PowerApps では、ギャラリーがデータに基づいて正確な数のエントリを自動的に作成します。

データには画像が含まれていないので、タイトル、サブタイトル、本文のレイアウトを変更しましょう。

現在のギャラリーはまだデータ ソースに接続されていないため、ギャラリーをクリックするとデータ ソースを選択するように自動的に求められます。

このポップアップが自動的に表示されない場合は、右側のプロパティ ペインからデータ ソースを追加できます。

ソースを選択したら、ソース ファイルが存在するフォルダーを開くだけです。

この Customers ファイルのデータを使用します。

これがそのスプレッドシートの中身です。これはギャラリーに表示したいデータです。

それをクリックすると、テーブルを選択できるようになります。

そのテーブルを選択すると、そのテーブル内のデータがギャラリーに表示されます。

現在、ギャラリー内の各項目の上部にエージェント名が表示されています。

ただし、姓と名を一番上に表示すると、より意味が分かります。そこで、数式バーに移動して変更しましょう。姓と名が 2 つの別々の列にあるため、連結を使用します。

私たちが選択したレイアウトの素晴らしい点は、各カードにより多くの情報を配置するためのより多くのスペースが得られることです。したがって、顧客の所在地を 2 行目に入れることができます。

次に、3 行目で VIP レベルを使用できます。

特にタブレット モードで新しいキャンバスを作成する利点は、作業できるスペースが広いことです。たとえば、このギャラリーの場合、各カードにすでにかなりの量の情報が表示されているとしても、非常に多くのスペースが残っています。

そこで、ラップ数を変更してスペースを最大化しましょう。それはここのプロパティ ペインで行うことができます。

複数列のギャラリーを作成できるように、これを 1 ではなく 3 に変更しましょう。

これにより、一目でより多くのものを確認しやすくなります。

ボタンとアイコンにナビゲーションを追加する

いくつかの画面を操作できるようになったので、ある画面から別の画面に移動するナビゲーションの追加を開始できます。

まず、[挿入] リボンの下の [アイコン] をクリックしてホーム アイコンを追加しましょう。これを [顧客の表示] 画面の上部に配置します。

背景色が暗いので、このアイコンを白にしましょう。

ナビゲーションを追加したら、そのホーム アイコンをクリックすると、すぐにホーム画面に戻ります。また、ホーム画面の [顧客の表示] ボタンにナビゲーションを追加して、[顧客の表示] 画面に移動します。

まず、[顧客の表示] ボタンを強調表示し、プロパティ ドロップダウンで OnSelect を探します。これにより、ナビゲーションのトリガーが設定されます。

次に、数式バーで [ナビゲート] を使用し、移動したい画面 (ViewCustomersScreen) を参照します。

これを設定すると、[顧客の表示] ボタンをクリックするたびに、設定したギャラリーが表示されるようになります。

次に、顧客の表示画面に移動しましょう。ユーザーがこのホーム アイコンをクリックすると、ホーム画面に戻ることを確認する必要があります。

これを行うには 2 つの方法があります。まず、「戻る」を使用できます。これにより、基本的に、最後にアクセスした画面に戻ります。

このコマンドの問題は、このアプリに複数の画面があることです。つまり、常にホーム画面からアクセスするとは限らないということです。したがって、このコマンドは、ホーム アイコンの代わりに [戻る] ボタンまたはアイコンがあれば、より適していると考えられます。

より適切なコマンドは Navigate です。また、ホーム画面を参照して、このアイコンがどこに移動するかを PowerApps に指示します。

この画面にナビゲーションを追加したので、最後に行う必要があるのは、タイトルのテキストを「顧客の表示」に変更することです。

これで、画面はすべて設定され、ギャラリーに適切なデータが表示され、アプリ上のさまざまな画面に移動できるナビゲーション ボタンが表示されました。

結論

Power Apps でのアプリのカスタマイズの容易さを見ると、Microsoft が効率性を重視してこのプラットフォームをどのように設計したかがさらに明らかになります。すべての編集とカスタマイズが簡単で、誰でもアプリを最初から作成するのに多くの時間を必要としません。

これは、PowerApps を通じてできることのほんの一部にすぎません。ギャラリーや追加画面以外にも、アプリをより包括的にするために追加できるものがいくつかあります。これらについては、他のチュートリアルで説明します。

ではごきげんよう、

ヘンリー

Power Apps の概要: 定義、機能、機能、および重要性
Power Apps 環境: アプリ要素を適切にセットアップする
PowerApps の関数と数式 | Power Apps の概要 はじめに