ルービックキューブをPower Appsで作ってみた

ウィーウィッシュアメリクリスマス！ウィーウィッシュアメリクリスマス！！ウィーーーーーー！！！！
聖なるあきらです。

こんな巫山戯るオープニングも珍しいくらい、普段真面目な記事を書いていますあきらです（大嘘
はい、というわけでね。
クリスマスだからルービックキューブ作ろうってわけです。
ほらカタカナで表記するとかで相関がありますからね。

絶対に解けないルービックキューブ

わたしがまだPower Platformの「ぽ」の字も知らなかったころに作った妙作です。
絶対に解けないルービックキューブ作ったぜ！ｷﾘｯ　て言ってるんですけどね
これ実際は「作ってみたらゲームとして成立してなかった」ｷｬﾊ！なんです。

というわけで。
約4年の時を越えて、ルービックキューブを作ってみようと思います。
（4年前の俺すげぇな、いまサラで作れる気がしれん）

そもそもCollection勉強する！ってなんだよ…ボケろよ4年前の俺…

完成図

こんなものを作ってみます。
ちゃんとできてるよ！
横移動作るの忘れてたけどね！

#PowerApps
やっとルービックキューブ作れた・・・
今から記事にするぜ！
アドベントカレンダーアンカーや！！！（きっつい） pic.twitter.com/WfkwWClsRC

— あきら (@akira_365) December 24, 2024

配列を作る

昔はなかったんだよSequence・・・
哀愁が漂うね、ノスタルジックっていうかさ。
よくもまぁ手作業で配列作ったもんだよ。

ルービックキューブは正直展開図がないと、どう回したらどの色取ってくるのかを把握しずらいので、
まずはMapを作りました。ボタンのOnSelectに仕込みましょう。
これがリセットボタンになります。
んで結局これを最後まで使うという…
もう苦労して作ったので、このマップが愛おしくもあります。
嫁が出張で北海道行ってるんでね。
このマップが私の聖夜のお供です。
愛してるぜマップ。

OnSelect=
ClearCollect(
    colNum,
    Sequence(
        54,
        1,
        1
    )
);
//Sequenceで54個（9×6面）を作る
ClearCollect(
    colRubic,
    AddColumns(
        colNum,
        clr,
        If(
            Value <= 9,
            Color.Red,
            Value <= 18,
            Color.Blue,
            Value <= 27,
            Color.Green,
            Value <= 36,
            Color.Yellow,
            Value <= 45,
            Color.Orange,
            Value <= 54,
            Color.White
        )
    )
)
//上で作った配列にカラーを仕込む

これでマップの素材ができました。
Sequenceちゃん様様ですよ。
聖夜のお供ですよ。

ギャラリーコントロールに落とし込む

ぶっちゃけ要らんっちゃいらんけど、把握しやすくなるよね。

これを作ってからじゃないと、何番の色をとってこればいいかわからんちん。

画面の緑の部分をきちんと理解しておかないと、回転するときに頭がついてこなくなります。
深夜だしね。
ただでさえ真面目にアプリ作るの久しぶりなんだから、ちゃんと作れって話ですよ。
マジで永遠の愛誓う。

1：折り返しを3にして、36まででFilterしたギャラリー
2：37‐39だけ表示したギャラリ
3：19-27をソート逆順で表示したギャラリー
4：46-54を表示したギャラリー

をそれぞれ置いてるだけです。

この図だとわかる通り
緑色の19-27は展開図の方向など考えておかないと、トびます。

回転する、という事象を数値で考える

ここで考えておきましょう。
回転する、ってどういうことなんでしょうか

たとえば一番上の行を右に回転させたときにどういう状態になればいいか考えると
「Value=1のところの色を回転前にValue=46だったところの色と同一にする」
という動作をすれば、idは変わらず色だけ変えることが出来ます。
同じように
Value=1の場合は46の色
Value=5の場合は50の色
Value＝41の場合は5の色
としておく必要があります。

※ここめっちゃ考えたけど、一般化できなかった、くやしい！数学は万能じゃないのか・・・・誰か一般化してみてくれ！！！

というわけでひとつずつ定義して、変更できるボタン＝回転ボタン　を作成します。
ボタンコントロールを用意します。

OnSelectに次のような関数を突っ込みます。
もう盛大に勢いよくぶち込みますYeah

ClearCollect(
    colRubicColorSampling,
    colRubic
);
//現状の色情報などを保存しておかないと、上から順番に処理する関係で、1が変わった後の色を取得してしまう
UpdateIf(
    colRubic,
    Value = 1,{clr: LookUp(colRubicColorSampling,Value = 46).clr},
    Value = 2,{clr: LookUp(colRubicColorSampling,Value = 47).clr},
    Value = 3,{clr: LookUp(colRubicColorSampling,Value = 48).clr},
    Value = 37,{clr: LookUp(colRubicColorSampling,Value = 1).clr},
    Value = 38,{clr: LookUp(colRubicColorSampling,Value = 2).clr},
    Value = 39,{clr: LookUp(colRubicColorSampling,Value = 3).clr},
    Value = 25,{clr: LookUp(colRubicColorSampling,Value = 37).clr},
    Value = 26,{clr: LookUp(colRubicColorSampling,Value = 38).clr},
    Value = 27,{clr: LookUp(colRubicColorSampling,Value = 39).clr},
    Value = 46,{clr: LookUp(colRubicColorSampling,Value = 25).clr},
    Value = 47,{clr: LookUp(colRubicColorSampling,Value = 26).clr},
    Value = 48,{clr: LookUp(colRubicColorSampling,Value = 27).clr})
    //それぞれのValueを回転方向に合わせて、その場所の色を持ってくる

いや、これもっとどうにか関数の組み合わせでキレイにならなかったかなぁと思うんですよね。
聖夜に眠れない原因を作られました。
マジでメリークリスマス。
今夜は寝かせないよ？って関数が言ってくれてます。モテモテ。

はい、というわけでこれを
横回転×往復×3列
縦回転×往復×3列
奥回転×往復×3列
計：18セット　作りましょ♪

地 獄 か よ

マジ超メリクリ

マップ通りの色の画像をはめる

あとはルービックキューブの枠を作って

こんな感じの色を

全色作って

あとは↓のような簡単な関数ではめていきます。

Switch(
    LookUp(
        colRubic,
        Value = 1
    ).clr,
    Color.Red,
    Red_top,
    Color.Blue,
    Blue_top,
    Color.Green,
    Green_top,
    Color.Orange,
    Orenge_top,
    Color.Yellow,
    Yellow_top,
    white_top
)

綴りミスってるのは笑ってあげてください。
もう直すの面倒くさかった。
大雑把な男のほうがモテるんだぜ？
え？俺？クリスマスイブの夜に一人でルービックキューブ作ってたよ？

混ぜるやつ

この時点で、深夜3時です。
あのね、日本で一番カップルがいちゃついてる夜にやることじゃないわけよ。
俺忙しいのよ、会社ではシニアマネージャーなのよ。
＿＿＿＿＿ここまで言い訳

というわけで、タイマーコントロール使って、さっき作ったボタンをRandomに押しまくる！作戦にします。
なんて可読性の高いコードなんでしょう。

UpdateContext({x:RandBetween(0,12)});
Switch(x,
1,Select(Button1),
2,Select(Button2),
3,Select(Button3),
4,Select(Button4),
5,Select(Button5),
6,Select(Button6),
7,Select(Button7),
8,Select(Button8),
9,Select(Button9),
10,Select(Button1_2),
11,Select(Button2_1),
12,Select(Button3_1))

これをタイマーコントロールのTimerEndに仕込むとあら不思議
タイマーがリセットするたびボタン押しまくって、並べ替えてくれます。
ちなみにタイマーの数値を300とかにすると、おもしろいくらいShuffleしてくれます。
深夜3時に興奮してました。
1人で。

課題

まずは一般化ですね。
どう考えても考えつかなかったけど、
回転するボタンの関数はもうちょいなんとかなる気がする。
あと、最後の色割り当ても、LookUpで強引にやっちまったけど、どうなんだろ。
バカ重くなるから何とかなる気がするんだけどなぁ。

誰かなんかアイデアあればXとかで教えてくださいませ。

おわりに

リベンジをしました！（異論は認めます
こう見ると、4年前の自分って、すんごい技術力低かったなぁと実感しました。
みなさんも過去を見て、あらためて同じ課題に挑戦してみると、
色々な発見があったり、過去の自分に恥ずかしく思ったりするかもしれません。
自分が歩いてきた道だから、そういう失態や栄光もすべて大事に未来に繋げていきたいですね。

もしも昔を語るなら
ああ、あの頃もよかったと
「今」も含めて誇れるような
自分でいたいと思います

年忘れもほどほどに
過去も含めて今の自分を楽しんでいきましょう。

来年もこの時期にお会いしましょう。

業務に応用？できるわけないじゃんｗ何言ってんのｗｗｗｗｗｗ