Electron + Vue.js + Bootstrap で環境構築

##今からやること

Electronとシェルスクリプトを使ったradiko再生プログラムを作成する。

##環境
macOS Big Sur
Visual Studio Code
node v14.0.0

##インストール項目
Vue 2.6.11
Electron 6.0.0 (electron-builder 1.4.6)
Bootstrap 4.0

##構築
#####[Homebrew][link-1]をインストール
[link-1]:https://brew.sh/index_ja

terminal

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

#####Node.jsをインストール

terminal

$ 省略

#####Vueの環境を構築

terminal

$ npm install -g @vue/cli
$ vue create my-app

terminal

Vue CLI v4.5.11
? Please pick a preset: (Use arrow keys)
❯ Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
  Manually select features

→ プロジェクト名は小文字のみ
→ Vue 3はBootstrapに対応していないのでVue 2を選択
#####Electronの環境を追加

my-app

$ vue add electron-builder@1.4.6

my-app

? Choose Electron Version (Use arrow keys)
  ^4.0.0 
  ^5.0.0 
❯ ^6.0.0 

バージョンをビルダーは1.4.6、Electronは6.0.0に指定
→シェルスクリプト等のコードが動かない

#####ルーターの追加
ルーター：複数のページを管理したりコンポーネントを管理するために便利な機能

my-app

npm install vue-router

#初期設定〜起動
#####Bootstrapの環境を追加

my-app

$ npm install bootstrap-vue

#####メインの基盤となるmain.jsにルータの記述を追加

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router' //added

new Vue({
    router, //added
    render: h => h(App),
}).mount('#app')

#####router.jsを新規作成

src/router.js

import Vue from 'vue'
import Router from 'vue-router'

import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(Router)
Vue.use(BootstrapVue)

export default new Router({
    mode:'history',
    base: process.env.BASE_URL,
    router:[]
})

#####アプリを起動
ここまでできたら起動してみる

my-app

$ npm run electron:serve

#####アプリをビルド

my-app

$ npm run electron:build

#応用

#####アイコンの設定
プロジェクトルートにvue.config.jsを作成し、指定した場所(src/assets/)にアイコンを格納。サイズは512×512のみ

vue.config.js

module.exports = {
    pluginOptions: {
      electronBuilder: {
        builderOptions: {
            productName: "my-app",
          mac: {
            icon: 'src/assets/icon.icns',
          },win: {
            icon: 'src/assets/icon.icns',
          },
        }
      }
    }
  }

#####ウィンドウサイズの固定・変更

src/background.js

/*

*/
async function createWindow() {
  // Create the browser window.
  const win = new BrowserWindow({
   titleBarStyle: "hidden",
   width: 1080, height: 600,
   resizable:false,
   webPreferences: {
    nodeIntegration: true,
    webSecurity: false, //ここ大事
    webviewTag: true,
   }
  })
/*

*/

詳しい情報はここに載っています
Electron ドキュメント：https://www.electronjs.org/docs/api/browser-windo

##結果
Electronのバージョンを上手く合わせないと中々、シェルスクリプトが動かなかった

参考サイト
GitHub：https://github.com/uru2/rec_radiko_ts
→ここのシェルスクリプトを参考にしました
Download FFmpeg：https://ffmpeg.org/download.html
→Gitのコマンドを打って手動でダウンロード

参考サイト2
[npmのuninstallコマンドを忘れがちなのでメモ][link-1]
[link-1]:https://qiita.com/mamosan/items/6f1cf71ccd82216fe25b