三角ボタンをクリックすると動き出します。先に書いた通り、既に一定の基本的な機能が実装済みの状態です。1はデータの一覧表示です。各データをクリックするとデータの詳細表示画面に遷移します。2はリロードボタンです。Googleスプレッドシートの値を直接変更してからこれをクリックすると画面にも変更が反映できます。初期状態ではアルファベット順で並び替えですが、もちろん後でカスタマイズできます。4はデータの新規追加です。各データ項目を新規で入力できる画面に遷移します。こちらはデータの詳細表示画面です。一覧では表示しきれない項目を画面全体を使って表示できます。1がデータ表示部分で、スプレッドシートの列名と値をそれぞれ自動で並べて表示してくれます。順番は簡単に変更できます。2のゴミ箱マークはデータの削除です。表示中のデータを消すことができます。3のペンマークはこのデータの編集画面に遷移します。データの更新画面です。1に現在のデータが表示されるので、変更したら2のチェックマークをクリックするとGoogleスプレッドシートの内容が更新されます。使うデータを指定するだけでここまでできるアプリが自動で生成できてしまいます。あとはここから自分で修正したり、カスタマイズすることで大幅にアプリ作成の時間を短縮することができます。スポンサーリンクアプリの修正・カスタマイズここまで自動生成できるのは凄いのですが、やはり自動生成には限界があって一覧に並んで欲しいデータが思い通りに表示されるとは限りません。ここからは少し自分で触ってアプリの修正やカスタマイズを行います。今回はよくやる3点に絞って紹介します。いう感じでよくわからない表示項目になってしまっていますので、これを修正してみます。一覧表示部分をマウスでクリックすると、右側に次のように表示されますので、フィールドの「編集」をクリックします。フィールド=項目名(列名)です。一覧表示部をよく見てみると、3つのラベルコントロールが配置してあり、それぞれにデータのどの項目を表示するか指定してあるだけですので、これを表示したい内容に変更します。一覧表示されるようになりました。一覧表示の自動生成だと、ランダムでチョイスされた3つぐらいが表示されます。追加で一覧に表示したいものがあることがよくあります(ほぼ毎回)。そんな時は、一覧表示の一番上の項目をマウスでクリックして選択状態にしてから、メニューの「挿入」→「ラベル」をクリックします。すると、表の上にラベルが1つ追加されます。データの中から1つ自動選択された状態で表示されます。今回は商品名が選択されたようです。表の上にラベルを追加した場合は、先頭に追加するだけで2つ目以降の項目にも自動で設置されます。下の画面の通り、そのデータの指定した項目が自動で表示されます。下の画面のfxの部分を見ると、ThisItem.商品と入力されています。一覧の各行のことをThisItemという名前で表現しますので、ThisItem.商品は、このデータの商品を表示する、という意味になります。商品名は既に表示しているので、これを別の項目に変更してみます。いつ売ったのか表示したいので、販売日にしてみましょう。まで入力すると選択できる候補が表示されますので、販売日を選択します。すると、このように各データの販売日が一覧表示されるようになりました。fxってどこかで見た覚えがありませんか?そうなんです。エクセルのこの部分ですね。エクセルを使っている方ならピンと来ますが、ここに式を入れればいろいろできるように、PowerAppsでもここにいろいろ式を入力することでアプリが作れるのです。PowerAppsの場合は式以外にも、VBAマクロのようにプログラムを書くこともできます。なんの日付かわからないので、固定表示を追加しましょう。固定文字列を入力します。ダブルクォート(”)で囲んだ文字列は、固定の文字列となります。一覧に表示したい項目を欲張るとスペースが足りなくなってしまいました。こんな時は、一覧表示のこの部分を下へドラッグすることで一覧表示スペースの高さを調整することができます。おお、いろんな情報が一覧で表示できるようになってきました。表示を見やすく整えるアプリで表示したいものが揃うと、次は見た目が気になりだしますよね。今回は少しだけ整えてみます。今回は右側で揃えてみます。設定を適用したい画面コントロールは複数選択することができますので、変更対象のものをすべて選択して右側のプロパティで一括変更します。キーボードのShiftキー、またはCtrlキーを押しながらマウスでコントロールをクリックしていくと複数選択することができます。金額などはカンマがついていないと見にくいですよね。そんな時は、テキスト表示部に少し関数を追加することで簡単にカンマ区切り表示と文字列の追加が行えます。1対象のラベルを選択し、ラベル表示内容を示す2Textプロパティを選択します。3表示内容が「ThisItem.販売金額」となっていますので、これをカンマ区切りして最後に「円」を追加します。円"ここではValue関数とText関数の2つを組み合わせています。スプレッドシートの「販売金額」列からデータを文字列として取得しますので、一度Value関数で数値として認識させ、数値としてText関数に渡して、カンマ付き書式を適用することで、カンマ区切りで画面表示できるようになります。&演算子で文字列の結合をすることで、カンマ区切りした数値の後ろに円をつけています。スポンサーリンクまとめ動くアプリが簡単に作りました。このアプリを公開して共有することで、スマフォやタブレットでも使えるようになり、どこからでもスプレッドシートのデータを参照したり、変更することができます。それでは今回のまとめです。表示内容の修正・カスタマイズいかがでしたか?一定動くところまではほぼ自動で作れることが分かりました。ここから本当に使いやすいアプリに仕上げていくには、いよいよプログラムコードを書いて作り込んでいく必要があります。言っても、スクラッチ開発のような本格的なプログラミングは不要で、エクセルの関数とVBAマクロの経験者であればそれほど難しくないでしょう。次回は、今回作ったアプリを更にカスタマイズしてみようと思います。Appsは、スマートフォン用のアプリやパソコン用のWebアプリなどを、コードを書かずに作成できるノーコード/ローコードツール(ソリューション)です。必要なパーツをPowerPointの感覚で配置し、必要な制御をExcelの関数の感覚で記載することでアプリを作成できます。前回はPowerAppsでポップアップウインドウを作るところまでやってみました。動かすところまでをメインでやったため、デザイン的にちょっとダサいまま終わってしまいました。PowerAppsを使うには、Microsoftのアカウントが必要です。PowerAppsで作成したアプリはMicrosoftのアカウントに紐づいた状態でクラウド上に保存されます。今回はデータの一覧表示部分として使っているギャラリーコントロールに画像を追加する方法を紹介します。アプリは複数の画面で構成することが多いです。PowerAppsでも自由に画面を追加して、画面間を自由に移動させることができます。画面遷移をマスターすれば作成できるアプリの自由度が上がります。画面を...IT【PowerApps】ギャラリーのソート順を変更する以前、PowerAppsのギャラリーでスプレッドシートの内容を一覧表示するアプリを作りました。PowerApps上で一覧表示するデータが入ったスプレッドシートを指定するだけで簡単に一覧表示してくれる優れものでした。アプリでよくあるメインの画面を左端から右にスワイプすると、画面左側からスルッとサブ画面が表示され、左にスワイプするとまた左側に消えていくという画面の動き。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。最近はマネジメント業務ばかりやっていますが、エンジニアとしていつまでも現役でありたいので、時々手を動かしていますが、歳を重ねると物忘れがひどくなる一方なので、備忘録としてブログを運営しています。Reserved.ホーム検索トップサイドバータイトルとURLをコピーしました。