【iOS】進捗報告 11 ☆伴奏トラック☆
musicLine(iOS)についての進捗。
今回はiOS独自機能で考案した伴奏トラックについて進捗を報告します。
伴奏トラックとは
横線で作るメロディートラックとは異なり、縦も自由に音符を置けるトラックです。
メロディートラックでは縦に音符が重ならないように配置され、和音を乗せていくような作り方です。音符を分割する時は、縦が合うように和音の音符も分割されます。
一方で伴奏トラックは縦に重ねて音符を配置することができ、1音ずつ直接置いていくような作り方です。各音符は独立しており、より直感的に自由な編集ができます。
ちなみに、メロディートラックは1, 2, 3と数字をカウントするのに対し、伴奏トラックはA, B, Cとアルファベットを順番に使っていきます。
ということで今回ハーモニートラックの実装は一旦見送り、新しい伴奏トラックを実装しました。
ハーモニートラックの今後
今ではメロディートラックと大差なく特徴のないトラックとなっています。
将来的には和音作りに特化したトラックにしたいと思っています。コード進行に沿って和音の選択肢を出すような支援ツールみたいなイメージです。
でもそのためには、コード進行を入力できる機能なども必要なので、ハーモニートラックの特徴を出せるのはまだ先になりそうですね。
将来的には和音作りに特化したトラックにしたいと思っています。コード進行に沿って和音の選択肢を出すような支援ツールみたいなイメージです。
でもそのためには、コード進行を入力できる機能なども必要なので、ハーモニートラックの特徴を出せるのはまだ先になりそうですね。
実装状況
| カテゴリ | タイトル | 補足 | |
| View | |||
| Common | WheelMenuPicker | 値をタップすると選択肢が表示されて値を変更、値をスワイプするとホイールで素早く変更 | |
|
Composition UI配置
ガイド表示 | 伴奏音符 | 音符/休符と連符の表示。細かい連符は省略して表示 | |
| ペンツールガイド | (伴奏) 移動してる時、移動影。左にスワイプしている時、削除する範囲。長さ編集している時、伸ばし線 | ||
| 指ツールガイド | (伴奏) 移動してる時、移動影と上書き音符に光。長さ編集している時、伸ばし線。矩形選択の範囲 | ||
| 消しゴムツールガイド | (伴奏) 削除範囲 | ||
| Composition | |||
| 伴奏ツール | |||
| PenTool ペンツール
音符の作成 | データ構造 | 伴奏音符を作成、フレーズへ音符を追加・削除、長さの編集、分割・統合する | |
| 音符の作成 | タップで伴奏音符を作成 | ||
| 音符の移動 (回避) | 音符をスワイプして移動。音符があるとこを回避する。 | ||
| 音符長さ編集・削除 | 音符の右ハンドルを左右にスワイプして長さ変更。長さ0の時削除 | ||
| 音符の分割・統合 | 音符をタップで左右に分割・統合 | ||
| 音符列の削除 | 左にスワイプした範囲にある複数の伴奏音符を削除。 | ||
| FingerTool 指ツール
音符の編集 | データ構造 | フレーズの伴奏音符を取得、選択、長さを編集、連符切り替え | |
| 音符の移動 (上書き) | 音符をスワイプして移動。移動した場所の音符は削除。 | ||
| 音符長さ編集・削除 | 音符の右ハンドルを左右にスワイプして長さ変更。長さ0の時削除 | ||
| 連符数の編集 | 音符選択時に表示されるピッカーで連符数を変更 | ||
| タップ選択 | タップした音符を選択・解除 | ||
| 矩形選択 | 囲った音符を選択 | ||
| EraserTool 消しゴムツール
音符の削除 | データ構造 | 音符と連符の認識、フレーズから音符を削除、休符切り替え | |
| 音符の削除 | 音符をタップで削除 | ||
| 休符に切り替え | 連符をタップで休符に切り替え | ||
| 音符列の削除 | スワイプで指定する削除範囲内の複数の音符を削除 | ||
全進捗マップを表示
| カテゴリ | タイトル | 補足 | |
| View | |||
|
Common ダイアログ
| アラートメッセージ | ユーザーに通知するコメント | |
| 数字ピッカー | 数字（範囲制限）をポップアップダイアルで取得 | ||
| 項目ピッカー | 特定の値をポップアップのリスト項目で取得 | ||
| HTMLテキスト | テキストスタイルを部分的に変えるため、HTML形式に対応したText | ||
| 文字制限テキスト編集 | 文字制限付きのTextField、制限文字数を超えは赤文字で閉じる時に切り捨て | ||
| 全画面テキスト編集 | 複数行のテキストを編集する時に、ポップアップ全画面でTextEditorとキーボード表示 | ||
| FitScrollView | 閾値高さで スクロールありorなしを切り替える（画面に収まるときはScrollViewにしない） | ||
| WheelMenuPicker | 値をタップすると選択肢が表示されて値を変更、値をスワイプするとホイールで素早く変更 | ||
|
Composition UI配置
ガイド表示 | ピアノ | ||
| スクロールエリア | |||
| 小節番号 | |||
| 小節線 | |||
| 分割線 | 拡大率によって間隔を変化 | ||
| フレーズ | フレーズがないところはフレーズ作成ボタンを表示 | ||
| ツールボタン | 選択中のツールはツール色にハイライトする | ||
| メロディーライン | ペンツールでの音符作成時の入力線 | ||
| メロディー音符 | 音符の先頭にチョボをつける | ||
| リズム音符 | ベース音符のみ下に表示 | ||
| サンプルデータ | 手入力したサンプルデータの音符を配置 | ||
| 連符 | 連符は数字で表示、拡大率によって省略 | ||
| ペンツールガイド | 長さ編集しているリズム音符、伸ばした時の削る範囲 (ドラム) 左にスワイプしている時、削除する範囲 | ||
| 指ツールガイド | 移動中の音符影、矩形選択の枠 (ドラム) 長さ編集している時、伸ばし線（iOS独自）。矩形選択の範囲 | ||
| 消しゴムツールガイド | 削除範囲、和音のみの削除範囲 (ドラム) 削除範囲 | ||
| フレーズツールガイド | フレーズ移動・伸縮のバー、選択範囲テキスト（iOS独自） | ||
| フレーズボタン | フレーズボタンとサブボタンを配置、ツールに応じてアイコンを変更、画面拡大率に応じて縮小 | ||
| フレーズタブ | ツールに応じてアイコンを変更、拡大率に応じて縮小、スクロール状態に応じて移動 | ||
| 音符描画の高速化 | 音符が多くても描画できる速さへ最適化 | ||
| 音符の編集状態 | 選択や変更した時に枠線の色変更 | ||
| 音符音階 | メロディ音符に音階表示 | ||
| 再生バー | 曲を再生している時に、再生位置をバーで表示 | ||
| 再生ボタン | 曲を再生/停止を監視して、状態を変更、再生準備が遅い時はインジケーターを表示 | ||
| 再生速度の表示 | 曲の再生速度を表示（iOS独自） | ||
| テスト音のガイド | 鳴っている音階に色をつける | ||
| ドラム音符 | 音符と連符の表示。分割線に乗っていない音符は細く表示（iOS独自） | ||
| ドラム盤 | ピアノ鍵盤の位置にドラムセットを表示 | ||
| 伴奏音符 | 音符/休符と連符の表示。細かい連符は省略して表示 | ||
| ペンツールガイド | (伴奏) 移動してる時、移動影。左にスワイプしている時、削除する範囲。長さ編集している時、伸ばし線 | ||
| 指ツールガイド | (伴奏) 移動してる時、移動影と上書き音符に光。長さ編集している時、伸ばし線。矩形選択の範囲 | ||
| 消しゴムツールガイド | (伴奏) 削除範囲 | ||
|
Composition ダイアログ
| フレーズ | フレーズの作成・設定・挿入、フレーズの長さやリピート回数の設定 | |
| 曲設定 | タイトル・テンポ、キー等の曲の設定 | ||
| トラック選択 | 編集トラックの変更・追加/削除、ボリュームやミュート等の設定 | ||
| 楽器選択 | トラックの使用楽器変更、楽器のランダム選択・選択リセット（iOS独自） | ||
| ドラム楽器一覧 | 使用ドラム楽器をリスト表示。使用楽器の編集や並び替え（iOS独自） | ||
| ドラム楽器設定 | ドラム楽器の音量調整・ミュート、削除・複製 | ||
| ドラム楽器選択 | トラックの使用ドラム楽器変更、楽器のランダム選択・選択リセット（iOS独自） | ||
|
Community (共通) UI配置
| コミュニティ | ディスプレイとコントローラーを表示。縦持ちと横持ちのレイアウト。どのディスプレイ、コントローラーを使用するかは各コミュニティ画面で派生 | |
| カテゴリーリスト群 | カテゴリー選択、カテゴリーリストを表示。どのカテゴリーリストを表示するかは各コミュニティ画面で派生 | ||
| ページスクロール | リストを表示。スワイプでリスト項目を取得。どのリスト項目を使用するかは各カテゴリーで派生 | ||
| 曲リスト項目 | 各コミュニティ画面で派生系を用意する | ||
| リレー曲リスト項目 | 左右にスワイプで前後走者の曲を表示 | ||
| その他リスト項目 | 曲ID：検索で曲ID一覧を表示、ユーザー：ユーザー検索やいいねリスト等で表示 | ||
| 曲詳細 | 曲の情報と貰ったコメントを表示、送るコメントを編集する | ||
| 曲の情報 | 曲のタイトル、作者、ランキング順位、タグ、ユーザーの反応等を表示 | ||
| 貰ったコメント | テキストとOGP | ||
| ソングビジュア | 曲再生位置の変更と可視化。曲情報でトロフィー変更。リスト/詳細ボタンで切り替え。シンプルのみ実装でリリース後に追加予定。 | ||
| カテゴリー選択 | カテゴリータブ表示。スクロール可能。選択表示。 | ||
| ユーザーアイコン | ユーザー画像、プレミアムリングを表示。タップでユーザーページへ | ||
| プレイヤー | 曲の再生、いいね・お気に入り等のボタン。現在の状況を反映 | ||
| 設定パネル | レイアウト設定、ソングビジュア設定、楽器フィルタ リリース後に実装予定 | ||
|
Community Square コミュニティ広場
UI配置 | ディスプレイ | 状況によりカテゴリー説明/ソングビジュアを切り替え。 | |
| カテゴリー説明 | 広場カテゴリーの説明 | ||
| コントローラー | カテゴリーリスト群/曲詳細を切り替え | ||
| カテゴリーリスト群 | Squareのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | カテゴリー別にリスト項目を派生（ランキングなら左にランク情報）。コンテスト項目はタップでコンテスト画面へ | ||
| イベント詳細 | コンテストの詳細情報の表示 | ||
| 絞り込み検索 | |||
|
Community UserPage ユーザーページ
UI配置 | ディスプレイ | ユーザープロフィールを表示。下へスワイプした時に隠れてヘッダーが表示されるように | |
| ユーザープロフィール | ユーザー情報、紹介文、アクティビティログ等表示 | ||
| ユーザー情報 | 名前、アイコン、リンクリスト、フォロー欄、紹介文表示 | ||
| リンクリスト | 外部リンク（X等）ボタンを並べる | ||
| フォロー欄 | フォロー、ミュート、通知ボタン | ||
| アクティビティログ | 活動レベル、投稿曲数やいいね数など表示 | ||
| ヘッダー | |||
| コントローラー | ディスプレイに追従 | ||
| カテゴリーリスト群 | UserPageのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | 開閉するプレイリスト項目を作成。 | ||
|
Community Contest コンテスト結果
UI配置 | ディスプレイ | 状況によりコンテスト概要/ソングビジュアを切り替え。 | |
| コンテスト概要 | コンテストのテーマ、内容、提案者の表示 | ||
| コントローラー | カテゴリーリスト群/曲詳細を切り替え | ||
| カテゴリーリスト群 | Contestのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | コンテストの順位や自分の投票数を表示するリスト項目に派生 | ||
|
Community ダイアログ | リストダイアログ | いいね・お気に入りをしたユーザーリスト表示、曲を含む再生リストの表示 | |
| メッセージアラート | 通知するテキストを知らせる（DLした時や削除確認など） | ||
| プロフィール編集 | 名前、アイコン、紹介文等を編集 | ||
| プレイリスト詳細 | プレイリストのタイトル、説明、作者、コメント等を表示 | ||
| プレイリスト編集 | タイトル、アイコン、曲リスト等を編集 | ||
| コンテスト投票 | 開催コンテスト曲の視聴と投票 | ||
| MIDI詳細 | 曲のテンポ、音符・トラック数、使用楽器等 | ||
| Composition | |||
|
Common 作曲共通
| データ構造 | 座標とサイズ、状態を保持する。レンダラーやコライダー、通知等のロジック | |
| コンバーター | Domainのデータ構造へ変換・逆変換 | ||
| 通知機構 | Modelに変更があった時に、Viewへ通知して再描画。変更状況を監視してキャッシュ | ||
|
Changer 曲設定変更
| テンポ変更 | 送信MIDI信号の変更 | |
| 拍子変更 | フレーズ外音符の削除、横スクロール位置を修正 | ||
| キー変更 | 送信MIDI Noの増減 | ||
| 鍵盤タイプ変更 | 鍵盤Noに応じて全ての音符位置を修正、縦スクロール位置を修正 | ||
| 編集トラック変更 | ピアノ鍵盤のサンプラー変更 | ||
| トラック設定変更 | トラック名・略称、トラック追加・複製・削除 | ||
| メロディーツール | |||
| FingerTool 指ツール
音符の編集 | データ構造 | フレーズの音符を取得、基点と移動ベクトルを保持して移動する | |
| 音符の移動 | 和音や連符は上下のみに制御 | ||
| 音符の影 | 移動中に操作できているかわかりやすいように（iOS独自） | ||
| 内外判定 | 音符の移動をフレーズ内に留める | ||
| 衝突判定 | 移動する音符が他の音符に重なったときの挙動 | ||
| タップ選択 | タップした音符の子音符も選択・解除 | ||
| 矩形選択 | 囲った音符を選択 | ||
| 音符の入れ替え | リズム音符のスライドで重なった音符と入れ替える（iOS独自） | ||
| 和音の削除 | 和音を移動した時に重なる時に削除する | ||
| 連符に切り替え | リズム音符タップで切り替え | ||
| PenTool ペンツール
音符の作成 | データ構造 | 音符を作成・分割・統合、フレーズへ音符を追加する | |
| 音符の作成 | タップで音符を作成。分割線に合わせて長さを決定 | ||
| 音符列の作成 | スワイプに沿って複数の音符を作成。音階変わる時に音符分割 | ||
| 有無判定 | タップやスワイプした縦ラインに既に音符があるか判定 | ||
| 音符の移動 | 音符が既にある場合は、作成ではなく移動。一定距離進むと移動終了 | ||
| 音符の分割 | リズム音符をタップした時、音符を分割、メロディ線に沿ってY位置を動かす | ||
| 音符の統合 | ２つのリズム音符の間をタップした場合、音符を統合 | ||
| 音符の伸縮 | リズム音符を左右にスワイプすることで音符の長さを伸縮、始点で分割なし（仕様変更） | ||
| 音符の消滅 | 音符の伸縮をした時に長さが0になると削除する（iOS独自） | ||
| 領域差演算 | 音符伸縮で他の音符に重なる時は差演算して他の音符長さを削る | ||
| サンプリング補間 | 素早くスワイプしても音符が移動できるようにサンプリング間を補間する | ||
| 細かい音符 | 分割線内の細かな音符を移動する挙動 | ||
| EraserTool 消しゴムツール
音符の削除 | データ構造 | 和音と連符の認識、フレーズから音符を削除する | |
| 音符の削除 | タップで音符を削除 | ||
| 和音・連符の削除 | 和音・連符をタップで和音・連符のみを削除（iOS独自） | ||
| 音符種別判定 | タップした音符が和音・連符・ルート音符なのか判定する | ||
| 音符列の削除 | スワイプで指定する削除範囲内の複数の音符を削除。 | ||
| 和音列の削除 | リズム音符をスワイプで複数の和音のみを削除。（iOS独自） | ||
| 休符に切り替え | リズム音符タップで休符に切り替える | ||
| ドラムツール | |||
| PenTool ペンツール
音符の作成 | データ構造 | ドラム音符を作成、フレーズへ音符を追加・削除する | |
| 音符の作成・削除 | タップでドラム音符を作成。既に音符がある場合は削除 | ||
| 音符列の作成 | スワイプで跨いだ分割線にドラム音符を作成。 | ||
| 音符列の削除 | 左にスワイプした範囲にある複数のドラム音符を削除。（iOS独自） | ||
| FingerTool 指ツール
音符の編集 | データ構造 | フレーズのドラム音符を取得、選択、長さを編集して分割する | |
| 音符長さ編集 | 音符を左右スワイプで長さを変更。長さがある時、連符になり長さ0の時連符解除 | ||
| 連符数の編集 | 音符を上下にスワイプで連符数を変更（iOS独自） | ||
| タップ選択 | タップした音符を選択・解除 | ||
| 矩形選択 | 囲った音符を選択 | ||
| EraserTool 消しゴムツール
音符の削除 | データ構造 | 音符と連符の認識、フレーズから音符を削除する | |
| 音符の削除 | 音符をタップで削除 | ||
| 休符に切り替え | 連符をタップで休符に切り替える | ||
| 音符列の削除 | スワイプで指定する削除範囲内の複数の音符を削除。 | ||
| 伴奏ツール | |||
| PenTool ペンツール
音符の作成 | データ構造 | 伴奏音符を作成、フレーズへ音符を追加・削除、長さの編集、分割・統合する | |
| 音符の作成 | タップで伴奏音符を作成 | ||
| 音符の移動 (回避) | 音符をスワイプして移動。音符があるとこを回避する。 | ||
| 音符長さ編集・削除 | 音符の右ハンドルを左右にスワイプして長さ変更。長さ0の時削除 | ||
| 音符の分割・統合 | 音符をタップで左右に分割・統合 | ||
| 音符列の削除 | 左にスワイプした範囲にある複数の伴奏音符を削除。 | ||
| FingerTool 指ツール
音符の編集 | データ構造 | フレーズの伴奏音符を取得、選択、長さを編集、連符切り替え | |
| 音符の移動 (上書き) | 音符をスワイプして移動。移動した場所の音符は削除。 | ||
| 音符長さ編集・削除 | 音符の右ハンドルを左右にスワイプして長さ変更。長さ0の時削除 | ||
| 連符数の編集 | 音符選択時に表示されるピッカーで連符数を変更 | ||
| タップ選択 | タップした音符を選択・解除 | ||
| 矩形選択 | 囲った音符を選択 | ||
| EraserTool 消しゴムツール
音符の削除 | データ構造 | 音符と連符の認識、フレーズから音符を削除、休符切り替え | |
| 音符の削除 | 音符をタップで削除 | ||
| 休符に切り替え | 連符をタップで休符に切り替え | ||
| 音符列の削除 | スワイプで指定する削除範囲内の複数の音符を削除 | ||
| PhraseTool フレーズツール
フレーズの編集 | データ構造 | トラックのフレーズを取得・追加、削除、状態 | |
| フレーズの作成・挿入 | ダイアログで長さとリピートを設定 | ||
| フレーズの選択 | ２点タップで範囲選択、範囲ガイドタップで選択解除（仕様変更） | ||
| フレーズの移動 | 左右スワイプで移動、移動は選択フレーズとスワイプ中のフレーズを含む | ||
| フレーズの伸縮 | サブ編集領域をスワイプした時にフレーズ長さを伸縮、長さ0で削除（iOS独自） | ||
| フレーズの貼り付け | 選択フレーズをコピー・ペースト、サブボタンかフレーズタブタップで挿入、選択解除 | ||
| 周囲有無判定 | 作成する小節の近くにフレーズがあるかの判定、設定できる長さやリピート回数の制御 | ||
| フレーズボタン・タブ | ツールに応じてフレーズボタン、タブの処理を変更 | ||
| フレーズの結合 | 連続する2フレーズの接する小節線をタップで結合（iOS独自） | ||
| フレーズの分割 | フレーズをタップで分割（iOS独自） | ||
| StampTool スタンプツール
モチーフの編集 | |||
| Transform 画面移動
座標変換 | 画面を上下移動 | ピアノのスワイプにより | |
| 画面を左右移動 | スクロールエリアのスワイプにより | ||
| 画面を拡大・縮小 | ピンチアウト・インにより基点を画面中心に設定する | ||
| 画面を拡大・縮小(軸指定) | 長押しからのドラッグ。ピアノでX軸方向、スクロールエリアでY軸方向 | ||
| ドラム座標系 | 新しくドラムの座標系を追加。下へ楽器が追加されるため、メロディーと異なり左上原点 | ||
| MIDI | コンバーター | CompositionからMIDIのデータ構造へ変換 | |
| 曲の再生 | 画面左からMIDI再生、Compositionのデータ構造から曲の再生、再生位置の同期 | ||
| 曲の再生（最初から） | 再生ボタン長押しで最初から再生 | ||
| 曲の再生（位置指定） | スクロール領域をダブルタップでその位置から再生（iOS独自） | ||
| 再生速度の変更 | ドラッグで曲の再生速度を変更（iOS独自） | ||
| 再生処理の最適化 | 曲に変更がない時はキャッシュを使う、変更通知とキャッシュの管理 | ||
| Commnity | |||
|
Common コミュニティ
| データ構造 | カテゴリ等の曲情報、いいねやお気に入り等のリスポンスを保持 | |
| CommunitySongPlayer | コミュニティ用にラップした曲プレイヤー | ||
| CategoryLists | カテゴリーリスト群のモデル。カテゴリー別にフェッチ/キャッシュ | ||
| ListInfo | カテゴリーリストのモデル、リストのスクロール位置、フェッチするページ番号等 | ||
| Context | Community共通のCommonContextと各画面のContextがある | ||
| UserActivityManager | ユーザーのアクティビティ（いいね、ミュートユーザー、再生リスト、モチーフ登録、アクセス履歴等）を管理 | ||
|
Service サービスモデル
| ListItemFetcher | カテゴリーリスト項目のMLサーバーから取得する | |
| MidiRepository | MIDIファイルをサーバーから取得して貯める | ||
| UserActivityFetcher | ユーザーの行動をMLサーバーから取得する（再生数、再生リストに含まれているか、コメント等） | ||
| MIDI | |||
|
Common MIDI共通
| データ構造 | MIDIフォーマットへ出力できる構造 | |
| コントローラー | 曲の読み込みや再生、再生位置の監視や音源の変更などMIDIの扱いを管理する | ||
| サンプラー | ピアノや音符生成時に単体のMidiイベントから音を鳴らす | ||
|
Service サービスモデル
| MidiPlayer | MIDIを再生する | |
| MidiReader | MIDIファイルの読み込み | ||
| MidiWriter | MIDIファイル出力 | ||
| Account | |||
|
Common アカウント
| データ構造 | ログインできる構造、アカウント情報、ログイン情報、MLユーザー情報 | |
| AccountManager | アカウントの管理、ログイン時にMLサーバーと通信 | ||
|
Service サービスモデル
| UserActivityRepository | ユーザーのアクティビティ（いいね、ミュートユーザー、再生リスト、モチーフ登録、アクセス履歴等）を貯める | |
| ServerCommunication | MLサーバーと通信する処理を集約 | ||
| Domain | |||
|
データ構造 Json形式 | Melody | MelodyTrack, MelodyPhrase, NoteContainer, NoteBlock, Note | |
| Drum | DrumTrack, DrumPhrase, BeatContainer, Beat | ||
| 共通化 | Original, Repeat, Syncの3種のPhraseをジェネリッククラスとプロトコルで抽象化 | ||
|
Service サービスモデル
| SongReder | Jsonファイルを読み込み、Domainのデータへ変換 | |
| SongWriter | DomainのデータからJsonファイルへ書き出し | ||
| Common | |||
|
Service サービスモデル
| リポジトリ | 保存データを管理 | |
実装の詳細
伴奏音符
伴奏音符は四角形で表示し、右端にハンドルがあります。メロディー音符が角丸に対して、角張っているのが特徴です。
連符は黒枠の中の音符が分割して表示されます。
また、連符は画面の拡大率によって省略表示されます。
伴奏ペンツール
伴奏フレーズ内でタップすることで音符を分割線内に音符を作成します。
右にスワイプをすることで音符作成と同時に長さを指定します。
左にスワイプをして囲った範囲の音符を削除します。
音符の移動と長さの編集
音符をスワイプすることで移動します。移動は分割線にフィットします。画面を拡大することで細かく移動ができます。なお、既にある音符は上書きせずに回避した場所に配置されます。
音符の右端についているハンドルを左右にスワイプすることで長さを伸縮します。
長さが0に縮めた場合は削除になります。
音符の分割・統合
音符内の分割線をタップすることで、音符を左右に分割できます。
逆に左右に音符がある分割線をタップすると統合します。
伴奏指ツール
音符をスワイプで移動します。既にある音符は削除されます。ペンツール移動は回避されるのに対し、指ツール移動は上書きされる違いがあります。
音符のハンドルを左右へスワイプすることで長さを変更します。
タップや矩形選択で音符を選択して、複数同時に長さを変更することができます。
フレーズタブをタップすると、フレーズ内の音符を全選択します。
音符移動時のフィッティング機能
指ツールでは分割線以外にも近くの音符にフィットさせたり、そのまま上下のみ移動することができます。
連符数の変更
音符を選択するとピッカーが表示されて連符数を変更することができます。
ピックの仕方はホイールとメニューがあります。
メニューはピッカーをタップすると表示される選択肢から選びます。
ホイールは上下スワイプするだけで素早く変更できます。
伴奏消しゴムツール
音符をタップして削除します。
連符も省略表示の時はタップで削除できます。詳細表示の時はタップで休符に切り替えます。
スワイプで矩形選択した範囲の音符を削除します。
おわりに
伴奏トラックの実装ができました！！
次はハーモニートラック？と思ってましたが、前述通りメロディートラックと大差ないので見送りました。というか今となっては完全にメロディートラックと機能が被ってますね。 (´ﾍ｀；
（実はリリース当初和音はハーモニートラックしか追加できなかった=3 それはここだけの話੭˙▷˙)੭
なのでハーモニートラックはまた特徴を出せる段階になってから実装しようと思います。
伴奏トラック気に入ってもらえるといいですね ♪
musicLineはメロディーは作りやすいけど、和音を多用する伴奏はイマイチで使いづらいと前々から言われており、
その時から伴奏に特化した伴奏トラックの構想はありましたが気が進まずお蔵入りしてました。
やはり既に完成しているAndroidでは変更する部分がかなり多いので不具合が心配だったり実装が難しかったりするんですね。。iOSで好評だったらAndroidでも頑張ってみようかな？
そんなこんなでiOS版では一味違ったmusicLineを出すことができそうです！iOSリリースする上でAndroidとは違った一押し機能みたいなものを実装しておきたかったので、このタイミングで実装できて良かったです ′◡‵ ノノ☆
次はリピートフレーズを実装していきます。
【iOS】進捗報告 10 (ドラムトラック)
musicLine(iOS)についての進捗。
今回は作曲画面のドラムトラックについて進捗を報告します。
実装状況
| カテゴリ | タイトル | 補足 | |
| View | |||
|
Composition UI配置
ガイド表示 | ドラム音符 | 音符と連符の表示。分割線に乗っていない音符は細く表示（iOS独自） | |
| ドラム盤 | ピアノ鍵盤の位置にドラムセットを表示 | ||
| ペンツールガイド | (ドラム) 左にスワイプしている時、削除する範囲 | ||
| 指ツールガイド | (ドラム) 長さ編集している時、伸ばし線（iOS独自）。矩形選択の範囲 | ||
| 消しゴムツールガイド | (ドラム) 削除範囲 | ||
|
Composition ダイアログ
| ドラム楽器一覧 | 使用ドラム楽器をリスト表示。使用楽器の編集や並び替え（iOS独自） | |
| ドラム楽器設定 | ドラム楽器の音量調整・ミュート、削除・複製 | ||
| ドラム楽器選択 | トラックの使用ドラム楽器変更、楽器のランダム選択・選択リセット（iOS独自） | ||
| Composition | |||
| ドラムツール | |||
| PenTool ペンツール
音符の作成 | データ構造 | ドラム音符を作成、フレーズへ音符を追加・削除する | |
| 音符の作成・削除 | タップでドラム音符を作成。既に音符がある場合は削除 | ||
| 音符列の作成 | スワイプで跨いだ分割線にドラム音符を作成。 | ||
| 音符列の削除 | 左にスワイプした範囲にある複数のドラム音符を削除。（iOS独自） | ||
| FingerTool 指ツール
音符の編集 | データ構造 | フレーズのドラム音符を取得、選択、長さを編集して分割する | |
| 音符長さ編集 | 音符を左右スワイプで長さを変更。長さがある時、連符になり長さ0の時連符解除 | ||
| 連符数の編集 | 音符を上下にスワイプで連符数を変更（iOS独自） | ||
| タップ選択 | タップした音符を選択・解除 | ||
| 矩形選択 | 囲った音符を選択 | ||
| EraserTool 消しゴムツール
音符の削除 | データ構造 | 音符と連符の認識、フレーズから音符を削除する | |
| 音符の削除 | 音符をタップで削除 | ||
| 休符に切り替え | 連符をタップで休符に切り替える | ||
| 音符列の削除 | スワイプで指定する削除範囲内の複数の音符を削除。 | ||
| Transform 画面移動
座標変換 | ドラム座標系 | 新しくドラムの座標系を追加。下へ楽器が追加されるため、メロディーと異なり左上原点 | |
全進捗マップを表示
| カテゴリ | タイトル | 補足 | |
| View | |||
|
Common ダイアログ
| アラートメッセージ | ユーザーに通知するコメント | |
| 数字ピッカー | 数字（範囲制限）をポップアップダイアルで取得 | ||
| 項目ピッカー | 特定の値をポップアップのリスト項目で取得 | ||
| HTMLテキスト | テキストスタイルを部分的に変えるため、HTML形式に対応したText | ||
| 文字制限テキスト編集 | 文字制限付きのTextField、制限文字数を超えは赤文字で閉じる時に切り捨て | ||
| 全画面テキスト編集 | 複数行のテキストを編集する時に、ポップアップ全画面でTextEditorとキーボード表示 | ||
| FitScrollView | 閾値高さで スクロールありorなしを切り替える（画面に収まるときはScrollViewにしない） | ||
|
Composition UI配置
ガイド表示 | ピアノ | ||
| スクロールエリア | |||
| 小節番号 | |||
| 小節線 | |||
| 分割線 | 拡大率によって間隔を変化 | ||
| フレーズ | フレーズがないところはフレーズ作成ボタンを表示 | ||
| ツールボタン | 選択中のツールはツール色にハイライトする | ||
| メロディーライン | ペンツールでの音符作成時の入力線 | ||
| メロディー音符 | 音符の先頭にチョボをつける | ||
| リズム音符 | ベース音符のみ下に表示 | ||
| サンプルデータ | 手入力したサンプルデータの音符を配置 | ||
| 連符 | 連符は数字で表示、拡大率によって省略 | ||
| ペンツールガイド | 長さ編集しているリズム音符、伸ばした時の削る範囲 (ドラム) 左にスワイプしている時、削除する範囲 | ||
| 指ツールガイド | 移動中の音符影、矩形選択の枠 (ドラム) 長さ編集している時、伸ばし線（iOS独自）。矩形選択の範囲 | ||
| 消しゴムツールガイド | 削除範囲、和音のみの削除範囲 (ドラム) 削除範囲 | ||
| フレーズツールガイド | フレーズ移動・伸縮のバー、選択範囲テキスト（iOS独自） | ||
| フレーズボタン | フレーズボタンとサブボタンを配置、ツールに応じてアイコンを変更、画面拡大率に応じて縮小 | ||
| フレーズタブ | ツールに応じてアイコンを変更、拡大率に応じて縮小、スクロール状態に応じて移動 | ||
| 音符描画の高速化 | 音符が多くても描画できる速さへ最適化 | ||
| 音符の編集状態 | 選択や変更した時に枠線の色変更 | ||
| 音符音階 | メロディ音符に音階表示 | ||
| 再生バー | 曲を再生している時に、再生位置をバーで表示 | ||
| 再生ボタン | 曲を再生/停止を監視して、状態を変更、再生準備が遅い時はインジケーターを表示 | ||
| 再生速度の表示 | 曲の再生速度を表示（iOS独自） | ||
| テスト音のガイド | 鳴っている音階に色をつける | ||
| ドラム音符 | 音符と連符の表示。分割線に乗っていない音符は細く表示（iOS独自） | ||
| ドラム盤 | ピアノ鍵盤の位置にドラムセットを表示 | ||
|
Composition ダイアログ
| フレーズ | フレーズの作成・設定・挿入、フレーズの長さやリピート回数の設定 | |
| 曲設定 | タイトル・テンポ、キー等の曲の設定 | ||
| トラック選択 | 編集トラックの変更・追加/削除、ボリュームやミュート等の設定 | ||
| 楽器選択 | トラックの使用楽器変更、楽器のランダム選択・選択リセット（iOS独自） | ||
| ドラム楽器一覧 | 使用ドラム楽器をリスト表示。使用楽器の編集や並び替え（iOS独自） | ||
| ドラム楽器設定 | ドラム楽器の音量調整・ミュート、削除・複製 | ||
| ドラム楽器選択 | トラックの使用ドラム楽器変更、楽器のランダム選択・選択リセット（iOS独自） | ||
|
Community (共通) UI配置
| コミュニティ | ディスプレイとコントローラーを表示。縦持ちと横持ちのレイアウト。どのディスプレイ、コントローラーを使用するかは各コミュニティ画面で派生 | |
| カテゴリーリスト群 | カテゴリー選択、カテゴリーリストを表示。どのカテゴリーリストを表示するかは各コミュニティ画面で派生 | ||
| ページスクロール | リストを表示。スワイプでリスト項目を取得。どのリスト項目を使用するかは各カテゴリーで派生 | ||
| 曲リスト項目 | 各コミュニティ画面で派生系を用意する | ||
| リレー曲リスト項目 | 左右にスワイプで前後走者の曲を表示 | ||
| その他リスト項目 | 曲ID：検索で曲ID一覧を表示、ユーザー：ユーザー検索やいいねリスト等で表示 | ||
| 曲詳細 | 曲の情報と貰ったコメントを表示、送るコメントを編集する | ||
| 曲の情報 | 曲のタイトル、作者、ランキング順位、タグ、ユーザーの反応等を表示 | ||
| 貰ったコメント | テキストとOGP | ||
| ソングビジュア | 曲再生位置の変更と可視化。曲情報でトロフィー変更。リスト/詳細ボタンで切り替え。シンプルのみ実装でリリース後に追加予定。 | ||
| カテゴリー選択 | カテゴリータブ表示。スクロール可能。選択表示。 | ||
| ユーザーアイコン | ユーザー画像、プレミアムリングを表示。タップでユーザーページへ | ||
| プレイヤー | 曲の再生、いいね・お気に入り等のボタン。現在の状況を反映 | ||
| 設定パネル | レイアウト設定、ソングビジュア設定、楽器フィルタ リリース後に実装予定 | ||
|
Community Square コミュニティ広場
UI配置 | ディスプレイ | 状況によりカテゴリー説明/ソングビジュアを切り替え。 | |
| カテゴリー説明 | 広場カテゴリーの説明 | ||
| コントローラー | カテゴリーリスト群/曲詳細を切り替え | ||
| カテゴリーリスト群 | Squareのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | カテゴリー別にリスト項目を派生（ランキングなら左にランク情報）。コンテスト項目はタップでコンテスト画面へ | ||
| イベント詳細 | コンテストの詳細情報の表示 | ||
| 絞り込み検索 | |||
|
Community UserPage ユーザーページ
UI配置 | ディスプレイ | ユーザープロフィールを表示。下へスワイプした時に隠れてヘッダーが表示されるように | |
| ユーザープロフィール | ユーザー情報、紹介文、アクティビティログ等表示 | ||
| ユーザー情報 | 名前、アイコン、リンクリスト、フォロー欄、紹介文表示 | ||
| リンクリスト | 外部リンク（X等）ボタンを並べる | ||
| フォロー欄 | フォロー、ミュート、通知ボタン | ||
| アクティビティログ | 活動レベル、投稿曲数やいいね数など表示 | ||
| ヘッダー | |||
| コントローラー | ディスプレイに追従 | ||
| カテゴリーリスト群 | UserPageのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | 開閉するプレイリスト項目を作成。 | ||
|
Community Contest コンテスト結果
UI配置 | ディスプレイ | 状況によりコンテスト概要/ソングビジュアを切り替え。 | |
| コンテスト概要 | コンテストのテーマ、内容、提案者の表示 | ||
| コントローラー | カテゴリーリスト群/曲詳細を切り替え | ||
| カテゴリーリスト群 | Contestのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | コンテストの順位や自分の投票数を表示するリスト項目に派生 | ||
|
Community ダイアログ | リストダイアログ | いいね・お気に入りをしたユーザーリスト表示、曲を含む再生リストの表示 | |
| メッセージアラート | 通知するテキストを知らせる（DLした時や削除確認など） | ||
| プロフィール編集 | 名前、アイコン、紹介文等を編集 | ||
| プレイリスト詳細 | プレイリストのタイトル、説明、作者、コメント等を表示 | ||
| プレイリスト編集 | タイトル、アイコン、曲リスト等を編集 | ||
| コンテスト投票 | 開催コンテスト曲の視聴と投票 | ||
| MIDI詳細 | 曲のテンポ、音符・トラック数、使用楽器等 | ||
| Composition | |||
|
Common 作曲共通
| データ構造 | 座標とサイズ、状態を保持する。レンダラーやコライダー、通知等のロジック | |
| コンバーター | Domainのデータ構造へ変換・逆変換 | ||
| 通知機構 | Modelに変更があった時に、Viewへ通知して再描画。変更状況を監視してキャッシュ | ||
|
Changer 曲設定変更
| テンポ変更 | 送信MIDI信号の変更 | |
| 拍子変更 | フレーズ外音符の削除、横スクロール位置を修正 | ||
| キー変更 | 送信MIDI Noの増減 | ||
| 鍵盤タイプ変更 | 鍵盤Noに応じて全ての音符位置を修正、縦スクロール位置を修正 | ||
| 編集トラック変更 | ピアノ鍵盤のサンプラー変更 | ||
| トラック設定変更 | トラック名・略称、トラック追加・複製・削除 | ||
| メロディーツール | |||
| FingerTool 指ツール
音符の編集 | データ構造 | フレーズの音符を取得、基点と移動ベクトルを保持して移動する | |
| 音符の移動 | 和音や連符は上下のみに制御 | ||
| 音符の影 | 移動中に操作できているかわかりやすいように（iOS独自） | ||
| 内外判定 | 音符の移動をフレーズ内に留める | ||
| 衝突判定 | 移動する音符が他の音符に重なったときの挙動 | ||
| タップ選択 | タップした音符の子音符も選択・解除 | ||
| 矩形選択 | 囲った音符を選択 | ||
| 音符の入れ替え | リズム音符のスライドで重なった音符と入れ替える（iOS独自） | ||
| 和音の削除 | 和音を移動した時に重なる時に削除する | ||
| 連符に切り替え | リズム音符タップで切り替え | ||
| PenTool ペンツール
音符の作成 | データ構造 | 音符を作成・分割・統合、フレーズへ音符を追加する | |
| 音符の作成 | タップで音符を作成。分割線に合わせて長さを決定 | ||
| 音符列の作成 | スワイプに沿って複数の音符を作成。音階変わる時に音符分割 | ||
| 有無判定 | タップやスワイプした縦ラインに既に音符があるか判定 | ||
| 音符の移動 | 音符が既にある場合は、作成ではなく移動。一定距離進むと移動終了 | ||
| 音符の分割 | リズム音符をタップした時、音符を分割、メロディ線に沿ってY位置を動かす | ||
| 音符の統合 | ２つのリズム音符の間をタップした場合、音符を統合 | ||
| 音符の伸縮 | リズム音符を左右にスワイプすることで音符の長さを伸縮、始点で分割なし（仕様変更） | ||
| 音符の消滅 | 音符の伸縮をした時に長さが0になると削除する（iOS独自） | ||
| 領域差演算 | 音符伸縮で他の音符に重なる時は差演算して他の音符長さを削る | ||
| サンプリング補間 | 素早くスワイプしても音符が移動できるようにサンプリング間を補間する | ||
| 細かい音符 | 分割線内の細かな音符を移動する挙動 | ||
| EraserTool 消しゴムツール
音符の削除 | データ構造 | 和音と連符の認識、フレーズから音符を削除する | |
| 音符の削除 | タップで音符を削除 | ||
| 和音・連符の削除 | 和音・連符をタップで和音・連符のみを削除（iOS独自） | ||
| 音符種別判定 | タップした音符が和音・連符・ルート音符なのか判定する | ||
| 音符列の削除 | スワイプで指定する削除範囲内の複数の音符を削除。 | ||
| 和音列の削除 | リズム音符をスワイプで複数の和音のみを削除。（iOS独自） | ||
| 休符に切り替え | リズム音符タップで休符に切り替える | ||
| ドラムツール | |||
| PenTool ペンツール
音符の作成 | データ構造 | ドラム音符を作成、フレーズへ音符を追加・削除する | |
| 音符の作成・削除 | タップでドラム音符を作成。既に音符がある場合は削除 | ||
| 音符列の作成 | スワイプで跨いだ分割線にドラム音符を作成。 | ||
| 音符列の削除 | 左にスワイプした範囲にある複数のドラム音符を削除。（iOS独自） | ||
| FingerTool 指ツール
音符の編集 | データ構造 | フレーズのドラム音符を取得、選択、長さを編集して分割する | |
| 音符長さ編集 | 音符を左右スワイプで長さを変更。長さがある時、連符になり長さ0の時連符解除 | ||
| 連符数の編集 | 音符を上下にスワイプで連符数を変更（iOS独自） | ||
| タップ選択 | タップした音符を選択・解除 | ||
| 矩形選択 | 囲った音符を選択 | ||
| EraserTool 消しゴムツール
音符の削除 | データ構造 | 音符と連符の認識、フレーズから音符を削除する | |
| 音符の削除 | 音符をタップで削除 | ||
| 休符に切り替え | 連符をタップで休符に切り替える | ||
| 音符列の削除 | スワイプで指定する削除範囲内の複数の音符を削除。 | ||
| PhraseTool フレーズツール
フレーズの編集 | データ構造 | トラックのフレーズを取得・追加、削除、状態 | |
| フレーズの作成・挿入 | ダイアログで長さとリピートを設定 | ||
| フレーズの選択 | ２点タップで範囲選択、範囲ガイドタップで選択解除（仕様変更） | ||
| フレーズの移動 | 左右スワイプで移動、移動は選択フレーズとスワイプ中のフレーズを含む | ||
| フレーズの伸縮 | サブ編集領域をスワイプした時にフレーズ長さを伸縮、長さ0で削除（iOS独自） | ||
| フレーズの貼り付け | 選択フレーズをコピー・ペースト、サブボタンかフレーズタブタップで挿入、選択解除 | ||
| 周囲有無判定 | 作成する小節の近くにフレーズがあるかの判定、設定できる長さやリピート回数の制御 | ||
| フレーズボタン・タブ | ツールに応じてフレーズボタン、タブの処理を変更 | ||
| フレーズの結合 | 連続する2フレーズの接する小節線をタップで結合（iOS独自） | ||
| フレーズの分割 | フレーズをタップで分割（iOS独自） | ||
| StampTool スタンプツール
モチーフの編集 | |||
| Transform 画面移動
座標変換 | 画面を上下移動 | ピアノのスワイプにより | |
| 画面を左右移動 | スクロールエリアのスワイプにより | ||
| 画面を拡大・縮小 | ピンチアウト・インにより基点を画面中心に設定する | ||
| 画面を拡大・縮小(軸指定) | 長押しからのドラッグ。ピアノでX軸方向、スクロールエリアでY軸方向 | ||
| ドラム座標系 | 新しくドラムの座標系を追加。下へ楽器が追加されるため、メロディーと異なり左上原点 | ||
| MIDI | コンバーター | CompositionからMIDIのデータ構造へ変換 | |
| 曲の再生 | 画面左からMIDI再生、Compositionのデータ構造から曲の再生、再生位置の同期 | ||
| 曲の再生（最初から） | 再生ボタン長押しで最初から再生 | ||
| 曲の再生（位置指定） | スクロール領域をダブルタップでその位置から再生（iOS独自） | ||
| 再生速度の変更 | ドラッグで曲の再生速度を変更（iOS独自） | ||
| 再生処理の最適化 | 曲に変更がない時はキャッシュを使う、変更通知とキャッシュの管理 | ||
| Commnity | |||
|
Common コミュニティ
| データ構造 | カテゴリ等の曲情報、いいねやお気に入り等のリスポンスを保持 | |
| CommunitySongPlayer | コミュニティ用にラップした曲プレイヤー | ||
| CategoryLists | カテゴリーリスト群のモデル。カテゴリー別にフェッチ/キャッシュ | ||
| ListInfo | カテゴリーリストのモデル、リストのスクロール位置、フェッチするページ番号等 | ||
| Context | Community共通のCommonContextと各画面のContextがある | ||
| UserActivityManager | ユーザーのアクティビティ（いいね、ミュートユーザー、再生リスト、モチーフ登録、アクセス履歴等）を管理 | ||
|
Service サービスモデル
| ListItemFetcher | カテゴリーリスト項目のMLサーバーから取得する | |
| MidiRepository | MIDIファイルをサーバーから取得して貯める | ||
| UserActivityFetcher | ユーザーの行動をMLサーバーから取得する（再生数、再生リストに含まれているか、コメント等） | ||
| MIDI | |||
|
Common MIDI共通
| データ構造 | MIDIフォーマットへ出力できる構造 | |
| コントローラー | 曲の読み込みや再生、再生位置の監視や音源の変更などMIDIの扱いを管理する | ||
| サンプラー | ピアノや音符生成時に単体のMidiイベントから音を鳴らす | ||
|
Service サービスモデル
| MidiPlayer | MIDIを再生する | |
| MidiReader | MIDIファイルの読み込み | ||
| MidiWriter | MIDIファイル出力 | ||
| Account | |||
|
Common アカウント
| データ構造 | ログインできる構造、アカウント情報、ログイン情報、MLユーザー情報 | |
| AccountManager | アカウントの管理、ログイン時にMLサーバーと通信 | ||
|
Service サービスモデル
| UserActivityRepository | ユーザーのアクティビティ（いいね、ミュートユーザー、再生リスト、モチーフ登録、アクセス履歴等）を貯める | |
| ServerCommunication | MLサーバーと通信する処理を集約 | ||
| Domain | |||
|
データ構造 Json形式 | Melody | MelodyTrack, MelodyPhrase, NoteContainer, NoteBlock, Note | |
| Drum | DrumTrack, DrumPhrase, BeatContainer, Beat | ||
| 共通化 | Original, Repeat, Syncの3種のPhraseをジェネリッククラスとプロトコルで抽象化 | ||
|
Service サービスモデル
| SongReder | Jsonファイルを読み込み、Domainのデータへ変換 | |
| SongWriter | DomainのデータからJsonファイルへ書き出し | ||
| Common | |||
|
Service サービスモデル
| リポジトリ | 保存データを管理 | |
実装の詳細
ドラム音符
ドラム音符は縦線で表示します。分割線上にある音符は太くなります。
連符は音符長さ分の尾ひれがつきます。
Androidからの仕様変更
Androidでは単符でも尾ひれをつけて、連符の色を変えて識別していました。ただリピート音符や選択音符など色を変えて識別する要素は他にもあり、この仕様の紛らわしさが気に入ってませんでした。
iOSでは単符は尾ひれなし、連符は幅分の尾ひれ付きにしました。尾ひれを無くすと見づらくなるため、分割線上の音符は太くしました。
Androidの単符と連符
iOSでは単符は尾ひれなし、連符は幅分の尾ひれ付きにしました。尾ひれを無くすと見づらくなるため、分割線上の音符は太くしました。
ドラムペンツール
ドラムフレーズ内の分割線をタップすることで、ドラム音符の作成・削除を切り替えます。
右へスワイプすることで、連続で分割線にドラム音符を置くことができます。
Androidからの仕様変更
Androidでは分割線の間をタップすることで左の分割線にドラム音符を作成していましたが、以前からタップする位置と音符の位置がズレることがわかりにくいとのご指摘がありました。
iOSでは分割線の位置へ直接タップすることでその位置に音符を置くようにして、より直感的な操作にしました。
分割線間(Android)と分割線上(iOS)
iOSでは分割線の位置へ直接タップすることでその位置に音符を置くようにして、より直感的な操作にしました。
左スワイプで削除 (iOS独自)
右スワイプで作成、左にスワイプすると囲った範囲の音符を削除します。
タップで削除することもできますが、もう少し消したい時は消しゴムツールに切り替えなくても消せるのであれば便利かと思います。
ドラム指ツール
音符を左右スワイプで長さを変更します。
長さができると、3連符になります。逆に長さがなくなると、連符が解除されます。
タップや矩形選択で音符を選択して、複数同時に長さを変更することができます。
フレーズタブをタップすると、フレーズ内の音符を全選択します。
上下スワイプで連符数を変更 (iOS独自)
上下にスワイプすることで素早く直感的に連符数を変更します。
音符伸ばしガイド線 (iOS独自)
音符の長さを変更時に音符は分割線毎に伸び縮みしますが、伸ばし加減をよりわかりやすくするためのガイドが付きます。
ドラム消しゴムツール
音符をタップして削除します。
連符はタップで休符に切り替えます。
スワイプで矩形選択した範囲の音符を削除します。
ドラムダイアログ
ドラム楽器一覧で楽器変更や音量を調整します。
ドラム楽器選択ではランダムとリセットボタンを追加しました。
ドラム楽器設定で削除や複製ができます。
ドラム楽器並び替え (iOS独自)
楽器リストをスワイプすることで並び替えします。また削除も簡単にできます。
おわりに
ドラムトラックの実装ができました =3 =3
紹介できないほどの細かい部分（座標変換など）の基盤作りが地味に大変だったけど、なんとかドラム終わりました ^^
Androidで届いている要望をiOSでは最初から盛り込めてよかった！
（完成した後だったら、なかなか手が付けづらいんですよね...バグとか怖いし(´∩｀。)）
より使いやすくなればと思います。
特にドラム楽器並び替えは嬉しいんじゃないでしょうかᐠ( ᐢ ᵕ ᐢ )ᐟ
次はハーモニートラック？？の実装していきます。
【iOS】進捗報告 9 (３大作曲ダイアログ)
musicLine(iOS)についての進捗。
今回は作曲画面の３大ダイアログについて進捗を報告します。
実装状況
| カテゴリ | タイトル | 補足 | |
| View | |||
|
Common ダイアログ
| アラートメッセージ | ユーザーに通知するコメント | |
| 数字ピッカー | 数字（範囲制限）をポップアップダイアルで取得 | ||
| 項目ピッカー | 特定の値をポップアップのリスト項目で取得 | ||
| HTMLテキスト | テキストスタイルを部分的に変えるため、HTML形式に対応したText | ||
| 文字制限テキスト編集 | 文字制限付きのTextField、制限文字数を超えは赤文字で閉じる時に切り捨て | ||
| 全画面テキスト編集 | 複数行のテキストを編集する時に、ポップアップ全画面でTextEditorとキーボード表示 | ||
| FitScrollView | 閾値高さで スクロールありorなしを切り替える（画面に収まるときはScrollViewにしない） | ||
|
Composition ダイアログ
| 曲設定 | タイトル・テンポ、キー等の曲の設定 | |
| トラック選択 | 編集トラックの変更・追加/削除、ボリュームやミュート等の設定 | ||
| 楽器選択 | トラックの使用楽器変更、楽器のランダム選択・選択リセット（iOS独自） | ||
| Composition | |||
|
Changer 曲設定変更
| テンポ変更 | 送信MIDI信号の変更 | |
| 拍子変更 | フレーズ外音符の削除、横スクロール位置を修正 | ||
| キー変更 | 送信MIDI Noの増減 | ||
| 鍵盤タイプ変更 | 鍵盤Noに応じて全ての音符位置を修正、縦スクロール位置を修正 | ||
| 編集トラック変更 | ピアノ鍵盤のサンプラー変更 | ||
| トラック設定変更 | トラック名・略称、トラック追加・複製・削除 | ||
全進捗マップを表示
| カテゴリ | タイトル | 補足 | |
| View | |||
|
Common ダイアログ
| アラートメッセージ | ユーザーに通知するコメント | |
| 数字ピッカー | 数字（範囲制限）をポップアップダイアルで取得 | ||
| 項目ピッカー | 特定の値をポップアップのリスト項目で取得 | ||
| HTMLテキスト | テキストスタイルを部分的に変えるため、HTML形式に対応したText | ||
| 文字制限テキスト編集 | 文字制限付きのTextField、制限文字数を超えは赤文字で閉じる時に切り捨て | ||
| 全画面テキスト編集 | 複数行のテキストを編集する時に、ポップアップ全画面でTextEditorとキーボード表示 | ||
| FitScrollView | 閾値高さで スクロールありorなしを切り替える（画面に収まるときはScrollViewにしない） | ||
|
Composition UI配置
ガイド表示 | ピアノ | ||
| スクロールエリア | |||
| 小節番号 | |||
| 小節線 | |||
| 分割線 | 拡大率によって間隔を変化 | ||
| フレーズ | フレーズがないところはフレーズ作成ボタンを表示 | ||
| ツールボタン | 選択中のツールはツール色にハイライトする | ||
| メロディーライン | ペンツールでの音符作成時の入力線 | ||
| メロディー音符 | 音符の先頭にチョボをつける | ||
| リズム音符 | ベース音符のみ下に表示 | ||
| サンプルデータ | 手入力したサンプルデータの音符を配置 | ||
| 連符 | 連符は数字で表示、拡大率によって省略 | ||
| ツールガイド（ペン） | 長さ編集しているリズム音符、伸ばした時の削る範囲 | ||
| ツールガイド（指） | 移動中の音符影、矩形選択の枠 | ||
| ツールガイド（消しゴム） | 削除範囲、和音のみの削除範囲 | ||
| ツールガイド（フレーズ） | フレーズ移動・伸縮のバー、選択範囲テキスト（iOS独自） | ||
| フレーズボタン | フレーズボタンとサブボタンを配置、ツールに応じてアイコンを変更、画面拡大率に応じて縮小 | ||
| フレーズタブ | ツールに応じてアイコンを変更、拡大率に応じて縮小、スクロール状態に応じて移動 | ||
| 音符描画の高速化 | 音符が多くても描画できる速さへ最適化 | ||
| 音符の編集状態 | 選択や変更した時に枠線の色変更 | ||
| 音符音階 | メロディ音符に音階表示 | ||
| 再生バー | 曲を再生している時に、再生位置をバーで表示 | ||
| 再生ボタン | 曲を再生/停止を監視して、状態を変更、再生準備が遅い時はインジケーターを表示 | ||
| 再生速度の表示 | 曲の再生速度を表示（iOS独自） | ||
| テスト音のガイド | 鳴っている音階に色をつける | ||
|
Composition ダイアログ
| フレーズ | フレーズの作成・設定・挿入、フレーズの長さやリピート回数の設定 | |
| 曲設定 | タイトル・テンポ、キー等の曲の設定 | ||
| トラック選択 | 編集トラックの変更・追加/削除、ボリュームやミュート等の設定 | ||
| 楽器選択 | トラックの使用楽器変更、楽器のランダム選択・選択リセット（iOS独自） | ||
|
Community (共通) UI配置
| コミュニティ | ディスプレイとコントローラーを表示。縦持ちと横持ちのレイアウト。どのディスプレイ、コントローラーを使用するかは各コミュニティ画面で派生 | |
| カテゴリーリスト群 | カテゴリー選択、カテゴリーリストを表示。どのカテゴリーリストを表示するかは各コミュニティ画面で派生 | ||
| ページスクロール | リストを表示。スワイプでリスト項目を取得。どのリスト項目を使用するかは各カテゴリーで派生 | ||
| 曲リスト項目 | 各コミュニティ画面で派生系を用意する | ||
| リレー曲リスト項目 | 左右にスワイプで前後走者の曲を表示 | ||
| その他リスト項目 | 曲ID：検索で曲ID一覧を表示、ユーザー：ユーザー検索やいいねリスト等で表示 | ||
| 曲詳細 | 曲の情報と貰ったコメントを表示、送るコメントを編集する | ||
| 曲の情報 | 曲のタイトル、作者、ランキング順位、タグ、ユーザーの反応等を表示 | ||
| 貰ったコメント | テキストとOGP | ||
| ソングビジュア | 曲再生位置の変更と可視化。曲情報でトロフィー変更。リスト/詳細ボタンで切り替え。シンプルのみ実装でリリース後に追加予定。 | ||
| カテゴリー選択 | カテゴリータブ表示。スクロール可能。選択表示。 | ||
| ユーザーアイコン | ユーザー画像、プレミアムリングを表示。タップでユーザーページへ | ||
| プレイヤー | 曲の再生、いいね・お気に入り等のボタン。現在の状況を反映 | ||
| 設定パネル | レイアウト設定、ソングビジュア設定、楽器フィルタ リリース後に実装予定 | ||
|
Community Square コミュニティ広場
UI配置 | ディスプレイ | 状況によりカテゴリー説明/ソングビジュアを切り替え。 | |
| カテゴリー説明 | 広場カテゴリーの説明 | ||
| コントローラー | カテゴリーリスト群/曲詳細を切り替え | ||
| カテゴリーリスト群 | Squareのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | カテゴリー別にリスト項目を派生（ランキングなら左にランク情報）。コンテスト項目はタップでコンテスト画面へ | ||
| イベント詳細 | コンテストの詳細情報の表示 | ||
| 絞り込み検索 | |||
|
Community UserPage ユーザーページ
UI配置 | ディスプレイ | ユーザープロフィールを表示。下へスワイプした時に隠れてヘッダーが表示されるように | |
| ユーザープロフィール | ユーザー情報、紹介文、アクティビティログ等表示 | ||
| ユーザー情報 | 名前、アイコン、リンクリスト、フォロー欄、紹介文表示 | ||
| リンクリスト | 外部リンク（X等）ボタンを並べる | ||
| フォロー欄 | フォロー、ミュート、通知ボタン | ||
| アクティビティログ | 活動レベル、投稿曲数やいいね数など表示 | ||
| ヘッダー | |||
| コントローラー | ディスプレイに追従 | ||
| カテゴリーリスト群 | UserPageのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | 開閉するプレイリスト項目を作成。 | ||
|
Community Contest コンテスト結果
UI配置 | ディスプレイ | 状況によりコンテスト概要/ソングビジュアを切り替え。 | |
| コンテスト概要 | コンテストのテーマ、内容、提案者の表示 | ||
| コントローラー | カテゴリーリスト群/曲詳細を切り替え | ||
| カテゴリーリスト群 | Contestのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | コンテストの順位や自分の投票数を表示するリスト項目に派生 | ||
|
Community ダイアログ | リストダイアログ | いいね・お気に入りをしたユーザーリスト表示、曲を含む再生リストの表示 | |
| メッセージアラート | 通知するテキストを知らせる（DLした時や削除確認など） | ||
| プロフィール編集 | 名前、アイコン、紹介文等を編集 | ||
| プレイリスト詳細 | プレイリストのタイトル、説明、作者、コメント等を表示 | ||
| プレイリスト編集 | タイトル、アイコン、曲リスト等を編集 | ||
| コンテスト投票 | 開催コンテスト曲の視聴と投票 | ||
| MIDI詳細 | 曲のテンポ、音符・トラック数、使用楽器等 | ||
| Composition | |||
|
Common 作曲共通
| データ構造 | 座標とサイズ、状態を保持する。レンダラーやコライダー、通知等のロジック | |
| コンバーター | Domainのデータ構造へ変換・逆変換 | ||
| 通知機構 | Modelに変更があった時に、Viewへ通知して再描画。変更状況を監視してキャッシュ | ||
|
Changer 曲設定変更
| テンポ変更 | 送信MIDI信号の変更 | |
| 拍子変更 | フレーズ外音符の削除、横スクロール位置を修正 | ||
| キー変更 | 送信MIDI Noの増減 | ||
| 鍵盤タイプ変更 | 鍵盤Noに応じて全ての音符位置を修正、縦スクロール位置を修正 | ||
| 編集トラック変更 | ピアノ鍵盤のサンプラー変更 | ||
| トラック設定変更 | トラック名・略称、トラック追加・複製・削除 | ||
| FingerTool 指ツール
音符の編集 | データ構造 | フレーズの音符を取得、基点と移動ベクトルを保持して移動する | |
| 音符の移動 | 和音や連符は上下のみに制御 | ||
| 音符の影 | 移動中に操作できているかわかりやすいように（iOS独自） | ||
| 内外判定 | 音符の移動をフレーズ内に留める | ||
| 衝突判定 | 移動する音符が他の音符に重なったときの挙動 | ||
| タップ選択 | タップした音符の子音符も選択・解除 | ||
| 矩形選択 | 囲った音符を選択 | ||
| 音符の入れ替え | リズム音符のスライドで重なった音符と入れ替える（iOS独自） | ||
| 和音の削除 | 和音を移動した時に重なる時に削除する | ||
| 連符に切り替え | リズム音符タップで切り替え | ||
| PenTool ペンツール
音符の作成 | データ構造 | 音符を作成・分割・統合、フレーズへ音符を追加する | |
| 音符の作成 | タップで音符を作成。分割線に合わせて長さを決定 | ||
| 音符列の作成 | スワイプに沿って複数の音符を作成。音階変わる時に音符分割 | ||
| 有無判定 | タップやスワイプした縦ラインに既に音符があるか判定 | ||
| 音符の移動 | 音符が既にある場合は、作成ではなく移動。一定距離進むと移動終了 | ||
| 音符の分割 | リズム音符をタップした時、音符を分割、メロディ線に沿ってY位置を動かす | ||
| 音符の統合 | ２つのリズム音符の間をタップした場合、音符を統合 | ||
| 音符の伸縮 | リズム音符を左右にスワイプすることで音符の長さを伸縮、始点で分割なし（仕様変更） | ||
| 音符の消滅 | 音符の伸縮をした時に長さが0になると削除する（iOS独自） | ||
| 領域差演算 | 音符伸縮で他の音符に重なる時は差演算して他の音符長さを削る | ||
| サンプリング補間 | 素早くスワイプしても音符が移動できるようにサンプリング間を補間する | ||
| 細かい音符 | 分割線内の細かな音符を移動する挙動 | ||
| EraserTool 消しゴムツール
音符の削除 | データ構造 | 和音と連符の認識、フレーズから音符を削除する | |
| 音符の削除 | タップで音符を削除 | ||
| 和音・連符の削除 | 和音・連符をタップで和音・連符のみを削除（iOS独自） | ||
| 音符種別判定 | タップした音符が和音・連符・ルート音符なのか判定する | ||
| 音符列の削除 | スワイプで指定する削除範囲内の複数の音符を削除。 | ||
| 和音列の削除 | リズム音符をスワイプで複数の和音のみを削除。（iOS独自） | ||
| 休符に切り替え | リズム音符タップで休符に切り替える | ||
| PhraseTool フレーズツール
フレーズの編集 | データ構造 | トラックのフレーズを取得・追加、削除、状態 | |
| フレーズの作成・挿入 | ダイアログで長さとリピートを設定 | ||
| フレーズの選択 | ２点タップで範囲選択、範囲ガイドタップで選択解除（仕様変更） | ||
| フレーズの移動 | 左右スワイプで移動、移動は選択フレーズとスワイプ中のフレーズを含む | ||
| フレーズの伸縮 | サブ編集領域をスワイプした時にフレーズ長さを伸縮、長さ0で削除（iOS独自） | ||
| フレーズの貼り付け | 選択フレーズをコピー・ペースト、サブボタンかフレーズタブタップで挿入、選択解除 | ||
| 周囲有無判定 | 作成する小節の近くにフレーズがあるかの判定、設定できる長さやリピート回数の制御 | ||
| フレーズボタン・タブ | ツールに応じてフレーズボタン、タブの処理を変更 | ||
| フレーズの結合 | 連続する2フレーズの接する小節線をタップで結合（iOS独自） | ||
| フレーズの分割 | フレーズをタップで分割（iOS独自） | ||
| StampTool スタンプツール
モチーフの編集 | |||
| Transform 画面移動
座標変換 | 画面を上下移動 | ピアノのスワイプにより | |
| 画面を左右移動 | スクロールエリアのスワイプにより | ||
| 画面を拡大・縮小 | ピンチアウト・インにより基点を画面中心に設定する | ||
| 画面を拡大・縮小(軸指定) | 長押しからのドラッグ。ピアノでX軸方向、スクロールエリアでY軸方向 | ||
| MIDI | コンバーター | CompositionからMIDIのデータ構造へ変換 | |
| 曲の再生 | 画面左からMIDI再生、Compositionのデータ構造から曲の再生、再生位置の同期 | ||
| 曲の再生（最初から） | 再生ボタン長押しで最初から再生 | ||
| 曲の再生（位置指定） | スクロール領域をダブルタップでその位置から再生（iOS独自） | ||
| 再生速度の変更 | ドラッグで曲の再生速度を変更（iOS独自） | ||
| 再生処理の最適化 | 曲に変更がない時はキャッシュを使う、変更通知とキャッシュの管理 | ||
| Commnity | |||
|
Common コミュニティ
| データ構造 | カテゴリ等の曲情報、いいねやお気に入り等のリスポンスを保持 | |
| CommunitySongPlayer | コミュニティ用にラップした曲プレイヤー | ||
| CategoryLists | カテゴリーリスト群のモデル。カテゴリー別にフェッチ/キャッシュ | ||
| ListInfo | カテゴリーリストのモデル、リストのスクロール位置、フェッチするページ番号等 | ||
| Context | Community共通のCommonContextと各画面のContextがある | ||
| UserActivityManager | ユーザーのアクティビティ（いいね、ミュートユーザー、再生リスト、モチーフ登録、アクセス履歴等）を管理 | ||
|
Service サービスモデル
| ListItemFetcher | カテゴリーリスト項目のMLサーバーから取得する | |
| MidiRepository | MIDIファイルをサーバーから取得して貯める | ||
| UserActivityFetcher | ユーザーの行動をMLサーバーから取得する（再生数、再生リストに含まれているか、コメント等） | ||
| MIDI | |||
|
Common MIDI共通
| データ構造 | MIDIフォーマットへ出力できる構造 | |
| コントローラー | 曲の読み込みや再生、再生位置の監視や音源の変更などMIDIの扱いを管理する | ||
| サンプラー | ピアノや音符生成時に単体のMidiイベントから音を鳴らす | ||
|
Service サービスモデル
| MidiPlayer | MIDIを再生する | |
| MidiReader | MIDIファイルの読み込み | ||
| MidiWriter | MIDIファイル出力 | ||
| Account | |||
|
Common アカウント
| データ構造 | ログインできる構造、アカウント情報、ログイン情報、MLユーザー情報 | |
| AccountManager | アカウントの管理、ログイン時にMLサーバーと通信 | ||
|
Service サービスモデル
| UserActivityRepository | ユーザーのアクティビティ（いいね、ミュートユーザー、再生リスト、モチーフ登録、アクセス履歴等）を貯める | |
| ServerCommunication | MLサーバーと通信する処理を集約 | ||
| Domain | |||
|
データ構造 Json形式 | Melody | MelodyTrack, MelodyPhrase, NoteContainer, NoteBlock, Note | |
| Drum | DrumTrack, DrumPhrase, BeatContainer, Beat | ||
| 共通化 | Original, Repeat, Syncの3種のPhraseをジェネリッククラスとプロトコルで抽象化 | ||
|
Service サービスモデル
| SongReder | Jsonファイルを読み込み、Domainのデータへ変換 | |
| SongWriter | DomainのデータからJsonファイルへ書き出し | ||
| Common | |||
|
Service サービスモデル
| リポジトリ | 保存データを管理 | |
実装の詳細
曲設定ダイアログ
以下の曲設定を変更します。
- タイトル
- テンポ
- 拍子
- キー
- 鍵盤種別
曲設定の変更時に、変更した音を確認できるように曲を再生します。
設定変更時にトラック毎に保持しているMIDIキャッシュを全てクリアします。
拍子の変更
拍子変更で、１小節の拍数と１拍の長さを設定するため、小節長さが変わります。
小節長さが短くなる時、フレーズ外に出た音符を削除します。また、音符がフレーズの境目にある時、フレーズ外に出ないように音符長さを短くします。
なお小節長さを変更すると、横スクロール位置がズレてしまうので、現在の小節位置を維持するように位置を修正します。
また小節長さが短くなる時、フレーズ外の音符を削除して良いかアラートで知らせます。
（今後UNDO/REDO機能が実装されても元に戻せない処理）
鍵盤種別の変更
鍵盤の変更に応じて、音符のY位置を変更します。
黒鍵盤を挿入する際は音階の変更はありませんが、ツール編集の都合で下からの鍵盤インデックスで保持しているため、音符Y位置の変更が必要です。
なお鍵盤数が変わると、縦スクロール位置がズレてしまうので、画面中心の鍵盤位置を維持するように位置を修正します。
黒鍵盤を除去する場合は、黒鍵盤の音階が変わってしまうため、アラートで知らせます。
ちなみに、黒鍵盤ON/OFFではピアノの見た目が変わります。OFFの場合は黒鍵盤を使わないので目立たないようにしてます。
トラック 選択/設定 ダイアログ
トラック一覧を表示し、編集するトラックを選択します。
編集トラック選択時に、ピアノ鍵盤のサンプラーをトラックの使用楽器へ変更します。
このダイアログで新しいトラックを追加/複製、削除も行います。
また、以下のトラック設定を変更できます。
- ボリューム
- ミュート設定
- 可視設定
- トラック名/略称
- メモ
- 使用楽器
トラックの音符色
編集トラックの音符は青色ですが、背景トラックは音符色でわかるようにトラック毎に色が変わります。
なお、ミュートトラックは灰色で可視設定で非表示にすることもできます。
乗算ブレンディング
背景トラックの描画ブレンドには乗算を使用しています。
重なった部分を見せるために、半透明にしてアルファブレンドすることが一般的ですが、半透明だと重ならないときが見えづらくなるので、乗算ブレンドにしています。
乗算ブレンドでは重なったときのみ色が変わるため、編集トラックの音符よりも目立たないような薄い色を使用している場合に有効です。
楽器選択ダイアログ
トラックの使用楽器を選択します。
ダイアログ開く際に、現在使用している楽器にスクロールします。またカテゴリーを変更する時には、リストの先頭へスクロールします。
楽器選択時に変更した楽器で曲を再生します。
選択した楽器をもう一度タップするとダイアログを閉じます。
ランダム・リセットボタン（iOS独自）
カテゴリーの最後にランダムボタンとリセットボタンを追加しました。
楽器選びに迷った時はランダムボタンで楽器をランダムに選択します。思いもよらぬ曲ができるかも！？
楽器選択で迷ったけど元の楽器へ戻したい時はリセットボタンを使ってください。
他のダイアログ
アラートメッセージ
ユーザーにコメントを通知して、判断を仰ぐダイアログです。
ボタンの数は1, 2, 3と変更でき、選択肢を選ぶことができます。
汎用的に使用できるように、モデルから表示要求して選択肢に応じてコールバックするように作りました。
数字ピッカー
テキストをタップした時にポップアップで数字ダイアログを表示します。
数字の範囲を決めれますが、ステップは1固定です。
項目ピッカー
テキストをタップした時に、テキストの下にポップアップでリストを表示します。
リスト項目は数字に限らず、@Bindingで選択した値を取得します。
HTMLテキスト
部分的にテキストスタイルを変更できる、HTML形式に対応したTextです。
TextWithHTML("fps : <font size='+5' color='red'>30</font>", defultColor: .blue)
文字制限テキスト編集
文字数制限を設定できるTextFieldです。
制限文字数を超える時は赤文字になります。なお赤文字のままダイアログを閉じると切り捨てになります。
全画面テキスト編集
テキストをタップした時に、ポップアップで全体にTextEditorとキーボードを表示します。複数行のテキストを編集する時に、他に余計な項目があると邪魔だったりするので実装しました。
また文字数制限の設定もでき、制限数を超えた時は決定ができなくしてます。
曲再生時の挙動
曲の再生中は鳴っている音階の鍵盤に色をつけます。
曲再生中に音符・フレーズに変更があれば、色がつきます。
再生中の変更はすぐに音に反映されず、再度再生した時に変更が反映されます。
おわりに
作曲で主に使うダイアログ3種はスムーズに実装できましたー^ ^
特に編集トラックの変更は、意味不明な不具合が出るんだろうなと意気込んでましたが、意外と最小限の修正に収まることが出来ました！！
さらに数字ピッカーや項目ピッカーなどは今後のダイアログ作りにも役立ちそうですᐠ( ᐢ ᵕ ᐢ )ᐟ
次からはドラムトラックを実装していきます。
【iOS】進捗報告 8 (コミュニティ)
musicLine(iOS)についての進捗。
コミュニティについて報告します。
はじめに
今まで作曲画面の進捗を報告していましたが、一時中断してコミュニティの開発を進めてたので今回はコミュニティの進捗です。
最近全然ブログ更新できてなかったので、今回は大ボリュームです！！画像だけでも見てってください〜😂
では、まず画面構成を確認してから実装状況を見ていきたいと思います。
画面構成
Androidアプリのスクショで画面構成を確認します。
コミュニティの3画面
Square
UserPage
Contest
コミュニティ広場と命名
コミュニティと言えば、新着やランキングカテゴリー等ある画面を指しますが、設計/実装する時にはコミュニティ広場Squareとします。
これはより正確に認識を合わせるためです。
コミュニティ3画面の構成は似たような作りになっており（特にコミュニティ広場とコンテスト）、共通の処理を使い回したりします。その際に、Community表記だとコミュニティ３画面全体を指すのか、コミュニティ広場を指すのかが名前だけでは分からないのが問題になりました。そのため、Community表記だと３画面全体、Squareだとコミュニティ広場と定義し、クラスや関数名だけで関係性がわかるようにしました。
ディスプレイとコントローラー
コミュニティの3画面は似たような画面構成になっており、各画面をディスプレイDisplayとコントローラーController の領域に分けて設計します。
Square
UserPage
Contest
ディスプレイ
ディスプレイDisplayは、画面上部（横持ちだと画面左部）の領域を指します。
広場・コンテストではカテゴリー説明やコンテスト内容が表示され、曲選択でソングビジュアSongVisuaに切り替わります。
ユーザーページのディスプレイはスクロールで隠れるように動作します。
コントローラー
コントローラーControllerは、画面下部（横持ちだと画面右部）の領域を指します。
3画面ともヘッダーには横一列にカテゴリータブが並び、選択できるようになっています。（カテゴリーによりヘッダーの一部が変わります）
カテゴリー選択でリストCategoryListが表示され、項目CategoryListItemをタップして曲やコンテストを選択します。
なお、コントローラーは項目の選択だけではなく、詳細画面に切り替えて内容を確認する役割もあります。
画面構成の意義
画面構成を考えることは複数の利点があります。
例えば、画面構成を分析することでコミュニティ３画面で似たような部分がわかり、共通化につながります。また画面構成の名前を決めることで、変数や関数名等の表記ブレを無くし、勘違いによる不具合を防ぎます。さらに画面構成を決めることで進捗報告等の認識合わせする時に、どの部分について言及しているのかが正確にわかります。
ただ、あまり正確に決めすぎると面倒くさくなるので、外枠の大事なところだけに絞る方がいいと思います。やっぱり追加実装や開発を進めていくと設計通りにはいかず、設計書の内容と異なっていきます。その違いを修正するにも労力がいるので、バランスは考えないといけないですね。
実装状況
| カテゴリ | タイトル | 補足 | |
| View | |||
|
Community (共通) UI配置
| コミュニティ | ディスプレイとコントローラーを表示。縦持ちと横持ちのレイアウト。どのディスプレイ、コントローラーを使用するかは各コミュニティ画面で派生 | |
| カテゴリーリスト群 | カテゴリー選択、カテゴリーリストを表示。どのカテゴリーリストを表示するかは各コミュニティ画面で派生 | ||
| ページスクロール | リストを表示。スワイプでリスト項目を取得。どのリスト項目を使用するかは各カテゴリーで派生 | ||
| 曲リスト項目 | 各コミュニティ画面で派生系を用意する | ||
| リレー曲リスト項目 | 左右にスワイプで前後走者の曲を表示 | ||
| その他リスト項目 | 曲ID：検索で曲ID一覧を表示、ユーザー：ユーザー検索やいいねリスト等で表示 | ||
| 曲詳細 | 曲の情報と貰ったコメントを表示、送るコメントを編集する | ||
| 曲の情報 | 曲のタイトル、作者、ランキング順位、タグ、ユーザーの反応等を表示 | ||
| 貰ったコメント | テキストとOGP | ||
| ソングビジュア | 曲再生位置の変更と可視化。曲情報でトロフィー変更。リスト/詳細ボタンで切り替え。シンプルのみ実装でリリース後に追加予定。 | ||
| カテゴリー選択 | カテゴリータブ表示。スクロール可能。選択表示。 | ||
| ユーザーアイコン | ユーザー画像、プレミアムリングを表示。タップでユーザーページへ | ||
| プレイヤー | 曲の再生、いいね・お気に入り等のボタン。現在の状況を反映 | ||
| 設定パネル | レイアウト設定、ソングビジュア設定、楽器フィルタ リリース後に実装予定 | ||
|
Community Square コミュニティ広場
UI配置 | ディスプレイ | 状況によりカテゴリー説明/ソングビジュアを切り替え。 | |
| カテゴリー説明 | 広場カテゴリーの説明 | ||
| コントローラー | カテゴリーリスト群/曲詳細を切り替え | ||
| カテゴリーリスト群 | Squareのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | カテゴリー別にリスト項目を派生（ランキングなら左にランク情報）。コンテスト項目はタップでコンテスト画面へ | ||
| イベント詳細 | コンテストの詳細情報の表示 | ||
| 絞り込み検索 | |||
|
Community UserPage ユーザーページ
UI配置 | ディスプレイ | ユーザープロフィールを表示。下へスワイプした時に隠れてヘッダーが表示されるように | |
| ユーザープロフィール | ユーザー情報、紹介文、アクティビティログ等表示 | ||
| ユーザー情報 | 名前、アイコン、リンクリスト、フォロー欄、紹介文表示 | ||
| リンクリスト | 外部リンク（X等）ボタンを並べる | ||
| フォロー欄 | フォロー、ミュート、通知ボタン | ||
| アクティビティログ | 活動レベル、投稿曲数やいいね数など表示 | ||
| ヘッダー | |||
| コントローラー | ディスプレイに追従 | ||
| カテゴリーリスト群 | UserPageのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | 開閉するプレイリスト項目を作成。 | ||
|
Community Contest コンテスト結果
UI配置 | ディスプレイ | 状況によりコンテスト概要/ソングビジュアを切り替え。 | |
| コンテスト概要 | コンテストのテーマ、内容、提案者の表示 | ||
| コントローラー | カテゴリーリスト群/曲詳細を切り替え | ||
| カテゴリーリスト群 | Contestのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | コンテストの順位や自分の投票数を表示するリスト項目に派生 | ||
|
Community ダイアログ | リストダイアログ | いいね・お気に入りをしたユーザーリスト表示、曲を含む再生リストの表示 | |
| メッセージアラート | 通知するテキストを知らせる（DLした時や削除確認など） | ||
| プロフィール編集 | 名前、アイコン、紹介文等を編集 | ||
| プレイリスト詳細 | プレイリストのタイトル、説明、作者、コメント等を表示 | ||
| プレイリスト編集 | タイトル、アイコン、曲リスト等を編集 | ||
| コンテスト投票 | 開催コンテスト曲の視聴と投票 | ||
| MIDI詳細 | 曲のテンポ、音符・トラック数、使用楽器等 | ||
| Commnity | |||
|
Common コミュニティ
| データ構造 | カテゴリ等の曲情報、いいねやお気に入り等のリスポンスを保持 | |
| CommunitySongPlayer | コミュニティ用にラップした曲プレイヤー | ||
| CategoryLists | カテゴリーリスト群のモデル。カテゴリー別にフェッチ/キャッシュ | ||
| ListInfo | カテゴリーリストのモデル、リストのスクロール位置、フェッチするページ番号等 | ||
| Context | Community共通のCommonContextと各画面のContextがある | ||
| UserActivityManager | ユーザーのアクティビティ（いいね、ミュートユーザー、再生リスト、モチーフ登録、アクセス履歴等）を管理 | ||
|
Service サービスモデル
| ListItemFetcher | カテゴリーリスト項目のMLサーバーから取得する | |
| MidiRepository | MIDIファイルをサーバーから取得して貯める | ||
| UserActivityFetcher | ユーザーの行動をMLサーバーから取得する（再生数、再生リストに含まれているか、コメント等） | ||
| Account | |||
|
Common アカウント
| データ構造 | ログインできる構造、アカウント情報、ログイン情報、MLユーザー情報 | |
| AccountManager | アカウントの管理、ログイン時にMLサーバーと通信 | ||
|
Service サービスモデル
| UserActivityRepository | ユーザーのアクティビティ（いいね、ミュートユーザー、再生リスト、モチーフ登録、アクセス履歴等）を貯める | |
| ServerCommunication | MLサーバーと通信する処理を集約 | ||
全進捗マップを表示
| カテゴリ | タイトル | 補足 | |
| View | |||
|
Composition UI配置
ガイド表示 | ピアノ | ||
| スクロールエリア | |||
| 小節番号 | |||
| 小節線 | |||
| 分割線 | 拡大率によって間隔を変化 | ||
| フレーズ | フレーズがないところはフレーズ作成ボタンを表示 | ||
| ツールボタン | 選択中のツールはツール色にハイライトする | ||
| メロディーライン | ペンツールでの音符作成時の入力線 | ||
| メロディー音符 | 音符の先頭にチョボをつける | ||
| リズム音符 | ベース音符のみ下に表示 | ||
| サンプルデータ | 手入力したサンプルデータの音符を配置 | ||
| 連符 | 連符は数字で表示、拡大率によって省略 | ||
| ツールガイド（ペン） | 長さ編集しているリズム音符、伸ばした時の削る範囲 | ||
| ツールガイド（指） | 移動中の音符影、矩形選択の枠 | ||
| ツールガイド（消しゴム） | 削除範囲、和音のみの削除範囲 | ||
| ツールガイド（フレーズ） | フレーズ移動・伸縮のバー、選択範囲テキスト（iOS独自） | ||
| フレーズボタン | フレーズボタンとサブボタンを配置、ツールに応じてアイコンを変更、画面拡大率に応じて縮小 | ||
| フレーズタブ | ツールに応じてアイコンを変更、拡大率に応じて縮小、スクロール状態に応じて移動 | ||
| 音符描画の高速化 | 音符が多くても描画できる速さへ最適化 | ||
| 音符の編集状態 | 選択や変更した時に枠線の色変更 | ||
| 音符音階 | メロディ音符に音階表示 | ||
| 再生バー | 曲を再生している時に、再生位置をバーで表示 | ||
| 再生ボタン | 曲を再生/停止を監視して、状態を変更、再生準備が遅い時はインジケーターを表示 | ||
| 再生速度の表示 | 曲の再生速度を表示（iOS独自） | ||
| テスト音のガイド | 鳴っている音階に色をつける | ||
|
Composition ダイアログ
| フレーズ | フレーズの作成・設定・挿入、フレーズの長さやリピート回数の設定 | |
|
Community (共通) UI配置
| コミュニティ | ディスプレイとコントローラーを表示。縦持ちと横持ちのレイアウト。どのディスプレイ、コントローラーを使用するかは各コミュニティ画面で派生 | |
| カテゴリーリスト群 | カテゴリー選択、カテゴリーリストを表示。どのカテゴリーリストを表示するかは各コミュニティ画面で派生 | ||
| ページスクロール | リストを表示。スワイプでリスト項目を取得。どのリスト項目を使用するかは各カテゴリーで派生 | ||
| 曲リスト項目 | 各コミュニティ画面で派生系を用意する | ||
| リレー曲リスト項目 | 左右にスワイプで前後走者の曲を表示 | ||
| その他リスト項目 | 曲ID：検索で曲ID一覧を表示、ユーザー：ユーザー検索やいいねリスト等で表示 | ||
| 曲詳細 | 曲の情報と貰ったコメントを表示、送るコメントを編集する | ||
| 曲の情報 | 曲のタイトル、作者、ランキング順位、タグ、ユーザーの反応等を表示 | ||
| 貰ったコメント | テキストとOGP | ||
| ソングビジュア | 曲再生位置の変更と可視化。曲情報でトロフィー変更。リスト/詳細ボタンで切り替え。シンプルのみ実装でリリース後に追加予定。 | ||
| カテゴリー選択 | カテゴリータブ表示。スクロール可能。選択表示。 | ||
| ユーザーアイコン | ユーザー画像、プレミアムリングを表示。タップでユーザーページへ | ||
| プレイヤー | 曲の再生、いいね・お気に入り等のボタン。現在の状況を反映 | ||
| 設定パネル | レイアウト設定、ソングビジュア設定、楽器フィルタ リリース後に実装予定 | ||
|
Community Square コミュニティ広場
UI配置 | ディスプレイ | 状況によりカテゴリー説明/ソングビジュアを切り替え。 | |
| カテゴリー説明 | 広場カテゴリーの説明 | ||
| コントローラー | カテゴリーリスト群/曲詳細を切り替え | ||
| カテゴリーリスト群 | Squareのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | カテゴリー別にリスト項目を派生（ランキングなら左にランク情報）。コンテスト項目はタップでコンテスト画面へ | ||
| イベント詳細 | コンテストの詳細情報の表示 | ||
| 絞り込み検索 | |||
|
Community UserPage ユーザーページ
UI配置 | ディスプレイ | ユーザープロフィールを表示。下へスワイプした時に隠れてヘッダーが表示されるように | |
| ユーザープロフィール | ユーザー情報、紹介文、アクティビティログ等表示 | ||
| ユーザー情報 | 名前、アイコン、リンクリスト、フォロー欄、紹介文表示 | ||
| リンクリスト | 外部リンク（X等）ボタンを並べる | ||
| フォロー欄 | フォロー、ミュート、通知ボタン | ||
| アクティビティログ | 活動レベル、投稿曲数やいいね数など表示 | ||
| ヘッダー | |||
| コントローラー | ディスプレイに追従 | ||
| カテゴリーリスト群 | UserPageのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | 開閉するプレイリスト項目を作成。 | ||
|
Community Contest コンテスト結果
UI配置 | ディスプレイ | 状況によりコンテスト概要/ソングビジュアを切り替え。 | |
| コンテスト概要 | コンテストのテーマ、内容、提案者の表示 | ||
| コントローラー | カテゴリーリスト群/曲詳細を切り替え | ||
| カテゴリーリスト群 | Contestのカテゴリーリストを切り替えるように派生 | ||
| リスト項目 | コンテストの順位や自分の投票数を表示するリスト項目に派生 | ||
|
Community ダイアログ | リストダイアログ | いいね・お気に入りをしたユーザーリスト表示、曲を含む再生リストの表示 | |
| メッセージアラート | 通知するテキストを知らせる（DLした時や削除確認など） | ||
| プロフィール編集 | 名前、アイコン、紹介文等を編集 | ||
| プレイリスト詳細 | プレイリストのタイトル、説明、作者、コメント等を表示 | ||
| プレイリスト編集 | タイトル、アイコン、曲リスト等を編集 | ||
| コンテスト投票 | 開催コンテスト曲の視聴と投票 | ||
| MIDI詳細 | 曲のテンポ、音符・トラック数、使用楽器等 | ||
| Composition | |||
|
Common 作曲共通
| データ構造 | 座標とサイズ、状態を保持する。レンダラーやコライダー、通知等のロジック | |
| コンバーター | Domainのデータ構造へ変換・逆変換 | ||
| 通知機構 | Modelに変更があった時に、Viewへ通知して再描画。変更状況を監視してキャッシュ | ||
| FingerTool 指ツール
音符の編集 | データ構造 | フレーズの音符を取得、基点と移動ベクトルを保持して移動する | |
| 音符の移動 | 和音や連符は上下のみに制御 | ||
| 音符の影 | 移動中に操作できているかわかりやすいように（iOS独自） | ||
| 内外判定 | 音符の移動をフレーズ内に留める | ||
| 衝突判定 | 移動する音符が他の音符に重なったときの挙動 | ||
| タップ選択 | タップした音符の子音符も選択・解除 | ||
| 矩形選択 | 囲った音符を選択 | ||
| 音符の入れ替え | リズム音符のスライドで重なった音符と入れ替える（iOS独自） | ||
| 和音の削除 | 和音を移動した時に重なる時に削除する | ||
| 連符に切り替え | リズム音符タップで切り替え | ||
| PenTool ペンツール
音符の作成 | データ構造 | 音符を作成・分割・統合、フレーズへ音符を追加する | |
| 音符の作成 | タップで音符を作成。分割線に合わせて長さを決定 | ||
| 音符列の作成 | スワイプに沿って複数の音符を作成。音階変わる時に音符分割 | ||
| 有無判定 | タップやスワイプした縦ラインに既に音符があるか判定 | ||
| 音符の移動 | 音符が既にある場合は、作成ではなく移動。一定距離進むと移動終了 | ||
| 音符の分割 | リズム音符をタップした時、音符を分割、メロディ線に沿ってY位置を動かす | ||
| 音符の統合 | ２つのリズム音符の間をタップした場合、音符を統合 | ||
| 音符の伸縮 | リズム音符を左右にスワイプすることで音符の長さを伸縮、始点で分割なし（仕様変更） | ||
| 音符の消滅 | 音符の伸縮をした時に長さが0になると削除する（iOS独自） | ||
| 領域差演算 | 音符伸縮で他の音符に重なる時は差演算して他の音符長さを削る | ||
| サンプリング補間 | 素早くスワイプしても音符が移動できるようにサンプリング間を補間する | ||
| 細かい音符 | 分割線内の細かな音符を移動する挙動 | ||
| EraserTool 消しゴムツール
音符の削除 | データ構造 | 和音と連符の認識、フレーズから音符を削除する | |
| 音符の削除 | タップで音符を削除 | ||
| 和音・連符の削除 | 和音・連符をタップで和音・連符のみを削除（iOS独自） | ||
| 音符種別判定 | タップした音符が和音・連符・ルート音符なのか判定する | ||
| 音符列の削除 | スワイプで指定する削除範囲内の複数の音符を削除。 | ||
| 和音列の削除 | リズム音符をスワイプで複数の和音のみを削除。（iOS独自） | ||
| 休符に切り替え | リズム音符タップで休符に切り替える | ||
| PhraseTool フレーズツール
フレーズの編集 | データ構造 | トラックのフレーズを取得・追加、削除、状態 | |
| フレーズの作成・挿入 | ダイアログで長さとリピートを設定 | ||
| フレーズの選択 | ２点タップで範囲選択、範囲ガイドタップで選択解除（仕様変更） | ||
| フレーズの移動 | 左右スワイプで移動、移動は選択フレーズとスワイプ中のフレーズを含む | ||
| フレーズの伸縮 | サブ編集領域をスワイプした時にフレーズ長さを伸縮、長さ0で削除（iOS独自） | ||
| フレーズの貼り付け | 選択フレーズをコピー・ペースト、サブボタンかフレーズタブタップで挿入、選択解除 | ||
| 周囲有無判定 | 作成する小節の近くにフレーズがあるかの判定、設定できる長さやリピート回数の制御 | ||
| フレーズボタン・タブ | ツールに応じてフレーズボタン、タブの処理を変更 | ||
| フレーズの結合 | 連続する2フレーズの接する小節線をタップで結合（iOS独自） | ||
| フレーズの分割 | フレーズをタップで分割（iOS独自） | ||
| StampTool スタンプツール
モチーフの編集 | |||
| Transform 画面移動
座標変換 | 画面を上下移動 | ピアノのスワイプにより | |
| 画面を左右移動 | スクロールエリアのスワイプにより | ||
| 画面を拡大・縮小 | ピンチアウト・インにより基点を画面中心に設定する | ||
| 画面を拡大・縮小(軸指定) | 長押しからのドラッグ。ピアノでX軸方向、スクロールエリアでY軸方向 | ||
| MIDI | コンバーター | CompositionからMIDIのデータ構造へ変換 | |
| 曲の再生 | 画面左からMIDI再生、Compositionのデータ構造から曲の再生、再生位置の同期 | ||
| 曲の再生（最初から） | 再生ボタン長押しで最初から再生 | ||
| 曲の再生（位置指定） | スクロール領域をダブルタップでその位置から再生（iOS独自） | ||
| 再生速度の変更 | ドラッグで曲の再生速度を変更（iOS独自） | ||
| 再生処理の最適化 | 曲に変更がない時はキャッシュを使う、変更通知とキャッシュの管理 | ||
| Commnity | |||
|
Common コミュニティ
| データ構造 | カテゴリ等の曲情報、いいねやお気に入り等のリスポンスを保持 | |
| CommunitySongPlayer | コミュニティ用にラップした曲プレイヤー | ||
| CategoryLists | カテゴリーリスト群のモデル。カテゴリー別にフェッチ/キャッシュ | ||
| ListInfo | カテゴリーリストのモデル、リストのスクロール位置、フェッチするページ番号等 | ||
| Context | Community共通のCommonContextと各画面のContextがある | ||
| UserActivityManager | ユーザーのアクティビティ（いいね、ミュートユーザー、再生リスト、モチーフ登録、アクセス履歴等）を管理 | ||
|
Service サービスモデル
| ListItemFetcher | カテゴリーリスト項目のMLサーバーから取得する | |
| MidiRepository | MIDIファイルをサーバーから取得して貯める | ||
| UserActivityFetcher | ユーザーの行動をMLサーバーから取得する（再生数、再生リストに含まれているか、コメント等） | ||
| MIDI | |||
|
Common MIDI共通
| データ構造 | MIDIフォーマットへ出力できる構造 | |
| コントローラー | 曲の読み込みや再生、再生位置の監視や音源の変更などMIDIの扱いを管理する | ||
| サンプラー | ピアノや音符生成時に単体のMidiイベントから音を鳴らす | ||
|
Service サービスモデル
| MidiPlayer | MIDIを再生する | |
| MidiReader | MIDIファイルの読み込み | ||
| MidiWriter | MIDIファイル出力 | ||
| Account | |||
|
Common アカウント
| データ構造 | ログインできる構造、アカウント情報、ログイン情報、MLユーザー情報 | |
| AccountManager | アカウントの管理、ログイン時にMLサーバーと通信 | ||
|
Service サービスモデル
| UserActivityRepository | ユーザーのアクティビティ（いいね、ミュートユーザー、再生リスト、モチーフ登録、アクセス履歴等）を貯める | |
| ServerCommunication | MLサーバーと通信する処理を集約 | ||
| Domain | |||
|
データ構造 Json形式 | Melody | MelodyTrack, MelodyPhrase, NoteContainer, NoteBlock, Note | |
| Drum | DrumTrack, DrumPhrase, BeatContainer, Beat | ||
| 共通化 | Original, Repeat, Syncの3種のPhraseをジェネリッククラスとプロトコルで抽象化 | ||
|
Service サービスモデル
| SongReder | Jsonファイルを読み込み、Domainのデータへ変換 | |
| SongWriter | DomainのデータからJsonファイルへ書き出し | ||
| Common | |||
|
Service サービスモデル
| リポジトリ | 保存データを管理 | |
ざっくり言うとコミュニティ広場（コンテストとユーザーページ関連の部分以外）は大体の実装を完了しました。
細かい部分は色々とありますが。。あとソングビジュアや最近のAndroid追加機能等の実装はリリースしてから少しずつ機能拡充していこうと思います...
実装の詳細
コミュニティView
コミュニティViewの関係図です。
コミュニティを開いた時、エントリーはCommunityRootViewでどの画面CommunitySquareView CommunityUserPageView CommunityContestViewに遷移するかをナビゲートします。各ViewはCommunityViewをベースに派生させており、DisplayView ControllerViewがView構成要素にあります。
例えば、SquareDisplayViewはディスプレイをSquare用に派生させており、コミュニティ広場のカテゴリー説明SquareCategoryDescriptionViewを表示します。曲が選択されている時はSongVisuaViewを表示します。
SquareControllerView はディスプレイをSquare用に派生させており、選択カテゴリーSquareCategoryに応じてリストCategoryListが変わります。新着カテゴリーだと曲カテゴリーリストSongCategoryListに更新され、新着曲項目NewSongCategoryListItemが並びます。
カテゴリーリストCategoryListやカテゴリーリスト項目CategoryListItemは似たようなView構成になるので、全てを１からView構成していくのではなく、同じような部分は共通化して共通Viewを参照するようにしています。
他にも共通のViewはCommonで管理しますが、大きく分けてViewFrameとViewPartsがあります。
ViewFrameは外枠をレイアウトするためのViewで、中身のViewを@ViewBuilderで渡して処理を移譲します。例えば、CategoryListsViewはヘッダーにカテゴリーセレクターCategorySelectorScrollViewがあり、選択カテゴリーに応じてリストCategoryListが表示されます。どのCategoryListを表示するかは派生したViewから処理を移譲されます。また、「横スワイプでカテゴリー変更」や「選択カテゴリータブをタップでリストを一番上まで移動」等どのCategoryListsViewでも使われる共通処理をまとめています。
ViewPartsは詳細/リストボタンやユーザーアイコン、プレイヤーなど各画面固有のViewではなく、共通で使われるViewを集約しています。
なぜ共通化をするのか？
理由はコードを改変しやすいようにするためです。
不具合修正や機能追加するとき、一箇所変更すれば良いのが理想です。同じようなコードが転々とあると、複数の箇所を変えなければならない事態になります。
「この箇所を修正する時はこの箇所も変えなければならない」そんなコードが増えると管理も大変です。そんなコードの関係性を覚えておかないと新たな不具合に繋がることもあります。
そのため、できる限り共通化してコードの再利用性を高めます。
CommunityRootView
ナビゲーション、キーボード表示、通知プレイヤー
ナビゲーションについてはNavigationStackでSquare UserPage Contestのいずれかの画面遷移します。
画面遷移はCommonContextで管理して環境変数に設定するため、どのViewからでもアクセス可能です。
キーボード表示について、コメント編集時に下から迫り上がりますが、デフォルトだとレイアウトが崩れてしまいます。そのため、デフォルト動作は.ignoresSafeArea(.keyboard)でOFFにして、.onChange(of: configEnvironment.keyboardHeight)でキーボードの高さを取得して手動でオフセット.offset(y: screenOffset)しています。
public class ConfigEnvironment: ObservableObject { @Published public var keyboardHeight: CGFloat = 0 private let keyboardWillShow = NotificationCenter.default.publisher(for: UIResponder.keyboardWillShowNotification) .compactMap { $0.userInfo?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect } .map { $0.height } private let keyboardWillHide = NotificationCenter.default.publisher(for: UIResponder.keyboardWillHideNotification) .map { _ in 0.cgf } public init(){ keyboardWillShow.merge(with: keyboardWillHide).assign(to: &$keyboardHeight) } }
あと、曲が選択された時.onChange(of: context.selectedSong)に通知プレイヤーを更新します。
CommunityView
ディスプレイ+コントローラー+プレイヤー、縦横のレイアウト
CommunityViewはDisplayViewとControllerView、PlayerViewをレイアウトします。
また、縦持ちと横持ちを検出して、レイアウトを変更します。
DisplayViewとControllerViewを各画面で派生させることで、共通ViewCommunityViewへまとめることができます。
プレイヤーPlayerViewは選択曲に応じて、いいねやお気に入りの数を反映する必要があります。ただし、曲の選択はControllerViewの末端で行うため、状態を共有するために環境変数のCommonContextを介します。
DisplayView
説明ビュー / ソングビジュア、リスト詳細切り替えボタン
DisplayViewは曲選択により、説明ビューとソングビジュアが切り替わります。
また、曲選択時はリスト詳細切り替えボタンListDetailToggleButtonが表示され、ControllerViewを曲詳細SongDetailViewに切り替えることができます。
説明ビューは各画面で派生します。
| Square | カテゴリーの説明 |
| UserPage | ユーザーの紹介文 |
| Contest | コンテストの説明 |
ソングビジュアは曲の再生に応じて再生バーを同期させます。
また、曲の情報から新着やランキング等のバッチを表示します。
ContorollerView
カテゴリーリスト / 曲詳細、カテゴリー選択
ContorollerViewはリスト詳細切り替えボタンListDetailToggleButtonにより、CategoryListsViewとSongDetailViewを切り替えるようになってます。
CategoryListsView
CategoryListsViewはカテゴリー選択CategorySelectorScrollViewの下にカテゴリーリストCategoryListがある構成になっています。
どのカテゴリーを使うか、カテゴリーリストに何を表示するかを各画面で派生します。（SquareCategoryListsViewなど）
ジェネリックView
CategorySelectorScrollViewは3画面のカテゴリーに対応できるように型引数があります。
コンストラクタで渡した選択カテゴリーの型を識別してSquareCategory UserPageCategory ContestCategoryのすべてのカテゴリーを並べています。
struct CategorySelectorScrollView<Category: CommunityCategoriable>: View { @Binding var selected: Category public var body: some View { ScrollView(.horizontal, showsIndicators: false) { HStack(spacing: 0) { ForEach(Array(Category.allCases), id: \.self) { category in ... } } ...
2種類のコンテキスト
コンテキストはContextとCommonContextがあります。CommonContextはCommunity共通のコンテキストに対して、Contextは各画面ごとのコンテキストになります。
例えば、選択カテゴリーは各画面に状態があるため、Contextにプロパティがあります。
各画面の状態とは、「コミュニティ広場でランキング閲覧中にユーザーページへ推移して再生リストを見た」としたら、選択カテゴリーは複数の状態があるからです。
| 選択カテゴリー | |
|---|---|
| Square | ランキングカテゴリー |
| UserPage | 再生リストカテゴリー |
逆に、プレイヤーの選択曲を管理するコンテキストはCommonContextです。
ユーザーページに推移する場合も、選択曲の再生を止めずに推移したいのでコミュニティ全体で1曲の選択です。ユーザーページで曲を選択して初めて、CommonContextのプレイヤー選択曲を変更します。
CategoryList
CategoryListはリスト表示で上下にスクロールできるViewです。他にも、スクロール時にリスト項目CategoryListItemをサーバーから取得する役割があります。
これらは共通の処理でCategoryPagedScrollViewにまとめています。どのリスト項目を表示するかを各カテゴリーで派生します。
また、カテゴリーによってはヘッダーに特有のリスト項目があったり、特有の機能を持たせたりします。
CategoryListItem
CategoryListItemはリストに表示される項目でカテゴリー毎など様々なViewがあります。
ただ似たようなViewもあるので、できるだけ共通化して派生します。
例えば、以下の4種類の曲リスト項目SongCategoryListItemは中身は一緒なので外枠だけ変えるように作ります。
他にも色々なCategoryListItemがあります。
曲ID
ユーザー
コンテスト
バッチとトロフィー
ちなみに、曲リスト項目に表示しているバッチとトロフィーは少し異なります。
トロフィーの方が小さく表示する想定なのでデザインを簡略化してます。
SongDetailView
SongDetailViewは曲情報SongInfoViewの下に曲コメントリストSongCommentsViewがある構成になっています。
さらに下側にコメントを編集して送るコメントテキストフィールドSongCommentTextFieldViewがあります。
ユーザーアイコン
プレミアムユーザーだとユーザーアイコンにプレミアムリングをつけます。
また、ユーザーアイコンの画像は毎回サーバーから取得するのでは表示が遅れてしまうため、表示した画像はNukeライブラリでキャッシュしてます。
import NukeUI struct AccountIconView: View { ... var body: some View { ... LazyImage(iconUrl: iconUrl, transaction: .init(animation: .easeIn)) { state in ... } .processors([.resize(width: shortSide)]) .priority(.high) .pipeline(pipeline) } }
なお、Nukeライブラリでキャッシュする時の注意点ですが、ImagePipelineは同じインスタンスを使わないと適切に動作しません。
なぜかメモリが溜まり続ける不具合がありましたが、描画するたびにImagePipelineインスタンス作成していることが原因でした。
.pipeline(ImagePipeline(configuration: .withDataCache))
これでは内部のコンフィグが変わるため、同じURLでも同一画像と認識せずに新たなキャッシュが溜まり続けていました。
ListDialog
曲情報SongInfoViewのユーザーアクションボタンUserActionButtonsをタップすることでリストダイアログListDialogを表示します。
共通ダイアログ
ダイアログもコンテキスト同様にDialogsとCommonDialogsがあります。CommonDialogsはCommunity共通、Dialogsは各画面ごとに紐づくダイアログを管理しています。
例えば、リストダイアログは各画面に状態があるため、Dialogsにアクセスしてダイアログを表示します。
「曲のいいねユーザーリストを開いて、ユーザーページに推移した」としたら、ユーザーページから曲詳細画面に戻る時には、ユーザーリストを開いた状態をキープしておいてほしいですね。
逆に「ダウンロードのメッセージを表示する」ダイアログはCommonDialogsです。
メッセージはダウンロードした時に遅延して開かれますが、「広場で曲DLして、ユーザーページに推移した」としたら、複数の画面に同じメッセージを表示する必要はないです。
おわりに
正直ちょっと一般ユーザー向けの内容じゃないですね。
内部の認識合わせにも使っているので、妙に詳細な部分とかもあります。
とはいえ公開ブログなので読んで頂いているmL民は、
δ(・ω・`)ん？ もしくは ぽかーん( ﾟдﾟ) となっているかと思います！！
ただ、とりあえずリリースに向けてiOS開発頑張っています。
そのことだけでも伝われば嬉しいです🙂
この夏リリース予定でしたが、楽しみにしていたユーザーの皆様本当に申し訳ございません！！
あと1年くらいはかかりそうです🙇
iOSでも存在感のあるアプリに仕上げようと日々磨いていますので、気長に待ってもらえると幸いです😭
Webで聴く！MIDIプレイヤーの実装
今回はWebで快適にMIDIを再生する話。
WebでのMIDI再生は動作が重かったので、MP3に変換して再生しました。
はじめに
musicLineでは、コミュニティでユーザーの投稿した曲を再生できます。
またコミュニティ曲のURLを共有して、他のユーザーに曲を勧めることができます。
しかし、musicLineのアプリを持ってないユーザーは曲を聴くことができず、Playストアに飛ぶようになっています。
もちろんPlayストアでアプリをインストールすると良いですが、そこまでしないと曲を聴けないです😅
そこまでして欲しいと願っていますが。。そもそもiOSはアプリすらまだないです😭
他の方法として共有動画を作成することもできますが、それもちょっと気軽に勧めたいって場合にはレンダリング時間が気になるところです。
それでもXで共有動画で曲を紹介してくれている mL民 に感謝😆✨
なのでもっと気軽に、アプリを超えて、曲を共有することを目指して、
WebでmusicLineコミュニティ内の曲を再生できるようにしました。
実装
WebでのMIDI再生の課題
はじめにWeb（Javascript）で動作するMIDIプレイヤーのライブラリを試してみました。
サーバーからMIDIファイルをDLして、Javascriptで再生するシンプルな実装だったのですが、
- 再生処理が重くて音が途切れる
特にモバイルでの動作時は止まることが多い - コミュニティの音と大きく異なる
そもそもサウンドフォント（sf2）が使えない
の課題がありました。
そのため、MIDIファイルを一度音楽ファイル（WAVやMP3）に変換してから、再生する方法に変更しました。
MIDIファイルを音楽ファイルに変換
サーバーから直接MIDIファイルをDLせずに、サーバー（Ruby）で音楽ファイルに変換してDLします。
MIDIからWAVへの変換はFluidSynthを使いました。さらにWAVからMP3への変換にFFmpegを使っています。
この変換する時間はどうしても数十秒は掛かってしまうので、変換したMP3はしばらくキャッシュします。キャッシュしたMP3を使うことで、次訪れるユーザーはすぐに再生できます。
そのため、WAVファイルのままDLしても再生できますが、キャッシュサイズを小さくしたかったので、MP3に圧縮しています。
以上でWebでのMIDI再生の課題が解決できました。
こちらの方法でもWebにアクセスする最初の人はファイルを変換する時間を待たなければいけない問題はあります。
でもアプリをインストールしないと曲を聴けないよりは良いですねえ。
Herokuに外部ライブラリをインポート
より専門的な話になりますが、musicLineのサーバーにFluidSynthライブラリを取り入れるところにも課題があったので紹介します。
musicLineのサーバーはHerokuを使っています。そのため、Herokuの環境下に外部ライブラリを構築する必要があります。FFmpegはHerokuの拡張機能で簡単に取り込みができましたが、FluidSynthは拡張機能のBuildPackが用意されていないため、自分でカスタムBuildPackを作る必要がありました。
ちなみに、違う方法（DockerContainerを使った方法）でも環境構築ができるので、こちらも試してみましたがこの方法は辞めました。
ローカルで仮想サーバーを試すときにはDockerContainerを使っているので、そのままHerokuの環境に適用できれば便利だと考えたのですが、
- 他のBuildPackも使えなくなる
Herokuが用意しているBuildPackも自分で環境を整えなければならない - デプロイ（環境構築）が遅い
デプロイの際にキャッシュ等を使って最適化されているそう
ということがあり、Herokuを使う利点が失われると思い辞めました。
カスタムBuildPack
devcenter.heroku.com
このページを参考に作ります。
以下の3ファイル作る必要があるのですが、compileファイル以外は他のBuildPackと同じファイルを使って良さそうです。
- detect: この buildpack がアプリに適用するか判定
- compile: アプリで変換手順を実行するために使用
- release: メタデータをランタイムに戻す
compileファイルでライブラリのソースをDL・インストールする処理を記載します。
C++のソースをコンパイル・リンクして、環境変数を設定しています。
なかなか難しい部分でしたが、CMAKE等のC++ビルドツールに使い慣れていれば簡単だったかもしれません。
普段なにげに使っているapt-get等のパッケージ管理ツールはとても便利なんだと思い知らされました。
#!/bin/sh BUILD_DIR=$1 CACHE_DIR=$2 # midi->wavへ変換する依存ライブラリlibsndfileをインストール LIBSND_CACHE_DIR=$CACHE_DIR/libsnd LIBSND_DIR=$BUILD_DIR/vendor/libsnd # $LIBSND_CACHE_DIR が存在する時キャッシュを使用 if [ ! -d "$LIBSND_CACHE_DIR" ]; then echo "-----> Installing libsndfile" LIBSND_SRC_DIR=/tmp/libsnd SND_URL="http://www.mega-nerd.com/libsndfile/files/libsndfile-1.0.28.tar.gz" mkdir -p $LIBSND_SRC_DIR curl -L $SND_URL | tar xz -C $LIBSND_SRC_DIR --strip-components=1 mkdir -p $LIBSND_CACHE_DIR cd $LIBSND_SRC_DIR || return ./configure --prefix=$LIBSND_CACHE_DIR make make install echo "-----> libsndfile installation complete" else echo "-----> libsndfile use cache" fi mkdir -p $LIBSND_DIR cp -r $LIBSND_CACHE_DIR/* $LIBSND_DIR # fluidsynthをインストール FLUIDSYNTH_CACHE_DIR=$CACHE_DIR/fluidsynth FLUIDSYNTH_DIR=$BUILD_DIR/vendor/fluidsynth # $FLUIDSYNTH_CACHE_DIR が存在する時キャッシュを使用 if [ ! -d "$FLUIDSYNTH_CACHE_DIR" ]; then echo "-----> Installing Fluidsynth" # FLUIDSYNTH_VERSION="2.3.5" FLUIDSYNTH_SRC_DIR=/tmp/fluidsynth FLUIDSYNTH_VERSION="2.1.7" FLUIDSYNTH_URL="https://github.com/FluidSynth/fluidsynth/archive/refs/tags/v$FLUIDSYNTH_VERSION.tar.gz" mkdir -p $FLUIDSYNTH_SRC_DIR curl -L $FLUIDSYNTH_URL | tar xz -C $FLUIDSYNTH_SRC_DIR --strip-components=1 FLUIDSYNTH_BUILD_DIR=$FLUIDSYNTH_SRC_DIR/build mkdir $FLUIDSYNTH_BUILD_DIR mkdir -p $FLUIDSYNTH_CACHE_DIR cd $FLUIDSYNTH_BUILD_DIR || return cmake .. -Denable-libsndfile=ON -DCMAKE_PREFIX_PATH=$LIBSND_DIR make make install DESTDIR=$FLUIDSYNTH_CACHE_DIR echo "-----> Fluidsynth installation complete" else echo "-----> Fluidsynth use cache" fi mkdir -p $FLUIDSYNTH_DIR cp -r $FLUIDSYNTH_CACHE_DIR/* $FLUIDSYNTH_DIR # 環境変数の追加 mkdir -p $BUILD_DIR/.profile.d echo "export PATH=\$PATH:$HOME/vendor/fluidsynth/usr/local/bin:$HOME/vendor/libsnd/bin" > $BUILD_DIR/.profile.d/fluidsynth.sh echo "export LD_LIBRARY_PATH=\$LD_LIBRARY_PATH:$HOME/vendor/fluidsynth/usr/local/lib:$HOME/vendor/fluidsynth/usr/local/lib64:$HOME/vendor/libsnd/lib" >> $BUILD_DIR/.profile.d/fluidsynth.sh
おわりに
今回はWebでMIDIを再生する際に、再生を最適化するためにMP3に変換して再生しました。
WebでMIDIをそのまま再生すると処理が重くモバイルだとまともに再生されないことが誤算でしたが、MP3に変換することでなんとかWebでも再生することができました。
ちなみに同じサウンドフォントを使ってますが、音響ライブラリがアプリと異なるため、音も少し変わります😅
このURLでmusicLineを持っていなければ、Webプレイヤーに移ります。
https://3musicline.com/community/176751
(musicLineを持っていれば、アプリを開きコミュニティに移ります。)
https://3musicline.com/player/176751
(musicLineを持ってるユーザーはこちらのURLでWebプレイヤーを閲覧できます。)
実装の部分は試行錯誤した内容をごちゃごちゃと書いてしまいましたが、試したことを忘れないように備忘録として残しておきます。
ちなみに、最初にアクセスしたユーザーはMP3に変換する時間を待ってもらう必要があります。 頻繁にWebプレイヤーを使うユーザーはアプリをインストールして欲しいですね♪
なので待っている時間はアプリインストールを促す画面を出すようにしています。
ちゃっかり😋
がちゃ/Gacyaさんインタビュー
mL民のインタビュー企画第３弾、ラスト（４人目）のインタビューです。
（インタビュー企画通算で１３人目です！）
※mL民：作曲アプリmusicLineユーザーのこと
（「#mL民インタビュー企画」タグで他の方の紹介も見れます☆）
インタビュー企画第３弾はmusicLine１０周年記念の作曲コンテストで上位だった４名の方を紹介します。
最後は、一般部門１位の がちゃ/Gacyaさん です。
DMでのやり取りをインタビュー形式にまとめました。
スー
それでは、がちゃさんよろしくお願いします。
今回は囲むんだね 
まあ最後だからみんなで 
楽しみだな～ 
では最初にユーザーネームの由来はなんですか？
がちゃ
名前の由来は、
…特にないんですけど()
友達に呼ばれてるあだ名を少しかえてがちゃにしました(笑)
スー
なるほど
あだ名が由来になったパターンですね！
由来なんてそんなもん 
なんか可愛いじゃん♪ 
爽やかなアイコンだな～ 
うん、爽やかな気分になる😮
次にひとこと自己紹介をお願いします。
がちゃ
趣味はドラムを叩くことです!!
8、9年ぐらいやってます!
(その割にそんな上手くない)
スー
そんなに前からドラムをされているんですね！
何事も長く続けることが大事 
とかいって上手いんでしょ 
そんなあなたにアイスあげる
（え、アイス？ 
）
ドラムは部活とかバンド活動とかでされてるんですか？
がちゃ
吹奏楽部でパーカッションやってます!
バンド活動はやってないです～
スー
そうなんですね！
パーカッションならドラム以外も色々って感じですね♪
mL民はなんか吹部のイメージあるな 
打ち込み作曲はバンド向けじゃないのかも
ちなみに、ドラム叩く曲で得意な曲や好きな曲はありますか？
がちゃ
Vaundyの怪獣の花唄が好きです!!
叩いててすごく気持ちいいので!
スー
いいですね～😄
疾走感がいい 
ドラム叩くの気持ち良さそう
曇天の中のチャリが最高
ああ、MVの感じね✨
走り出さなきゃって気持ちになるな～🙂
次はSNSで応募があった質問ですが、好きなアニメを教えて欲しいです！
がちゃ
僕あんまりアニメ見なくて…
でも鬼滅の刃とかは好きですね(*-ω-)
スー
鬼滅の刃はかなり話題になりましたね～♪
もちろん僕もはまりました😊
また映画化もするみたいで勢いが凄い～
なんか鬼と戦う話だよねー 
鬼を滅する刃だからね
そうそう、駆逐してやるってやつな
それ進撃の巨人だよ 
。。そうだっけ～
でもアニメはあんまり見ないんですね～😮
他に好きなこととか楽しみにしてることはありますか？
がちゃ
最近は「Theo Town」ていうゲームにハマってます～
あとは曲聞くことぐらいしか好きなことないですね()
スー
ぽちぽちぽちっと、検索〜☆
都市開発シミュレーションゲーム！
やっぱり創作系のゲームが好きなんですね😊
きた！シムシティ 
Theo Townだけどね～ 
マインクラフトもおすすめ
まあ基本は NO MUSIC, NO LIFE！ってことですね😁
曲を聴くのも、探すことも楽しいですよね♪
次の質問ですが、作曲活動をしていて楽しいと思う時はどんなときですか？
がちゃ
曲が完成した時は達成感とかもあってすごい楽しいです!!
スー
そうですか〜♫
素敵な曲を作られていますから、達成感もすごくありそうです！
たしかに～ 
結局は完成した時が一番楽しいんだよな
その気持ちをいつまでも大切に 
飽き性のアゴォーにそのまま返すよ
あと、がちゃさんはコラボやmLグループ「虹色コード」で活動されてたりしますが、共同で作曲することでの魅力について教えてください。
がちゃ
誰かと一緒に作ると、自分にない展開の仕方や楽器の使い方とか、いろいろ学べるので良いですよ!
スー
たしかに一緒に作ると気づきがあって学べそうですね😃
コラボとか楽しそうだし
モチベーションも上がりそう
え、オレは一人でいいや
今度アイスおごるよ
まあ一緒に作曲するのもありだな
もう少しコラボを手軽にできたらいいな
続いて、作曲する際に心がけていることはありますか？
がちゃ
色々あるんですけど
一番大切にしてるのはバランスですね
伴奏がメロディを邪魔してないかとか
結構意識してます…!
スー
バランスを意識するのも大事なんですね！
確かに、せっかくの良いメロディーが伴奏に埋もれたりしたらもったいないですもんね！
そっかーその辺りを意識するんだね
伴奏が邪魔にならないようにか
そんなあなたにアイスあげる
そのコメントは邪魔になってない？
そ、そうかあ 
他にも細かい心がけもいっぱいあると思います。
今回１０周年コンテストではそんながちゃさんの曲作りがみんなに響いた結果だと思います✨
本当におめでとうございます！！
コンテスト曲のワクワク感はすごかったです。
この記念日を大切にこれからも頑張れそうです😁
がちゃ/𝑮𝒂𝒄𝒚𝒂「星音【ML10周年記念】」
https://3musicline.com/community/176751 (アプリリンク)
こんな曲書きたいな
作れたら熱中するかも 
がちゃの作り方って曲で教えてくれてるよ
ぜひ作り方聞きたいな
おれもー
では、曲の作り方教えてください😊
だから教えてくれてるよ
え？ 
え？じゃなーい 
がちゃ
僕は大体コード進行を一番最初に作りますね(*-ω-)
それこそ星音もそうですし、コード進行を知ってからはずっとそうですね()
なのでメロディとかは頭のどっかからひねり出してます👍(?)
スー
コード進行か～
曲の設計図的な役割がありますよね🙄
適切にコード進行を設定できると、良い感じの曲ができるってことですね🤔
伝授ありがとうございます！
詳細はがちゃの作り方も見てね
頭ではわかってるんだけどな～
なかなか知識ないと使いこなせないね
じゃコード進行が良い感じになる機能つけたら
それだ
簡単に言わないで 
次の目標ができたね😄
今後のmusicLineも楽しみだ～♪
ところで、がちゃさんの今の目標はなんですか？
がちゃ
目標はいろんな人の耳に留まる曲を作ることです!!
スー
素敵ですが、もう色んな人の耳に留まっていると思いますよ〜
でも、もっとたくさんの方に聞いていただきたいと僕も思っているので、これからも応援しています！
では最後に、みなさんに聴いてもらいたい自分のオリジナル曲名を教えてください
がちゃ
ジュピター聴いてもらいたいです!!
スー
ジュピターいい曲ですね！
がちゃ/𝑮𝒂𝒄𝒚𝒂「ジュピター」
https://3musicline.com/community/138323 (アプリリンク)
カリンバのアルペジオも効果的で、宇宙感がありますね。
そしてドラマーと知ってから聞くとさすがドラムがかっこいいと思いました！
みなさんもぜひ聞いてみてください☆
がちゃさんありがとうございました！
これで今回のインタビュー企画はおしまいです！
また次の企画（インタビュー以外でもSNSの企画など）のアイデア募集中なので思いついた方はDMよろしくお願いします〜
| 前 の インタビュー | |
挿絵のLINEスタンプ
ぬんさんインタビュー
mL民のインタビュー企画第３弾、３人目のインタビューです。
（インタビュー企画通算で１２人目です！）
※mL民：作曲アプリmusicLineユーザーのこと
（「#mL民インタビュー企画」タグで他の方の紹介も見れます☆）
インタビュー企画第３弾はmusicLine１０周年記念の作曲コンテストで上位だった４名の方を紹介します。
３人目は、一般部門２位の ぬんさん です。
DMでのやり取りをインタビュー形式にまとめました。
スー
それではぬんさん、よろしくお願いします。
まずユーザーネームの由来はなんですか？
ぬん
特に大した由来はないですが、ぬんをローマ字表記に変換した時にnunとなるのがなんか可愛くてこれにしました。さらに2文字だと覚えてもらいやすいからという理由もあります。
スー
そうだったんですか！
。。確かにちょっとかわいい？🙄
でも覚えてもらいやすいのは大事ですね！
アゴォー
もう☆スーはわかってないなあ
nun はなんか可愛いんだよ~~
..じゃあわかった!!
この可愛さに気づいて☆
え、なにが？ 
だ・か・ら~~
だよ
スー
。。。
あ、そういうこと😲
nunって
目を隠して恥ずかしがっているような顔文字に見えて可愛いってことか
いや、考えすぎだろ 
なんか可愛いに理由なんてないよ
まだ出てこないでって
後でちゃんと紹介するから
。。。😒
アゴォー
そうそう、この子はぬんさんの考えたキャラ？
ぬん
そうです！ただ僕は人を描くことが苦手なので、マント、シルクハット、手袋、雑な楕円形目玉で誤魔化しています。
キャラデザは僕の大好きなゲーム『星のカービィWii 』に登場するマホロアというキャラクターからめちゃくちゃ影響を受けてると思いますー
アゴォー
ぺちゃぺちゃぺちゃちゃっと
あれ、変な音してる？
そお？タッチ音なんてこんなもんだろ
なるほど
ぬんさんのキャラもカービィの世界観に合いそう
スー
好きな世界観に合ったマイキャラを作りたいって気持ちわかります！
そうなんですか？
人も上手に描きそうですけど～
でも苦手な事を誤魔化す技術、大事ですね😄
なんでも得意なんて無いですもんね！
では次に、自己紹介をお願いします。
ぬん
みなさんこんにちは、ぬんです。
趣味はピアノを弾くことで、少し前まではゲームも遊んでいましたが最近は作曲かピアノの2択で音楽一色になりました。
ゲームはもう一年ほど手をつけていません。
学校での勉強がピンチです。
スー
すごい音楽漬けの毎日ですね！
ゲームしないなんて考えられない😨
ピアノが趣味なんですね♪
ピアノで弾く好きな曲はありますか？
ぬん
クラシックよりかはゲーム音楽を中心に自分の弾きたい曲を自由に弾いてますね。
最近ではマリオオデッセイの『Jump Up, Super Star! 』という曲をよく弾いてます！
楽しい気分になれます。
スー
ゲーム音楽も弾いているとは
親しみもてます😊
マリオオデッセイの曲とてもノリノリで良いですよね～♪
でもピアノで弾くとなると難しそう😮
あと、musicLineでの作曲も楽しんで頂いているようで嬉しいです♪
一時期は凄いペースで曲を作ってましたね！
コミュニティにぬんさんが溢れてました（笑）
アゴォー
笑い事じゃないぞおお！！
ぬんさんといい、さかきさんといい
musicLineのせいで勉強がピンチなんだから!!
なにか対策を考えるべきじゃないか？
う～ん
そうだ、
1時間で強制終了する機能を付けよう！
なんちゃって~~
そんなことしませーん
ん？どこ飛んでった？
まったく言うだけ言って飛ぶなんて
スーも大変だな
スー
すみません💦
作曲を極めたり、楽しんで頂けるのは嬉しいですが、勉強も同じぐらい頑張ってください（切実に）😭
musicLineで勉強ピンチとかまずいもんな
そ、そうだね。。
（あと知らない子と二人にしないで💦💦）
続いてSNSで募集した質問です！
おすすめのLINEスタンプはありますか？
ぬん
僕のおすすめスタンプは『ポンコツクエスト』です
ポンコツクエストとは、毎月youtube で配信される短編Webアニメで、魔物が主人公のシュール系ギャグアニメです。
個性豊かなキャラクターたちが登場し、おもしろいです！
ぜひ買ってみてください！✨
スー
ぽちぽちぽちっと、検索〜☆
なるほど〜！
デザインが可愛いですね！
YouTubeで見ましたが、めっちゃ面白いです🤣
ちなみに、こっちがスタンプね
これはみんなにも是非見てほしい。
こういうゆるふわ系?の世界観は大好きです！
アゴォー
わっはっは
確かにこれは面白いわー
キャラクターもいいね☆
（もぉーーーどこいってたの 
）
せっかくだしどこか１話だけ紹介したいな
どこがいいかな？
ぬん
一番好きな回は、『第二十八章「捕獲」』です。
スタモン使いを名乗るこの「イマヅカ」というキャラクターが大好きなのでこの回を選びました！
他の回もめちゃくちゃおもしろいのでぜひ見てみてください！✨
スー
いや～良いですね😆
第五章「武装」も思わず笑ってしまいました！
なんかじわじわ来るな～♪
さてさてぬんさんの人柄が掴めてきたところで、作曲についても質問していきます！
まず、ぬんさんが作曲に興味を持ったきっかけはなんですか？
アゴォー
とその前に紹介します！
お友達のアイスでーす☆
えーここで紹介！？ 
アイス
どうもー
呼ばれて来たアイスだよ～
アイス食べてるからアイスね
アゴォーとは駄菓子友達でーす
そうそう駄菓子屋でよく会うよね
今日はアゴォーがどうしてもって言うから来たよ！
そこまで言ってないけどね
。。。
本当は面白そうだから来た～☆
ちょいちょいコメントする役するわ⤴︎
また変なのが増えたな 
スー
間の悪い紹介ですみません😅
アイスもコメントしてくれるみたいです！
では気を取り直して、
ぬんさんが作曲に興味を持ったきっかけを教えてください✨
ぬん
昔から絵を描いたり、ゲームで何かを作ったりしていて、”自分だけの創作物“というものが自分の趣味の軸となっていました。
そしてふと自分も作曲をしてみたいと思うようになり、ひたすら作曲ができるアプリを探しました。本当にこのアプリに出会えて毎日が幸せです！
スー
musicLineを見つけてくれてありがとうございます！
アプリが創作活動を始めるきっかけに繋がれば嬉しいです♪
ゲームでも創作系が好きだったんですね〜
どうぶつの森かな？
マインクラフトじゃない？
シムシティって線もあるな
それで、ゲームでは何を作ってましたか？
ぬん
主に『とびだせどうぶつの森』と『マリオメーカー2』の２つですね！
これら以外にはなんのゲームにも手を出さないほど夢中でやり込みました〜
スー
どんな街やステージを作ったのか気になるな～
ぬんさんはかなりやり込むタイプですね！
次に、好きな楽器はなんですか？
ぬん
圧倒的に誰がなんと言おうとピアノです。
チェンバロが時を経て強弱をつけられるピアノという素晴らしい楽器に進化し、表現の幅が何百倍にも広がったことで、静かで落ち着いた雰囲気の曲から緊張、スピード感のある激しい曲までなんでも似合ってしまうという化け物級にすごい楽器です！！
取り乱しました
とりあえずみんなもピアノを崇めましょうね
スー
ピアノ愛が凄い😅
じゃあピアノはチェンバロの進化系ってことですね♪
確かにピアノは1人で幅広く表現できてすごいですよね〜！
アゴォー
ぺちゃぺちゃぺちゃちゃっと、検索☆
やっぱり、変な音してない？
ああ、、オレのアイスこぼしたんだった
。。 
これがピアノの祖先か！
なんか鍵盤が黒い？
このレトロ感と光の加減がいいね
光の加減はチェンバロとは関係ないけどな
スー
ピアノの歴史は勉強になりました！
どうやらピアノとチェンバロでは弦の振動させ方が違うみたいですね～
ピアノはハンマーで叩くのに対して、チェンバロは爪で弾いて音を出すらしい😮
続いて、今から始める作曲初心者の方にアドバイスをお願いします♪
ぬん
とにかく自分の好きな曲、作りたい曲の雰囲気、ジャンルを見つけてください！
それが自分のアイデンティティとなるはずです。
僕は自分のアイデンティティを見つけるためにいろんなジャンルの作曲に挑戦しましたが、
どのジャンルもそれぞれの良さがあって、優柔不断な僕は『これ！』といったものは決められずに今も新ジャンルに挑戦し続けています
もしかするとまだ自分の知らないジャンルにどハマりするかもしれません。
自分好みの雰囲気の曲を見つけるのはきっと作曲が上手くなる近道になるはずです！
スー
まずは自分がどんな雰囲気やジャンルが好きなのかを見つけるということですね！
作りたい方向性を知るためにも、色々と試していく攻めの姿勢は見習いたいものです✨
アゴォー
あと、ぬんさんと言えば連続殿堂入りが注目されるけど、 僕はスペクトラムアート（MIDIアート）の方も知ってほしいな～
ぬん「MLでアニメを作ってみた」
https://3musicline.com/community/165083 (アプリリンク)
曲はカービィの「グリーングリーンズ」のアレンジでもちろん曲も良いし
曲に合わせて出てくるカービィにはテンション上がったな！
スー
そうそう～♪
アイデアが斬新で、目で見ても楽しいってのが良いですね！
目でも音を楽しむっていう
musicLineのコンセプトに合致したわけだ
へーそんなコンセプトあったんだ
とにかくソングビジュアのテーマ「スペクトラム」の仕組みをとてもよく研究されて、新しいものに挑戦するぬんさんの精神が感じられました😁
ではここで、今回インタビューするきっかけになったコンテスト投稿曲の「僕らの桃源郷」を紹介します♪
疾走感がありポップでおしゃれで素敵です✨
また、冒頭の文字が表示されるMIDIアートにも注目です！
ぬん「僕らの桃源郷」
https://3musicline.com/community/179402 (アプリリンク)
この曲はどのような部分にこだわって制作しましたか？
「制作期間一カ月の本気モードで頑張った」ってコメントしてたね
ぬん
こだわったポイントとしては、自分の中に前提として音楽は『イントロから惹かれる曲』と『何度も聞くうちに惹かれていく曲』の二つに分かれると思っていて、コンテストでは圧倒的に最初が肝心なので、ピアノのみの続きが気になる出だし、何かが始まる予感のするイントロ、そしてMIDIアート。と使えるものは存分に使って曲の始まり方を工夫しました！
4分超えの曲は、飽き性の僕にはなかなか作れないので本気を出せたと思っています！
スー
確かにイントロからどんな曲が聴けるか楽しみになりますね！
それでも途中で雰囲気が変わったり、リズムにアクセントを入れたり最後までワクワクが続くようになっています。
飽き性には全然感じられませんが、長い曲ほど構成やバランス調整に根気が入りそうですね😳
その辺りの繊細な音作りは流石です〜
では最後にみなさんに聴いてもらいたい自分のオリジナル曲名を教えてください
ぬん
『輪廻と揺ぐ』(りんねとゆるぐ)です。
ランキング3位以上にすら入っていない曲ですが、個人的にとても自信がある曲です。ゆったりとした曲調に切なさを存分に注ぎ、大好きなピアノも活躍するのでまだ聞いたことない方は聞いてくれると超喜びます。
ぬん「輪廻と揺ぐ」
https://3musicline.com/community/173895 (アプリリンク)
スー
聴きました！
楽器の使い方もコードもメロディもおしゃれですね♪
ピアノの伴奏というか裏メロが効いています😆
ぬんさんありがとうございました！
次回は今回の企画ラストのがちゃさんにインタビューです。
9/7頃投稿予定ですので、お楽しみに〜
| 前 の インタビュー | 次 の インタビュー |
挿絵のLINEスタンプ
