Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

概要

前回 の流れから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が出力される。すごい:rolling_eyes:

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

所感

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

yasuaki0206
福岡でフリーランサープログラマやってます
https://codelikes.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away