#PowerApps でカルーセルスライダーを作ってみよう

概要

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は以下のように書かれます。

Timer1.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プロパティには以下の数式を設定すればいいことがわかります。

Gallery.X

0-Gallery1.TemplateWidth*0.5

Gallery.Width

Screen1.Width+Gallery1.TemplateWidth*CountRows(volVideos)/2

Gallery内のVideo Control

ギャラリー内のビデオコントロールは、時間の変数Tに応じて、左に移動するように設定します。

Video1.X

20-Gallery1.TemplateWidth*T/1000

20は余白です。Tが1000ミリ秒進むと、Gallery1のTemplateWidthの大きさだけ左にスライドします。(つまり次のアイテムが真ん中に表示される)
あとはデータソースのURLをメディアに指定してください。

Gallery内のButton Control

ボタンコントロールはビデオに覆いかぶさるように設置します。また、ボタンクリックでタイマーを止め、選択したビデオを表示させたいので、各プロパティを以下のように設定します。

Button1.Properties

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