ElectronにBootstrap 5とReactを入れてみる。

こんばんは！株式会社スマレジ、開発部のmasaです。

今回の前回に引き続き、Electron関係の記事になります。

なおスマレジプラットフォームAPIのクライアントアプリ作成（アクセストークンの取り方など）については、別に記事にしますのでもう暫しお待ちください。

ElectronにBootstrap 5とReactを入れてみる

タイトルの通りです。ちなみにmasaはごく最近Reactを触り出したので、間違えたこと言うかもです。ご容赦ください。簡単に書いていますが、ポイントになるところが結構多いので、細かい部分はgithubにソースが上がっているので、詳しくはそれを見て見てください。

Bootstrapの導入

ファイルの設置

前提として、Electronを使う訳なので、CDNは使用せずローカルにBootstrapをダウンロードして使用します。フォルダの構成は暫定ですが、views以下にフロントのプログラムを設置します。

このうち、buildフォルダにコンパイルされたhtmlが設置されます。本体となるReactファイルはsrcの下に配置する想定です。

Bootstrapのフォルダは直接build直下のlibフォルダ配下に配置します。

Helmetを使って、headにlinkタグとscriptタグを追加する

次にlibに配置したBootstrapを読み込むHTMLを生成します。 Headに要素を追加したいときは、HelmetというReactパッケージがあるのでそれを利用します。

npm install --save react-helmet

で取り込んで、下記のように利用します。

import { Helmet } from "react-helmet"

...

class Head extends React.Component {
    constructor(props) {
        super(props);
        this.title = props.title;
    }
    render() {
        return (
            <Helmet>
                <title>{this.title}</title>
                <link rel="stylesheet" href="../public/lib/bootstrap-5.0.2-dist/css/bootstrap.css"/>
                <script src="../public/lib/bootstrap-5.0.2-dist/js/bootstrap.js"></script>
            </Helmet>
        );
    }
}

class Top extends React.Component {
    render() {
        return (
            <div class="top container-fluid">
                <Head title="Project Manager" />
                <div class="row" id="content-field">
                ...
        );
    }
}

これでBoostrapの導入は終わりです。

Reactの導入

続いて、Reactですが、これは難しいことはなく単純にbuildしたファイルをメインプロセスで指定してあげるだけです。

const { app, BrowserWindow, ipcMain } = require('electron')
...

const createWindow = () => {
  const width = 700;
  const height = 600;
  const win = new BrowserWindow({
    width: width,
    height: height,
    minHeight: height,
    minWidth: width,
    maxHeight: height,
    maxWidth: width,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    },
    fullscreen: false,
    frame: true
  })
  // 開発ツールを有効化
  // win.webContents.openDevTools();
  win.loadFile('./views/build/index.html') // <------ここでbuildファイルを指定している
}
...

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})