クロスプラットフォーム触ってみた第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 が発表されたりして、注目度が私の中でうなぎのぼりです。
インストール
環境はMac OSXです。Nodeは既に入ってる前提です。
Electronの配布ページから、zipファイルをダウンロードします。
私がダウンロードした時点では、
electron-v0.25.2-darwin-x64.zip
でした。
ダウンロードしたzipファイルを解凍し、アプリケーションフォルダにドロップします。
プロジェクトの作成
ディレクトリを作成して、npm init します。
まんまNode.jsですね。
ディレクトリ階層は、今回はsrcの下にNode.jsのソースを置く様にしてみました。
`クロスプラットフォーム触ってみた第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 が発表されたりして、注目度が私の中でうなぎのぼりです。
インストール
環境は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 丸写しします。
実行
Mac OSXの場合は、こんな感じです。
/Applications/Electron.app/Contents/MacOS/Electron ~/electron/my-app/src
配布用にビルド
どうやら gulp-atom パッケージを使うと、便利に配布用のビルドが作れるらしいです。
早速インスコします。
``クロスプラットフォーム触ってみた第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 が発表されたりして、注目度が私の中でうなぎのぼりです。
インストール
環境はMac OSXです。Nodeは既に入ってる前提です。
Electronの配布ページから、zipファイルをダウンロードします。
私がダウンロードした時点では、
electron-v0.25.2-darwin-x64.zip
でした。
ダウンロードしたzipファイルを解凍し、アプリケーションフォルダにドロップします。
プロジェクトの作成
ディレクトリを作成して、npm init します。
まんまNode.jsですね。
ディレクトリ階層は、今回はsrcの下にNode.jsのソースを置く様にしてみました。
`クロスプラットフォーム触ってみた第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 が発表されたりして、注目度が私の中でうなぎのぼりです。
インストール
環境は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 丸写しします。
実行
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
感想
これってWebアプリケーションの管理画面系とかで利活用できるんじゃ。素敵です。
ただし配布物は、atomの実行環境、chroniumのバイナリを含んでいるんでサイズ超でかいです。
先日書いたのCordovaファミリーといい、このElectronといい、(Nodeの部分は兎も角として) HTML + フロントエンドJavaScript のスキルセットで出来る事の幅がどんどん増えていきますね。
個人的にはこの流れは勢いを増す一方なんじゃないかと思っています。頑張ってウェーブに乗っかりたいと思います。
ふむふむ。エントリポイントがそれぞれHTML(NW.js)かJavaScript(Electron)かそれぞれ違うと。それは用途によってだいぶ影響しそうな気が。
というかNW.jsの方はあんま触ったことないんで。こんど書きます。
クロスプラットフォーム シリーズ1 Titanium Mobileは業務や受託開発で使えるのか
クロスプラットフォームを触ってみたシリーズ2 久々にCordova (旧PhoneGap) 触ってみた
クロスプラットフォームを触ってみたシリーズ3 Electron (旧Atom Shell)触ってみた
クロスプラットフォームを触ってみたシリーズ4 Ubuntu 15.04 で Titanium (Appcelerator CLI)、無料でどこまでできるか試してみた
クロスプラットフォームを触ってみたシリーズ5 Titanium使いが React Native を少し触ってみた
クロスプラットフォームを触ってみたシリーズ6 Titanium使いが JavaScripで書けるつながりで Native Script 触ってみた
参考にさせて頂いたサイト
JavaScript – 乗るしかない!このBIGW(ry。 Electronを使った始めてのデスクトップアプリケーション – Qiita
nodejs – atom-shellを雑に使って任意のnodeスクリプトが実行可能なアプリケーションとして配布する – Qiita