かっこいいドラムの叩き方

2024 11/20

2024-11-19 2024-11-20

URLをコピーしました！

こんにちはジョージです。先週は Claris カンファレンス 2024 にご参加頂き誠にありがとうございました！今年は特に AI 関連のセッションが多く、そして人気が集まっていたような気がします。そんな大人気セッションの影に隠れて、ひときわ異彩を放ち、そして参加者同士の不思議な一体感を生み出したセッションが 2 日目の D 会場／最終セッションで行われていたことを皆様ご存知でしょうか？？？

残念ながら著作権の関係で当社含め、ClariS おおっと… Claris 社の公式 YoutTube チャンネル等でも、セッションの録画は公開できないのですが「デモンストレーションで使われたカスタム App で遊んでみたい！」という、ありがたいご意見が多数よせられましたのでサンプルファイル、ソースコードを公開する事にしました。

日頃の運動不足解消に🏃！キャンプファイヤーのお供に🔥！今年の忘年会の隠し芸に🪄！目立つこと間違いなしのカスタム App「AirDrums」急いでダウンロードしちゃいましょう！

カスタム App のダウンロード

当社ブログでは、公開できるファイル容量を超えてしまったので GitHub からのダウンロードとなります。* すぐにお試し頂けるように Claris カンファレンス 2024 で行なったデモファイルをそのまま公開しております。https://github.com/yamamotooo/airDrums/blob/main/AirDrums.zip

カメラ付きの PC / Mac、WebRTC に対応した FileMake Pro があれば macOS / WIndows どちらでも動作可能と思われます。

カスタム App の使い方

Web ビューアの起動

カスタム App を起動したら ⌘1 export で Web ビューアに表示する HTML をデスクトップに index.html として書き出し、Web ビューアで読み込みます。※ WIndows の場合は file:// プロトコルを使用しないと WebRTC のセキュリティ制限に引っ掛かる為です。

「Web ビューア」がカメラにアクセスしようとしています。許可／キャンセル、とダイアログがでたら「許可」をクリックします。

領域の描画

⌘2 shapes を実行すると、Web ビューアに SVG の領域が描画されます。circle または rect のみに対応しています。もちろん自分の好みにあわせて、大きさや場所は調整できます。調整したら ⌘2 shapes を再実行します。

音源の割り当て

⌘3 sounds を実行して、領域にオブジェクトフィールドの音源を割り当てます。SVG で指定した領域配列の上から順番にオブジェクトフィールドに格納した mp3 が割り当てられます。とりあえず 8 個の音源を読み込めます、もちろん自分の好きな音源を登録も可能です。

オプション

外部スクリプト（Apple Script 等）を記述しておく場所です。カンファレンス当日は ⌘4、⌘5 に割り当てて Apple のミュージック App で再生する伴奏の音を変えてました。

設定は以上でおわりです。あとはカメラの前にたち手首、足首が認識できれば演奏準備完了です！これらはレコード毎に登録できるので、いくつかのドラムセットを気軽に持ち歩ける感じです。レコードを変えたら ⌘1-3 までを再実行します。

Callback

レコード 1〜2 は衝突検知時に JavaScript からコールバックが発生し、カスタム App の callback スクリプトが実行されます。log テーブルに衝突検知した領域と関節、XY 座標を使ってログレコードを作成してます。レコード 3 はドラムセットにかなり近い形で演奏しログレコードが大量に発生してしまうので、JavaScritp でコールバックを無効にしています。演奏がもっさりしていると感じた方は、レコード 3 を複製してオリジナルのセットを作った方がよいかもしれません。

カスタム App を使う

操作は簡単 🎵 カメラの前に立ち、好きなように、思い思いにリズムを刻みましょう！

説明はこれで終了です。興味がある方は Vue で書いたスクリプトの部分もチェックしてみてくださいね。

Claris カンファレンス 2025 Rhythm Beats Night (仮) に向けて

さて、とあるパートナーの方からこのカスタム App をベースにして、音楽コンテストみたいなものをやってはどうか？と、ご提案いただきました。なるほど、Claris カンファレンス初日はオープニングキーノート、最終日はクロージングセッションと全員参加型の集客力のあるイベントがありますが、2 日目は医療系イベントや経営層向けのイベントはあったものの、参加者全員で楽しめそうなイベントは用意されていなかった気がします。

例えば次のルールで Claris パートナー対抗の音楽コンテストがあれば成立しそうですがいかがでしょうか？