<p data-line="0" class="code-line"><img src="https://storage.googleapis.com/zenn-user-upload/d9981c61cb10-20250526.png" loading="lazy" class="md-img"></p>
<p data-line="2" class="code-line">こんにちは。Fuyomi開発チーム（@Dreamify）です。<br>
本記事では、2025年6月1日にリリースされる**iOS向け多機能演奏支援アプリ「Fuyomi」**の開発背景、設計方針、技術スタック、そして今後の展望を紹介します。</p>
<h1 id="%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%A6%82%E8%A6%81%E3%81%A8%E8%A7%A3%E6%B1%BA%E3%81%97%E3%81%9F%E3%81%8B%E3%81%A3%E3%81%9F%E8%AA%B2%E9%A1%8C" data-line="5" class="code-line">
<a class="header-anchor-link" href="#%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AE%E6%A6%82%E8%A6%81%E3%81%A8%E8%A7%A3%E6%B1%BA%E3%81%97%E3%81%9F%E3%81%8B%E3%81%A3%E3%81%9F%E8%AA%B2%E9%A1%8C" aria-hidden="true"></a> アプリの概要と解決したかった課題</h1>
<p data-line="6" class="code-line">Fuyomiは、以下の機能を1つにまとめたオールインワン型の音楽練習支援アプリです：</p>
<ul data-line="7" class="code-line">
<li data-line="7" class="code-line">メトロノーム（振動・ライト対応）</li>
<li data-line="8" class="code-line">クロマチックチューナー</li>
<li data-line="9" class="code-line">楽譜読み書きノート（PDF/画像）</li>
<li data-line="10" class="code-line">自動スクロール（譜めくり）<br>
開発動機はとてもシンプルで、演奏者として日々感じていた以下のような課題感からスタートしました：</li>
<li data-line="12" class="code-line">アプリを切り替えるのが面倒（メトロノーム／チューナー／ノート別々）</li>
<li data-line="13" class="code-line">音が聞こえない現場でメトロノームが使いにくい</li>
<li data-line="14" class="code-line">Apple Pencilで書いても保存・再利用しづらい</li>
</ul>
<p data-line="16" class="code-line">これらの「小さな不便」を解消し、音楽に集中できる環境を作るのがFuyomiのコンセプトです。</p>
<h1 id="%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%81%A8%E8%A8%AD%E8%A8%88%E6%80%9D%E6%83%B3" data-line="18" class="code-line">
<a class="header-anchor-link" href="#%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF%E3%81%A8%E8%A8%AD%E8%A8%88%E6%80%9D%E6%83%B3" aria-hidden="true"></a> 技術スタックと設計思想</h1>
<h3 id="%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" data-line="19" class="code-line">
<a class="header-anchor-link" href="#%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" aria-hidden="true"></a> フロントエンド</h3>
<ul data-line="20" class="code-line">
<li data-line="20" class="code-line">Swift + SwiftUI：Appleエコシステムとの親和性と高速開発</li>
<li data-line="21" class="code-line">PDFKit：PDF楽譜の表示とページ管理</li>
<li data-line="22" class="code-line">PencilKit：Apple Pencil／指での描画入力</li>
<li data-line="23" class="code-line">AVFoundation：録音・再生周りの処理</li>
<li data-line="24" class="code-line">Core Haptics：メトロノームの振動制御</li>
</ul>
<h3 id="%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89" data-line="26" class="code-line">
<a class="header-anchor-link" href="#%E3%83%90%E3%83%83%E3%82%AF%E3%82%A8%E3%83%B3%E3%83%89" aria-hidden="true"></a> バックエンド</h3>
<ul data-line="27" class="code-line">
<li data-line="27" class="code-line">Firebase Authentication（匿名ログイン）：ログイン不要で端末間同期</li>
<li data-line="28" class="code-line">Cloud Firestore：ノート構成やメタ情報の保存</li>
<li data-line="29" class="code-line">Firebase Storage：PDF／画像／描画（PKDrawing）データの同期保存</li>
</ul>
<h1 id="%E5%AE%9F%E8%A3%85%E3%81%A7%E8%8B%A6%E5%8A%B4%E3%81%97%E3%81%9F%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88" data-line="31" class="code-line">
<a class="header-anchor-link" href="#%E5%AE%9F%E8%A3%85%E3%81%A7%E8%8B%A6%E5%8A%B4%E3%81%97%E3%81%9F%E3%83%9D%E3%82%A4%E3%83%B3%E3%83%88" aria-hidden="true"></a> 実装で苦労したポイント</h1>
<ol data-line="32" class="code-line">
<li data-line="32" class="code-line">PDFと画像の両対応UI<br>
背景として表示する楽譜がPDFとJPGどちらの場合でも、同じ描画／スクロール／エクスポート構造で扱えるよう統一しました。特に難しかったのは、描画レイヤー（PencilKit）と背景のサイズ・位置の整合。</li>
</ol>
<ul data-line="34" class="code-line">
<li data-line="34" class="code-line">描画は常にCGContext上でPDFページやUIImageと合成</li>
<li data-line="35" class="code-line">表示上は同じCanvasViewを流用しつつ、レンダリング時だけ分岐</li>
</ul>
<ol start="2" data-line="37" class="code-line">
<li data-line="37" class="code-line">書き込みデータのクラウド同期<br>
PencilKitのPKDrawingデータをData形式でシリアライズ → Storageにアップロード／ダウンロードし、Firestoreで各ノートページと紐付け管理。匿名ユーザーでも複数端末から同期可能にしています。</li>
</ol>
<ul data-line="39" class="code-line">
<li data-line="39" class="code-line">Firebase Storage：users/{uid}/notes/{noteId}/drawings/page_0.dataなどに保存</li>
<li data-line="40" class="code-line">Firestore：ノート構成（ページ数、作成日、表示名など）を保存</li>
</ul>
<ol start="3" data-line="42" class="code-line">
<li data-line="42" class="code-line">自動スクロール制御（BPM連動は断念 → スライダーに）<br>
当初はメトロノームと譜めくりを同期させる予定でしたが、実装上の安定性や演奏とのズレを考慮し、ユーザーがスクロール速度をスライダーで指定できる方式に変更。今後、AIを用いた自動譜めくりの導入も検討中です。</li>
</ol>
<h1 id="%E5%88%B6%E4%BD%9C%E4%BD%93%E5%88%B6%E3%81%A8%E3%83%90%E3%83%83%E3%82%AF%E3%82%B0%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89" data-line="45" class="code-line">
<a class="header-anchor-link" href="#%E5%88%B6%E4%BD%9C%E4%BD%93%E5%88%B6%E3%81%A8%E3%83%90%E3%83%83%E3%82%AF%E3%82%B0%E3%83%A9%E3%82%A6%E3%83%B3%E3%83%89" aria-hidden="true"></a> 制作体制とバックグラウンド</h1>
<p data-line="46" class="code-line">Fuyomiは、学生中心の団体「Dreamify」の開発チームが設計・開発を担当しました。<br>
代表である私は大学で情報系を学びつつ、高校時代はオーケストラ部に3年間所属していました。</p>
<p data-line="49" class="code-line">「演奏者のリアルな課題」を、「技術者としての視点」で解決する。<br>
この両者をつなげるアプローチこそが、Fuyomi開発の核です。</p>
<p data-line="52" class="code-line">なお、Dreamifyは2025年6月中に非営利型一般社団法人として正式登記予定で、今後も社会課題とテクノロジーを結びつけるプロダクトを複数展開していく方針です。</p>
<h1 id="%E4%BB%8A%E5%BE%8C%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%E8%A8%88%E7%94%BB" data-line="54" class="code-line">
<a class="header-anchor-link" href="#%E4%BB%8A%E5%BE%8C%E3%81%AE%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%E8%A8%88%E7%94%BB" aria-hidden="true"></a> 今後のアップデート計画</h1>
<p data-line="55" class="code-line">現在検討している次期バージョンの機能：</p>
<ul data-line="56" class="code-line">
<li data-line="56" class="code-line">耳コピAI（MP3→楽譜）：YouTubeや録音音源から楽譜生成</li>
<li data-line="57" class="code-line">演奏分析によるテンポ調整／スクロール最適化</li>
<li data-line="58" class="code-line">アカウント機能：他端末共有、SNS連携、ユーザー管理</li>
<li data-line="59" class="code-line">Android・watchOS対応</li>
</ul>
<h1 id="%E3%81%94%E6%84%8F%E8%A6%8B%E3%83%BB%E3%81%94%E6%8F%90%E6%A1%88%E6%AD%93%E8%BF%8E%E3%81%A7%E3%81%99%EF%BC%81" data-line="61" class="code-line">
<a class="header-anchor-link" href="#%E3%81%94%E6%84%8F%E8%A6%8B%E3%83%BB%E3%81%94%E6%8F%90%E6%A1%88%E6%AD%93%E8%BF%8E%E3%81%A7%E3%81%99%EF%BC%81" aria-hidden="true"></a> ご意見・ご提案歓迎です！</h1>
<p data-line="62" class="code-line">Zenn読者の皆さんからの技術的視点でのアドバイス・改善提案・機能要望など大歓迎です！<br>
以下いずれかの方法でフィードバックをいただけると非常にありがたいです。</p>
<ul data-line="64" class="code-line">
<li data-line="64" class="code-line">コメント欄でのご意見</li>
<li data-line="65" class="code-line">naohnymatsuka.business@gmail.comへのメール</li>
<li data-line="66" class="code-line">インスタグラムDMからのメッセージ</li>
</ul>
<h1 id="%E3%83%AA%E3%83%B3%E3%82%AF" data-line="68" class="code-line">
<a class="header-anchor-link" href="#%E3%83%AA%E3%83%B3%E3%82%AF" aria-hidden="true"></a> リンク</h1>
<ul data-line="69" class="code-line">
<li data-line="69" class="code-line">App Storeリンク（※リリース後に追記）</li>
<li data-line="70" class="code-line">Dreamify公式サイト：<a href="https://www.fuyomi.com" target="_blank" rel="nofollow noopener noreferrer">fuyomi.com</a>
</li>
<li data-line="71" class="code-line">技術ブログ：Qiita/Zenn/noteでも投稿中
<ul data-line="72" class="code-line">
<li data-line="72" class="code-line"><a href="https://qiita.com/nmachian/items/b9bceaed9e7fd42e9f0c" target="_blank" rel="nofollow noopener noreferrer">Qiitaで記事を閲覧</a></li>
<li data-line="73" class="code-line"><a href="https://note.com/nmachian/n/n2dd413493ac5" target="_blank" rel="nofollow noopener noreferrer">noteで記事を閲覧</a></li>
</ul>
</li>
</ul>


Swift × Firebase × PencilKitでつくる多機能演奏支援アプリ「Fuyomi」開発ストーリー

アプリの概要と解決したかった課題

アプリ開発

Discussion