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では最初から盛り込めてよかった！
（完成した後だったら、なかなか手が付けづらいんですよね...バグとか怖いし(´∩｀。)）
より使いやすくなればと思います。
特にドラム楽器並び替えは嬉しいんじゃないでしょうかᐠ( ᐢ ᵕ ᐢ )ᐟ
次はハーモニートラック？？の実装していきます。
