Power Apps で横方向 Gallery 内のオブジェクトを任意の間隔で並べる方法

#はじめに
以前、Power Apps で楽譜を作成しようと思った際に、ひとつ大きな壁に当たりました。
それは、音符同士の間隔を「音符の長さ」の分だけ空ける必要がある、というルール。

※このルールはあくまで基本ルールであり、実際の楽譜は様々なルールで作成されています。
参考：音符のスペーシング - Finale


つまり、音符を配置する際には、1つ前の音符の長さ分空ける必要があります。
とある音符の配置場所は、1つ前の音符の長さに依存している、ということになります。

様々な楽譜に対応するためには、音符数の増減に柔軟に対応する必要があるため、Gallery を用いて…となるかと思います。
伸縮可能 Gallery を使えば何かできそうな気もしますが、横方向の Gallery には伸縮可能コントロールがなく、各項目の幅が均一のため、単純には実装できません。

そこで今回は、先人の知恵をお借りし、横方向の Gallery を用いて音符を自由に配置する方法について紹介します。

#先人の知恵と本手法のアイデア
本記事では、Gallery のTemplate Size = 0 の手法を利用します。
Gallery は基本的に様々なオブジェクトを Template Size で設定された間隔で等間隔に表示させることができますが、この Template Size を 0 （実際には1になる）に設定し、各オブジェクトの座標を Collection や数式を用いて動的に配置することで、例えば以下のように任意の位置に任意の数だけオブジェクトを配置できる、という手法です。
（以下の例は 各アイコンの X,Y 座標を Collection で定義し配置しています）

Gallery の Template Size = 0 の手法については、@h-nagao さんの記事で分かりやすく解説されていますので、まずはこちらをご覧ください。

わかれば簡単！ #PowerApps のTemplateSize=0の手法


さて、この方法を素直に用いれば実現はできるのですが、各音符の配置場所（X 座標）を1つ1つ定義するのは正直現実的ではありません。
つまり、こういうことです。

できるなら、各音符の長さ情報のみから、配置場所（X 座標）を決めたいですよね。
それができれば、途中で音符を削除したり入れ替えたりしても、容易に配置ができるようになります。

それなら、"自分より前の全ての音符の長さの合計"を座標情報として利用できるのではないかと考えました。

#方法
上記の方法を確立するため、本記事では以下のように幅の異なる四角形を Gallery で並べる方法を紹介します。

1. App の OnStart で、5つの四角形の長さを定義する Collection を以下のように定義します。
   この方法では、IDは必須で、かつ音符の羅列順になっている必要があります。
   記述したら、OnStart を実行しておきましょう。
   

   OnStart

   ClearCollect(colSampleData, 
   {ID: 1, Length: 150},
   {ID: 2, Length: 330},
   {ID: 3, Length: 220},
   {ID: 4, Length: 150},
   {ID: 5, Length: 80}
   );
   

2. 横方向（空）の Gallery を挿入します。
   データ ソース（Items）に先ほど定義した Collection を指定します。
   厳密に座標指定するために、テンプレートのパディング（TemplatePadding）は0にしておきましょう。
   

3. Gallery 内に四角形を挿入します。
   四角形の幅（Width）は Collection で定義した Length を設定します。
   四角形の罫線や色は見やすいよう適宜設定してください。
   

4. 四角形の X に、以下の数式を記載します。
   自分よりも ID の小さいアイテムの Length の合計を算出するものです。
   

   X

   Sum(Filter(colSampleData, ID<ThisItem.ID),Length)
   

5. 最後に、Gallery のテンプレートのサイズ（TemplateSize）を 0 に設定して、完成です。
   
   できました。

#まとめ
本記事で紹介した方法と、音の高さの処理を組み合わせることで、各音符の音の長さと音の高さの情報のみから簡単に楽譜を生成できるようになります。

TimerとCollect関数を組み合わせて、ピアノに録音機能と楽譜生成機能を付けてみた。うまくいったとこをアップしたが、綺麗な楽譜になるように弾くのは結構難易度が高い。この手の専門ソフトは微妙なタッチのズレをどう補正しているのだろうか。#powerapps@KeithWhatling Thank you for your idea!! pic.twitter.com/UjOI6VRgW4

— Jun’ichi Kodama (@KodamaJn) December 10, 2018

ただ、いちいち Sum 関数で合計を計算しているため、動作はかなり重いです。 これでは長い曲が処理できない。。 もっといいアイデアをお持ちの方がいましたら、是非教えてください！！
これからは、欲しいアプリは欲しい人が作り、欲しいデータは欲しい人が集める時代です。 ハッピーになりたい人が自分の力でハッピーになれる世界へ。

何かのご参考になれば幸いです。