Electronで電子カルテを自作・配布 その３

on 7月 5, 2021
Electronで電子カルテを自作・配布 その１
Electronで電子カルテを自作・配布 その２

前回の記事で、electronの①htmlとcssの作りこみ　→　②renderer.jsとmain.jsの作りこみ　まで記録しました。最後のこの記事は、③ウィンドウズ用にexe化 Mac用にapp化です。

windows用とmac用でスクリプトは変更する必要はあるか？

一般的には必要ないと思われます。ただ、私の場合は必要がありました。Macでインストールした自作のappを実行すると、Error: EROFS: read-only file systemが出てしまいました。でもフォルダでapp化する前のプログラムをnpm startする分にはエラーがおきないのです。これは私のプログラムが前回の設定をconfig.txtファイルに書き込み、次回はここから読み込むからです。このconfig.txtファイルは、appを初回に実行した場所に作成され保存される仕組みにしていました。

原因判明

Macでは、Appがインストールされる場所は “/Applications/アプリ名”です。ここにはどんなファイルも書き込めないようです。そのかわり、アプリがインストールされると、”/Users/ユーザー名/Library/Application Support/アプリ名”というフォルダができあがります。ここに設定ファイルを書き込めばよいようです。

つまりアプリから設定ファイルを作成して保存しておくには、”/Users/ユーザー名/Library/Application Support/アプリ名/config.txt”というファイルを作成すればいいのです。

元々のコード(windows用)

// ページが読み込まれたときのアクション
// render側では、診療日の入力をしている
// main process側では、config.txtファイル内からデータベースのパスを入手
ipcMain.on("onload-action", (event, arg) => {

  if (existsSync("config.txt")) { // config.txtファイルが存在する場合

    let text = readFileSync("config.txt");
    database = text.toString()
    console.log(`the path that config.txt indicates : ${text}`)

    if (text.length !== 0) {　// config.txtにパスが書かれている場合
      console.log("path was found in config.txt")
      event.reply("onload-action-reply", "load-success")
    } else {　// config.txtにパスが書かれていない場合
      console.log("path was not found in config.txt")
    }

  } else {　// config.txtファイルが存在しない場合
    writeFileSync("config.txt", "")  //空のファイルを書き出す
    console.log("Created config.txt")
  }

});

Mac用にconfig.txtファイルの作る場所を変えたもの

const {homedir} = require("os")
const path = require("path")

config_place_for_mac = path.join(homedir(),"Library","Application Support","アプリ名","config.txt")"

// ページが読み込まれたときのアクション
// render側では、診療日の入力をしている
// main process側では、config.txtファイル内からデータベースのパスを入手
ipcMain.on("onload-action", (event, arg) => {
  if (existsSync(config_place_for_mac)) { // config.txtファイルが存在する場合

    let text = readFileSync(config_place_for_mac);
    database = text.toString()
    console.log(`the path that config.txt indicates : ${text}`)

    if (text.length !== 0) {　// config.txtにパスが書かれている場合
      console.log("path was found in config.txt")
      event.reply("onload-action-reply", "load-success")
    } else {　// config.txtにパスが書かれていない場合
      console.log("path was not found in config.txt")
    }
  } else {　// config.txtファイルが存在しない場合
    writeFileSync(config_place_for_mac, "")  //空のファイルを書き出す
    console.log("Created config.txt")
  }
});

Exe化　App化

electron-builderを使用します。なお、electron-forgeも使いましたが、electron-builderのほうができあがったときのフォルダの中身がわかりやすく、どのファイルを配布すべきか理解できたのでこちらを使っています。

プロジェクトのフォルダで以下のコマンドを実行します。

npm install --save-dev electron-builder

公式によると、yarnの方がいいそうです。その場合は、以下です。

npm install -g yarn
yarn add electron-builder --dev

package.jsonに追加

appIdとか、categoryは変更する必要があります。

"build": {
  "appId": "your.id",
  "mac": {
    "category": "your.app.category.type"
  }
},
"scripts": {
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
}

コマンドラインを実行

npx electron-builder

yarnなら以下

yarn dist

これで、しばらくすると新たなフォルダができます。

windows

プロジェクトフォルダ内にdistフォルダが作成される。その中の●● setup 1.0.0.exeを配ればよい。　このexeをやるとセットアップされ、他のアプリケーションと同じようにインストールされる。アンインストールも他のアプリケーションと同様。このフォルダ内には、win-unpackedというフォルダがあるが、配布不要。ほかのymlとかyaml、blockmapも同様に配布不要のようだ。

Mac

プロジェクトフォルダ内にdistフォルダが作成される。その中に、アプリ名-1.0.0.dmgファイルがある。それを配ればよい。dmgファイルをダブルクリックすると、インストール画面がでてくる。（アプリのアイコンを、applicationフォルダーにドラッグするやつ）。他のアプリと同様に使用できる。このフォルダ内には、macフォルダができる。それを開くと、その場所でアプリが開いているようです。インストール不要で実行できるアプリってことでしょうか。

また、ymlとかyaml、blockmapも同様にできあがりますがやはり配る必要はなさそうです。むしろ、自分のfull pathとか書かれてて配らないほうがいいと思います。

完成しましたね！！大変でした！！

動物病院用電子カルテシステムを無料配布

Categories:

JavaScript
category
© 2024 獣医 x プログラミング.