Electronの開発環境の構築
ようやく仕事が一段落したので、新しいフレームワークに手を出してみようと以前から気になっていたクロスプラットフォームのデスクトップアプリを作成できる「Electron」で簡単なアプリを作成してみることにしました。
Electronと言えば、Visual Studio Codeで使われているのが有名ですよね。このVisual Studio Codeは非常に便利なエディタで最近では手放せなくなってきたので、そのベースとなっているフレームワークがどんなものなのか知りたかったのが、今回やってみることにしたきっかけです。
目次
- 環境の構築
- 公式サイト掲載のクイックスタート用テンプレート
- Electron × Angular用テンプレート
- Electron × React用テンプレート
- Electron × Vue用テンプレート
- 開発時の動作確認について
- 参考リンク
環境の構築
今回はGitで公開されているスターター用のテンプレートを利用して環境を構築します。とりあえず以下に目ぼしいのをピックアップしました。
なお、エディタはVisual Studio Codeを利用しています。
公式サイト掲載のクイックスタート用テンプレート
Electronを初めて使うなら、余計なものがインストールされていない、こちらのテンプレートを使って勉強するのがよさげです。
TypeScript版もあります。（electron/electron-quick-start-typescript）
ただ、本当にElectronくらいしか入っておらず、勉強を兼ねてこのテンプレートをベースに開発環境を作ってみようとも思いましたが、実際の開発で利用するために足りないものが多く、正直なところ面倒だったので今回の開発では別のテンプレートを利用しています。
Electron × Angular用テンプレート
インストール後に「npm run start」で実行すると、WebサイトとElectronアプリの2つが起動します。
Angularなので特に明記はなくてもTypeScriptベースのテンプレートになっています。
Electron × React用テンプレート
chentsulin/electron-react-boilerplate
インストール後に「npm run dev」で実行すると、WebサイトベースのElectronアプリが起動します。
初期でホームとカウンターの2つのコンポーネントが実装されており、ページ遷移も実装されているので分かりやすいです。
Electron × Vue用テンプレート
インストール後に「npm run dev」で実行すると、WebサイトベースのElectronアプリが起動します。
今回はvue.jsもやってみたいと思っていたので（Angular、Reactは一応経験あり）、こちらのテンプレートを使ってアプリの作成をすることにしました。
開発時の動作確認について
上記のAngular、React、Vueで作成したプロジェクトからデバッグ用のコマンドを実行すると、WebサイトまたはWebサイトベースのElectronアプリが起動します。
なんでそんなことやっているんだろう、最初からElectronアプリを起動したらダメなのかと思いましたが、どうやらソースを変更したタイミングで即座にアプリへの反映を行いたいため、そういった環境にしているようで、通常のElectronアプリではこれができないものと思われます。
ただし、Webサイトベースの場合、サイト配下”以外”のローカルファイルを<img>タグのsrc属性に「src="file://～"」のように設定するとセキュリティ上のアクセス権エラーで読み込めませんが、通常のElectronアプリ（Webサイトベースではない）であれば読み込んで表示させることができるといった違いがあるので、若干の注意が必要です。