とりあえず Electron で Hello, World! 的なやつを

Qiita の「Electronの始め方 on Mac」(@basicactorさん投稿)という記事をもとに、とりあえず動くものを作ってみよう。

まず、テストアプリ用のソースとかを格納するディレクトリを掘る。
それから、Node.js のプロジェクトとして npm で初期化を行う。

$ pwd
/Users/shinoda
$ mkdir electron_proj
$ mkdir electron_proj/testapp1
$ cd electron_proj/testapp1
$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (testapp1) 
version: (1.0.0) 
description: Test Program YO!!
entry point: (index.js) 
test command: 
git repository: 
keywords: sample test
author: shinoda
license: (ISC) 
About to write to /Users/shinoda/electron_proj/testapp1/package.json:

{
  "name": "testapp1",
  "version": "1.0.0",
  "description": "Test Program YO!!",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "sample",
    "test"
  ],
  "author": "shinoda",
  "license": "ISC"
}


Is this OK? (yes) <リターンキー>

これで、ここで作られるプログラムを Node.js のパッケージとして管理するための情報が package.json という名前の JSON形式のファイルとして作成される。

直下にできてるね。

$ ls -la
total 8
drwxr-xr-x  3 shinoda  staff   96 12 28 13:01 .
drwxr-xr-x  3 shinoda  staff   96 12 28 11:55 ..
-rw-r--r--  1 shinoda  staff  274 12 28 13:01 package.json
$ cat package.json
{
  "name": "testapp1",
  "version": "1.0.0",
  "description": "Test Program YO!!",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "sample",
    "test"
  ],
  "author": "shinoda",
  "license": "ISC"
}

次に、プログラム本体(といっても、JavaScript と HTML)を作成する。

まず、index.js というファイルに JavaScript を記述する。
(件のページの main.js をパチってます)

// 定数
const electron = require('electron')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const path = require('path')
const url = require('url')

function createWindow () {
  // ブラウザウィンドウ(400x300pix)
  win = new BrowserWindow({width: 400, height: 300})

  // index.html をロードして表示
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }))
}

app.on('ready', createWindow)

次に index.html。これは Hello, World と表示させるだけの HTML なので簡単。

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <title>Test Project 1</title>
    </head>
    <body>
      <h1>Hello, World!</h1>
         node <script>document.write(process.versions.node)</script>&nbsp; 
      Chrome <script>document.write(process.versions.chrome)</script>&nbsp; 
   Electron <script>document.write(process.versions.electron)</script>
    </body>
  </html>

これらをプロジェクトのディレクトリに作成する、。

$ ls -la
total 24
drwxr-xr-x  5 shinoda  staff  160 12 28 14:34 .
drwxr-xr-x  3 shinoda  staff   96 12 28 11:55 ..
-rw-r--r--  1 shinoda  staff  399 12 28 14:34 index.html
-rw-r--r--  1 shinoda  staff  502 12 28 14:33 index.js
-rw-r--r--  1 shinoda  staff  274 12 28 13:01 package.json

では実行してみる。

$ electron .

20181228_electron1.jpg

表示された。

20181228_electron2.jpg

終わるときは、「Electron」メニューから「Quit testapp1」を選んで。

あとは、Node.js で動く(Node.js 用に拡張された) JavaScript をゴリゴリ書けば、本格的なアプリも組めるということやね。
Clip to Evernote

トラックバック(0)

このブログ記事を参照しているブログ一覧: とりあえず Electron で Hello, World! 的なやつを

このブログ記事に対するトラックバックURL: http://blog.netandfield.com/mt/mt-tb.cgi/5175

コメントする


画像の中に見える文字を入力してください。

このブログ記事について

このページは、shinodaが2018年12月28日 14:57に書いたブログ記事です。

ひとつ前のブログ記事は「Mac OS X への Electron のインストール」です。

次のブログ記事は「今年は「梵」と「作」を楽しんだ」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

月別 アーカイブ

電気ウナギ的○○ mobile ver.

携帯版「電気ウナギ的○○」はこちら