electronというフロントエンド技術で、デスクトップアプリを作れるフレームワークがあり
それをvueで記述してビルドできるようにしてくれたもの(+ cliによる雛形作成)
(electronが使われている例: Atom、VScode、SlackとDiscordのデスクトップ版など)
ドキュメント: electron-vue 日本語
ドキュメント: electron
vue init simulatedgreg/electron-vue プロジェクト名
で対話形式で、勝手にプロジェクトが出来上がるので、src/renderer以下にゴリゴリとコンポーネントを書く。
※ 灰色はテストで使用した音源[DOVA-SYNDROME]
mainは、主にウィンドウ関連の設定や開発時のプレビューの設定などが入っている。
rendererが主にいじる部分で、vuex、vue-ruterなどは普通のvueと同じ感覚で書くことができる。
multispinnerがメンテされてない(githubのセキュリティ警告を気にする人)
listrを使おう
こちらをパクッ参考に作ったものelectron-vue build設定
(※node-multispinnerは最後の更新が4~5年前になっている。)
Mac系でプレビューもビルドも失敗する。
index.ejsのif (!process.browser) {
を
if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) {
に書き換え
それ以外は、ドキュメント通りにやればプレビューが見れるはず?
基本的には、JavaScriptのAudioオブジェクトを利用して曲の再生、停止を制御しています。
アーティストや曲のアートワークは、JsMediaTagsというものを利用して、トラックが遷移するたびに、 ファイルパスを渡して穿り出すという形にしています。
設定はLocalStrageを使用して行う予定(開発中)
vuexの使い方も含めて、課題が色々残っていますが、electron、vue, electron-vueそれぞれのドキュメントを行ったり来たりしながら、自分なりに動けたところは、良かったかなと思っています。
今後もこまめに成果物を公開していくので、コメント、マサカリなど色々ください〜
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント