読者です 読者をやめる 読者になる 読者になる

或阿呆のブログ

Pythonを好んで使っているプログラマです。Ruby,Perl,PowerShell,VBAなどでもたまに書いています。おバカなことが大好きです。

JavaScript->ElectronでデスクトップGUIアプリケーションを作成する #JavaScript #Electron

JavaScript

今まではhtaを使って来た

今まではhtaを使って来ました。理由としては、Windowsでなら環境構築不要で使える点、GUIをHTMLで書けて、ロジックをJavaScriptで書けるし、手軽だから。

htaの弱点

  • GUIがダサい
  • Windowsでしか動かない
  • 書籍の情報が少ない

などです。

手軽に書けるというのはメリットなんだけれども。。。

Electronとは

Electron - Build cross platform desktop apps with JavaScript, HTML, and CSS.

Electron とは(旧:Atom Shell)とはHTML5/JavaScriptなどWeb技術で実装されたアプリを実行するためのクロスプラットフォーム実行環境です。
NW.js と同様に、Chrominum と Node.js をベースにしています。最近、Microsoft からリリースされた Visual Studio Code も Electron で開発されています。
Electron で実現するクロスプラットフォームなデスクトップアプリ開発 – iroha Tech Note

マルチプラットフォームで動くのが有難い。ワンバイナリで実行出来る、つまり環境構築が不要なのもありがたい。

インストール

当方の環境はWindows10

nodeのインストール

まずは、node.jsをインストールする。
http://nodejs.jp/nodejs.org_ja/docs/v0.10/が説明に詳しい。

Electronのインストール

npmからElectronをインストール

$npm -g install electron-prebuilt

Electronでアプリケーションの作成

$cd
C:\Users\oneshot\js

$mkdir hello

$cd hello

以下の感じのJSONファイルが出来上がる

$npm init -y
Wrote to C:\Users\oneshot\js\hello\package.json:

{
  "name": "hello",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

フォルダ構成

こうなるのかな。

your-app/
├── package.json
├── main.js
└── index.html

Hello,World!を出力してみる

main.jsの記述内容

Quick Start - Electronから拝借致しました。

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({width: 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))

  // Open the DevTools.
  win.webContents.openDevTools()

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.htmlの記載内容

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Sample</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

Electronで作成したアプリの実行

$cd
C:\Users\oneshot\js\hello

$cd ../

$electron hello/

こんな感じで出来た。
f:id:oneshotlife_tom:20161124023354p:plain
お洒落だね!!!

faviconとか付けて改造したくなる。

Electronについてもっと知りたい方は

Cross-platform Desktop Applications: With Node, Electron, and Nw.js

Cross-platform Desktop Applications: With Node, Electron, and Nw.js

まだ発売されていないけど、本格的な書籍っぽいですね。

内容紹介もしておきます。

内容紹介
It's tedious and time-consuming to create OS-specific versions of every desktop application, especially with different set of tools for each platform. NW.js radically simplifies desktop development, providing a true cross-platform development stack built on HTML, CSS and JavaScript, Node.js modules, and the Chrome Blink engine. NW.js applications interact with the host operating system just like any other platform-native project, so developers have full access to all local files and resources. The performance is great, and best of all, it saves developers time because they only have to write one version of their application.

Cross-Platform Desktop Applications guides readers step-by-step as they learn to develop NW.js desktop applications that run on Windows, OSX and Linux. They begin by getting the big picture of what NW.js can (and can't) do. Readers test drive NW.js as they build their first desktop application. Next, they find out how to take advantage of OS- specific features like menus, system-tray apps, clipboards, and the file system. Along the way, this book teaches how to debug errors and diagnose performance bottlenecks with NW.j's browser developer tools, package an application as a standalone executable for each OS, and even distribute it to various app stores. The book gives developers the inspiration and skills they need to code pro quality desktop applications using the web languages they already know.

Purchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.

著者について
Paul Jensen is the founder of Anephenix, a Node.js consultancy. He is also the Lead Developer of the SocketStream web framework, and the creator of Dashku, a realtime dashboard solution.
||

Google翻訳で訳した結果も転載しておきますね。
>||
内容紹介
すべてのデスクトップアプリケーションのOS固有のバージョンを作成するのは、特にプラットフォームごとに異なるツールセットを使用すると面倒で時間がかかります。 NW.jsは、デスクトップ開発を大幅に簡素化し、HTML、CSS、JavaScript、Node.jsモジュール、Chrome Blinkエンジンをベースにした真のクロスプラットフォーム開発スタックを提供します。 NW.jsアプリケーションは他のプラットフォームのネイティブプロジェクトと同様にホストオペレーティングシステムとやりとりするため、開発者はすべてのローカルファイルとリソースに完全にアクセスできます。パフォーマンスは素晴らしく、何よりもアプリケーションのバージョンを1つ書くだけで済むため、開発者の時間を節約できます。

クロスプラットフォーム・デスクトップ・アプリケーションは、Windows、OSX、およびLinux上で動作するNW.jsデスクトップ・アプリケーションの開発を学ぶ際に、読者を段階的にガイドします。彼らは、NW.jsができること(そしてできないこと)を大きく把握することから始まります。読者は、最初のデスクトップアプリケーションを構築する際にNW.jsドライブをテストします。次に、メニュー、システムトレイアプリケーション、クリップボード、ファイルシステムなどのOS固有の機能を利用する方法を見つけます。この本では、NW.jのブラウザ開発ツールを使用してエラーをデバッグし、パフォーマンスのボトルネックを診断する方法、各アプリケーションのスタンドアロン実行可能ファイルとしてアプリケーションをパッケージ化する方法、さまざまなアプリストアに配布する方法について説明しています。この本は、既に知っているWeb言語を使用してプロ品質のデスクトップアプリケーションをコーディングするために必要なインスピレーションとスキルを開発者に提供します。

印刷本の購入には、Manning PublicationsのPDF、Kindle、ePub形式の無料eBookが含まれています。

著者について
Paul JensenはNode.jsのコンサルタントであるAnephenixの創設者です。 SocketStream Webフレームワークのリード開発者でもあり、リアルタイムのダッシュボードソリューションであるDashkuの作成者です。

最近のGoogle翻訳の精度は凄い!!!