2019/8/3 第3回 Home 365祭でお話しした内容です。

2. 小玉 純一
（じゅんじゅんと呼んでください）
[仕事]
仙台市内で社内SEしてます
O365管理、社内システム最適化がメイン
[プライベート]
2児の父
家族とビールとアイスクリームをこよなく愛する
[PowerApps]
楽器アプリばかり作っている遊び人です
[SNSなど]
twitter.com/KodamaJn
qiita.com/KodamaJn

3. https://twitter.com/KodamaJn/status/1135739375734611969

4. https://twitter.com/KodamaJn/status/1135739375734611969
準備から完成までの
11のプロセス
をご紹介
※何かの参考に…なるのか？？

5. [事前準備編]
1. 楽器の音源と画像を探す
2. 音源を色々調整する
3. 楽器の運指を調べる
4. 音の出し方を考える
5. 運指と音源の紐づけ方を考える
[作成編]
6. 音源と画像を取り込む
7. 画像を置く
8. 画像の上にボタンを置く
9. 加速度センサーの値を取得する
10. ボタン押下パターンを作る
11. オーディオコントロールを置く
簡単に言うと
①素材を見つけて
②処理を考えて
③作る
だよ！

6. 事前準備編

7. http://theremin.music.uiowa.edu/MIS.html
【音源】 【画像】
アイオワ大学のElectronic Music
Studiosで様々な楽器のサンプル音源が
提供されている
（無料ですが寄付を募っていますので是非）
真正面から撮影されたシンプルな画像を
ネットで探す
（著作権に注意！）

8. 揃いました

9. A. 音源ファイルのフォーマットを変換する
アイオワ大学の音源は .aiff なので .wav にする
（方法は色々ありますが私はiTunesを利用）

10. A. 音源ファイルのフォーマットを変換する
アイオワ大学の音源は .aiff なので .wav にする
（方法は色々ありますが私はiTunesを利用）

11. B. 音量を揃える
音によってばらついていたり、全部小さかったりするので、調整する
（方法は色々ありますが、私はAudacity という音声編集ソフトを利用）

12. C. 音の出るタイミングを揃える
波形を見て、なるべく最初の無音区間をカットする
（方法は色々ありますが、私はAudacityを利用）

13. https://www.alsoj.net/sax/magazine/view/12/35.html
サックスオンライン THE SAX ONLINE＜サックス専門レッスン情報サイト＞ より
とりあえず、あまり使わないボタンを省く
・低い音でしか使わないボタンがある
→ 低い音は諦めよう
・高い音でしか使わないボタンがある
→ 高い音は諦めよう
・替え指でしか使わないボタンがある
→ 替え指は諦めよう
23 → 10 個に削減
①
②
④
⑤
⑩
③
⑥
⑦
⑧
⑨
ボタン23個って多すぎ…少し減らせないかな…
左手の親指、アプリでどうやって押せばいいの…
そもそも音のON/OFFどうしよう…

14. 実際の楽器 楽器アプリ
音を変える 指 指
音を出す/止める 息 指？
音量を変える 息 ？？？
音色を変える 口、息 ？？？
音を変える
両手を使う。左手親指のボタンをどうするかが問題
音を出す/止める
↑で両手を使うので不可能では？？何も押してなければ止める？
音量を変える & 音色を変える
もはや無理ゲーなので今回は割愛
ボタン削減したはいいけど、
まだ色々難しそうだな…
指以外でトリガーを作る
方法ってないのかな…
サックスの演奏方法

15. トリガー足りない問題
アプリじゃ息も口も使えないし…
って、あ！これだ！！ いつもありがとうございます！！
https://twitter.com/10mikiya/status/1116940645808005120 https://twitter.com/artbreak_taichi/status/1118837697324257280

16. 実際の楽器 楽器アプリ
音を変える 指 指、加速度センサー
音を出す/止める 息 指
音量を変える 息 無理ゲー
音色を変える 口、息 無理ゲー
左手親指は加速度センサーを使って制御してみることにした
・実際には”加速度”ではなく、傾きを数値にしたような値が得られるので、これを利用
（Hiroさんの参考記事：https://qiita.com/h-nagao/items/4fcd68de58b84d690233）
・左手の親指を加速度センサーで制御
→ 傾けたらON、戻したらOFF
・音を出すのはボタンを押しているかで判断
→ 音を止めたい時はボタンを離せばいい
※一部、何もボタンを押さなくても出せる音があるので、今回は除外

17. ボタンの押下パターンを数値化して音源と関連付ける
ボタンを押したら1、離したら0とする
（例：ボタン1, 2, 3, 6, 10を押したら、1110010001）
※今回はボタン①（左手親指）は加速度センサーを用いる
ボタンの押下パターンが、各音のパターンと一致した場合に音が再生されるようにする
パターン：0001000000で再生ド
パターン：1101101110で再生レ
パターン：1101101100で再生ミ
パターン：1101101000で再生ファ
パターン：1101100000で再生ソ
パターン：1101000000で再生ラ
パターン：1100000000で再生シ
①1
②1
④1
⑤1
⑩0
③0
⑥0
⑦1
⑧0
⑨0
パターン：1101101000

18. 作成編

19. ファイル→メディア→参照
合計200MBに収まればOK
※Community Apps Galleryにアップする場合は、
合計4MB程度までに収める必要あり（サイズ超過でエラーになる）

20. ボタンを押しやすいような大きさや角度に調整する
これが結構しんどい作業
試行錯誤の末、こんな感じになりました

21. 画像のボタンよりなるべく大きめにするのがおススメ
隣のボタンと重ならないように。ボタンは境界半径を調整することで円にできます

22. ボタンのTextは、押されたら1、押されてなければ0とする
ボタンを押されたかどうかは、ボタン名.Pressedのtrue/falseで判定

23. ラベルを追加し、センサー値によってText値を切り替える
軸（X,Y,Z）はデバイスや傾け方に依存するので、色々試してみよう
傾いていれば1、そうでなければ0とする

24. ラベルを追加し、各ボタンと傾きの値をまとめる
Concatenate関数で複数の文字列を統合できる

25. ※説明のためオーディオコントロールを可視化。邪魔なので後で非表示にしましょう。
数が多いのでGalleryの使用がおススメ
Galleryの項目にはCollectionを使用（Soundの中身は次ページ）

26. ボタン押下パターンと該当音源のファイル名を定義する
AppのOnStartで、ClearCollect関数を用いてSoundの中身を以下のように定義
この手のものは直書きだと訳が分からなくなるので、私はよくExcelを使います

27. ※説明のためオーディオコントロールを可視化。邪魔なので後で非表示にしましょう。
オーディオの再生処理を記載する
記載個所は、Media、Start、Resetの3箇所
10.でまとめたボタン押下パターンが各音のパターンと一致した場合に再生される

28. 完成！

29. 時間が…おそらくない想定
実際の演奏は JPAO演奏（17:10～）にて

30. 準備から完成までの11のステップを紹介
作成は簡単だが、事前準備や構想段階にかなり時間がかかった
左手親指を加速度センサーで代用できると気付いてから数日で完成
アプリ化する際に生じる課題をどうクリアするかが”カギ”
課題は何か？
作成したいものはどのような特徴があるか？
諦めてよいポイントはどこか？
他の機能で代用できないか？
最新の機能や、一見
関係なさそうな機能／
事例を日頃からチェック
しておくことの重要性を
学びました