6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

PowerAppsAdvent Calendar 2019

Day 2

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

Last updated at Posted at 2019-12-01

#概要
Power Appsはビジネスアプリケーションを作成するプラットフォームですが、それだけでなく、個人利用のアプリの作成にも適しています。
今回はPower Appsの標準コントロールでは提供されていない、カルーセルスライダーを作成する方法を紹介します。
image.png

特に、題材として、Alanの作成したビデオポータルアプリを使います。

一番上のビデオが横にスクロールできるようになっていますが、これをカルーセルスライダーにします。

完成したパーツでは以下のように表示されます。

(Advent Calendarの2日目がこれでいいのか?!)

#カルーセル用データ
カルーセルスライダーはGalleryコントロールで作りますが、このアイテムのコレクションは以下のような構成にしています。※ここでは10個のビデオリストがあると仮定しています。
image.png
"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
            )
        )
    )
);

ギャラリーに表示してみると、期待通りデータが生成されているのがわかります。
image.png

#パーツ構成
画面上のパーツ構成はシンプルです。
image.png

  • 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ミリ秒だけ変化する変数とします。つまり図で表すと以下のようになります。
image.png

これだけだと、ユーザーがカルーセルの中のアイテムを選択している間もスライダーが動いてしまうので、ユーザーがアイテムを選択したときには変数の更新を止めるようにします。これを実現するために、アイテムの選択状態として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

image.png

##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

6
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?