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/
できること
- 左クリックでノートを置ける
- ちょっとラグいが左クリックを押している間は音がなる
- 右クリックでノートを削除できる
- 押したままドラッグするとほかのノートも消せる
- 左上のセレクトボックスでスナップ（説明しづらいけどノートの吸い付く間隔？）を変更できる
- ノートの右側をドラッグすると長さを変更できる
できないこと
- 再生機能はない
- ノートを左クリックすると選択できるが意味はない
- ピアノロールの大きさは変更できない（起動時のブラウザに依存）
