musicLineアプリ開発日記

作曲を誰でも楽しく簡単に♪

【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位置を動かす
音符の統合2つのリズム音符の間をタップした場合、音符を統合
音符の伸縮リズム音符を左右にスワイプすることで音符の長さを伸縮、始点で分割なし(仕様変更)
音符の消滅音符の伸縮をした時に長さが0になると削除する(iOS独自)
領域差演算音符伸縮で他の音符に重なる時は差演算して他の音符長さを削る
サンプリング補間素早くスワイプしても音符が移動できるようにサンプリング間を補間する
細かい音符分割線内の細かな音符を移動する挙動
EraserTool
消しゴムツール
音符の削除
データ構造和音と連符の認識、フレーズから音符を削除する
音符の削除タップで音符を削除
和音・連符の削除和音・連符をタップで和音・連符のみを削除(iOS独自)
音符種別判定タップした音符が和音・連符・ルート音符なのか判定する
音符列の削除スワイプで指定する削除範囲内の複数の音符を削除。
和音列の削除リズム音符をスワイプで複数の和音のみを削除。(iOS独自)
休符に切り替えリズム音符タップで休符に切り替える
ドラムツール
PenTool
ペンツール
音符の作成
データ構造ドラム音符を作成、フレーズへ音符を追加・削除する
音符の作成・削除タップでドラム音符を作成。既に音符がある場合は削除
音符列の作成スワイプで跨いだ分割線にドラム音符を作成。
音符列の削除左にスワイプした範囲にある複数のドラム音符を削除。(iOS独自)
FingerTool
指ツール
音符の編集
データ構造フレーズのドラム音符を取得、選択、長さを編集して分割する
音符長さ編集音符を左右スワイプで長さを変更。長さがある時、連符になり長さ0の時連符解除
連符数の編集音符を上下にスワイプで連符数を変更(iOS独自)
タップ選択タップした音符を選択・解除
矩形選択囲った音符を選択
EraserTool
消しゴムツール
音符の削除
データ構造音符と連符の認識、フレーズから音符を削除する
音符の削除音符をタップで削除
休符に切り替え連符をタップで休符に切り替える
音符列の削除スワイプで指定する削除範囲内の複数の音符を削除。
伴奏ツール
PenTool
ペンツール
音符の作成
データ構造伴奏音符を作成、フレーズへ音符を追加・削除、長さの編集、分割・統合する
音符の作成タップで伴奏音符を作成
音符の移動 (回避)音符をスワイプして移動。音符があるとこを回避する。
音符長さ編集・削除音符の右ハンドルを左右にスワイプして長さ変更。長さ0の時削除
音符の分割・統合音符をタップで左右に分割・統合
音符列の削除左にスワイプした範囲にある複数の伴奏音符を削除。
FingerTool
指ツール
音符の編集
データ構造フレーズの伴奏音符を取得、選択、長さを編集、連符切り替え
音符の移動 (上書き)音符をスワイプして移動。移動した場所の音符は削除。
音符長さ編集・削除音符の右ハンドルを左右にスワイプして長さ変更。長さ0の時削除
連符数の編集音符選択時に表示されるピッカーで連符数を変更
タップ選択タップした音符を選択・解除
矩形選択囲った音符を選択
EraserTool
消しゴムツール
音符の削除
データ構造音符と連符の認識、フレーズから音符を削除、休符切り替え
音符の削除音符をタップで削除
休符に切り替え連符をタップで休符に切り替え
音符列の削除スワイプで指定する削除範囲内の複数の音符を削除
PhraseTool
フレーズツール
フレーズの編集
データ構造トラックのフレーズを取得・追加、削除、状態
フレーズの作成・挿入ダイアログで長さとリピートを設定 リピートフレーズは未実装
フレーズの選択2点タップで範囲選択、範囲ガイドタップで選択解除(仕様変更)
フレーズの移動左右スワイプで移動、移動は選択フレーズとスワイプ中のフレーズを含む
フレーズの伸縮サブ編集領域をスワイプした時にフレーズ長さを伸縮、長さ0で削除(iOS独自)
フレーズの貼り付け選択フレーズをコピー・ペースト、サブボタンかフレーズタブタップで挿入、選択解除
周囲有無判定作成する小節の近くにフレーズがあるかの判定、設定できる長さやリピート回数の制御
フレーズボタン・タブツールに応じてフレーズボタン、タブの処理を変更
フレーズの結合連続する2フレーズの接する小節線をタップで結合(iOS独自)
フレーズの分割フレーズをタップで分割(iOS独自)
StampTool
スタンプツール
モチーフの編集
Transform
画面移動
座標変換
画面を上下移動ピアノのスワイプにより
画面を左右移動 スクロールエリアのスワイプにより
画面を拡大・縮小ピンチアウト・インにより基点を画面中心に設定する
画面を拡大・縮小(軸指定)長押しからのドラッグ。ピアノでX軸方向、スクロールエリアでY軸方向
ドラム座標系新しくドラムの座標系を追加。下へ楽器が追加されるため、メロディーと異なり左上原点
MIDI コンバーターCompositionからMIDIのデータ構造へ変換
曲の再生画面左からMIDI再生、Compositionのデータ構造から曲の再生、再生位置の同期
曲の再生(最初から)再生ボタン長押しで最初から再生 最初から再生されるが、画面は最初に移動しない
曲の再生(位置指定)スクロール領域をダブルタップでその位置から再生(iOS独自)
再生速度の変更ドラッグで曲の再生速度を変更(iOS独自)
再生処理の最適化曲に変更がない時はキャッシュを使う、変更通知とキャッシュの管理
Commnity
Common
コミュニティ
データ構造カテゴリ等の曲情報、いいねやお気に入り等のリスポンスを保持
CommunitySongPlayerコミュニティ用にラップした曲プレイヤー
CategoryListsカテゴリーリスト群のモデル。カテゴリー別にフェッチ/キャッシュ
ListInfoカテゴリーリストのモデル、リストのスクロール位置、フェッチするページ番号等
ContextCommunity共通のCommonContextと各画面のContextがある
UserActivityManagerユーザーのアクティビティ(いいね、ミュートユーザー、再生リスト、モチーフ登録、アクセス履歴等)を管理
Service
サービスモデル
ListItemFetcherカテゴリーリスト項目のMLサーバーから取得する
MidiRepositoryMIDIファイルをサーバーから取得して貯める
UserActivityFetcherユーザーの行動をMLサーバーから取得する(再生数、再生リストに含まれているか、コメント等)
MIDI
Common
MIDI共通
データ構造MIDIフォーマットへ出力できる構造
コントローラー曲の読み込みや再生、再生位置の監視や音源の変更などMIDIの扱いを管理する
サンプラーピアノや音符生成時に単体のMidiイベントから音を鳴らす
Service
サービスモデル
MidiPlayerMIDIを再生する
MidiReaderMIDIファイルの読み込み
MidiWriterMIDIファイル出力
Account
Common
アカウント
データ構造ログインできる構造、アカウント情報、ログイン情報、MLユーザー情報
AccountManagerアカウントの管理、ログイン時にMLサーバーと通信
Service
サービスモデル
UserActivityRepositoryユーザーのアクティビティ(いいね、ミュートユーザー、再生リスト、モチーフ登録、アクセス履歴等)を貯める
ServerCommunicationMLサーバーと通信する処理を集約
Domain
データ構造
Json形式
Melody MelodyTrack, MelodyPhrase, NoteContainer, NoteBlock, Note
Drum DrumTrack, DrumPhrase, BeatContainer, Beat
通化 Original, Repeat, Syncの3種のPhraseをジェネリッククラスとプロトコルで抽象化
Service
サービスモデル
SongRederJsonファイルを読み込み、Domainのデータへ変換
SongWriterDomainのデータからJsonファイルへ書き出し
Common
Service
サービスモデル
リポジトリ保存データを管理


実装の詳細

伴奏音符

伴奏音符

伴奏音符は四角形で表示し、右端にハンドルがあります。メロディー音符が角丸に対して、角張っているのが特徴です。
連符は黒枠の中の音符が分割して表示されます。

また、連符は画面の拡大率によって省略表示されます。

連符の省略表示



伴奏ペンツール

伴奏ペンツール

伴奏フレーズ内でタップすることで音符を分割線内に音符を作成します。
右にスワイプをすることで音符作成と同時に長さを指定します。
左にスワイプをして囲った範囲の音符を削除します。


音符の移動と長さの編集

音符をスワイプすることで移動します。移動は分割線にフィットします。画面を拡大することで細かく移動ができます。なお、既にある音符は上書きせずに回避した場所に配置されます。

音符の右端についているハンドルを左右にスワイプすることで長さを伸縮します。
長さが0に縮めた場合は削除になります。

移動と長さ編集


音符の分割・統合

音符内の分割線をタップすることで、音符を左右に分割できます。
逆に左右に音符がある分割線をタップすると統合します。

音符の分割・統合



伴奏指ツール

伴奏指ツール

音符をスワイプで移動します。既にある音符は削除されます。ペンツール移動は回避されるのに対し、指ツール移動は上書きされる違いがあります。
音符のハンドルを左右へスワイプすることで長さを変更します。
タップや矩形選択で音符を選択して、複数同時に長さを変更することができます。
フレーズタブをタップすると、フレーズ内の音符を全選択します。


音符移動時のフィッティング機能

指ツールでは分割線以外にも近くの音符にフィットさせたり、そのまま上下のみ移動することができます。

フィッティング機能


連符数の変更

音符を選択するとピッカーが表示されて連符数を変更することができます。
ピックの仕方はホイールとメニューがあります。

ピッカー(ホイールとメニュー)

メニューはピッカーをタップすると表示される選択肢から選びます。
ホイールは上下スワイプするだけで素早く変更できます。

連符数の変更



伴奏消しゴムツール

伴奏消しゴムツール

音符をタップして削除します。 連符も省略表示の時はタップで削除できます。詳細表示の時はタップで休符に切り替えます。
スワイプで矩形選択した範囲の音符を削除します。



おわりに

伴奏トラックの実装ができました!!
次はハーモニートラック?と思ってましたが、前述通りメロディートラックと大差ないので見送りました。というか今となっては完全にメロディートラックと機能が被ってますね。 (´ヘ`;
(実はリリース当初和音はハーモニートラックしか追加できなかった=3 それはここだけの話੭˙▷˙)੭
なのでハーモニートラックはまた特徴を出せる段階になってから実装しようと思います。

伴奏トラック気に入ってもらえるといいですね ♪
musicLineはメロディーは作りやすいけど、和音を多用する伴奏はイマイチで使いづらいと前々から言われており、
その時から伴奏に特化した伴奏トラックの構想はありましたが気が進まずお蔵入りしてました。
やはり既に完成しているAndroidでは変更する部分がかなり多いので不具合が心配だったり実装が難しかったりするんですね。。iOSで好評だったらAndroidでも頑張ってみようかな?

そんなこんなでiOS版では一味違ったmusicLineを出すことができそうです!iOSリリースする上でAndroidとは違った一押し機能みたいなものを実装しておきたかったので、このタイミングで実装できて良かったです ′◡‵ ノノ☆

次はリピートフレーズを実装していきます。