シェアする

  • このエントリーをはてなブックマークに追加





Electron触ってみた

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

現場でElectronが話題にのぼり、「なにそれ、おいしいの?」と

なったので、実際に触ってみました。

試した環境はWindows10。

エディタはvscodeで行いました。

Electronって??

web技術(html、css、javascript)でクロスプラットフォームな

デスクトップアプリケーションを作成できるフレームワークです。

slackアプリなどで採用されています。

Electron導入

Electronはnpm経由でインストールするようです。

Node.jsはすでにインストールしているので、早速コマンドで導入。

package.json作成

package.jsonにElectronのエントリーポイントを指定します。

package.jsonを作成し以下のように記載します。

エントリーポイントとなるjs作成

↑ で作成したpackage.jsonと同じ階層にmain.jsを作成して

以下のように記載します。

メインウィンドウのhtmlを作成

以下のように画面を作成

実行してみる

アプリのフォルダに移動し以下のコマンドを実行。

こんな画面が表示されているはず。

アプリパッケージング

これまではhtmlを実行するだけでしたが、

これをアプリケーションにパッケージングすることも出来ます。

まずは以下コマンドでelectron-packagerをインストールします。

いざ、パッケージ!

が! ここで問題が。。。

こんなエラーに遭遇。

version表記とか、electronへの依存関係とかがpackage.jsonに書かれてないよ

とのこと。

確かにnpm initで作成してないですからね笑

ということで、npm initでpackage.jsonを作成し、

mainをmain.jsに変更

その上で、もう一度electronとelectron-packagerをnpmでインストールして。。。。

出来ました!

jsでwindowsアプリケーションが動くのは面白かったですねー。

jsに馴染みのある人なら、新しく言語を覚えることなくアプリ開発できるってのは

いいですよねー。

それでは!!

ブログランキング・にほんブログ村へ
にほんブログ村


人気ブログランキング

20代前半までは東京で音楽をやりながら両手の指以上の業種でアルバイト生活をしていましたが、某大手プロバイダのテレアポのバイトでPCの知識の無さに愕然とし、コンピュータをもっと知りたい!と思ったことをきっかけに25歳の時にITの世界に未経験で飛び込みました。
紆余曲折を経て、現在は個人事業主としてお仕事させていただいており、10年ほどになります。
web制作から企業システム構築、ツール開発など、フロントエンドもバックエンドもサーバーもDBAも依頼があれば何でもやってきた雑食系エンジニアです。

今風にいうとフルスタックエンジニアということになるのかしら??

→ 詳細プロフィールというか、生い立ちはこちら

→スキルシートをご覧になる場合はこちら

→お仕事のご依頼やお見積りなどお問い合わせはこちらから!

シェアする

  • このエントリーをはてなブックマークに追加

フォローはいかがですか?