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をインストール

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:https://qiita.com/mamosan/items/6f1cf71ccd82216fe25b