Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ホテルのベル アプリ を作って演奏しよう!(もしもホテルのフロントのベルに音階があったら…)
Taichi Nakamura
February 15, 2020
Technology
0
330
ホテルのベル アプリ を作って演奏しよう!(もしもホテルのフロントのベルに音階があったら…)
[ 2020/02/15 ] Power Apps でローコーディングな勉強会 #13
ホテルのベル アプリ を作って演奏しよう!
もしもホテルのフロントのベルに音階があったら…
Taichi Nakamura
February 15, 2020
Tweet
Share
More Decks by Taichi Nakamura
See All by Taichi Nakamura
僕の Microsoft Teams (+α) 便利技紹介 2022年春
taichinakamura
0
4.5k
Microsoft Teams の あまり注目されないアレの話(ネタバレ:イマーシブ リーダー)
taichinakamura
0
4.4k
【ハイブリッド ワークプレイス時代に向けて】チーム内の朝の挨拶システムを作ってみた!
taichinakamura
1
280
僕の Microsoft Teams (+α) 便利技紹介 2021年春
taichinakamura
0
2.1k
2月末に取った休暇の流れから在宅勤務を開始して9カ月で片手で数える程度しか出社しなかったある男の話
taichinakamura
0
550
アウトプットしたくてもできない時の阻害要因と解決法を考える
taichinakamura
0
200
アウトプットは「継続は力なり」! ブログ編
taichinakamura
0
150
コミュニティ・マトリックス と自分の立ち位置
taichinakamura
0
210
アレのおかげで #o365diet が!そして更なる高みへ…
taichinakamura
0
260
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2022年6月度サービス・アップデート
oracle4engineer
PRO
0
150
ROS再入門-はじめてのSLAM-
miura55
0
410
UWBを使ってみた
norioikedo
0
430
LINEのB2Bプラットフォームにおけるトラブルシューティング2選
line_developers
PRO
4
300
PUTとPOSTどっち使う?
hankehly
0
270
今どきのLinux事情
tokida
42
35k
約6年間運用したシステムをKubernetesに完全移行するまで/Kubernetes Novice Tokyo
isaoshimizu
5
900
Persistence in Serverless Applications - ServerlessDays NYC
marcduiker
0
250
UIKitのアップデート #WWDC22
akatsuki174
4
340
2024卒_freee_エンジニア職(ポテンシャル採用)_説明資料
freee
0
260
要約 "Add Live Text interaction to your app"
ushisantoasobu
0
150
How to start with DDD when you have a Monolith
javujavichi
0
340
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
169
20k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
15k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
655
120k
In The Pink: A Labor of Love
frogandcode
131
21k
Why Our Code Smells
bkeepers
PRO
324
55k
Building Adaptive Systems
keathley
25
1.1k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
Happy Clients
brianwarren
89
5.6k
Designing the Hi-DPI Web
ddemaree
272
32k
Unsuck your backbone
ammeep
659
55k
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. モバイルデバイス(場合によってはタップし てから反応が悪い) 「ド」担当 「レ」担当 「ミ」担当 「ファ」担当 「ソ」担当 「ラ」担当
おしまい