angular-electronを使ってtodoアプリを作った。

概要

前回 の流れからangularを触ってみました。
ついでにelectronもやってみよーっということで、またまたtodoアプリつくってみました。

調べてみると自分でangularとelectronを合わせてゴニョニョできるみたいでしたが、よくわからなかった(orz)のでangular-electronを土台として使わせてもらいました。

ソース：https://github.com/yasuakihirano/todoapp-angular-electron

やったこと

angular-electronをgit cloneする。

git clone https://github.com/maximegris/angular-electron.git

bootstrap4が使いたかったので、bowerでinstall、アイコンも使いたかったのでopen-iconicをインストール。

bower install bootstrap4 --save
bower install open-iconic --save

todoapp-angular-electron/src/app/components/home/ 配下を基本的にゴニョゴニョ

入力パネルの開閉のためのアニメーションとファイル出力のために@angular/animations, ngx-fsを個別インストール。

npm i @angular/animations --save
npm i ngx-fs --save

困った＆調べたこと

bower_componentsディレクトリ配置位置がおかしい

.bowerrcをルートディレクトリに作って、下記のような設定にしておけばok

.bowerrc

{
    "directory":"src/assets/bower_components"
}

ファイル出力の方法がよくわからない

入力したtodoをもしかしたら見返すことがあるかもしれないので、ファイル出力したかったがファイル出力方法がわからなかった。
それっぽい ngx-fs とかいうパッケージがnpmに上がっていたので使ったらうまくいった。

ブラウザとデスクトップ版の処理分岐

調べてもよくわからなかったですが、userAgentを見たらデスクトップ版にはelectronが入っているのでそれで分岐させた。

home.component.ts(一部)

    if (-1 < window.navigator.userAgent.indexOf("Electron")) {

外部cssの読み込み記載箇所どこ？

最終的に todoapp-angular-electron/src/styles.scss に下記のような感じで書いた。

styles.scss

@import "./assets/bower_components/bootstrap4/dist/css/bootstrap.css";
@import "./assets/bower_components/open-iconic/font/css/open-iconic-bootstrap.css";

よく使ったコマンドとかメモ

コマンド	内容
ng serve	webで実行する。
electron .	pjルートディレクトリで実行するとデスクトップ形式で実行される。
npm run electron:windows	windows用にビルドする
npm run electron:linux	linux用にビルドする
npm run electron:mac	mac用にビルドする

※electronコマンドでデスクトップ実行する場合にビルドしてからじゃないと変更が反映されないので注意
・gif画像作るのにScreenToGifが便利だった。

パッケージ化

electron-packagerを使う。windowsだとexeが出力される。すごい

electron-packager . todoapp-angular-electron --platform=win32 --arch=ia32

所感

思っていたよりお手軽にできた気がする。意外と情報元が少ないように感じた。(英語弱者です。。)
デスクトップ版にビルドするのに時間がかかるので、基本はng serveしたまま開発するとよさそう（自動リロードしてくれる）