はかせだけど博士じゃない

無職が就活しないでプログラミングとかする

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

現状

f:id:s-hakase:20180419141957p:plain

github.com

  • ノートの右側をドラッグするとノートの長さを変更できるようになった

学んだこと

  • 何気に初めて$emitでイベント起こして親コンポーネントのメソッドを実行するみたいなことをやった
    • コンポーネント側でthis.$emit('vuecustomevent')ってして、親コンポーネントのテンプレートで@vuecustomevent="fn"ってすると、親側で定義した関数fnが呼び出される

気になること

イベントも書いていよいよコードがぐちゃぐちゃに。

今後の予定

細かいところ最悪体験という感じなので最終的には使いやすさを作り込みたいけどそれをやり出すときりがない気もするのでとりあえずは機能を実装する感じで進める。

  • Ctrl+右クリックでカーソルのX軸にあるノートを選択
    • 選択したら構成音からコード名を表示する
  • 再生してノート通りに音を鳴る(やるかは未定だけどせっかく音鳴ったしやりたい)
  • より良いVue.jsのコードを書くための勉強
    • 人のVue.jsプロダクトを読む

Vue.jsでピアノロールエディタ6

現状

f:id:s-hakase:20180418162135p:plain

github.com

  • ノートを左クリックすると選択(今はまだ赤くなるだけ)
  • ノートを右クリックで削除
    • 右クリック押したままマウスオーバーするだけでも消える

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>したら治った。たぶん正規の方法ではない。

気になるところ

  • イベント周りがめっちゃごちゃごちゃしてきた
    • ピアノロールコンポーネントとノートコンポーネントでそれぞれマウスイベントを定義しているのが悪い気がする
    • Storeパターンさんのことをもっと理解すれば解決するんだろうか
    • 人のコードとか読んでみたい。おすすめのリポジトリとかないかな

今後の予定

  • ノートのふちを引っ張るって長さを変える
  • Ctrl+右クリックでカーソルのX軸にあるノートを選択
    • 選択したら構成音からコード名を表示する
  • 再生してノート通りに音を鳴る(やるかは未定だけどせっかく音鳴ったしやりたい)
  • 人のVue.jsプロダクトを読む

Vue.jsでピアノロールエディタ5

現状

f:id:s-hakase:20180417131645p:plain

github.com

  • クリックするとノートが置けるようになった。
  • ヘッダにスナップのセレクトボックスを設置
    • 4分音符~64分音符まで選べる(三連符は非対応、小さいノートの時文字がはみ出るなど色々問題はあるが)

学んだこと

  • <option>タグのvalueに対応したものを<select>タグにv-modelでバインド指定する
    • ショートカットキーで変更とかできそう(実装するかはさておき)
  • テンプレート側で@click="clickhandler($event)"みたいにするとイベントオブジェクトが渡せる

気になること

  • 場当たり的に書いてるからかイベント周りがごちゃごちゃしてきた
  • ノートはとりあえず配列にどんどん突っ込んでいるけど、MMLに変換することを考える必要がある
    • 現状順序が考慮されていないのでMML化する際には左から順になるようにソートする
    • 同時に鳴るようなものは複数トラックにする
    • 休符(じみにめんどくさそう)

今後の予定

  • 右クリックでノートを削除
    • 参考にしているFL Studioは左クリック押しっぱなしでドラッグすると触れたノートを全部消すみたいな動きをする
  • Ctrl+右クリックでカーソルのX軸にあるノートを選択
    • 選択したら構成音からコード名を表示する
    • 実はこれが本来の目的
  • 再生してノート通りに音を鳴る(やるかは未定だけどせっかく音鳴ったしやりたい)

終わり?が見えてきたぞ。

Vue.jsでピアノロールエディタ4

現状

f:id:s-hakase:20180416034208p:plain

ノートのコンポーネントを作った。あんまり進捗がないのでまだGitHubには上げてない。

MMLのパーサがない

JSで書かれたMMLパーサ(MML文字列をJSONにする感じのモジュール)が見つからなくて、前回せっかくMML鳴らせる感じがするなって思っていたのに残念な気持ちになっている。

Sionic.jsの方で文字列を何らかの形に変換しているはずなので、ちょっとソースを読んで参考にならないか見てみる。

でもここ数日体調が芳しくないので今日はここまで。昼夜逆転してるのも治したいところ。

Vue.jsでピアノロールエディタ3

世の中のライブラリを使ったらどのくらい簡単にブラウザで音がならせるのかを確かめて、ピアノロールをクリックしたら音が鳴るようになるまでのドキュメンタリーである(?)。

Pico.js + Sionic.js

音を鳴らすのはメインではないので、MIDIより簡易?なMMLで扱いたい。Twitterで検索してみたら「Pico.jsSionic.jsで鳴らせる」的なツイートを見かけたのでこれらを試してみた。

ダウンロードしてきたpico.min.jsとsionic.jsを読み込むとそれぞれグローバルにPicoとSionicというオブジェクトができるので、Sionic(mml)のようにMML文字列をSionicに渡した返り値をPico.play(sionic)みたいに渡すだけで音が再生された。簡単だ。良さそう。

現状

github.com

  • ピアノロールをクリックすると音が鳴るようになった。

そういえば今更ですがChromeでしか確認してないです。

得た知識とか

外部JSのグローバルオブジェクトを扱う

普通にHTMLでJSファイルを読み込めばいいのだけど、そのままだとESLintに怒られるので.eslintrcに無視する設定を追加した。

  globals: {
    'Pico': false,
    'Sionic': false
  }

今後の予定

  • エディタを左クリックでノート(音符)を置く
    • 右クリックでノートを削除
  • Ctrl+右クリックでカーソルのX軸にあるノートを選択
    • 選択したら構成音からコード名を表示する
    • 実はこれが本来の目的
  • 再生してノート通りに音を鳴る(やるかは未定だけどせっかく音鳴ったしやりたい)

Vue.jsでピアノロールエディタ2

昨日はサボった。

現状

github.com

f:id:s-hakase:20180412123214p:plain

  • ヘッダを追加
  • ピアノロールエディタ
    • グリッド表示
    • マウスオーバーでヘッダにキーの名前を表示

ピアノロールエディタをマウスオーバーしてヘッダに表示するやつはVue.jsのチュートリアル動画で見たStoreパターンを使ってみた。

得た知識とか

Git:前回のコミットに対してちょっと追加したい

前回のコミットでコミット漏れがあったことに気づいたときに以下が便利。コミットコメントとかはそのまま、ステージングしたファイルの変更が追加できる。

git add <追加したいファイル>
git commit -C HEAD --amend

Git:ステージングしたを元に戻したい

あんまり使わないから覚えられない。--hard付けると変更も消えるので大ロス(一敗)。

git reset HEAD

vue-cliのhot reloadが効かない

rsync有効にすると色々と面倒なことになって結局切ったんだけど、他に解決方法があった。プロジェクトのconfig/index.jspolltrueにする。ホストでファイルを更新したらちゃんとリロードしてくれた! しかも部分的に再コンパイルしてるっぽくてリロードが速い。

def: {
中略
  poll: true,
中略
}

今後の予定

  • エディタを左クリックでノート(音符)を置く
    • 右クリックでノートを削除
  • Ctrl+右クリックでカーソルのX軸にあるノートを選択
    • 選択したら構成音からコード名を表示する
    • 実はこれが本来の目的
  • エディタ部分クリックで音を鳴らす(やるかは未定)
  • 再生してノート通りに音を鳴る(やるかは未定)