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で簡単にMac風UI〜Photon

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

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

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

Electronでsqlite3を使ったアプリ

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

no image

socket.ioでリアルタイムチャット

目次1 環境2 準備3 サーバー側~express4 socket.ioのイベント駆動5 サーバー側~socket.io6 クライアント側7  接続者全員にメッセージを流したいので修正8  情報 環境 …

Electron+Browserify(debowerify)+jQueryUi

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