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 + CoffeeScript + Backbone.js + EcoでTodolistをつくってみた

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

Gulp+WebpackでElectronのライブリロード

By: erokism – CC BY 2.0 目次1 electron-connect2 package.json3 .babelrc4 webpack.config.coffee5 g …

Electronでsqlite3を使ったアプリ

By: fdecomite – CC BY 2.0 目次1 環境2 electronでnpmモジュールを使うには3 jqueryをレンダラプロセスで使う4 slqite3の使い方5 ipc …

Electronでsql.js

By: Dmitry Baranovskiy – CC BY 2.0 目次1 sql.js2 準備3 インストール4 main.coffee5 index.coffee6 index.ht …

Electronでmaterialize

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