#概要
Power Appsはビジネスアプリケーションを作成するプラットフォームですが、それだけでなく、個人利用のアプリの作成にも適しています。
今回はPower Appsの標準コントロールでは提供されていない、カルーセルスライダーを作成する方法を紹介します。
特に、題材として、Alanの作成したビデオポータルアプリを使います。
I thought I had post this before, but apparently not. An "old" app from Feb 19, persona based video on-demand portal. Change in app making approach - Put UX first, not functionality and you can stretch Power Apps to beyond normality. Enjoy!😉#PowerApps#PowerAddicts@MSPowerApps pic.twitter.com/keoBFdpUvU
— Alan Chai @Houston #PowerApps #PowerAddict (@alanchai) November 29, 2019
一番上のビデオが横にスクロールできるようになっていますが、これをカルーセルスライダーにします。
完成したパーツでは以下のように表示されます。
Power Appsでカルーセルスライダーを作ってみました。 pic.twitter.com/XQfRz0bCL2
— Hiro (@mofumofu_dance) December 1, 2019
(Advent Calendarの2日目がこれでいいのか?!)
#カルーセル用データ
カルーセルスライダーはGalleryコントロールで作りますが、このアイテムのコレクションは以下のような構成にしています。※ここでは10個のビデオリストがあると仮定しています。
"Order:1"には、ソースデータの最終行を追加します。また、最後の2つのデータは、ソースデータの1,2行目を追加します。
元のデータソース名をVideoListと仮定すると、データ作成用の数式は以下のように書けます(App.OnStartなどに設定)
Clear(colVideos);
/*Add data from last row with order=1*/
Collect(
colVideos,
Last(
AddColumns(
VideoList,
"Order",
1
)
)
);
/*Copy data from source list*/
ForAll(
VideoList,
Collect(
colVideos,
Last(
FirstN(
AddColumns(
VideoList,
"Order",
id+1
),
CountRows(colVideos)
)
)
)
);
/*Add First 2 data of source list to Collection*/
ForAll(
[1,2],
Collect(
colVideos,
Last(
FirstN(
AddColumns(
VideoList,
"Order",
CountRows(colVideos)+1
),
Value
)
)
)
);
ギャラリーに表示してみると、期待通りデータが生成されているのがわかります。
- Gallery : カルーセルの本体。レイアウトはHorizontalにする。Xを画面外に設定し、Widthは画面の幅+Videoコントロールの幅x2
- Button : ギャラリー内のビデオコントロールを触れないようにするためのマスク。OnSelectでスライダーを止める効果もある
- Video : CollectionのVideoURLを指定する
- Timer : カルーセルスライダーを動かすためのタイマー。AutoStart:true, Repeat:true
- Video2 : スライダー内で選択されたビデオを表示するために配置する。
- Icon : Video2を非表示にして、スライダーの動きを再開するために配置。
以降では各コントロールに設定するプロパティを解説します。
##Timer control
タイマーはカルーセルスライダーの重要な要素です。
よくWebサイトで見かけるような、[移動]-->[静止]-->[移動]-->[静止]-->の動きを再現するために、ここでは2つの時間に関する変数(T , Ttot)を定義します。それぞれの変数は関連づいていて、Ttotは画面を表示している間、ビデオを選択していない時間を記録する変数です。一方のTは、Ttotが2000ミリ秒経過するうちの1000ミリ秒だけ変化する変数とします。つまり図で表すと以下のようになります。
これだけだと、ユーザーがカルーセルの中のアイテムを選択している間もスライダーが動いてしまうので、ユーザーがアイテムを選択したときには変数の更新を止めるようにします。これを実現するために、アイテムの選択状態としてshowVideo
というTrue/Falseの変数を用意します。
最終的に、タイマーのOnTimerEndは以下のように書かれます。
If(
/*Condition1: Video is not selected AND Ttot is (even number)*1000 */
And(
!showVideo,
Mod(
RoundDown(
Ttot / 1000,
0
),
2
) = 0
),
UpdateContext({T: T + Timer1.Duration});
UpdateContext({Ttot: Ttot + Timer1.Duration}),
/*Condition2: Video is not selected AND Ttot is not (even number)*1000 */
!showVideo,
UpdateContext({Ttot: Ttot + Timer1.Duration})//T is not updated
);
/*Cyclic: When video moves XX times, then Reset T*/
If(
T = 1000*(CountRows(colVideos)-3),
UpdateContext({T: 0})
)
以上でほとんど完了です。あとはGalleryコントロールを見ていきます。
##Gallery Control
今回はメインのアイテムの左右に、隣接する順番のビデオを半分だけ表示したいので、コントロールの一部を画面外に表示させる必要があります。
また、右から左にアイテムが流れていきますが、最後のビデオを表示させるために、画面の右方向にもコントロールをはみ出させる必要があります。
※スクリーンの外側にコントロールを配置する場合のTIPSはこちらをご覧ください。
これらを踏まえると、GalleryのX,Widthプロパティには以下の数式を設定すればいいことがわかります。
0-Gallery1.TemplateWidth*0.5
Screen1.Width+Gallery1.TemplateWidth*CountRows(volVideos)/2
##Gallery内のVideo Control
ギャラリー内のビデオコントロールは、時間の変数Tに応じて、左に移動するように設定します。
20-Gallery1.TemplateWidth*T/1000
20は余白です。Tが1000ミリ秒進むと、Gallery1のTemplateWidthの大きさだけ左にスライドします。(つまり次のアイテムが真ん中に表示される)
あとはデータソースのURLをメディアに指定してください。
##Gallery内のButton Control
ボタンコントロールはビデオに覆いかぶさるように設置します。また、ボタンクリックでタイマーを止め、選択したビデオを表示させたいので、各プロパティを以下のように設定します。
Button1.X : Video1.X
Button1.Y : Video1.Y
Button1.Height : Video1.Height
Button1.Width : Video1.Width
Button1.OnTimerEnd :
Select(Parent);
UpdateContext({showVideo:true});
以上でGallery内の設定は完了です。
#最後に
選択したビデオを表示する追加のVideoコントロールですが、これにはGallery1.Selected.VideoURL
を指定し、Visibleに、showVideoを設定すればよいので、説明は省略します。
このようにして、標準で提供されていない、ちょっと使えるコントロールが作れました。
Power Appsでは少しの数式(ここでの数式もデータ生成部分以外はそれほど難しくはないはず)で多彩なカスタムコントロールを作成できます。
皆さんもぜひ自分のアプリに、「よく見るコントロール」を作成してみてください!
サンプルは以下から入手してください。
https://pamofumofu.blob.core.windows.net/files/CarouselSlider.msapp