2016年6月2日木曜日

electron-boilerplateで「Hello World」

electron-boilerplateで「Hello World」です。フォルダ構成は以下のとおり。

app

開発用アプリのHTMLとJavaScript。主な開発作業はこのフォルダで行う。

build

「npm start」すると、アプリがここで実行される。

config

変更する必要なし。

node_modules

「npm install」で、nodeモジュールがインストールされる。

resources

インストーラパッケージを作成するためのファイル。

tasks

Electron-Boilerplateのコード。build、start、インストーラ作成など。


app.js の中を覗いてみると、ほぼ node.js であることがわかります。自作モジュールである greet を変更していけば、進めていけるでしょう。

/app/app.js
// モジュールの読み込み
import os from 'os'; // ネイティブ node.js モジュール
import { remote } from 'electron'; // ネイティブ electron モジュール
import jetpack from 'fs-jetpack'; // npm モジュール
import { greet } from './hello_world/hello_world'; // 自作モジュール
import env from './env';

console.log('Loaded environment variables:', env);

var app = remote.app;
var appDir = jetpack.cwd(app.getAppPath());

console.log('The author of this app is:', appDir.read('package.json', 'json').author);

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('greet').innerHTML = greet();
    document.getElementById('platform-info').innerHTML = os.platform();
    document.getElementById('env-name').innerHTML = env.name;
});
参考サイト
GitHub Electron Tutorial: Using Electron-Boilerplate(Don't Panic Labsさん)

0 件のコメント:

コメントを投稿