欲しいアプリは自分で作る！

Power Platform や Azure などを利用して作成した業務アプリや趣味アプリなどをご紹介します。

トップ > Power Apps > Power Apps でピアノアプリを爆速で作る方法

Power Apps でピアノアプリを爆速で作る方法

Power Apps

＜2023/11/20 追記＞
オーディオコントロールの表示をオフにすると音が再生されなくなったため、一部手順を差し替えました。



どうも、じゅんじゅんです。


以前、本ブログでピアノを録音再生するアプリの作り方をご紹介していました。
https://jn.hateblo.jp/entry/2018/12/22/233906

上記記事の方法でも簡単なピアノは作れるのですが、録音再生機能を前提に作られているため、ちょっと煩わしい作り方をしています（変数を使うなど）。

録音機能のないシンプルなピアノを作成する場合は、変数を使わずに簡単に、かつ爆速で作ることができますので、本記事でご紹介します。


作るもの

こんなピアノアプリを爆速で作ります。

音域は、低い"ド"から高い"ド"までの1オクターヴ分とします（C4～C5までの13音）。

音名の詳細は Wiki をご参照ください。
音名・階名表記#オクターヴ表記

慣れてしまえば 3 分程度でできるくらい簡単な手順ですので、「Power Apps って何？？そんなに簡単にアプリ作れるわけないじゃんテラワロスwww」と周りから言われて悔しい思いをされている方は、是非この方法を用いてその人の目の前でアプリを作成してみてください。

ちなみに、"3分で作る" と調子に乗ったタイトルをつけていますが、音を再生するのに必要な音源ファイルの準備時間は除きます。何卒ご了承ください。


用意するもの

  • タッチパネルが使えるデバイス
    タブレット、スマホ等。iOS は音の再生に遅延が発生するため、できれば iOS 以外が望ましい

  • ピアノの各音の音源ファイル
    私は以下のアイオワ大学の Electronic Music Studios からダウンロードしました。
    （無料公開されていますが、寄付を募っていますのでご利用の方は是非。私も数十ドルほど寄付しています）
    University of Iowa Electronic Music Studios


音源ファイルの加工方法（参考）

音源ファイルを用意する方法は様々あると思いますので、ここでは私がよく行っている方法について参考までにご紹介します。


  1. まずは上記サイトから音源をダウンロードします。
    アイオワ大学の音源は AIFF 形式のようです。

    ダウンロードしたファイル

  2. 音源ファイルのフォーマットを変換します。
    Power Apps では WAV または MP3 形式である必要がありますので（もう一つくらい対応形式があったような…）、ここでは iTunes を用いて WAV に変換します。

    まずは読み込み設定を WAV に設定（ステレオかモノラルかはご自由に）
    1. でダウンロードした音源ファイルを iTunes に取り込み、WAV に変換

  3. 各音源ファイルの音量を揃えます。
    これ以降は必要に応じてですが、アイオワ大学の音源はファイルによって音量にばらつきがあるので、ここでは Audacity というフリーの音声編集ソフトで調整します。
    Audacity の使い方は各自おググりください。

    取り込んだ音源ファイルを全選択し、エフェクト→増幅で新規最大振幅を -3.0 dB などにする

  4. 各音源ファイルの音の出だしを揃えます。
    これも必要に応じてですが、アイオワ大学の音源はファイルによって音の出だしのタイミングにばらつきがあるので、これも Audacity で調整します。

    音源の先頭の空白部分を選択し削除する作業を音源の数だけ行う（地道…）

  5. 加工が終わったら、ファイルを保存します。

    ファイル→書き出し→複数ファイルの書き出し で一括出力できる


これで、音源ファイルの加工は終了です。

続いて、アプリの作成に入ります。


アプリ作成手順

  1. 先に音源ファイルを読み込みます。画面左上の"ファイル"を選択します。

  2. 画面左側の"メディア"→"オーディオ"→"参照"を選択します。

  3. 音源ファイルを読み込みます。

  4. 続いて、鍵盤を作ります。"挿入"タブから"ボタン"を選択し、画面上にボタンを1つ追加します。

  5. ボタンを画面左上に寄せ、高さを画面目一杯に広げます。
    今回は1オクターブ分（白鍵8個分）作るので、幅は画面サイズ 1366 ÷ 8 ≒ 170 にしておきます。
    位置とサイズはこんな感じになりました。

  6. ボタンのテキスト値は不要なので、テキストを空に（"ボタン"の表記を消す）。
    塗りつぶしの色は白に（"色"のペンキマークをクリックし、カラーパレットから白を選択する）。
    罫線は黒にします（"罫線"の右側の領域をクリックし、画面上部の数式に"Black"と入力する）。

  7. 続いて、音を再生するために、"挿入"タブの"メディア"から"オーディオ"を選択し、画面上にオーディオコントロールを1つ追加します。

  8. オーディオコントロールの横幅を適当に縮め（どのみち後で非表示にしますが）、"メディア"から鳴らしたい音源を選びます。
    ここは"低いド"なので、C4 を。

  9. ボタンが押された時に音を再生するよう設定します。
    オーディオコントロールの"詳細設定"タブで、"Start"にButton1.Pressedを、"Reset"に!Button1.Pressedを設定します。
    Pressed パラメータとは、ボタンが押された時に True、押されていない時に False となるものです。
    なお、Reset に設定する Button1.Pressed は先頭に ! を付けていて、Pressed の値を反転させています。
    上記の設定によって、ボタンを押すことで Start = True、Reset = False となり音が再生され、 ボタンから手を放すことで Start = False、Reset = True となり音が止まります。 （Reset を True にするのはオーディオの再生位置を先頭に戻すため）

  10. ボタン（Button1）とオーディオ（Audio1）を両方選択し、Ctrl + G でグループ化します。

  11. グループをコピペして白鍵を量産し、並べます。 9.の手順を先にやっておくと、ここの手順で各オーディオコントロールが各ボタンの Pressed を参照した状態でコピペされます。
    鍵盤を並べた後に各鍵盤に対して 9. の手順を1つずつ行うより、この手順の方が断然早いですね。

  12. 続いて黒鍵を用意します。先ほどの白鍵をさらに1つコピペし、ボタンの色を黒に変更します。
    ボタンの高さは白鍵の半分程度、幅は白鍵よりも狭くしてください。おおよそで OK 。

  13. 黒鍵のグループをコピペして黒鍵を量産し、並べます。

  14. このままではどの鍵盤を押しても"ド"が再生されるため、各オーディオコントロールの"メディア"を各々の鍵盤の音に設定します。
    設定したら、オーディオコントロールの表示はオフにしましょう。
    ＜2023/11/20 追記＞
    仕様が変わり、オーディオコントロールの表示をオフにすると、音が再生されなくなったようです。
    オーディオコントロールを表示させたくない場合は、オーディオコントロールの色（Fillプロパティ）を透明にしましょう。


完成！


応用編

この状態では、鍵盤から手を離すと音が止まります。
本物のピアノで、足元のペダルを何も踏まない状態と同じです。

もし、鍵盤から手を放しても音を止めたくない場合、本物のピアノで言うと足元の右側のペダル（ダンパーペダル）を踏んだ状態にしたい方は、オーディオコントロールを以下のように設定します。


オーディオコントロールの"詳細設定"タブで、"AutoStart"にButton1.Pressedを、"Reset"にもButton1.Pressedを設定します。
今回は、Reset に設定するButton1.Pressed は先頭に ! を付けません。

上記の設定によって、ボタンを押すことで AutoStart = True、Reset = True となります。
Reset が作動して再生位置が先頭に戻り、かつ AutoStart が発動して音が再生されます。
（Reset は True のままでも音は再生されるようです）

ボタンから手を放すことで AutoStart = False、Reset = false となりますが、AutoStart は一度 True になると最後まで再生されるようで、ボタンから手を放しても音が鳴り続ける、という仕組みです。

さらに応用編（紹介のみ）

2段にすれば、弾ける曲も増えて、もっと楽しい。


タイマーコントロールと組み合わせると、録音（正確には演奏タイミングの記録）再生もできて、もっと楽しい。


もうちょい頑張ると、演奏したものを楽譜に書き起こすこともできて、もっと楽しい。


まとめ

ピアノアプリを作る手順は以前別の記事でも紹介していましたが、よりシンプルに、かつ爆速で作ることができる方法を改めてまとめてみました。


欲しいアプリは欲しい人が作る時代へ。
需要はほとんどないかと思いますが（笑）、まだ Power Apps に触れたことのない方が本ブログを見て少しでも面白いと思っていただけたら幸いです。