はじめに
デスクトップアプリでデジタルサイネージを作る際、設定ファイルを読み込んだり、他社からパソコンの指定の場所に出力されたファイルを読み込んだり、
株価やニュース、天気などの情報をWebから取得して画面に表示する、ということがよくあります。
前回は、そういった外部ファイル（Jsonデータ）を読み込む手順を書きましたが、今回は、PC内に配置されている設定ファイルや画像、動画などを読み込んでいきたいと思います。
尚、使用するIDEはJetBrains社のWebStormを使い、Vue3フレームワークでの使い方になります。
目次
- Electron と Vue3 の準備
- 外部ファイルを読み込む
- ローカルファイルを読み込む
- fsモジュールでの外部ファイルの読み込み
- ファイルのパス
- 開発環境と本番環境の確認
- ビルド後もデータを編集したい
- 参考
環境
- Windows 10 Pro 64bit
- WebStorm 2021.1
- Node.js v14.15.1
- Vue 3.0.0
- Electron 11.0.0
1. Electron と Vue3 の準備
前回同様、まずは、Vue3 が Electron で動作する環境を作ります。
これは、WebStormでVue3のElectronアプリを作るを参考にセットアップしてみてください。
ここから先は、この環境が構築できたところからの解説になります。
2. 外部ファイルを読み込む
- Web上にあるファイルを読み込む
- localhostから下の階層にあるファイルを読み込む
- パソコン内のどこかにあるファイルを読み込む
前回はこの「1.」「2.」を説明しましたので、今回は「3.」についての説明です。
Node.jsのモジュールfsを使ってみたいと思います。
3. fsモジュールでの外部ファイルの読み込み
前回使ったお天気のJsonファイルを使って読み込みたいと思います。
Jsonファイルの場所を仮にドキュメントに置いて、Jsonファイルのプロパティから、パスを調べます。
場所がC:\Users\accou\Documentsとなっていますので、このパスを使います。
今回、ファイルの読み込みには、非同期処理のfs.readFileSyncを使います。同期処理をしたい場合は、fs.readFile使います。
<template>
<!-- 省略 -->
</template>
<script>
const fs = require('fs')
export default {
name: 'App',
mounted() {
let response = JSON.parse(fs.readFileSync('C:/Users/accou/Documents/130000.json','utf8'))
console.log(response)
}
}
</script>
<style>
<!-- 省略 -->
</style>
Jsonファイルなので、fsモジュールでファイルを読み込んだ後に、JSON.parse()を使って、Json形式にデータを作り、出力します。
実行してみると、fs.readFileSync is not a functionといったエラーが出てしまったので、これを解決します。
package.jsonと同じ階層にvue.config.jsファイルを作成します。
作成したファイルに以下のコードを書きます。
module.exports = {
pluginOptions:{
electronBuilder:{
nodeIntegration:true
}
}
}
これで実行してみます。
うまく読み込めたみたいです。
4. ファイルのパス
ファイルのパスを絶対パスで書けば、ファイルの読み込みが出来ることがわかりましたが、ElectronにはOS固有のパスを取得したり、実行中のアプリケーションのパスを取得する関数があり、設定ファイルのような、アプリケーションに付随するファイルのパスを指定する場合には便利です。
アプリケーションのディレクトリを取得する場合は、app.getAppPath()、
OS固有のディレクトリを取得する場合は、app.getPath(name)を使います。
nameの所には、homeやappDataなど、環境に合わせた名称をいれることで、絶対パスを取得できます。nameに入る名称はElectronのドキュメントで確認できます。
ということで、早速パスを取得してみます。
<template>
<!-- 省略 -->
</template>
<script>
const fs = require('fs')
const remote = require('electron').remote // <--追記
console.log('App path : ',remote.app.getAppPath()) // <--追記
console.log('Home path : ',remote.app.getPath('home')) // <--追記
export default {
name: 'App',
mounted() {
let response = JSON.parse(fs.readFileSync('C:/Users/accou/Documents/130000.json','utf8'))
console.log(response)
}
}
</script>
<style>
<!-- 省略 -->
</style>
実行してみると、またCannot read property 'app' of undefinedエラーが出てしまったのでこれを解決します。
background.jsファイルのwebPreferences内に追記します。
'use strict'
<!-- 省略 -->
async function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
enableRemoteModule:true // <--追記
}
})
<!-- 省略 -->
}
<!-- 省略 -->
これで実行してみます。
App Path : C:\Users\accou\Dropbox\WebstormProjects\vue3-electron\dist_electron、
Home Path : C:\Users\accou\
と表示されているので、うまく取得できたようです。
ただ、getAppPath()はindex.htmlからのパスになるため、開発環境と本番環境では、パスが変わってしまうことに注意してください。
6. 開発環境と本番環境の確認
開発環境と本番環境の確認方法は、process.env.NODE_ENVの値で確認できます。
値がdevelopmentなら開発環境、productionなら本番環境となりますので、この値を元に
const isDevelop = process.env.NODE_ENV==='development'
という感じで設定しておけば、isDevelopがtrueなら開発環境、falseなら本番環境、といった具合に切り替えがしやすくなります。
7. ビルド後もデータを編集したい
本番環境にビルドした場合、dist_electronディレクトリにデータが出力されますが、
インストーラ形式ではないアプリケーションデータは、dist_electron/win-unpackedという場所に保存されます。
htmlファイルなどの編集データは、dist_electron/win-unpacked/resources/app.asarという場所にパッケージ化されて保存されます。
パッケージ化させたくない場合、vue.config.jsに追記を行います。
module.exports = {
pluginOptions:{
electronBuilder:{
nodeIntegration:true,
builderOptions:{ // <--追記
asar:false // <--追記
} // <--追記
}
}
}