Power Apps のフォームでアコーディオンメニューを作成する
アコーディオンメニューとは、見出しをタップすることで、その下に隠れている詳細情報を表示したり隠したりすることが出来るメニュー機能で、開閉する動きが、まるでアコーディオンの蛇腹のように見えることから、アコーディオンメニューと呼ばれています。
スマートフォンの画面で一度に表示出来る情報量は意外と少ないので、より多くの情報をコンパクトに見せるためには工夫が必要です。そこで、詳細情報は最初は隠しておいて、見出しのついたボタン等をタップした時だけ詳細を広げて見せるというような作りにしておくと、ページ全体で何が書かれているのかを素早く確認することが出来ますので、情報量が多くても閲覧しやすくなるはずです。
アコーディオンメニューを作成するには、詳細部分の表示/非表示の状態を保存する
変数を設定しておきます。変数名は任意でOKですが、初期値には閉じた状態を表す”false”をセットしておきます。今回の解説では、「概要」が書かれているデータカードを使って解説しますので、変数名は Flg_Overview としました。この変数は、メニューの見出しの数だけ用意します。
今回のアコーディオンメニューはフォームを使用して作成します。
フォームのデータカードの内容は、このように設定してみました。見出しと詳細はラベルで作成。詳細の「閉じた状態」と「開いた状態」を表すため、アイコンを使い、「∨」と「∧」で表現しています。
見出しをタップしたときのアクションを設定します。概要のラベルをタップすると、変数Flg_Overviewの値が true と false で交互に切り替わるようIf文を設定します。
詳細の表示/非表示の設定をします。詳細のプロパティ「Visible」にIf文を入れ、変数 Flg_Overview の値が true のときのみ表示するようにします。
アイコンの向きの設定をします。ここにもIf文を入れて、変数 Flg_Overview の値が true のときは0、falseのときは180にすることで、詳細の表示/非表示でアイコンの表示も変わるよう設定しています。
最期に詳細ラベルの高さですが、ラベルのプロパティ「高さの自動調節」をオンにすることで、文字数に合わせて高さが自動調整されます。
これで「概要」の設定は完了です。プレビュー画面で、見出しラベルをタップして、詳細が表示/非表示となるかを確認してみてください。正しく動いたら、フォームにある他のデータカードも同じように設定をしてみてください。
Twitterではアコーディオンメニューが実際に動くところを公開していますので、試される際の参考にしてみてください。
Power Apps でアコーディオンメニューを作成してみました。変数を追加、フォームに置いたラベルの設定を少し変更するだけで出来ました。#PowerApps #PowerPlatform pic.twitter.com/S73VIsJdR3
— Masahiro Mishima (@MMishima_3) April 19, 2023
それではまたー。
Power Apps のギャラリーに「もっと見る」ボタン追加する
Power Apps のギャラリーに「もっと見る」ボタンを追加する方法を書かせて頂きたいと思います。検索サイトの結果表示で見かける「もっと見る」ボタンですが、情報量が多い場合に使われます。最初の検索結果ではある程度の件数まで表示しておき、利用者が任意で表示件数を増やしていく仕組みです。今回のサンプルアプリでは3件ずつ表示出来るように設定してみます。
データを表示するためのテーブルを用意します。今回はDataverseで以下のテーブルを用意しました。山の情報を管理するテーブルで、No、画像（Image）、名前（Name）、高さ（Height）、地域（Location）の列を用意しています。
Power Apps でポップアップアニメーションを作成する
Power Apps で作成するポップアップアニメーションについて書かせて頂きたいと思います。ポップアップとは操作画面の上に被さるように表示するコンテンツで、操作画面で選択をした箇所の情報をより多く表示したり、新たにユーザーインターフェースを設けて何かしらの操作をしてもらうために使用されます。なので、あまりアニメーションをさせるものでもないのですが、さりげなくこうした工夫を入れることによって、ポップアップの表示に気付かせたり、ケースによって意味や印象を変えたりすることが出来るわけです。
まずは簡単なポップアップアニメーションを作成してみましょう。このポップアップは左から右へカバーをかけるようにアニメーションをします。
①タイマーを設定する
Power Apps でのアニメーションに欠かせないコントロールが「タイマー」です。タイマーを実行すると時間と共に値が増えていきますので、この動きを使って四角形の高さや幅を変えていきます。タイマーは「＋挿入」にある「入力」の中から選択します。
Power Apps でのポップアップ表示について
Power Apps の画面に表示出来るコンテンツというのは限られていて、スペースの都合上ポップアップを設けたり、情報をスクロールさせて見せたりすることがあります。表示スペースを拡張するには様々な方法がありますが、よく使用される方法を、いくつか紹介したいと思います。
オーバーレイ
言葉としては、「何かを覆う」ということを意味しますが、Power Apps ではポップアップ表示で目にすることが多いのではないかと思います。これまで見ていた画面の上に、被せるように大きなコンテンツを表示させることで、選択した箇所を、より詳細な情報で表示するために用いられたり、入力補助が出来る機能を表示する場合に使われます。
利用者から入力操作を奪う目的で使う場合もあります。例えば、アプリの利用に利用者情報の入力が必須だった場合、初回起動時にポップアップを表示して、登録が完了しないとアプリが利用出来ないようにしたり、入力の最終確認で、「はい/いいえ」を表示する場合などです。利用者からフィードバックを受ける際に表示する場合もあります。
インレイ
情報を追加表示するために使われる方法ですが、こちらはあえて全体を隠しておいて、必要に応じて表示させる方法です。Webサイトでよく見かける方法としては、検索ページにある「もっと見る」ボタンではないでしょうか。最初は少なく結果を表示し、ボタンを押すことで結果を追加表示していきます。閲覧する情報量を少なくすることで全体の概要を把握しやすくしたり、読込処理を少しづつ分けて行えるというメリットもあります。
アコーディオンという方法もあります。こちらはテキストの「見出し」だけをボタンで並べておいて、選択をすると見出しの下に情報が表示されるという仕組みです。こちらも全体の概要を「見出し」で把握することが出来ますので、詳しく知りたい情報へダイレクトにアクセスすることが出来ます。
Power Apps でラベル付きのアイコンを作成する
Power Apps でアイコンを使用するとき、編集画面のメニューにはアイコンの説明が表示されているのですが、開発者は説明通りに使用しているとは限りません。例えば、データのアイコンを使用していても、どのようなデータを指しているのかはアプリによって様々ですし、別の画面を開かせたり、何かの情報をポップアップ表示してもらう意味で使用しているかもしれません。
利用者も、Power Apps のアイコンを熟知しているとは限らないので、アイコンの説明通りにアクションを設定したとしても、説明通りに認知してもらえるとは限りません。アイコンの意味を正確に利用者に伝えるためには、ラベル等を添えて意味がわかるようにしておく必要があります。
Power Apps のアイコンにラベルを添えるには少し工夫が必要ですので、下記に作り方を紹介させて頂きます。
続きを読む
計算カードアプリ SVGで丸のアニメーションを作成する
先日Twitterに投稿をさせて頂きました Power Apps の「計算カードアプリ」ですが、今回は丸のアニメーションの作り方を紹介したいと思います。最初、gifで解決出来るのかなと思ったのですが、アニメーションの開始を Power Apps のボタンと連動させなくてはならず、少し複雑にはなりましたが、SVGを組合わせることでカタチにすることが出来ました。
さて、作り方ですが、丸はSVGを使用しますので、最初に画像を追加します。
プロパティImageは下図のように記述します。
最初の「"data:image/svg+xml ～ 」はSVGを使用するときの決まり文句です。「<circle ～ 」は丸の描画に関する設定です。丸のサイズや線の色や幅を設定しています。
丸のアニメーションに関わる設定は「stroke-dasharray ～」で設定しています。「stroke-dasharray」は破線を描くときに使われる線の間隔を指定するプロパティです。続いて「stroke-dashoffset」は線の開始位置を設定するプロパティです。これらを組合わせることでアニメーションを設定しています。
「stroke-dasharray」の設定についてですが、値には丸の円周の長さを設定しています。半径が95ですので596を設定します。「stroke-dashoffset」は線の開始位置を設定する箇所ですが、タイマーの値を組合わせることで、徐々に開始位置が移動し、最後は0になるように設定をします。
「transform」は丸の書き始め位置を設定しています。rotateとtranslateを組合わせることで自由に開始位置を変えることが出来ます。下図の設定では下から上に向かって丸を描き始めるように設定されています。
続いてタイマーを追加します。期間は丸の円周と同じ値をセットします。
最期にタイマーの開始ボタンを設定します。ボタンを追加して下図のように設定します。ボタンのプロパティOnSelectには変数StartFlgに値「true」をセットさせます。※UpdateContextでもOK
タイマーのプロパティStartには変数StartFlgをセットします。
これでボタンを押したタイミングでタイマーが作動し画像に丸が描画されるアニメーションがスタートするはずです。
計算カードアプリでは数字ボタンを押したタイミングで、入力した値が正解であれば丸の描画をスタートさせるようにしています。続いて「つぎ」ボタンを押した時に描画した丸は消去され、再び描画が出来るよう「StartFlg」の値をfalseにしています。
上記で紹介をしているSVGの設定は下記のとおりです。試される場合は、上記を参考にタイマーとボタンコントロールを追加して、ご利用ください。
"data:image/svg+xml,"&
EncodeUrl(
"<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'>
<circle cx='100' cy='100' r='95'
fill='transparent'
stroke = '#ff69b4' stroke-width ='10'
stroke-dasharray='596'
stroke-dashoffset='"& 596 - Timer1.Value &"'
transform='rotate(90) translate(0 -200)'>
</circle>
</svg>"
)
それではまたー。
