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
-,

執筆者:

関連記事

gulpでelectronをlivereloadしながらcoffeeとsassで開発する環境

By: Nrico – CC BY 2.0 目次1 package.json2 gulpfile.coffee3 bower + browserify4 ストップウォッチ package. …

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

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

Electronでmaterialize

By: Vancouver Film School – CC BY 2.0 目次1 Materialize2 bower3 sass4 browserify5 できた Materializ …

ElectronでTrayアイコン

By: Cooks & Kitchens – CC BY 2.0 目次1 Tray2 main.coffee3 できた Tray github.com/atom/electron

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

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