デスクトップアプリケーションを開発する手段はいくつかある(X Window System, JavaFX, Tkinterなど)と思いますが、普段JavaScriptでWebアプリケーションを作る人にとっては、HTMLとJavaScriptでデスクトップアプリケーションが作れるElectronが便利でしょう。 小規模なアプリケーションなら、標準ライブラリやjQueryでサクっと作って、それをElectronを使ってあげれば簡単にデスクトップアプリケーションにも出来ますが、 ある程度の規模となると、ReactやAngularなどのフレームワークを使ったほうが、開発効率が良いでしょう。 今回は、自身が勉強中のVue.jsとElectronを使ってデスクトップアプリケーションの構築について書いていこうと思います。 なお、Vue.jsとElectronの使い方は知っていることを前提にします。 また、vue-cliはインストール済みとします。
準備は以下の通りです。
- vue-cliでプロジェクトを作成
$ vue init simulatedgreg/electron-vue project-name - vue-cliに従って設定 (必要に応じて変更)
? Application Name (project-name) ? Application Id (com.example.yourapp) ? Application Version (0.0.1) ? Project description (An electron-vue project) ? Use Sass / Scss? (Y/n) ? ? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection) ❯◉ axios ◉ vue-electron ◉ vue-router ◉ vuex ◉ vuex-electron ? Use linting with ESLint? (Y/n) ? ? Which ESLint config would you like to use? (Use arrow keys) ❯ Standard (https://github.com/feross/standard) Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) ? Set up unit testing with Karma + Mocha? (Y/n) ? Set up end-to-end testing with Spectron + Mocha? (Y/n) ? What build tool would you like to use? (Use arrow keys) ❯ electron-builder (https://github.com/electron-userland/electron-builder) electron-packager (https://github.com/electron-userland/electron-packager) vue-cli · Generated "project-name".
- 作成したプロジェクトのディレクトリに移動して、依存パッケージをインストール
$ cd project-name $ npm install - 動作確認
$ npm run dev
デフォルトでこのような画面が出れば成功
プロジェクト内のsrcディレクトリ以下のソースファイルを編集することで開発を進めます。 Electronでアプリケーションを開発する場合、メインプロセスとレンダラプロセスのファイルをそれぞれ編集します。 編集対象のファイルはそれぞれ次の通りです。
- メインプロセスは
src/main/index.jsを編集 - レンダラプロセスは
src/renderer以下のファイルを編集
src/rendererディレクトリの構造は、インストールするプラグインによって変わることがあります。 例えば、src/renderer/routerはvue-routerをインストールした場合に生成されます。 この記事では、Vueのプラグイン(axios, vue-electron, vue-router, vuex, vuex-electron)をすべてインストールした状態のディレクトリ構造で説明します。
デフォルトでは、src/renderer/components/LandingPage.vueがレンダリングされます。 今回は、ごく簡単な例として、このファイルを書き換えて、内容が変わることを確認します。 src/components/LandingPage.vueの中身を以下のように書き換えてみてください。
<template>
<main>
<h1>electron-vueのサンプル</h1>
<table>
<thead>
<tr>
<th>氏名</th>
<th>性別</th>
<th>年齢</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td class="name">{{ item.name }}</td>
<td class="gender">{{ item.gender }}</td>
<td class="age">{{ item.age }}歳</td>
</tr>
</tbody>
</table>
</main>
</template>
<script>
export default {
name: 'landing-page',
data() {
return {
list: [
{ id: 1, name: "太郎", gender: "男", age: 18 },
{ id: 2, name: "花子", gender: "女", age: 27 },
{ id: 3, name: "ボブ", gender: "男", age: 45 },
{ id: 4, name: "アリス", gender: "女", age: 9 }
]
}
}
}
</script>
<style>
table, th, td {
border: solid 1px #000000;
border-collapse: collapse;
}
table {
margin: auto;
}
th {
background: #a8a8a8;
color: #ffffff;
}
td.gender {
text-align: center;
}
td.age {
text-align: right;
}
</style>書き換えたら、ターミナル上でnpm run devを実行して、以下のような画面が表示されることを確認してください。
変更を加えたら正しく表示されなくなった場合、エラーメッセージが出ているはずなので、確認してみてください。
- そもそも画面が表示されない
コンパイルエラーが発生している可能性があるので、ターミナル上のエラーメッセージを読み、文法エラーなどがないか確認してみてください。
- 画面は表示されるが、真っ白か、一部表示されない
デフォルトの設定では、デベロッパツールが表示されるので、コンソールにエラーが出てないか確認してみてください
この記事では、electron-vueの簡単な紹介をしました。 実際にelectron-vueを使って、簡易的なExcelライクなCSVエディタを作成しました。 (azuki-penguin/csv-editor) 自分のmacOS上でExcelでCSVファイルを編集して保存をかけると、再度CSVファイルを開いた際に日本語が全部アンダースコア("_")に変更されてしまい、 問題が解決出来なかったので、CSVを編集するためのデスクトップアプリケーションを作るに至りました。 とりあえず最低限ファイルオープンと編集と保存が出来れば良いという感じで、作りはかなり手抜きですw (^^; (因みに、原因はどうやらmacOSのロケールを英語に設定していたことらしいです...多分...)
実践的な使い方はここでは扱わなかったので、electron-vueに興味を持たれた方は、ぜひ公式のリファレンスを覗いたり、チュートリアルサイトなどをググって参考にすると良いと思います。 例えば、electron-routerをプラグインとしてインストールした場合、src/renderer/router/index.jsを編集してルーティングを設定できます。 Vue.jsでWebアプリケーション開発をしている人は、同じ感じでデスクトップアプリケーションが作れて便利なのではないでしょうか。 自分自身Vue.jsもElectronも初心者なので、もっと勉強をして、より使いこなせるよになりたいと思います。 そんなこんなで、今回はここまで。
