Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ホテルのベル アプリ を作って演奏しよう!(もしもホテルのフロントのベルに音階があったら…)
Search
Taichi Nakamura
February 15, 2020
Technology
0
540
ホテルのベル アプリ を作って演奏しよう!(もしもホテルのフロントのベルに音階があったら…)
[ 2020/02/15 ] Power Apps でローコーディングな勉強会 #13
ホテルのベル アプリ を作って演奏しよう!
もしもホテルのフロントのベルに音階があったら…
Taichi Nakamura
February 15, 2020
Tweet
Share
More Decks by Taichi Nakamura
See All by Taichi Nakamura
小学3年生夏休みの自由研究「夏休みに Copilot で遊んでみた」
taichinakamura
0
260
「 SharePoint 難しい」ってよく聞くけど、そんなに言うなら8歳の息子に試してもらった
taichinakamura
2
950
アナタも作れる!? 懐かしの「脱出ゲーム」 ( Power Apps , Power Platform )
taichinakamura
0
240
トヨタの社内コミュニティについて色々聞いちゃおう ~たった4年の奇跡の軌跡~
taichinakamura
0
6.1k
失敗ばかりの社内勉強会から学ぶこと
taichinakamura
0
770
iPhone の写真・動画と OneDrive for Business
taichinakamura
0
180
Microsoft Teams のチームの裏側にある SharePoint のチームサイトを使ってみよう!
taichinakamura
1
1.2k
初心者のみんな!(特に根拠はないが)安心して! Power Apps を2回挫折から立ち直った男の話
taichinakamura
0
880
僕の Microsoft Teams (+α) 便利技紹介 2022年春
taichinakamura
0
7.3k
Other Decks in Technology
See All in Technology
Raycast AI APIを使ってちょっと便利な拡張機能を作ってみた / created-a-handy-extension-using-the-raycast-ai-api
kawamataryo
0
210
内製化を加速させるlaC活用術
nrinetcom
PRO
2
140
Pwned Labsのすゝめ
ken5scal
2
410
依存パッケージの更新はコツコツが勝つコツ! / phpcon_nagoya2025
blue_goheimochi
3
210
Windows の新しい管理者保護モード
murachiakira
0
200
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
280
Amazon Aurora のバージョンアップ手法について
smt7174
2
140
php-conference-nagoya-2025
fuwasegu
0
150
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
200
AIエージェント元年@日本生成AIユーザ会
shukob
1
200
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
140
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
170
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
244
12k
RailsConf 2023
tenderlove
29
1k
Visualization
eitanlees
146
15k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
How to Ace a Technical Interview
jacobian
276
23k
BBQ
matthewcrist
87
9.5k
Documentation Writing (for coders)
carmenintech
67
4.6k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Unsuck your backbone
ammeep
669
57k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Practical Orchestrator
shlominoach
186
10k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
Transcript
ホテルのベル アプリ を作って演奏しよう! [ 2020/02/15 ] Power Apps でローコーディングな勉強会 #13
楽器アプリ担当 中村 太一 @artbreak_taichi taichi.nakamura もしもホテルのフロントのベルに音階があったら…
担当者 : 中村 太一 「 太一 」と呼んでやってください。 よろしく お願いします! マスコット
キャラクター:熊五郎(仮)
➢ 元 居酒屋社員 ➢ 元 ミュージシャン(ギタリスト/アレンジャー) ➢ 元 Webデザイナー ➢
SharePoint 2007 / 2010 / 2013 を約7年(運営/構築) ➢ Office 365 全般を2年半弱 ➢ AvePoint Japan 株式会社 プロダクト マーケティング マネージャー 好き 家族 / ギター / ヘヴィーメタル / クルマ / DIY / 写真 / ガンプラ / ラジコン / ミニ四駆 / Office 365 / などなど… 自己紹介 Microsoft MVP Office Apps & Services
自己紹介 ブログ「 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 巷では 「黒いブログ」 と呼ばれている… とか!?
Home 365 User Group 主催 https://h365ug.connpass.com/ SNSのハッシュタグ:#h365ug
Japan Power Apps Orchestra 主宰 https://art-break.net/tech/?p=4904 SNSのハッシュタグ:#JPAO
楽器アプリ作成に必要なオーディオファイルや 画像ファイルはイベント限定で公開しています が一般公開はしておりません。 イベント参加者以外の方は、ご自分でオーディ オファイルと画像ファイルを準備してください。 注意事項
今回学べる事 ①キャンバスアプリの作成の一連の流れ ②アプリアイコンの変更 ③オーディオコントロールの使い方 ④ボタンコントロールでオーディオコントロールの操作 ⑤If文の使い方 ⑥画像コントロールの使い方 ⑦ボタンコントロールで画像コントロールの操作 ⑧コレクションの使い方 ⑨コレクションのレコードをドロップダウンコントロールの値にする方法
⑩隠しボタンの技
【1】アプリの作成 ① make.powerapps.com を開く ② 「+作成」をクリック ③ 「キャンバス アプリを一から作成」をクリック ④
アプリ名を好きな名前で入力し、形式は「タブレッ ト」のままで「作成」をクリック
【2】保存する ※作成作業に入る前に、保存しましょう! ① 「ファイル」タブをクリック ② 左メニュー「名前を付けて保存」をクリック ③ 右下の「保存」をクリック
【3】アイコンを設定 ① 左メニュー「設定」をクリック ② アイコンの「参照」をクリック ③ 「HotelBellIcon.png」を選択 ④ 背景色はお好みで選択
【4】メディアのアップロード 「画像」「オーディオ」ファイルをアップロード ① 左メニュー「メディア」をクリック ② 「画像」の「参照」をクリックし、 HotelBell.png と HotelBellPush.png を選択してアップロード
③ 「オーディオ」の「参照」をクリックし、拡張子 が.mp3のファイル(13ファイル)を選択してアッ プロード
【5】音を鳴らしてみよう! ① 「挿入」タブの「メディア」→「オーディオ」をク リック ② オーディオコントロール「Audio1」を選択した状 態で右パネル「プロパティ」の「メディア」のド ロップダウンから「hb_C3」を選択 ③ Alt
を押しながらオーディオコントロールの再生ボ タンをクリックすると「チーン」と音が鳴る
【6】ボタンで音を鳴らしたい ① 「挿入」タブの「ボタン」をクリック ② ボタンを(今のところは)適当な位置に置いて大き くしておく。 ③ ボタンとオーディオを連動させるにはボタンの方に 処理を書くと思いきや…オーディオの方に書く。 オーディオコントロールを選択し、右パネルの「詳
細設定をクリック」
【6】ボタンで音を鳴らしたい ④ 右パネル「データ」の「その他のオプション」をク リックし、展開させる。 ⑤ AutoStart の下に以下を入力する。 If(Button1.Pressed,true,false) ⑥ Alt
を押しながらボタンコントロールの再生ボタン をクリックすると「チーン」と音が鳴る ※でもボタンを連打しても音は連続再生されない。
【7】ボタンを連打に対応させたい ① オーディオコントロールを選択する ② 右パネルの「詳細設定」タブで、以下の値を変更す る。 「AutoStart」に入力した関数を「Reset」にコ ピー。 「AutoStart」には「true」と入力。 ③
Alt を押しながらボタンコントロールの再生ボタン を連打すると「チンチンチン…」と音が連続で鳴る ▼変更前 ▼変更後
【8】ベルの画像を表示 ① 「挿入」タブの「メディア」→「画像」をクリック ② 右パネルの「プロパティ」タブの「画像」右のド ロップダウンから「 HotelBell 」をクリック ③ (今のところは)適当な大きさにリサイズ
【9】ボタンを押すと画像が変わる ① 画像コントロール「Image1」を選択し、右パネル の「詳細設定」タブの Image を見ると 「 HotelBell 」と入力されている事を確認 ②
以下に変更する If(Button1.Pressed,HotelBellPush,HotelBell) ③ Alt を押しながらボタンコントロールの再生ボタン をクリックすると画像が変わり、クリックを離すと 元に戻る事を確認する
【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})
【10】音を変える設定を入れたい 起動時にコレクションにレコードが追加された確認 ④ ツリービューの「App」の右の「…」→「 OnStart を実行し ます」をクリック(これでアプリ起動時と同じ状態になる) ⑤ 画面左上の「ファイル」タブをクリック ⑥
左メニューから「コレクション」をクリック ⑦ 「Tone」というコレクションにレコードが追加されている事 を確認
【10】音を変える設定を入れたい ⑧ 「挿入」タブの「入力」→「ドロップダウン」をク リック ⑨ 右パネル「プロパティ」の項目で「Tone」を選択 ⑩ 「Value」は「Name」が選択されている事を確認 ⑪ Altを押しながらドロップダウンをクリックしたら、
ドレミファソラシド(上)の選択肢がある事を確認
【10】音を変える設定を入れたい ⑫ オーディオコントロール( Audio1)を選択し、右 パネルの「詳細設定」タブから Media を確認 ⑬ Media の値を以下に変更
Dropdown1.SelectedText.Sound ⑭ 画面右上のプレビューボタンをクリック ⑮ ドロップダウンから適当に音を選ぶと選択したらま ず音が鳴り、その後、ボタンをクリックすると選択 した音が鳴る事を確認
【11】見た目を整える ① オーディオコントロールを選択し、右パネルの「プ ロパティ」タブの「表示」をオンからオフへ ② ドロップダウンコントロール( Dropdown1 )は画 面の隅に置きます ③
画像コントロール( Image1 )をドーンと大きく 置きます ※この時点でボタンコントロールはクリックできなく なる。
【11】見た目を整える ④ ボタンコントロール( Button1 )の「…」→「再 配列」→「前面へ移動」をクリック ⑤ Image1 の上に Button1
が来た事を確認 ⑥ ボタンをベルの画像の上にドーンと広げる おいおい…せっかくの画像が…(続く)
【11】見た目を整える ボタンを非表示にすると機能しなくなるので、 非表示にせずに透明にします。 ⑦ ボタンコントロールを選択し、右パネル の「プロパティ」から以下の項目を変更 する テキスト:「 」(空白) 色:どちらも透明に
罫線:透明に ※この時点ではマウスホバーするとボタンが 出てきちゃう。
【11】見た目を整える ⑧ 「ポイント時の色」の色を変更したくて も、「fx」って出てきてクリックしても 変更できない。(この場合は、関数バー からじゃないと変更できない。) ⑨ 関数バーの左辺が「 HoverFill 」になっ
ている事を確認し、右辺をゴソっと削除
【12】アプリの発行 ① 画面左上の「ファイル」タブをクリック ② 「保存」をクリック ③ 「発行」をクリック ④ 「このバージョンの発行」をクリック
完成!(時間が余ったら…) お疲れさまでした。時間が余ったら自分の好 きなように改造してみましょう。 【改造例】 • デザインを自分好みに変えてみる。 • アプリを開くとこのスクリーンではなく、 別でホームスクリーンを用意して画面遷移 させてみる。
• ドロップダウンを非表示にして歯車アイコ ンを配置して、歯車をクリックすると設定 メニューがダイアログボックスのように表 示させる仕組みを作ってみる。 • 実はこの仕様ではオーディオデータの13 ファイルのうち8ファイルしか使っていま せん。ピアノで言う所の黒鍵の部分がない ので、13個の音全て選択できるようにして みる。 • ベルを13個にして、1人で演奏できるよう にしてみる。
演奏会をします! 最後に全員で演奏会をします! 曲はカンタンに「カエルの歌」 楽器全般未経験の方もいると思うので、1人で1 曲ではなく、全員で1曲を演奏します。 本日の楽器アプリ挑戦者はMAX8名+ボクで9名 ですが、当日欠員などもあって人数が流動的で す。当日臨機応変に役割分担します。 場合によっては余裕のある方が2音担当して、2 班に分かれて輪唱をしてみると更に面白いかも。
改造に成功して1人で全部演奏できるアプリを仕 上げていたら、1人で演奏してもOKです。 利用デバイスは以下の順が好ましいです。 1. Surface などタッチパネルPC 2. タッチパネル非対応PC(クリックで演奏) 3. モバイルデバイス(場合によってはタップし てから反応が悪い) 「ド」担当 「レ」担当 「ミ」担当 「ファ」担当 「ソ」担当 「ラ」担当
おしまい