作成した背景
現在参画している現場でAngularを使うことになったのでそのキャッチアップも兼ねて自分が作りたいデスクトップアプリを作成しました。
まあ後は自分がElectron触りたかっただけなんですけどね。笑
使用言語についてざっくり
Angular
JSのフレームワーク。大体Angular CLIで色々する。
テストツールとかいろいろ纏まってるお陰でライブラリを選定しなくていい。
Electron
Chromium(ブラウザのChromeの元になってるブラウザ)とNode.jsで動くソフトウェアフレームワーク。
HTMLとJSとCSSでMac,Win,Linuxに対応するアプリケーションを作れる。
Atom,Discord,Skype,Slack,Visual Studio CodeとかはElectronで作られてる。
おんなじソースを各プラットフォーム向けにビルド出来たりする。
作成したアプリ概要
ソース
https://github.com/san-you/Trigger
パッケージ済みファイル
https://github.com/san-you/Trigger/releases/tag/v1.0.0
Trigger_Packaged.zip
パスを入力してそのパスにあるexeを起動してるだけです。笑
今後なにか要望があれば機能は追加する予定です。
アプリの詳しい説明
ElectronとAngularを使ったexeランチャーです。
ホーム画面、設定画面の二つの画面から構成されてます。
winしか今のところ対応してないです。
起動方法
解凍したフォルダ内のtrigger.exeを起動してください。
使用方法
設定画面でパスを打ち込んでホーム画面でそのexeを起動するだけです。
超シンプル。
初回起動だと
以下のような画面になってると思います。
まず設定画面でアプリのパスを設定してください。
設定画面は
ここ押すと出てくるメニューの
歯車のマークを押すと設定画面に行きます。
設定画面
アプリを登録する画面です。
最初は登録されたアプリの一覧が出てます。
左下のEditボタンを押すと編集モードに入って
アプリ名とexeのパスを登録できます。
今回は適当にSteamを登録します。
名前とパス入れてSaveボタン押下で登録できます。
ホーム画面
メニューからホーム画面に行ってもらうと
先ほど登録したアプリが表示されてます。
あとはlaunchボタンで起動するだけです。
超シンプル。
細かい仕様
・設定画面のアプリのパスは実際に存在する拡張子が.exeのパスじゃないと登録できないようにしてます。
・アプリの最終起動時間も登録されるようになってます。
・設定ファイルはC:\Users\[ユーザ名]\AppData\Roaming\Triggerのapp.jsonとconfig.jsonです。
制作小話
初JSフレームワークの勉強でサクッと作りたかったのでWebサービスではなくElectronをチョイスしましたが
ElectronはElectronでメインプロセスとレンダラープロセスの違い等厄介なところがあってつまりました。
レンダラープロセスでもNodeのAPI使えるって書いてあるのにめちゃめちゃ怒られて5時間くらい悩んだあげく原因は
ウィンドウ初期化のオプションに一行追加するだけとかありました。笑
あとAngularでうまくJsonをループして画面とデータを同期する方法が分からなくて力まかせに実装してます。
ここは絶対もっといい方法があるはず。閃いたらこっそり修正しときます。笑
でもAngularは画面作るのがめちゃめちゃ楽ですね。UIはAngular Materialってライブラリだけでほぼ出来てます。
自分でテーマ作ればあとはボタンとか適当に配置するだけで初学者でもこんなに綺麗なUIが作れて感動すらしました。
配置を整えるCSSのほうがよっぽど時間食いました。
あと全然Angular関係ないんですが初めてGitHubのRelease機能使いました。
友達とかにあげるときもURL送るだけでいいのでめちゃめちゃ楽ですね。
自分でも管理しやすいし。
ただElectronは対策しないといけないセキュリティの問題が結構あるので
webアプリをそのままElectronに乗せるだけだとセキュリティ面では不安です。
作ってみた感想
Angularすごい。Electronすごい。
なんか自分用のアプリ作るときはこれが第一選択肢になりそうです。
やっぱり初めて触る技術は楽しいですね。
独学したお陰で現場でも遅れ無しでAngularのタスク進められているのでやってよかったです。
みなさんもよかったらぜひ触ってみてください。
(なんかバグあったらissuesに乗せといてください。こっそり直します。笑)