Electron (旧Atom Shell)触ってみた - はなたんのブログ

クロスプラットフォーム触ってみた第3弾です。

Electron（旧Atom Shell）は、JavaScript(Node.js)とHTML(含むフロントエンドJS)によってOSXやWindowsのデスクトップアプリケーションを作成できる、米GitHubが提供するフレームワークです。

ほぼNode.jsなWebアプリケーションを、WindowsやMac OSXのネイティブアプリっぽくして配布できるという訳です。

少し前に名称をAtom ShellからElectronに変更しました。

最近、Electronを採用した MicrosoftのVisual Studio Code が発表されたりして、注目度が私の中でうなぎのぼりです。

Visual Studio Code の中身は Electron Monaco だった – しばやん雑記

インストール

環境はMac OSXです。Nodeは既に入ってる前提です。

Electronの配布ページから、zipファイルをダウンロードします。

私がダウンロードした時点では、

electron-v0.25.2-darwin-x64.zip

でした。

ダウンロードしたzipファイルを解凍し、アプリケーションフォルダにドロップします。

プロジェクトの作成

ディレクトリを作成して、npm init します。

まんまNode.jsですね。

ディレクトリ階層は、今回はsrcの下にNode.jsのソースを置く様にしてみました。

`クロスプラットフォーム触ってみた第3弾です。

ほぼNode.jsなWebアプリケーションを、WindowsやMac OSXのネイティブアプリっぽくして配布できるという訳です。

少し前に名称をAtom ShellからElectronに変更しました。

最近、Electronを採用した MicrosoftのVisual Studio Code が発表されたりして、注目度が私の中でうなぎのぼりです。

Visual Studio Code の中身は Electron Monaco だった – しばやん雑記

インストール

環境はMac OSXです。Nodeは既に入ってる前提です。

Electronの配布ページから、zipファイルをダウンロードします。

私がダウンロードした時点では、

electron-v0.25.2-darwin-x64.zip

でした。

ダウンロードしたzipファイルを解凍し、アプリケーションフォルダにドロップします。

プロジェクトの作成

ディレクトリを作成して、npm init します。

まんまNode.jsですね。

ディレクトリ階層は、今回はsrcの下にNode.jsのソースを置く様にしてみました。

あとは、main.jsとindex.htmlで書いていくんですが、まんまNode.jsって訳ではなくて、expressちっくなelectronのソレを書いていく感じみたいです。

今回はElectron Quick start 丸写しします。

main.js

index.html

実行

Mac OSXの場合は、こんな感じです。

/Applications/Electron.app/Contents/MacOS/Electron ~/electron/my-app/src

配布用にビルド

どうやら gulp-atom パッケージを使うと、便利に配布用のビルドが作れるらしいです。

早速インスコします。

``クロスプラットフォーム触ってみた第3弾です。

ほぼNode.jsなWebアプリケーションを、WindowsやMac OSXのネイティブアプリっぽくして配布できるという訳です。

少し前に名称をAtom ShellからElectronに変更しました。

最近、Electronを採用した MicrosoftのVisual Studio Code が発表されたりして、注目度が私の中でうなぎのぼりです。

Visual Studio Code の中身は Electron Monaco だった – しばやん雑記

インストール

環境はMac OSXです。Nodeは既に入ってる前提です。

Electronの配布ページから、zipファイルをダウンロードします。

私がダウンロードした時点では、

electron-v0.25.2-darwin-x64.zip

でした。

ダウンロードしたzipファイルを解凍し、アプリケーションフォルダにドロップします。

プロジェクトの作成

ディレクトリを作成して、npm init します。

まんまNode.jsですね。

ディレクトリ階層は、今回はsrcの下にNode.jsのソースを置く様にしてみました。

`クロスプラットフォーム触ってみた第3弾です。

ほぼNode.jsなWebアプリケーションを、WindowsやMac OSXのネイティブアプリっぽくして配布できるという訳です。

少し前に名称をAtom ShellからElectronに変更しました。

最近、Electronを採用した MicrosoftのVisual Studio Code が発表されたりして、注目度が私の中でうなぎのぼりです。

Visual Studio Code の中身は Electron Monaco だった – しばやん雑記

インストール

環境はMac OSXです。Nodeは既に入ってる前提です。

Electronの配布ページから、zipファイルをダウンロードします。

私がダウンロードした時点では、

electron-v0.25.2-darwin-x64.zip

でした。

ダウンロードしたzipファイルを解凍し、アプリケーションフォルダにドロップします。

プロジェクトの作成

ディレクトリを作成して、npm init します。

まんまNode.jsですね。

ディレクトリ階層は、今回はsrcの下にNode.jsのソースを置く様にしてみました。

あとは、main.jsとindex.htmlで書いていくんですが、まんまNode.jsって訳ではなくて、expressちっくなelectronのソレを書いていく感じみたいです。

今回はElectron Quick start 丸写しします。

main.js

index.html

実行

Mac OSXの場合は、こんな感じです。

/Applications/Electron.app/Contents/MacOS/Electron ~/electron/my-app/src

配布用にビルド

どうやら gulp-atom パッケージを使うと、便利に配布用のビルドが作れるらしいです。

早速インスコします。

gulpfile.js をこさえます。これもほぼサンプルのまんま。

var gulp = require(‘gulp’);
var gulpAtom = require(‘gulp-atom’);

gulp.task(‘atom’, function() {
    return gulpAtom({
        srcPath: ‘./src’,
        releasePath: ‘./release’,
        cachePath: ‘./cache’,
        version: ‘v0.21.3’,
        rebuild: false,
        platforms: [‘win32-ia32’, ‘darwin-x64’]
    });
});

ビルドします。

gulp atom

releaseディレクトリの下に、OSX用と

my-app/release/v0.21.3/darwin-x64/

Windows用のそれぞれがビルドされました。

my-app/release/v0.21.3/win32-ia32