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
190
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
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
190
[OpsJAWS Meetup33 AIOps] Amazon Bedrockガードレールで守る安全なAI運用
akiratameto
1
110
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1.3k
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
320
RayでPHPのデバッグをちょっと快適にする
muno92
PRO
0
190
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
OPENLOGI Company Profile for engineer
hr01
1
20k
役員・マネージャー・著者・エンジニアそれぞれの立場から見たAWS認定資格
nrinetcom
PRO
4
6.4k
AIエージェント開発のノウハウと課題
pharma_x_tech
7
4.1k
アジャイルな開発チームでテスト戦略の話は誰がする? / Who Talks About Test Strategy?
ak1210
1
660
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
11k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
How to Ace a Technical Interview
jacobian
276
23k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
Thoughts on Productivity
jonyablonski
69
4.5k
How to Think Like a Performance Engineer
csswizardry
22
1.4k
The Invisible Side of Design
smashingmag
299
50k
How STYLIGHT went responsive
nonsquared
98
5.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
How GitHub (no longer) Works
holman
314
140k
Designing for humans not robots
tammielis
250
25k
Mobile First: as difficult as doing things right
swwweet
223
9.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
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. モバイルデバイス(場合によってはタップし てから反応が悪い) 「ド」担当 「レ」担当 「ミ」担当 「ファ」担当 「ソ」担当 「ラ」担当
おしまい