【Electron入門】Electronでデスクトップアプリをサクッと作ってみる

Not image

みなさん、こんにちは。

早速ですが今回は、Electronに入門したいという方に向けて書いていこうと思います。

特に、「とにかく動くアプリをサクッと作りたい!」という方におすすめです。

また今回は「Electron入門」ということなので、Electronに関する周辺知識は後で学ぶことにします。

今は手を動かして、最短でElectronの世界に足を踏み入れることを目標にしていきたいと思います。

足を踏み入れて、Electronの魅力を知ってから周辺知識を学ぶでも全く問題ないです。

むしろそれが正しい勉強法かも・・・です!

それでは前置きは終了して、Electronでデスクトップアプリを作っていきましょう!

Electron入門!サクッとアプリを作る手順

手順1:Nodeをインストールする

Electronの開発を始めるにあたり、みなさんが今使っているPCでnpmコマンドを使用できるようにします。

そのために「Node.js」をインストールします。以下のコマンドでNodeをインストールできます。

もしHomebrewをインストールしていない方は、以下にHomebrewの導入手順を載せているので、参考にしてみてください。以下のページのステップ1・2の通りにやればHomebrewが導入でき、brewコマンドが使えるようになります。

【Mac版】Rubyのインストール方法【全4ステップ】

2018.09.14

PCに「Node.js」をインストールできましたら、手順2へいきましょう。

手順2:package.jsonを編集

次は、package.jsonファイルを編集していきましょう。

このファイルは、以下のコマンドで作成できます。

npm initコマンドを実行すると、いくつか入力することがあります。「name」という項目を自分の好きな名前に変更してください。それ以外は「Enterキー」で構いません。

Enterキーで進むとpackage.jsonファイルが作成されます。

上のようなファイルがElectronディレクトリ配下にできます。

手順3:Electronをインストールする

次は今回の主役である、「Electron」をインストールしましょう。

さきほど、Node.jsをインストールしたことでnpmコマンドが使えるようになっているので、以下のコマンドを実行し、Electronをインストールしましょう!

二つ目のコマンドを実行すると、下図のような近未来的なデザインの画面が起動します。

Not image

手順4:アプリのエントリーポイントを作成

次は、アプリケーションのエントリーポイントを作成していきましょう。

エントリーポイントとは、簡単にいうとアプリケーションの開始されるところです。

Electronディレクトリ配下のpackage.jsonファイルと同じディレクトリに、「index.jsファイル」を作成してください。

index.jsファイルに以下のような記述を追加してください。

  • index.jsというファイル名は、package.jsonの「”main”」という項目で指定した名前です
  • 「ウィンドウを最大化」というところをアンコメントすると、フルスクリーン化できます
  • 「デベロッパーツール自動起動」というところをアンコメントすると、デベロッパツールが自動起動します

手順5:HTMLファイルを作成

次にサンプルのhtmlファイルを作成しましょう。

index.jsと同じディレクトリに「index.html」というファイルを作成します。

作成したら、以下のようなコードを追加しましょう!

このhtmlファイルが、アプリケーションを起動した時の画面になります。

手順6:アプリケーションを実行する

ここまで完成したら、アプリケーションの起動コマンドを実行しましょう。

と、その前にpackage.jsonの一部を修正してからコマンドを実行しましょう。

"start": "electron .",という一行を追加されました。

Electron起動コマンドは、どちらでも起動できます。

Not image

このような画面が起動できましたでしょうか?

起動できましたら成功です!お疲れ様でした。

Electronで作成したアプリを配布可能な形式にしたい方へ

アプリを配布可能な形式にするには、以下の記事を参考にしてみてください。

アプリのパッケージ化もとても簡単なので、ぜひ合わせて試してみましょう!

【Electron入門】electron-packagerを使ってアプリを配布【npmコマンド一発!】

2018.11.18

まとめ

今回は「Electron入門」ということで、サクッとElectronでデスクトップアプリケーションを作ってきました。

HTMLが単純なものなので画面自体は殺風景ですが、こんなに短時間にアプリを作成できるというのは、凄まじいことだと感じています。

この凄まじさをみなさんに感じてもらいつつ、Electronの魅力を知っていただけたのなら嬉しいです。

今回はあくまでも入門編なので、ここからはみなさん自由にElectronを使いこなしていってください!!

コメントを残す

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