ホテルのベル アプリ を作って演奏しよう！（もしもホテルのフロントのベルに音階があったら…）

Transcript

1. ホテルのベル アプリ を作って演奏しよう！ [ 2020/02/15 ] Power Apps でローコーディングな勉強会 #13

   楽器アプリ担当 中村 太一 @artbreak_taichi taichi.nakamura もしもホテルのフロントのベルに音階があったら…

2. 担当者 ： 中村 太一 「 太一 」と呼んでやってください。 よろしく お願いします！ マスコット

   キャラクター：熊五郎（仮）

3. ➢ 元 居酒屋社員 ➢ 元 ミュージシャン（ギタリスト／アレンジャー） ➢ 元 Webデザイナー ➢

   SharePoint 2007 / 2010 / 2013 を約7年（運営／構築） ➢ Office 365 全般を2年半弱 ➢ AvePoint Japan 株式会社 プロダクト マーケティング マネージャー 好き 家族 ／ ギター ／ ヘヴィーメタル ／ クルマ ／ DIY ／ 写真 ／ ガンプラ ／ ラジコン ／ ミニ四駆 ／ Office 365 ／ などなど… 自己紹介 Microsoft MVP Office Apps & Services

4. 自己紹介 ブログ「 Art-Break : Tech ; 」 https://art-break.net/tech Twitter https://twitter.com/artbreak_taichi

   Facebook https://www.facebook.com/taichi.nakamura YouTube（音楽系） https://www.youtube.com/user/artbreaktaichi YouTube（ Office 365 系） https://www.youtube.com/channel/UC68c3l10PR2ZBEXuaNaFrrw 巷では 「黒いブログ」 と呼ばれている… とか！？

5. Home 365 User Group 主催 https://h365ug.connpass.com/ SNSのハッシュタグ：#h365ug

6. Japan Power Apps Orchestra 主宰 https://art-break.net/tech/?p=4904 SNSのハッシュタグ：#JPAO

7. 楽器アプリ作成に必要なオーディオファイルや 画像ファイルはイベント限定で公開しています が一般公開はしておりません。 イベント参加者以外の方は、ご自分でオーディ オファイルと画像ファイルを準備してください。 注意事項

8. 今回学べる事 ①キャンバスアプリの作成の一連の流れ ②アプリアイコンの変更 ③オーディオコントロールの使い方 ④ボタンコントロールでオーディオコントロールの操作 ⑤If文の使い方 ⑥画像コントロールの使い方 ⑦ボタンコントロールで画像コントロールの操作 ⑧コレクションの使い方 ⑨コレクションのレコードをドロップダウンコントロールの値にする方法

   ⑩隠しボタンの技

9. 【1】アプリの作成 ① make.powerapps.com を開く ② 「+作成」をクリック ③ 「キャンバス アプリを一から作成」をクリック ④

   アプリ名を好きな名前で入力し、形式は「タブレッ ト」のままで「作成」をクリック

10. 【2】保存する ※作成作業に入る前に、保存しましょう！ ① 「ファイル」タブをクリック ② 左メニュー「名前を付けて保存」をクリック ③ 右下の「保存」をクリック

11. 【3】アイコンを設定 ① 左メニュー「設定」をクリック ② アイコンの「参照」をクリック ③ 「HotelBellIcon.png」を選択 ④ 背景色はお好みで選択

12. 【4】メディアのアップロード 「画像」「オーディオ」ファイルをアップロード ① 左メニュー「メディア」をクリック ② 「画像」の「参照」をクリックし、 HotelBell.png と HotelBellPush.png を選択してアップロード

    ③ 「オーディオ」の「参照」をクリックし、拡張子 が.mp3のファイル（13ファイル）を選択してアッ プロード

13. 【5】音を鳴らしてみよう！ ① 「挿入」タブの「メディア」→「オーディオ」をク リック ② オーディオコントロール「Audio1」を選択した状 態で右パネル「プロパティ」の「メディア」のド ロップダウンから「hb_C3」を選択 ③ Alt

    を押しながらオーディオコントロールの再生ボ タンをクリックすると「チーン」と音が鳴る

14. 【6】ボタンで音を鳴らしたい ① 「挿入」タブの「ボタン」をクリック ② ボタンを（今のところは）適当な位置に置いて大き くしておく。 ③ ボタンとオーディオを連動させるにはボタンの方に 処理を書くと思いきや…オーディオの方に書く。 オーディオコントロールを選択し、右パネルの「詳

    細設定をクリック」

15. 【6】ボタンで音を鳴らしたい ④ 右パネル「データ」の「その他のオプション」をク リックし、展開させる。 ⑤ AutoStart の下に以下を入力する。 If(Button1.Pressed,true,false) ⑥ Alt

    を押しながらボタンコントロールの再生ボタン をクリックすると「チーン」と音が鳴る ※でもボタンを連打しても音は連続再生されない。

16. 【7】ボタンを連打に対応させたい ① オーディオコントロールを選択する ② 右パネルの「詳細設定」タブで、以下の値を変更す る。 「AutoStart」に入力した関数を「Reset」にコ ピー。 「AutoStart」には「true」と入力。 ③

    Alt を押しながらボタンコントロールの再生ボタン を連打すると「チンチンチン…」と音が連続で鳴る ▼変更前 ▼変更後

17. 【8】ベルの画像を表示 ① 「挿入」タブの「メディア」→「画像」をクリック ② 右パネルの「プロパティ」タブの「画像」右のド ロップダウンから「 HotelBell 」をクリック ③ （今のところは）適当な大きさにリサイズ

18. 【9】ボタンを押すと画像が変わる ① 画像コントロール「Image1」を選択し、右パネル の「詳細設定」タブの Image を見ると 「 HotelBell 」と入力されている事を確認 ②

    以下に変更する If(Button1.Pressed,HotelBellPush,HotelBell) ③ Alt を押しながらボタンコントロールの再生ボタン をクリックすると画像が変わり、クリックを離すと 元に戻る事を確認する

19. 【10】音を変える設定を入れたい アプリ起動時にコレクションにレコードを追加するようにします。 ① 画面左のツリービューから「App」をクリック ② 関数の左辺が「 OnStart 」になっている事を確認（なってい なかったら選択） ③

    OnStart の右辺に以下を入力 ClearCollect(Tone,{Name:"ド",Sound:hb_C3},{Name:"レ ",Sound:hb_D3},{Name:"ミ",Sound:hb_E3},{Name:"ファ ",Sound:hb_F3},{Name:"ソ",Sound:hb_G3},{Name:"ラ ",Sound:hb_A3},{Name:"シ",Sound:hb_B3},{Name:"ド （上）",Sound:hb_C4})

20. 【10】音を変える設定を入れたい 起動時にコレクションにレコードが追加された確認 ④ ツリービューの「App」の右の「…」→「 OnStart を実行し ます」をクリック（これでアプリ起動時と同じ状態になる） ⑤ 画面左上の「ファイル」タブをクリック ⑥

    左メニューから「コレクション」をクリック ⑦ 「Tone」というコレクションにレコードが追加されている事 を確認

21. 【10】音を変える設定を入れたい ⑧ 「挿入」タブの「入力」→「ドロップダウン」をク リック ⑨ 右パネル「プロパティ」の項目で「Tone」を選択 ⑩ 「Value」は「Name」が選択されている事を確認 ⑪ Altを押しながらドロップダウンをクリックしたら、

    ドレミファソラシド（上）の選択肢がある事を確認

22. 【10】音を変える設定を入れたい ⑫ オーディオコントロール（ Audio1）を選択し、右 パネルの「詳細設定」タブから Media を確認 ⑬ Media の値を以下に変更

    Dropdown1.SelectedText.Sound ⑭ 画面右上のプレビューボタンをクリック ⑮ ドロップダウンから適当に音を選ぶと選択したらま ず音が鳴り、その後、ボタンをクリックすると選択 した音が鳴る事を確認

23. 【11】見た目を整える ① オーディオコントロールを選択し、右パネルの「プ ロパティ」タブの「表示」をオンからオフへ ② ドロップダウンコントロール（ Dropdown1 ）は画 面の隅に置きます ③

    画像コントロール（ Image1 ）をドーンと大きく 置きます ※この時点でボタンコントロールはクリックできなく なる。

24. 【11】見た目を整える ④ ボタンコントロール（ Button1 ）の「…」→「再 配列」→「前面へ移動」をクリック ⑤ Image1 の上に Button1

    が来た事を確認 ⑥ ボタンをベルの画像の上にドーンと広げる おいおい…せっかくの画像が…（続く）

25. 【11】見た目を整える ボタンを非表示にすると機能しなくなるので、 非表示にせずに透明にします。 ⑦ ボタンコントロールを選択し、右パネル の「プロパティ」から以下の項目を変更 する テキスト：「 」（空白） 色：どちらも透明に

    罫線：透明に ※この時点ではマウスホバーするとボタンが 出てきちゃう。

26. 【11】見た目を整える ⑧ 「ポイント時の色」の色を変更したくて も、「fx」って出てきてクリックしても 変更できない。（この場合は、関数バー からじゃないと変更できない。） ⑨ 関数バーの左辺が「 HoverFill 」になっ

    ている事を確認し、右辺をゴソっと削除

27. 【12】アプリの発行 ① 画面左上の「ファイル」タブをクリック ② 「保存」をクリック ③ 「発行」をクリック ④ 「このバージョンの発行」をクリック

28. 完成！（時間が余ったら…） お疲れさまでした。時間が余ったら自分の好 きなように改造してみましょう。 【改造例】 • デザインを自分好みに変えてみる。 • アプリを開くとこのスクリーンではなく、 別でホームスクリーンを用意して画面遷移 させてみる。

    • ドロップダウンを非表示にして歯車アイコ ンを配置して、歯車をクリックすると設定 メニューがダイアログボックスのように表 示させる仕組みを作ってみる。 • 実はこの仕様ではオーディオデータの13 ファイルのうち8ファイルしか使っていま せん。ピアノで言う所の黒鍵の部分がない ので、13個の音全て選択できるようにして みる。 • ベルを13個にして、1人で演奏できるよう にしてみる。

29. 演奏会をします！ 最後に全員で演奏会をします！ 曲はカンタンに「カエルの歌」 楽器全般未経験の方もいると思うので、1人で1 曲ではなく、全員で1曲を演奏します。 本日の楽器アプリ挑戦者はMAX8名+ボクで9名 ですが、当日欠員などもあって人数が流動的で す。当日臨機応変に役割分担します。 場合によっては余裕のある方が２音担当して、2 班に分かれて輪唱をしてみると更に面白いかも。

    改造に成功して1人で全部演奏できるアプリを仕 上げていたら、1人で演奏してもOKです。 利用デバイスは以下の順が好ましいです。 1. Surface などタッチパネルPC 2. タッチパネル非対応PC（クリックで演奏） 3. モバイルデバイス（場合によってはタップし てから反応が悪い） 「ド」担当 「レ」担当 「ミ」担当 「ファ」担当 「ソ」担当 「ラ」担当

30. おしまい