ぱーくんのサイト別館

ぱーくん plus idea

Electronアプリ入門 – 最初のシンプルなアプリを動かしてみる

 
この記事を書いている人 - WRITER -
ご訪問ありがとうございます(^^)
副業でネットビジネスに取り組んでいるぱーくんと申します。

激務でも増えない給料に失望し、将来のために別の収入源が欲しい!の一心でネットビジネスをはじめ、2018年4月に20万円達成。

ひと月36万アクセスあるサイトを作ったノウハウは無料で公開中。 ⇒⇒コチラ
ネットビジネスで未来を夢見れる方を一人でも増やしたいと思っています。

誰でも最初は初心者。
【やってみたいけど、初心者だから不安】
という方は、ぜひお気軽にお問合せください♪
詳しいプロフィールはこちら

Electronでアプリを開発しようと思ったときに、最初にやるのは、シンプルな構成でまず動かしてみることですよね。

今回は、そのやり方を解説します。

以前の記事では、electron公式のサイトのアナウンスされている、サンプルアプリの動かし方と、デバッグ環境の用意の仕方を解説したので、参考にしてください。

 

 

Node.jsの用意

最初にnode.jsをインストールします。

electronはnode.jsで動くからです。

nodeのインストール方法はここを参照してください。

Windowsでのnode.jsとnpmのインストールと基本的なセットアップ

 

electronのインストール

node.jsをインストールしたら、Node.jsのコマンドプロンプトを立ち上げます(windowsの場合)。

その後、アプリを開発したいディレクトリを作成し、移動します。electron01というディレクトリ配下で開発していくとしたら以下のコマンドを打ちます。

 

で、次のコマンドで、空の新しいnodeプロジェクトを作成・初期化します。

すると、プロジェクトフォルダの直下に「package.json」が出来上がります。

 

さて、空のnodeプロジェクトができたので、electronのライブラリを使えるようにしましょう。

npm install electron -gと打つと、node環境全体としてelectronのライブラリがインストールされます。

全体で使える反面、プロジェクトごとにバージョンの異なるelectronで開発できません。

新しいelectronのバージョンで開発したい場合もありえますので、プロジェクトのローカルにelectronをインストールしましょう。

ローカルにインストールするには、以下のコマンドを使います。

 

シンプルなアプリの作成

最小構成は以下のような感じなので、main.jsとindex.htmlを作ってみよう。

main.jsを作成する

main.js

 

index.htmlを作成する

index.html

 

package.jsonを変更

最初にデフォルトで出来たpackage.jsonを変更します。
変更箇所は、
“main”: “main.js”,
の部分と、
“start”: “electron .”
の部分を追加することです。

package.json

 

で、

をコマンドプロンプトで打つと、アプリが起動します。

この記事を書いている人 - WRITER -
ご訪問ありがとうございます(^^)
副業でネットビジネスに取り組んでいるぱーくんと申します。

激務でも増えない給料に失望し、将来のために別の収入源が欲しい!の一心でネットビジネスをはじめ、2018年4月に20万円達成。

ひと月36万アクセスあるサイトを作ったノウハウは無料で公開中。 ⇒⇒コチラ
ネットビジネスで未来を夢見れる方を一人でも増やしたいと思っています。

誰でも最初は初心者。
【やってみたいけど、初心者だから不安】
という方は、ぜひお気軽にお問合せください♪
詳しいプロフィールはこちら

- Comments -

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

Copyright© ぱーくん plus idea , 2020 All Rights Reserved.