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

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

[ 2020/02/15 ] Power Apps でローコーディングな勉強会 #13

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

54bcc1069d75636cc735e72877dd30ec?s=128

Taichi Nakamura

February 15, 2020
Tweet

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音担当して、2 班に分かれて輪唱をしてみると更に面白いかも。

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