こんにちは。きんくまです。
Electronを使って、webサイトに使う素材を作るPC用の開発ツールを作成しようといろいろと調べてました。
それで、最終的にはmacとwin両方でアプリを書き出したいです。私はmacを使っていてmacアプリを書き出すのはすぐにできるのですが、windowsアプリを書き出すのはそのままだと難しそうです。
で、parallels上のwindowsから書き出すメモです。
手順抜粋
1. macでアプリ書き出しできるようにする
2. mac上にgitのリモートリポジトリ作成
3. 2に1のソースをコミット
4. parallels上のwinから2をclone。（以下win上の手順）
5. npm install
6. npm run xxx でwinアプリを書き出し
1. macでアプリ化
まずmacアプリを作ります。
公式ページによると electron-quick-start をクローンすると簡単らしいのでその通りにします。
git clone https://github.com/electron/electron-quick-start
そのあと、npm install でnpm入れて、 npm run startでアプリが起動します。
そのあといろいろ開発して、終わったとします。
アプリ化したいです。
公式ページによるとパッケージ化のツールはいろいろとあるみたいです。
>> Application Distribution
Packaging Tools
・electron-forge
・electron-builder
・electron-packager
3つもあって迷うところなのですが、先人の知恵をお借りしまして、electron-packagerを使うことにします。
>> 最新版で学ぶElectron入門 – HTML5でPCアプリを開発する利点と手順
で、npm scriptsにコマンドを書きます。
package.json
"scripts": {
"start": "electron .",
"build_mac_app": "electron-packager . MyAppDayo --platform=darwin --arch=x64 --overwrite",
"build_win_app": "electron-packager . MyAppDayo --platform=win32 --arch=x64 --overwrite"
},
ビルドコマンド npm run build_mac_app を実行すれば、macアプリのできあがりです。
ここからwindowsアプリ化をします。
electron-packagerのページには、macな人がwinアプリ作るときはWineっていうの使うといいよ。とか書いてあるのですが、だいたいこういうのを使うとハマってしまい時間を浪費するので、素直にwindowsからビルドするとします。
2. mac上にgitのリモートリポジトリ作成
3. 2に1のソースをコミット
mac上にリモートリポジトリを作ります。このあたりは前に記事を書いたので参考にしてもらえると。
>> [git, mac] ローカルにリモートリポジトリを作って、一人二役でマージとか練習したい
このときは、mac内で完結しましたけど、今回はmacとparallels上のwinでgitを介してソースを共有します。
なんでgitを間にいれるかというと、ソースに更新があったときに、毎回全てのソースをコピーするのが面倒だからです。
最初はmacのソースから直接ビルドすればいいじゃんと思ったのですが、npmのnode_modulesはwin用とmac用で違っているっぽくて（たぶん）そのままだと動かなかったのです。なので、winはwinでnpm installを別でしないといけなくて、そうするとオリジナルからの差分だけを更新できるgit経由が良いかなと思いました。
適当な新しいフォルダをどこかに作って
git init --bare
mac用のソースフォルダは、electron-quick-startをクローンしたものだったので、不可視フォルダの.gitフォルダを削除しておきます。
で、新しくgitでコミットします。
その前に、.gitignoreでビルドしたアプリが入らないようにします。
.gitignore
node_modules *-x64/ .idea/
*-x64 の部分がビルドしたアプリが入らない設定です。 .ideaはIntelliJ IDEAエディタ用なので気にしないでください。
git初期化してソース入れてコミットします。
git init git add . git commit -m "initial commit"
リモートを設定してpushします。
git remote add origin /path/to/yourfolder/remote git push origin master
4. parallels上のwinから2をclone
win上でのgitは以前に入れてどうやってやったのか覚えていないのですが、WINGW64というやつがありました。
Git Bashというやつ。win上でのbashのエミュレータなのかな？
で、こいつを使うときはコマンドプロンプトのときとパスの表記が違っているのを注意します。
\(yen)マークと/の違いです。（yenマークはうまく表示できていないかも。バックスラッシュとyenマークの歴史は適当に調べてください）
私の端末だとmacはZドライブで認識されていたので、以下で移動できました。
cd /Z
続けてmac上のどこかに適当なフォルダを作って、そこでcloneしました。
（parallels内にデータを持っても良いかと思うのですが、以前にそれやっててデータを消失したことがあるので、Time Machine管理されているmac上でwinの開発データを持っておきたいのです）
cd 適当なフォルダ git clone /Z/path/to/yourfolder/remote
5. npm install
6. npm run xxx でwinアプリを書き出し
ここからはnodeを使うので、コマンドプロンプトを使います。
windows用のnodeをインストールしてあるとします。
さきほどのgitクローンしたmacのフォルダに移動します。コマンドプロンプトだとドライブ間の移動は /d オプションがいるみたいです。
バックスラッシュはyenマークだと思ってください。
cd /d "Z:\適当なフォルダ"
移動完了したら、npm入れます
npm install
ビルドします
npm run build_win_app
アプリが書き出されました。うわー長かった！面倒くさいw
一度環境を構築したので、ソースに更新があったら、macからpushして、winからpullしたあと、またビルドすればwinアプリが書き出されます。
そんな感じのメモでしたー。
■ 自作iPhoneアプリ 好評発売中！
・フォルメモ - シンプルなフォルダつきメモ帳
・ジッピー電卓 - 消費税や割引もサクサク計算！
■ LINEスタンプ作りました！
毎日使える。とぼけたウサギ
