Electronで電卓を作ってみた(Fiddle使用)

Electronで電卓作ってみた

Electron開発の勉強で、電卓アプリを作ってみた。

エディタはElectron Fiddleを利用

エディタはElectron勉強用アプリの「Electron Fiddle」を利用。
開発環境としては色々と足りないけど、ダウンロード→ビルドまでが秒で出来るので、サクッとプログラミングには向いてると思う。

ダウンロードからビルドまでは、過去記事参照。
Electronで開発を始める(サンプルアプリ起動まで)Electronで開発を始める(サンプルアプリ起動まで)

Electron Fiddleの起動

Electron Fiddle起動画面

Electron Fiddleを起動すると、毎回同じソースが開くようになっている。

この状態でビルドすると、

Electron FiddleデフォルトソースのRun結果

こんなアプリが起動される。

今回は、このデフォルトソースからちょこちょこ触っていって、冒頭のような電卓アプリを作成してみる。

画面の作成

まずはアプリの画面を作成する。

Electronでは、フロントは主にHTML + CSSで行う。
なので、Web作成スキルがあれば、画面の作成はカンタンに行える。
逆に.NET フォームアプリのような、デザイナを使っての開発に慣れている人はHTMLのお勉強から始める必要がありそう。

それでは、具体的にソースを触っていく。
その前に、Electron Fiddleのデフォルトではスタイルシート(style.css)が非表示になっているので、表示に変更する。

Electron FiddleでStylesheetを表示する

スタイルシートを表示すると、画面にもう1つウィンドウが増えるので、HTML(index.html)とスタイルシート(style.css)の2ファイルにコードを書き込んでいく。

見た目を電卓っぽくするだけなので、デフォルトのソースのbody部分をscript以外全部消して修正する。

すっごい適当だけど↓こんな感じ。

index.html

style.css

これで見た目は完成。

Webサイト作ってるわけじゃないので、マークアップはあまり意識せずに書いてもいいのかなーと思うけど、Webサービスとしても公開したいのであればって感じかな?

あとは、各ボタンを押した時の処理をJavascriptで書き込んでいく。

main.js

その名の通り、アプリのメイン処理となるソース。

デフォルトから変更したのは、以下の通り。

  • 画面サイズ
  • メニューバーを非表示に

メニューバーの非表示が以外と詰まったけど、結局はBrowserWindowsクラスのプロパティで、autoHideMenuBar: trueを追加しただけでいけた。

renderer.js

さいごに、画面からボタンが押された時のイベント処理。

電卓アプリは1画面しかないので、もうrenderer.jsにjQueryで動作を全部書く。

電卓アプリのソースとか、今までサンプルで何度も書いてきたけど、ひさびさにコーディングするとヘタクソになってる自分に気付く…。

バグだらけだけど、なんとなく電卓っぽい動きはするので、とりあえずこれで。

動作確認

コードが書けたら最後はもちろん実行して動作を確認してみる。

電卓アプリ動かしてみたところ

うん、なんとなく動いた。

パッケージ化

勉強用アプリのElectron Fiddleでも、一応アプリのパッケージ化が出来る。

Electron Fiddleでパッケージ化

メニューの「Tasks」-「Package Fiddle…」をクリック。

しばらくすると、以下のような構成のフォルダがエクスプローラで表示される。

「out」フォルダの中を開くと…

Electron Fiddleでパッケージ化2

実行形式のファイルが生成されている。

一応これで作ったアプリを配布することも出来る。

ただ、使ってみて思ったが、やはりElectron Fiddleは勉強用に特化してる感じなので、本格的に開発するときはAtomやらVSCodeやらで。

プログラミング教室とかなら結構使えるソフトかも。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のPG・SEを経て、独立。 現在はとある企業のCTOと、変な名前の会社の社長をしてる。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください