「TAURI」で「ピアノ音楽」アプリを作ろう

2024年1月16日(火)
大西 武 (オオニシ タケシ)
第8回の今回は、「TAURI」でピアノのUIを演奏するとピアノのサウンドが鳴るデスクトップアプリを開発していきます。

はじめに

今回は、図1のような3オクターブのド3~シ5までのピアノのインターフェースでピアノを演奏するだけの音楽アプリ「piano」を開発します。このようなときにマウスクリックではなく、スマホやタブレットのタッチパネルであれば本当にピアノを演奏するのと似たことができるのですが。

サウンドの再生は「JavaScript」で比較的簡単に実装できますが、今回は「Rust」との連携を学習できるように、あえてRustでサウンドを再生します。なお、今回はRustと連携するために第6回で作成した画像ビューアからちょっと発展させて、「ステート」機能というテクニックを使います。

図1:ピアノ音楽アプリの完成図

気軽にピアノ音のデータまでは録音して作れないので、サンプルのサウンドデータは筆者が用意しました。サウンドデータはサンプルプロジェクトファイルの「sounds」フォルダ内に「A3.ogg」ファイルなどが入っています。プロジェクトを新規作成した後に、こちらからサンプルプロジェクトファイル(TauriSample08.zip)をダウンロードして「src-tauri」フォルダ直下に「sounds」フォルダをコピー&ペーストしてください。第5回と同じく「Ogg」フォーマットのサウンドデータを使いますが、オープンソースで自由に使えるファイル形式だからです。

プロジェクトの準備

いつものように、第1回第2回で解説した通りにプロジェクトを準備して、サウンドを扱うクレートを読み込むRustの設定をしたり、TAURIの設定をしたりします。TAURIプロジェクトを新規作成した際には、デフォルトでTAURIに必要なクレートなどの設定ファイルは自動で記述されています。

今回は外部ファイルのサウンドデータを使うので、TAURIの設定においてリソースファイルであるサウンドファイルの扱いが重要になります。

プロジェクトの作成

適当なフォルダをカレントディレクトリにして、次のコマンドを実行して「piano」などという名前でプロジェクトを新規作成します。それから作成した「piano」フォルダをカレントディレクトリにします。

筆者は「Visual Studio Code」に慣れていますが、お好きなコードエディタをお使いください。筆者も以前は「秀丸エディタ」でコードを書いていましたし、今でも秀丸エディタを使うこともあります。

・TAURIプロジェクトの作成コマンド
$ cargo create-tauri-app piano

Rustの設定ファイル

サウンドを扱うには、第5回と同じく「kira」クレートを使います。第5回ではTAURIは使わずRustのみでkiraクレートを使いましたが、クレートの読み込み方は全く同じです。

今回は、最終的に図2のようなプロジェクトの構成図になります。A3.oggファイルなどが入ったsoundsフォルダをコピー&ペーストするディレクトリに気を付けてください。

図2:pianoプロジェクトの構成図

・「src-tauri」→「Cargo.toml」のサンプルコード
(前略)
[dependencies]
tauri = { version = "1.2", features = ["shell-open"] }
serde = { version = "1.0", features = ["derive"] }
serde_json = "1.0"
kira = "0.7.1" #サウンドのクレート

[features]
custom-protocol = ["tauri/custom-protocol"]

【サンプルコードの解説】
サウンドを扱うkiraクレートの読み込みだけ追記します。

TAURIの設定ファイル

今回は外部のピアノ音のサウンドファイルがあるので、デバッグして実行する際やリリースの際に一緒に配布する必要があります。そのためには「リソース(RESOURCE)」として「src-tauri」→「tauri.conf.json」設定ファイルのバンドル("bundle")する"resources"に"sounds"フォルダ内の全てのファイル(/*)を指定すると、自動でデバッグ時やインストーラに同梱されます。

ここでは省略しましたが、ウィンドウの幅高さを調整しても良いでしょう。OSによって微妙にサイズが異なるのか、ギリギリのサイズにするとスクロールバーが出たり出なかったりするので、少し大き目サイズにすると良いかもしれません。

・「src-tauri」→「tauri.conf.json」のサンプルコード
(前略)
  "tauri": {
    "allowlist": {
      "all": false,
      "shell": {
        "all": false,
        "open": true
      },
      "fs": {
        "scope": ["$RESOURCE/*"]
      }
    },
    "bundle": {
      "active": true,
      "targets": "all",
      "identifier": "com.roxiga.piano",
      "resources": [
        "sounds/*"
      ],
      "icon": [
        "icons/32x32.png",
        "icons/128x128.png",
        "icons/128x128@2x.png",
        "icons/icon.icns",
        "icons/icon.ico"
      ]
    },
(後略)

【サンプルコードの解説】
"tauri"の"allowlist"の"fs"の"scope"でリソースフォルダ全て「["$RESOURCE/*"]」にアクセスできるように許可します。リソースフォルダは"bundle"の"resources"で"sounds/*"フォルダ内の全てのファイルを指定します。
リリースビルドの際には"identifier"をユニークな(一意の)値にします。ここでは"com.roxiga.piano"としました。皆さんは他のユニークな値に変えてください。

【コラム】「Rust製Midiシーケンサー『ジュニオン』」

筆者は以前、図3のようなRustで作った「ジュニオン」という「Midiシーケンサー(打ち込みツール、極端に言えば作曲ツール)」を作ったことがあります。名前は「12音」から考えましたが、「Junion」というスペルにするとGoogle検索でたくさん引っかかったので「Jyunion」というスペルに決定しました。

ただし、UIにはTAURIではなく「egui」クレートを使ったのですが、TAURIでも似たようなものが作れると思います。UIはeguiクレートで作れますが、さらに音楽規格「Midi」を扱うクレートも必要になります。

図3:Rustで作ったMidiシーケンサー「Jyunion」

著者
大西 武 (オオニシ タケシ)
1975年香川県生まれ。大阪大学経済学部経営学科中退。プログラミング入門書など30冊以上を商業出版する作家。Microsoftで大賞やNTTドコモでグランプリなど20回以上全国区のコンテストに入賞するアーティスト。オリジナルの間違い探し「3Dクイズ」が全国放送のTVで約10回出題。
https://profile.vixar.jp

連載バックナンバー

開発言語技術解説
第15回

「TAURI」でデータベースを使ってみよう

2024/5/10
第15回の今回は「TAURI」でオープンソースのデータベース「SQLite3」を使用して、テーブル表に表示する解説をしていきます。
開発言語技術解説
第14回

「TAURI」で気象庁の「CSVデータ」を解析する

2024/5/1
第14回の今回は気象庁のWebサイトから指定した地域の1年間の気象データをダウンロードして「TAURI」で解析していきます。
開発言語技術解説
第13回

「TAURI」で「簡易RSSリーダー」を開発してみよう

2024/4/16
第13回の今回は「TAURI」で「RSSフィード」を読み込んでWebページに一覧表示し、リンクのページを開くための新規ウィンドウを作成するところまでを解説します。

Think ITメルマガ会員登録受付中

Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。

Think ITメルマガ会員のサービス内容を見る

他にもこの記事が読まれています