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

執筆者:

関連記事

Todolistをmarionette化

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

ElectronでTrayアイコン

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

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

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

Electronで簡単にMac風UI〜Photon

By: Patrick Hoesly – CC BY 2.0 目次1 Photon2 gulpfile.coffee3 index.scss4 Todolistに適用する5 できた Pho …

Electronでsqlite3を使ったアプリ

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