node.js

デスクトップアプリを作成できるフレームワークをWindowsで触ってみた~Electron

投稿日:

Electron

Electronは、htmlやjavascriptといったウェブテクノロジーを使って、クロスプラットフォームなデスクトップアプリを作成できるフレームワーク.

electron.atom.io/

日本語
Awesome Electron

前提

Git Bash

Windowsでgitをインストールするとbash環境がついてくる.
cmdではつらいことが多いので、git bashを使うとはかどる.
git-scm.com/

nodist

Windowsでのnodeバージョン管理.
marcelklehr/nodist

公式ページからインストーラーをダウンロードして、インストールする.

electronのインストール

atom/electron

バージョン確認

Hello World

quick-start

アプリ用のディレクトリを作成

すると、package.jsonというファイルができる.
次のように変更.

main.js

main.jsを作成

index.html

<script>document.write(process.versions.electron)</script> でelectronのバージョンが読めたりする.

実行

アプリのディレクトリで実行

ScreenClip

パッケージング

electron-packagerのインストール

実行

electron_sample-win32-x64というディレクトリができるので、そこにexeファイルができる.

DevTool

BrowserWindowはChromiumをつかってるみたいなので、開発ツールを使うことができる.

ScreenClip

Application Menu

electron.atom.io/docs/v0.36.5/api/menu/

requireして

メニューの構造を定義して

setApplicationMenu

app以下でsetApplicationMenuを実行する.

Context Menu

menu.js

renderer porcess で、menuを定義して、popupする.
メインプロセスとレンダラプロセスの簡単な説明は、ここらへん.

index.htmlでmenu.jsを読み込む

Dialog

electron.atom.io/docs/v0.36.5/api/dialog/

require

showMessageBox

done

ScreenClip

-node.js
-,

執筆者:

関連記事

Electron+Browserify(debowerify)+jQueryUi

By: Wilson Hui – CC BY 2.0 目次1 bower install2 browserify(debowerify)3 require4 jQueryUIをMarion …

Todolistをmarionette化

By: Jackie – CC BY 2.0 目次1 Marionette.js2 インストール3 Application4 gulpfile.coffee5 ItemView6 Coll …

Electron + CoffeeScript + Backbone.js + EcoでTodolistをつくってみた

By: Purple Slog – CC BY 2.0 目次1 はじめに2 gulpの準備3 Hello electron4 Hello Backbone.js & eco5 Ba …

Ubuntu12.04にnode6.9をインストール~nodebrew

By: Kazuyoshi Kato – CC BY 2.0 目次1 nodebrew自身のアップデート2 nodebrewでnode6.9をインストール3 yarnのインストール nod …

Electronのアプリケーションメニューからセーブダイアログを出してファイルを保存

By: Jean-Pierre Dalbéra – CC BY 2.0 目次1 はじめに2 require3 メニュー4 gulpfile.coffee5 できた はじめに 今後は、Ele …