こんにちは、ジョージです。目指せ FileMaker 選手権 優勝 ✨ 今日は FileMaker Go で作成した音楽ゲームを紹介するよ。サンプルはこちらの URL からダウンロードできます。→ https://github.com/yamamotooo/IKTB ＜開発メモ＞サンプルには「うさぎとかめ」1 曲のみ収録。
コンセプト
タンバリンが主役の音楽ゲーム
どうせ作るなら音楽ゲームがいいなと考えていたら、おぼろげながら「タンバリン」が浮かんできたのです…恐らく昨年秋に参加したライブでボーカルが頭にタンバリンを乗せていたのが印象として残っていたのでしょう。
子供も楽しめるように可愛いメインキャラも作成します、ゲームを作る上で世界観はとても大切です。最近は AI が発達しているのでイメージを伝えれば理想のキャラクターが生成可能です。そして誕生したのが彼「タンバニクリ・タンブニクラ」なのです！＜開発メモ＞彼の出身地はイタリア、テーマ曲はフニクリ・フニクラ。画像の生成には Gemini を利用。
なにかしら AI 機能を使う
FileMaker 選手権 で優勝を狙うには、何かしら AI 機能を利用した方が有利になります。そこで目をつけたのが AI 関連の関数のひとつ CosineSimilarity 関数です。この関数は 2 つの埋め込みベクトル間の類似度を -1 (反対) と 1 (類似) の間の数で返します。https://help.claris.com/ja/pro-help/content/cosinesimilarity.html
お手本となるタンバリンの演奏と、ユーザのタンバリンの演奏を配列化し比較できれば、2 つの演奏がどれだけ類似しているのか判別することができるはずです。今回は「音の種類」「音量」「タイミング」を配列として記録して値の比較にチャレンジします。
音を再生する以外は FileMaker Go 標準機能で作成
主催者の印象をよくするには FileMaker プラットフォーム製品の「標準機能」だけで作り上げるのが望ましいです。今回はタンバリンの音再生以外「標準機能」のみを駆使して完成させました。
画面紹介
ホーム画面
ユーザをゲームの世界観に没入させる為にホーム画面はとても重要です。ここでユーザにどれだけインパクトを与えられるかでゲームへのリテンション率（顧客維持率・定着率）が決定するといっても過言ではありません。そしてゲームの特性上、プレイ中に iPhone 本体がユーザの手から滑り落ちる可能性があるので免責事項も欠かさずに表示しておきましょう。
遊び方
遊び方はとても簡単。mp4 の映像を再生しながら、タンバリンのように iPhone を振ったり回転させて「タン」と「シャカ」を正しいタイミングで鳴らします。裏では FilMaker Go が GetSensor 関数を使って iOS デバイスの指定されたセンサーの値を取得し、一定の量を超えたら JavaScritp 経由でサウンドを鳴らしています。演奏が終了するとあらかじめ記録しておいた「お手本データ」とユーザの演奏で作成されたデータを比較して採点を行います。これは審査のポイントである「発想力・独創性・目のつけどころ」を意識した独自性の高い内容となっています。
一覧・詳細画面
一覧画面では楽曲のサムネイル、タイトル、説明、難易度をシンプルに表示しています。どんな楽曲だったかはすぐに確認できるように「視聴機能」も搭載してます。ちなみに、執筆時点で私が調べた限り FileMaker Go ではオブジェクトフィールドの mp4 サムネイルを表示する事ができず、ファイルアイコンが表示されてしまうようだったので、本来の映像サイズの 2 倍幅でレイアウトに配置し、行揃えを右下に設定することでアイコンを隠しています。＜開発メモ＞FileMaker Go で mp4 サムネイル表示させる方法あるのかな… FileMaker Pro ならいけるのでご存じの方がいたらこっそり教えてください✨
詳細画面では mp4 を再生すると、採点が始まります。ユーザの演奏は「音の種類」「音量」「タイミング」をデータファイルに記録し、mp4 の再生終了をトリガーして記録した配列の採点が始まります。採点アルゴリズムはサンプルファイルをご覧いただけるとより解りやすいと思いますが、お手本とユーザの演奏のデータ配列の要素数を揃えて L2ノルムのベクトルで正規化しデータを比較する方法を ChatGPT に教えてもらったのでそのまま採用しました。
この方法を使うと外部の AI サービスで埋め込みベクトルを生成しなくてもカスタム App 内で完結します。一応何回かテストプレイしてみましたがいい感じの採点基準になっているような気がしますのでヨシとします。
演奏データの作成
著作権の関係から演奏はすべて童謡にしました、タンバリン演奏は Gemini を使って 2 つの画像から中間映像を補完作成し（メチャメチャすごい💦）必要な部分をトリミングし iMovie で地道にアクセントのある部分に重ね配置していいきます。詳しくは「うさぎとかめ」の楽曲ムービーをご覧ください。演奏は商用利用可の mp3 を利用させてもらいました。Garage Band で必要な長さにして BGM として利用させていただきました。
お手本データの作成、テストプレイ
完成した映像を見ながらお手本データを作成します。お手本といっても自分で納得のいく演奏をするだけです。演奏がおわると FileMaker Go のドキュメントフォルダに iktb.log が作成されるので、テキストデータを楽曲レコードのフィールドに登録して準備完了です。
それではテストプレイしてみましょう。うまく動いたようです。
まとめ
生成 AI のおかげでアルゴリズムの検討、ゲーム画面のデザインはものすごい楽になりましたね。ゲームの完成度ではタンバリンのアタック感がヤヤ遅れ気味な気がしますが、それ以外はかなり納得のいく品質になったのでヨシとします。後は自分で好きな映像を作成してお手本を登録して独自のプレイリストを作成するだけです！さて、今年は FileMaker 選手権あるのかな 🤔🤔🤔🤔🤔
