Vue.jsでピアノロールエディタ8
GitHub Pagesで公開
今日は何となく気が乗らないのでやる気が出るまで他のことをしよう、という感じでピアノロールエディタをGitHub Pagesで公開する設定をした。
Gitのブランチの削除
gh-pages
というブランチを作ってdocs
にビルド済みのアプリケーションを置いて設定すればGitHub Pagesで公開できる、と思って作業したが、なんかそれmaster
ブランチでもできるよという情報を目にしたのでやっぱり削除した。ブランチを削除するの何気に初めてなのでやり方をメモしておく。
ローカルのブランチを(強制的に)削除
git branch -D gh-pages
リモートのブランチを削除
git push --delete origin gh-pages
JSとCSSが404になる
https://s-hakase.github.io/pianoroll/
というURLで公開されるが、アクセスしても何も表示されない。DeveloperToolsを確認するとJSやCSSファイルが404になっている。
それぞれのファイルは/pianoroll/static
というディレクトリに格納されているが、index.html
は/static
に取得しに行っているので404が帰ってきているようだ。
webpackのconfig/index.js
にそれっぽいプロパティがあった。ルートディレクトリ/
を指定していたのでこれを空にすれば相対パスに変更できるかなと思って変更したらできた。
build: { // 中略 assetsPublicPath: '',
混合コンテンツ
GitHub Pagesはhttpsで公開されるんだけど、念のため読み込んでいたYUIのリセットCSSがhttpで混合コンテンツになっていたのでとりあえず参照しないようにした。
GitHub Pages
ということで公開できた。
https://s-hakase.github.io/pianoroll/
できること
- 左クリックでノートを置ける
- ちょっとラグいが左クリックを押している間は音がなる
- 右クリックでノートを削除できる
- 押したままドラッグするとほかのノートも消せる
- 左上のセレクトボックスでスナップ(説明しづらいけどノートの吸い付く間隔?)を変更できる
- ノートの右側をドラッグすると長さを変更できる
できないこと
- 再生機能はない
- ノートを左クリックすると選択できるが意味はない
- ピアノロールの大きさは変更できない(起動時のブラウザに依存)
Vue.jsでピアノロールエディタ7
現状
- ノートの右側をドラッグするとノートの長さを変更できるようになった
学んだこと
- 何気に初めて
$emit
でイベント起こして親コンポーネントのメソッドを実行するみたいなことをやった
気になること
イベントも書いていよいよコードがぐちゃぐちゃに。
今後の予定
細かいところ最悪体験という感じなので最終的には使いやすさを作り込みたいけどそれをやり出すときりがない気もするのでとりあえずは機能を実装する感じで進める。
- Ctrl+右クリックでカーソルのX軸にあるノートを選択
- 選択したら構成音からコード名を表示する
- 再生してノート通りに音を鳴る(やるかは未定だけどせっかく音鳴ったしやりたい)
- より良いVue.jsのコードを書くための勉強
- 人のVue.jsプロダクトを読む
Vue.jsでピアノロールエディタ6
現状
- ノートを左クリックすると選択(今はまだ赤くなるだけ)
- ノートを右クリックで削除
- 右クリック押したままマウスオーバーするだけでも消える
GitHubにpushできない
To git@github.com:s-hakase/pianoroll.git ! [rejected] master -> master (non-fast-forward) error: failed to push some refs to 'git@github.com:s-hakase/pianoroll.git' hint: Updates were rejected because the tip of your current branch is behind hint: its remote counterpart. Integrate the remote changes (e.g. hint: 'git pull ...') before pushing again. hint: See the 'Note about fast-forwards' in 'git push --help' for details.
書かれている通りgit pull
してコンフリクト解消してコミットしてpush
したらpush
できた。
ポート8000を指定してnpm run dev
できない
色々あってRLoginをブチっと切って再度接続したらPORT=8000 npm run dev
でエラーになるようになった。8001とか指定すると問題なく実行できる。
とりあえずlsof -i:8000
で確認したらやっぱりnode
が使ってたのでkill -9 <PID>
したら治った。たぶん正規の方法ではない。
気になるところ
- イベント周りがめっちゃごちゃごちゃしてきた
今後の予定
- ノートのふちを引っ張るって長さを変える
- Ctrl+右クリックでカーソルのX軸にあるノートを選択
- 選択したら構成音からコード名を表示する
- 再生してノート通りに音を鳴る(やるかは未定だけどせっかく音鳴ったしやりたい)
- 人のVue.jsプロダクトを読む
Vue.jsでピアノロールエディタ5
現状
- クリックするとノートが置けるようになった。
- ヘッダにスナップのセレクトボックスを設置
- 4分音符~64分音符まで選べる(三連符は非対応、小さいノートの時文字がはみ出るなど色々問題はあるが)
学んだこと
<option>
タグのvalue
に対応したものを<select>
タグにv-model
でバインド指定する- ショートカットキーで変更とかできそう(実装するかはさておき)
- テンプレート側で
@click="clickhandler($event)"
みたいにするとイベントオブジェクトが渡せる
気になること
- 場当たり的に書いてるからかイベント周りがごちゃごちゃしてきた
- ノートはとりあえず配列にどんどん突っ込んでいるけど、MMLに変換することを考える必要がある
- 現状順序が考慮されていないのでMML化する際には左から順になるようにソートする
- 同時に鳴るようなものは複数トラックにする
- 休符(じみにめんどくさそう)
今後の予定
- 右クリックでノートを削除
- 参考にしているFL Studioは左クリック押しっぱなしでドラッグすると触れたノートを全部消すみたいな動きをする
- Ctrl+右クリックでカーソルのX軸にあるノートを選択
- 選択したら構成音からコード名を表示する
- 実はこれが本来の目的
- 再生してノート通りに音を鳴る(やるかは未定だけどせっかく音鳴ったしやりたい)
終わり?が見えてきたぞ。
Vue.jsでピアノロールエディタ3
世の中のライブラリを使ったらどのくらい簡単にブラウザで音がならせるのかを確かめて、ピアノロールをクリックしたら音が鳴るようになるまでのドキュメンタリーである(?)。
Pico.js + Sionic.js
音を鳴らすのはメインではないので、MIDIより簡易?なMMLで扱いたい。Twitterで検索してみたら「Pico.jsとSionic.jsで鳴らせる」的なツイートを見かけたのでこれらを試してみた。
ダウンロードしてきたpico.min.jsとsionic.jsを読み込むとそれぞれグローバルにPicoとSionicというオブジェクトができるので、Sionic(mml)
のようにMML文字列をSionicに渡した返り値をPico.play(sionic)
みたいに渡すだけで音が再生された。簡単だ。良さそう。
現状
- ピアノロールをクリックすると音が鳴るようになった。
- ダウンロードしたJSファイルは何となくGitHubに上げてないのでpico.min.jsとsionic.jsをダウンロードして
static
ディレクトリに入れる必要がある。
- ダウンロードしたJSファイルは何となくGitHubに上げてないのでpico.min.jsとsionic.jsをダウンロードして
そういえば今更ですがChromeでしか確認してないです。
得た知識とか
外部JSのグローバルオブジェクトを扱う
普通にHTMLでJSファイルを読み込めばいいのだけど、そのままだとESLintに怒られるので.eslintrc
に無視する設定を追加した。
globals: { 'Pico': false, 'Sionic': false }
今後の予定
- エディタを左クリックでノート(音符)を置く
- 右クリックでノートを削除
- Ctrl+右クリックでカーソルのX軸にあるノートを選択
- 選択したら構成音からコード名を表示する
- 実はこれが本来の目的
- 再生してノート通りに音を鳴る(やるかは未定だけどせっかく音鳴ったしやりたい)
Vue.jsでピアノロールエディタ2
昨日はサボった。
現状
- ヘッダを追加
- ピアノロールエディタ
- グリッド表示
- マウスオーバーでヘッダにキーの名前を表示
ピアノロールエディタをマウスオーバーしてヘッダに表示するやつはVue.jsのチュートリアル動画で見たStoreパターンを使ってみた。
得た知識とか
Git:前回のコミットに対してちょっと追加したい
前回のコミットでコミット漏れがあったことに気づいたときに以下が便利。コミットコメントとかはそのまま、ステージングしたファイルの変更が追加できる。
git add <追加したいファイル> git commit -C HEAD --amend
Git:ステージングしたを元に戻したい
あんまり使わないから覚えられない。--hard
付けると変更も消えるので大ロス(一敗)。
git reset HEAD
vue-cliのhot reloadが効かない
rsync有効にすると色々と面倒なことになって結局切ったんだけど、他に解決方法があった。プロジェクトのconfig/index.js
でpoll
をtrue
にする。ホストでファイルを更新したらちゃんとリロードしてくれた! しかも部分的に再コンパイルしてるっぽくてリロードが速い。
def: { 中略 poll: true, 中略 }
今後の予定
- エディタを左クリックでノート(音符)を置く
- 右クリックでノートを削除
- Ctrl+右クリックでカーソルのX軸にあるノートを選択
- 選択したら構成音からコード名を表示する
- 実はこれが本来の目的
- エディタ部分クリックで音を鳴らす(やるかは未定)
- 音を鳴らすライブラリあるかな
- nanotunes - npm
- 再生してノート通りに音を鳴る(やるかは未定)