みなさん、こんにちは。
早速ですが今回は、Electronに入門したいという方に向けて書いていこうと思います。
特に、「とにかく動くアプリをサクッと作りたい！」という方におすすめです。
また今回は「Electron入門」ということなので、Electronに関する周辺知識は後で学ぶことにします。
今は手を動かして、最短でElectronの世界に足を踏み入れることを目標にしていきたいと思います。
足を踏み入れて、Electronの魅力を知ってから周辺知識を学ぶでも全く問題ないです。
むしろそれが正しい勉強法かも・・・です！
それでは前置きは終了して、Electronでデスクトップアプリを作っていきましょう！
目次
Electron入門！サクッとアプリを作る手順
手順１：Nodeをインストールする
Electronの開発を始めるにあたり、みなさんが今使っているPCでnpmコマンドを使用できるようにします。
そのために「Node.js」をインストールします。以下のコマンドでNodeをインストールできます。
もしHomebrewをインストールしていない方は、以下にHomebrewの導入手順を載せているので、参考にしてみてください。以下のページのステップ1・2の通りにやればHomebrewが導入でき、brewコマンドが使えるようになります。
PCに「Node.js」をインストールできましたら、手順2へいきましょう。
手順２：package.jsonを編集
次は、package.jsonファイルを編集していきましょう。
このファイルは、以下のコマンドで作成できます。
npm initコマンドを実行すると、いくつか入力することがあります。「name」という項目を自分の好きな名前に変更してください。それ以外は「Enterキー」で構いません。
Enterキーで進むとpackage.jsonファイルが作成されます。
上のようなファイルがElectronディレクトリ配下にできます。
手順３：Electronをインストールする
次は今回の主役である、「Electron」をインストールしましょう。
さきほど、Node.jsをインストールしたことでnpmコマンドが使えるようになっているので、以下のコマンドを実行し、Electronをインストールしましょう！
二つ目のコマンドを実行すると、下図のような近未来的なデザインの画面が起動します。
手順４：アプリのエントリーポイントを作成
次は、アプリケーションのエントリーポイントを作成していきましょう。
エントリーポイントとは、簡単にいうとアプリケーションの開始されるところです。
Electronディレクトリ配下のpackage.jsonファイルと同じディレクトリに、「index.jsファイル」を作成してください。
index.jsファイルに以下のような記述を追加してください。
- index.jsというファイル名は、package.jsonの「”main”」という項目で指定した名前です
- 「ウィンドウを最大化」というところをアンコメントすると、フルスクリーン化できます
- 「デベロッパーツール自動起動」というところをアンコメントすると、デベロッパツールが自動起動します
手順５：HTMLファイルを作成
次にサンプルのhtmlファイルを作成しましょう。
index.jsと同じディレクトリに「index.html」というファイルを作成します。
作成したら、以下のようなコードを追加しましょう！
このhtmlファイルが、アプリケーションを起動した時の画面になります。
手順６：アプリケーションを実行する
ここまで完成したら、アプリケーションの起動コマンドを実行しましょう。
と、その前にpackage.jsonの一部を修正してからコマンドを実行しましょう。
"start": "electron .",という一行を追加されました。
Electron起動コマンドは、どちらでも起動できます。
このような画面が起動できましたでしょうか？
起動できましたら成功です！お疲れ様でした。
Electronで作成したアプリを配布可能な形式にしたい方へ
アプリを配布可能な形式にするには、以下の記事を参考にしてみてください。
アプリのパッケージ化もとても簡単なので、ぜひ合わせて試してみましょう！
また、Electronを使って画面いっぱいに桜吹雪を降らせるというものも、こちらでご紹介しているので是非挑戦してみてはいかがでしょう。
まとめ
今回は「Electron入門」ということで、サクッとElectronでデスクトップアプリケーションを作ってきました。
HTMLが単純なものなので画面自体は殺風景ですが、こんなに短時間にアプリを作成できるというのは、凄まじいことだと感じています。
この凄まじさをみなさんに感じてもらいつつ、Electronの魅力を知っていただけたのなら嬉しいです。
今回はあくまでも入門編なので、ここからはみなさん自由にElectronを使いこなしていってください！！
コメントを残す