あわてんぼうでイマドキなサンタクロースがXmas前にやってきた！

2022年12月23日 01:46

この記事は、Microsoft Power Apps Advent Calendar 2022 23日目🎄（2022/12/23 担当分）の記事です。

はじめに

アドベントカレンダー初参加のちっぴと申します🧜‍♀️

アドベントカレンダーに挑戦する日として、なんとなく23日を選択したわけですが、「クリスマスイブイブだなー」と思っていました🎅.✨+.*
ただ、Christmas Eve を直訳すると「クリスマスの夜」ということで、「クリスマスイブイブ」は、クリスマスイブの前日ではなかったのです！

Eveは夕方や晩を意味する『evening』の古語『even』が語形変化したものです。
「クリスマスイブイブ」は、「イブ＝前日」という勘違いから生まれた和製英語と言えるでしょう。

https://kizamu.com/archives/christmas-eve/

イベントとして楽しみたいなと『しかけ絵本📚』をイメージしたものを作ってみることにしました。触りながら物語が進んでいくと面白いかなとワクワクしていました。
しかし！実際はやりたいことがなかなか再現できず、当初の構想から大幅にズレていきました・・・🤥
本内容は、先駆者がブログや動画で公開されている内容を参考にさせていただき、都合の良い設定で進んでいく架空のストーリーでお届けすることになりますので、優しい心で受け止めていただけると幸いです。
こんな風に進めたよという内容です。

仕様素材は、お馴染みいらすとやさん、以前から使ってみたいなと思っていたDOTOWNさん、こちらからふんだんに使用させていただくと共に、自分で描いたものや自宅の飾りの一部もコッソリ紛れています⛄❄

#adventcalendar2022 #PowerApps
23日目🎄
あわてんぼうでイマドキのサンタクロースがクリスマス前にやってきた！ pic.twitter.com/EZ7rIMBBCR
— ちっぴ (@c________k) December 22, 2022

早めにプレゼントを届けに来たサンタクロース

サンタクロース登場

まずは、ソリに乗ったサンタクロース＆トナカイがスーッと移動するにはどうしたら良いか。
Screen外（右側）から現れて通り過ぎて見えなくなる（左側へ）・・・
Kilroy 365さん（@KilroyWaaasHere）のブログを参考にさせていただきました😊

ソリに乗ったサンタクロースとトナカイの imgSleigh（Image）の幅は
Self.Width なんですよね。パッと思いつけない😓

imgSleigh（Image）

X=Parent.Width-(Parent.Width+Self.Width)*timMove.Value/timMove.Duration
//timerの開始、終了と移動の開始･終了を合わせるには経過時間の割合を移動距離にかける

Y=Parent.Height/3
//画面の真ん中を通過してほしい

timer で Repeat（繰り返し）はしないようにし、１度通りすぎたら次のScreen となる ConfirmationScreen へ移動します。

なんだか静かだけど今日は何日？

ConfirmationScreen では、あわてんぼうのサンタクロースが、念のために日にちを確認します。ちなみにトナカイもあわてんぼうということでww
解答の選択肢は「22日」「23日」「24日」の３つです。
「23日」を正解にします。設定上、何日にやっても23日です😓
Akiraさん（@akira_365）、ようさん（@Yo_8One）、kuro.さん（@eigogakuto）主催の Power Platform学習アプリ作成会 で学んだ変数やポップアップの作成を参考にさせていただきました。

ConfirmationScreen

OnVisible=UpdateContext({Popup:false})

「仲間たちをみかけないなぁ」Buttonコントロール

OnSelect=UpdateContext({Popup:true})
HoverFill=ColorFade(RGBA(49,222,87,0.8), -50%)

『今日は何日？』たちはGroup化

Visible=Popup

日にちが間違っているときと合っているとき

今日が「23日」と気づかせたいだけなので、別の日をクリックすると間違いだと知らせる表示、「23日」をクリックすると次の展開へ続きます。

「22日」と「24日」のボタンがクリックされたら、間違いメッセージとなる文字が跳ねます。確認後は前画面へ戻ってもらいます。
コルネさん（@koruneko32767）のブログを参考にさせていただきました🤗
参考というかそのまま使わせてもらってます😓

文字を順番にジャンプさせるための仕組みの式を理解できていません🤯
ようさんが開催された年忘れPower Platformアプリ発表会で、直接教えていただきましたー！！
「22日」をクリックした際の ”昨日だし～” の ”昨” Label

Y=ConfirmationScreen_1.Height - Label23.Height - If(Mod(RoundDown(_count / 180, 0), 5) = 0, Abs(60 * Sin(_count * Pi() / 180)), 0)

”日” 以降の Label の "Mod() = X" の X には「1」,「2」,「3」,「4」です。
”違うんだよな～” の ”違” Label の X は「0」それ以降「1」,「2」,「3」,「4」,「5」,「6」です。
上手く説明できないので、コルネさんのブログを是非ご覧ください😳
魅力的な内容が盛りだくさんです！

「23日」がクリックされたら、次の Screen となる missionScreen へ移動し、煙突から家の中へ入ります。

「22日」と「24日」どちらのボタンをクリックしても、別のひとつの Screen 内で Set関数を使用し、跳ねる Label の表示を切り替えを行いたかったのですが、思うようにいかずそれぞれ Navigate関数で画面遷移させました。

クリスマスツリー

クリスマスツリーを完成させたい

missionScreen となる家の中に入ると、飾り付けが終わっていないツリーを発見。

ここでミッションが与えられるので、やるしかない😳
🔶 オーナメントが3つ、ツリーから外れているので良い感じに配置する
🔶『Power Platform塾☆』プレートを頂上に掲げる

またまたポップアップ仕様にしてみました。

iconGo（Goボタン）をクリックでツリーが登場🌟

大したことはしていないのですが、この次の隠れていた部分がごちゃごちゃしてしまい、時間がかかりました😗

ツリーから外れているオーナメントは、Akiraさんの講習で Gallery を使用してカレンダーを簡略化して作成する方法を教えていただいたのですが、『選択した日付に〇がつくようにする』ということも工夫ポイントとして取り入れていただきましたので、こんなことに使ってしまいました。

IsSelected を使って、それ自身が選択されているなら表示(true) 、そうでないならば非表示(false) というすごく便利なメソッドを、
３つの Image（外れている飾り）に設定しました。

Onselect = Select(Parent)
Visible = ThisItem.IsSelected

『Power Platform塾☆』プレートについてですが、ツリーのシンボルとなるプレートはドラッグ＆ドロップで動かして頂上へもっていきたい！！
ただ、コントロールは（プレビュー後）ドラッグ＆ドロップできるのか？
パパセンセイ（@10mikiya）さんのブログを参考させていただきます🤩

あちこち（Gallery の配列の中限定💦）クリックしてオーナメントを移動！『Start』（timer）をクリックしてプレートを動かします！

完成したら『Finish』をクリック🌟

電飾でゴージャスに

ピカピカする Screen へ移動するので、しばらく見ていただくことにしましょうか・・・チカチカして苦手な方もいるかもしれないですね💦

先ほど飾り付けしたときよりも明らかにバージョンアップしていますが、せっかくなのでライトアップした雰囲気も表現してみたかった！
こうゆうのが好きなだけです。キラキラしたものが大好きなんです。

おうじゃさん（@bothernpa）のブログを参考にさせていただきました😍

『Instagramppy』というボタンが下の方にあります。
なんでしょうか～クリックしてみます。

イマドキなサンタクロース

ＳＮＳへ投稿してみよう

instaScreen というなんだか見たことがあるような Screen へ移動します。
『Instagramppy』という、写真や動画を共有できるサービスですw
完成したゴージャスなツリーを撮影し、投稿していきます🥳

SharePoint リストに「ID」と「 Image」列を作成し、いくつか画像を追加しておきます。リスト名も Image です。

投稿されている画像の部分が Gallery です。

galInsta（Gallery）

Items = Image

galInsta（Gallery）のコントロール

Image　= ThisItem.Image

投稿する方法は、ギークフジワラさん（@geekfujiwara）の動画を参考にさせていいただきました😉

同じ Screen 内で完結させたかったのですが、見た目を重視することを優先したので、投稿されている Screen と撮影する Screen は分けました。

『撮影モード』ボタンをクリックし、次の Screen となる CameraScreen へ移動します。

CameraScreen

icnCamera

OnSelect =　NewForm(frmCamera)

btnUp

OnSelect =　SubmitForm(frmCamera);Navigate(instaScreen)

frmCamera

DataSource　= Image

『Instagramppy へ投稿』ボタンをクリックすると、再度ひとつ前のinstaScreen へ移動するので、追加されているか確認してみます！

アップされています！人の家の中の写真です📷

ちなみに・・・Instagramppy のデザインをなんとなく作成しているときに、気分転換に見ていた YouTube で、こちらがオススメに出てきて驚きました！
ビックリしましたが、参考にさせていただきました😚

大満足のサンタクロースとトナカイ

1日勘違いしたため、奇麗なツリーをゆっくり見ることができてとっても Happy なサンタクロースとトナカイは、プレゼントを置いて帰ります🎵
※上司には許可をもらったようです

ここはもうオマケのようなもので timer コントロールが活躍しています。
「歯、磨けよ！いい夢見ろよ！」って英語だとオシャレになった🤭

楽しんでいただけたでしょうか。私は楽しかったです💃

さいごに

今さらですが、他のアドベントカレンダー参加者様の内容がとても素晴らしいので、このような内容で良いのかドキドキしています🙄
たくさんの方のブログや動画を拝見させていただき、いずれ自分も理解した上でワクワクするアプリを作ってみたいなという思いと、やりたいことを実現するにはまだまだ苦手な関数や変数の勉強をしていかないとなと、気合が入りました🙌

話は半年前に遡りますが、私は大変失礼なことをやらかしていました💦

Akiraさんが Power Apps の講習を行うということで、参加希望者を Twitter 上で募っておられたのですが、私はフォローさせていただいていると思い込んで応募用のフォームを送信しました。
そもそもが SNS 自体は利用しているのですが、Twitter は長い間使っておらず、勉強したいなということで再開したのでよくわかってない部分が多く、どなたかフォローさせていただいている方がリツイートされたものに乗っかったんだと思います・・・
さらに・・・ユーザー名の入力欄に「ちっぴ」とアカウント名を入力していたため、誰だかわからない状態だったのです。
自分のユーザー名すら確認せず、イタズラでも悪意もないのですが、迷惑なことをしてしまい申し訳なかったです🙇

なのにも関わらず、少し期間は空いたと思うのですが、
『突然すみません！もしかして、以前フォームから応募してくださったちっぴさまでしょうか？探したのですが、Twitterのユーザー名記載なかったため連絡できませんでした。』
と、わざわざＤＭを送ってくださいました😭

このような出来事を経て、生徒として全14回（約3ヶ月）土曜日の部で学ぶことができました！

本当に本当に出来の悪い生徒だったのですが、毎回きちんと間違えているところを確認していただき、スペシャルな作成方法も教わり、とても有意義な時間を過ごさせてもらいました✨

Akira先生ありがとうございました！
これからもイベントに参加させていただきますのでよろしくお願いします。Power Appsの勉強はもちろん継続していきます😊

ここまで読んでくださった方へ
ありがとうございました(人''▽｀).*。::☆

この記事が気に入ったらサポートをしてみませんか？