はじめに
ネイティブでの開発もいいけど、クロスプラットフォームでできれば後々ラクですよね。でも、言語やIDEにいろいろな組み合わせがあって、結局どれを使っていいかわかんないよね。
で、いままで何もしてこなかったのですが、そろそろ何かしてみても良いんじゃないか？
ということでElectron+Vue.jsを美味しく頂いてみます。
なお、私はJavascriptのJavくらいは知っている程度です。ルーティングというのはVaporで見かけました。Node.js、てめえはいつもバージョン絡みで困らせてくれるよなぁ。
こんな感じです。
こんな感じでも何とかしてみせましょう！
目標
すっぴん状態のElectoronスケルトンを作ります。「こんにちは世界」レベル。
Googleで検索すると出てくるelectron-vueのロゴを出してみることが目標です。
なにはともあれ、そこがスタートラインです。まずはそこまでたどり着きましょう。
手順
開発環境を用意する
いつものVagrant。
ただし、GUIが使えないと最後の最後でエラーが出て(´・ω・｀)となるため、VirtualBoxで起動するようにしたものを使います。初回は諸々のyumを走らせる必要があるので、起動するまでものすごく時間がかかりました。
正攻法からはじめる
まずは正攻法。今回はelectron-vueを使います。
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project
cd my-project
yarn
yarn run dev1つ目のコマンドでコケましたよ〜
ちなみに今はvue initは使わずにvue createを使うのが良いようですね。
まぁ私は2つ目のコマンドにすら辿りつけていないですけどね。
npmをインストールする
無いならば用意します。
sudo yum install epel-release
sudo yum install npmVue-CLIをインストールする
npmで導入します。
npmをインストールしたのでコケないはず。
npm install vue-cli-gオプションを付けていないのは個人的趣味です。付けていただいても構いません。
パスを通すも通さないもお好きな方で。通したほうがラクですかね。
脱線
npmで何かインストールするときに出てくるWARNがどうも苦手です。
yarnをインストールする
なさそうな気がする……
bash: yarn: コマンドが見つかりませんでした...ですよね！
インストールしておきます。
sudo wget https://dl.yarnpkg.com/rpm/yarn.repo -O /etc/yum.repos.d/yarn.repo
sudo yum install -y yarnnode.jsのバージョンを上げておく
上げる必要がないような気がしますが、上げておきます。だめなら下げます。そのためのnvm。
bash: nvm: コマンドが見つかりませんでした...うん知ってた。
nvm本体とNode.jsの一番新しいのをインストール。
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
source ~/.bash_profile
nvm ls-remote
nvm install v13.12.0スケルトンを作る
いよいよ本丸です。
作業用ディレクトリを作ってそこに移動しておきます。
vue init simulatedgreg/electron-vue {プロジェクト名}パスを通してなければvueのフルパスを入れてくださいね。
テストスイートやなんやらかんやらを対話形式で聞かれるので、都度回答していきます。エラーが表示されなければプロジェクト名のディレクトリと必要なファイル群が出来上がっています。
気になる警告
warning Failed to append commit SHA on README.md
git関連のエラーのようです。違うかもです。
後続の処理に影響なさそうなため、そのまま放置で進めました。
実務上では解決すべきでしょう。
yarnする
できたプロジェクト名のディレクトリ内に移動してyarnします。
yarnはnpmと同じくパッケージマネージャの一種です。良き感じに取り計らってくれます。
エラーなどでなければ完了です。
ファイルに小細工をします
あと一息！yarn run dev一発で完了のはずなのですが、落とし穴が待ち構えています。
yarn実行結果より
ERROR in Template execution failed: ReferenceError: process is not defined
これに対処するために、いくつかのファイルに対して少し修正を加えます。
133行目付近
},
+ isBrowser: false,
+ isDevelopment: process.env.NODE_ENV !== 'production',
nodeModules: process.env.NODE_ENV !== 'production'23行目付近
mainWindow = new BrowserWindow({
+ webPreferences: {
+ sandbox: false
+ },
height: 563,2行目付近
<!DOCTYPE html>
- <html>
+ <html lang="ja">
<head>16行目付近
<!-- Set `__static` path to static files in production -->
- <% if (!process.browser) { %>
+ <% if (!htmlWebpackPlugin.options.isBrowser && !htmlWebpackPlugin.options.isDevelopment) { %>
<script>
- if (process.env.NODE_ENV !== 'development') window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
+ window.__static = require('path').join(__dirname, '/static').replace(/\\/g, '\\\\')
</script>足りないものを1つずつ入れていく
もうゴールさせてくれても良いんじゃないかな？いえいえ、なんとまだ落とし穴が存在します。
「〇〇が無い」というエラーが表示されるので、
yarn run dev
yum whatprovides {無いと言われたもの}
sudo yum install {無いと言われたものが入っているパッケージ名}を繰り返します。そのうち、エラーがでなくなりますので、根気よく続けましょう。
ようやくゴールです
ここからはGUIでの操作になります。SSH一本で進めようとすると、最後の最後でGtk-WARNING **: cannot open display:
と表示されて(´・ω・｀)することになります。
いかんせんvagrant sshでここまで来れてしまうので、気持ちが余計に萎えてしまいます。
VirtualBox VMから端末を開き、yarn run devしてしばし待ちます。
Electronの画面が表示されました！
バージョンなどが表示されています。
- vue.js 2.6.11
- electron 2.0.18
- node 8.9.3
こころなしか古いような気がする。でもひとまずは方法を知っておけば応用が利くと思います。
長旅、お疲れさまでした。
参考
cannot communicate with zygote
yarn run devで発生。再度yarnすると直った。
画面サイズの変更
Oracle VM Virtualboxのツールバーから、表示->仮想スクリーン でリサイズ可能。ウインドウをつまんで拡大縮小でも対応可能。
セキュリティ警告3件
実行時コンソールにセキュリティ警告が3件出ています。
- Insecure Content-Security-Policy
- Insecure Resources
- Node.js Integration with Remote Content
src\main\index.jsのsandboxをfalseにしたことが関係しているようです。