ページ2: バズってうれしかった。機能をふやした。
Version 3: 機能てんこ盛り
リクエストラッシュ
TikTokでちょっとバズったおかげで、毎日のようにリクエストが来るようになった。
「ハリーポッターのテーマ作って！」
「君の名は。のやつお願いします！」
「ボカロもやってください！」
みたいな感じで、コメント欄がリクエストだらけに。うれしい。とてもうれしかった。
でも、リクエストに応えて楽曲を作ってるうちに、どんどん機能が欲しくなってきた。「ドラム音が欲しい」「もっと音色を増やしたい」「パートごとに色を変えたい」とか。
大規模機能追加
ということで、全部作り直してどんどん機能追加した：
パート別カラーリング
パートごとに色を変えられるようにした。ベースは青、メロディは赤、ドラムは緑、みたいな感じで。見た目が分かりやすくなって、楽曲の構造が把握しやすくなった。
音色大幅追加
Square波、Triangle波、Sawtooth波、Noise、あと簡単なエンベロープ制御も追加。8bitっぽさを保ちつつ、表現力が格段に上がった。
ミュート機能
パートごとにミュートできるようにした。楽曲制作中に「ドラムだけ聞きたい」とか「ベースライン確認したい」みたいなときに便利。
キック・ノイズ音源
ドラム音が鳴らせるようになった。これで最低限楽曲として成立するレベルに。キックとスネアがあるだけで、リズム感が全然違う。
ズーム機能
細かい編集ができるように、ズームイン・ズームアウト機能を追加。長い楽曲を作るときには必須。
待望の保存機能
やっと保存機能をつけた。今まではパソコンを切るたびに作った曲が全部消えてた。「なんで最初からつけなかったんだ...」って自分でも思った。
localStorage使って、ブラウザに保存する仕組み。シンプルだけど、とりあえず曲が消えなくなった。
楽曲制作の充実
この時期に作った楽曲で一番印象的だったのは「メガロバニア」。名曲だけど、8bitでアレンジしたらドラムが良い感じにはまってうれしかった。
リズムやベースやコードなどで音色が違うことで、楽曲としてすごく幅が広がった。
再びパフォーマンス問題
でも、機能を追加すればするほど、またパフォーマンス問題が浮上してきた。ボタンをいっぱい並べる方式の限界が見えてきた。
特に、ズーム機能を追加したことで、一度に表示するボタンの数が激増。ゲーミングPCでもカクカクするレベルになってしまった。
「またまた全部作り直すしかないな...」と思った。
Version 4: UI変更
抜本的なデザイン見直し
今度はデザインを大幅に変えることにした。パフォーマンス問題を解決するために、根本的にアーキテクチャを見直す必要があった。
パート一覧を左側に出すようにした。これで画面のレイアウトがだいぶ整理された。楽曲の全体像も把握しやすくなった。
Undo/Redo機能の実装
Undo/Redo機能も追加した。これは技術的に結構難しかった。状態管理をちゃんとしないと、過去の状態を正確に復元できない。
CommandパターンとかMementoパターンとか、デザインパターンを勉強し直した。プログラミングの基礎的な部分で、まだまだ知らないことがいっぱいあるなと痛感。
音声ファイル対応
短い時間の音声ファイルも再生できるようになった。キックとかスネアとかのサンプル音源を使って、よりリアルなドラム音が作れるようになった。
これで、完全にシンセサイザーから脱却して、すこしだけDAWっぽくなってきた。
モバイル表示への気づき
でも、この時期に重要な気づきがあった。TikTokで見てる人の多くは、スマートフォンで見てるということ。
Version 4のUIは、PCで見る分には問題なかったけど、スマホで見ると上下左右の枠が邪魔だった。特に縦型の動画だと、メイン画面の部分が小さくなりすぎる。
「また作り直そう」って思った。我ながら懲りない。でも、tiktokの画面を考えると、これは避けて通れない問題だった。
パフォーマンス改善の試行錯誤
この時期に、パフォーマンス改善のために色々試した：
Pixi.js
Pixi.jsというものを使うようになった。ブラウザで2Dゲームが作れるやつ。いままではボタンを大量に並べていたのがバカみたいに思えるほど軽くなった。