プログラミング: 2018年12月アーカイブ

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

(2018年12月28日 14:57) | 個別ページ | コメント(0) | トラックバック(0)

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> 
Chrome <script>document.write(process.versions.chrome)</script> 
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 .

表示された。

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

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

Mac OS X への Electron のインストール

shinoda

(2018年12月28日 11:08) | 個別ページ | コメント(0) | トラックバック(0)

※まずは、Node.jp のインストールが必要。

Electron は、Node.js + Chromium をランタイムとする Node.js + HTML + CSS で作成されたアプリケーションをデスクトップアプリケーションとして実行するためのエンジンである。

いや、これも識者の方から「ちょっと違う」とか指摘を受けるかもしれんけど、こう理解しとけばとりあえず大丈夫じゃけえ。俺を信じろ（笑）

で、その Electron のインストール。

Node.jp のパッケージとしてインストールするだけなので、コマンド一発で終了。

$ npm -g install electron-prebuilt
npm WARN deprecated electron-prebuilt@1.4.13: electron-prebuilt has been renamed to electron. For more details, see http://electron.atom.io/blog/2016/08/16/npm-install-electron
/Users/shinoda/.nodebrew/node/v11.6.0/bin/electron -> /Users/shinoda/.nodebrew/node/v11.6.0/lib/node_modules/electron-prebuilt/cli.js

> electron-prebuilt@1.4.13 postinstall /Users/shinoda/.nodebrew/node/v11.6.0/lib/node_modules/electron-prebuilt
> node install.js

+ electron-prebuilt@1.4.13
added 149 packages from 107 contributors in 32.515s

パッケージとして追加された。

しかし、「electron-prebuilt has been renamed to electron.」なんてワーニング出てるところを見ると、「npm -g install electron」でよかったのかな？他所のサイトからコピペしてきたんだけど（笑）

-g オプションは「どこからでもコマンドが実行できるグローバルなところ（PATH が通ってるディレクトリ）にインストールするよ」というもの。

which してみたら、

$ which electron
/Users/shinoda/.nodebrew/current/bin/electron

にインストールされていた。 -g オプション付けなかったらどうなるかは知らん。npm を実行したディレクトリにインストールされるんかね？

Mac OS X への Node.js のインストール

shinoda

(2018年12月27日 21:33) | 個別ページ | コメント(0) | トラックバック(0)

MacBook 上で Electron で遊んでみるために、まず Node.js をインストールする。

Node.js は、このブログでも書いたことがあるが、簡単に言うと「サーバサイドで JavaScript を実行させる仕組み／環境」だ。いや、これ、絶対うるさい人から「違う」とか言われそうだけど、正直、こう覚えておけば問題ない（笑）

これを、うちの Mac OS X 10.14.2 に入れてみる。

そうそう。Electron の Mac サポートが終了したと言うてる人いるけど、終了したのは 10.9 以前のバージョンの Mac OS X サポートである。

ところで、Mac OS X は BSD UNIX ベース（Linux ベースだと誤解している人が未だにいる（笑））なので、インストール方法は UNIX への手順と変わらない。「ターミナル」（Windows にコマンドプロンプトみたいなもんね）を立ち上げ、シェル上でインストールを行う。

以下、Node.js のインストール手順。

1.Node.js がまだ未インストールなのを確認。

　（別にインストールされててもええけど（笑））

$ node -v
-bash: node: command not found

2.Mac OS X 用パッケージマネージャ homebrow のインストール

　※今回はパッケージで Node.js を入れる。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
==> This script will install:
/usr/local/bin/brew
/usr/local/share/doc/homebrew
/usr/local/share/man/man1/brew.1
/usr/local/share/zsh/site-functions/_brew
/usr/local/etc/bash_completion.d/brew
/usr/local/Homebrew
==> The following new directories will be created:
/usr/local/bin
/usr/local/etc
＜略＞
/usr/local/Frameworks
==> The Xcode Command Line Tools will be installed.

Press RETURN to continue or any other key to abort＜リターンキー＞を押す

==> /usr/bin/sudo /bin/mkdir -p /usr/local/bin /usr/local/etc /usr/local/include /usr/local/sbin /usr/local/share /usr/local/var /usr/local/opt /usr/local/share/zsh /usr/local/share/zsh/site-functions /usr/local/var/homebrew /usr/local/var/homebrew/linked /usr/local/Cellar /usr/local/Caskroom /usr/local/Homebrew /usr/local/Frameworks
Password:＜shinoda ユーザのパスワード＞
==> /usr/bin/sudo /bin/mkdir -p /usr/local/bin /usr/local/etc /usr/local/include /usr/local/sbin /usr/local/share /usr/local/var /usr/local/opt /usr/local/share/zsh /usr/local/share/zsh/site-functions /usr/local/var/homebrew /usr/local/var/homebrew/linked /usr/local/Cellar /usr/local/Caskroom /usr/local/Homebrew /usr/local/Frameworks
Password:
＜略＞
Already up-to-date.
==> Installation successful!

==> Homebrew has enabled anonymous aggregate formulae and cask analytics.
Read the analytics documentation (and how to opt-out) here:
https://docs.brew.sh/Analytics

==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
https://github.com/Homebrew/brew#donations
==> Next steps:
- Run `brew help` to get started
- Further documentation:
https://docs.brew.sh

終了。

help を実行してみる。

$ brew help
Example usage:
brew search [TEXT|/REGEX/]
brew info [FORMULA...]
brew install FORMULA...
brew update
brew upgrade [FORMULA...]
brew uninstall FORMULA...
brew list [FORMULA...]

Troubleshooting:
brew config
brew doctor
brew install --verbose --debug FORMULA

Contributing:
brew create [URL [--no-fetch]]
brew edit [FORMULA...]

Further help:
brew commands
brew help [COMMAND]
man brew
https://docs.brew.sh

OK！ちゃんとインストールされている。

3.nodebrew のインストール

　nodebrew は node のバージョンを管理・切替するツール。これを入れておくとバージョンアップとかが簡単・・・らしい。

$ brew install nodebrew
==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.1.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v1.0.1
######################################################################## 100.0%
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
/usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
/usr/local/etc/bash_completion.d

zsh completions have been installed to:
/usr/local/share/zsh/site-functions
==> Summary
/usr/local/Cellar/nodebrew/1.0.1: 8 files, 38.6KB, built in 8 seconds

インストール終了。

$ which nodebrew
/usr/local/bin/nodebrew

ちゃんと入ってる。help を実行してみる。

$ nodebrew help
nodebrew 1.0.1

Usage:
nodebrew help Show this message
nodebrew install <version> Download and install <version> (from binary)
nodebrew compile <version> Download and install <version> (from source)
nodebrew install-binary <version> Alias of `install` (For backword compatibility)
nodebrew uninstall <version> Uninstall <version>
nodebrew use <version> Use <version>
nodebrew list List installed versions
nodebrew ls Alias for `list`
nodebrew ls-remote List remote versions
nodebrew ls-all List remote and installed versions
nodebrew alias <key> <value> Set alias
nodebrew unalias <key> Remove alias
nodebrew clean <version> | all Remove source file
nodebrew selfupdate Update nodebrew
nodebrew migrate-package <version> Install global NPM packages contained in <version> to current version
nodebrew exec <version> -- <command> Execute <command> using specified <version>

Example:
# install
nodebrew install v8.9.4

# use a specific version number
nodebrew use v8.9.4

ちゃんと動いた。OK！！

4.Node.js のインストール

$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v11.6.0/node-v11.6.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/shinoda/.nodebrew/src/v11.6.0/node-v11.6.0-darwin-x64.tar.gz:
Warning: No such file or directory

curl: (23) Failed writing body (0 != 1057)
download failed: https://nodejs.org/dist/v11.6.0/node-v11.6.0-darwin-x64.tar.gz

ありゃ、失敗。
https://nodejs.org/dist/v11.6.0/node-v11.6.0-darwin-x64.tar.gz は無いっていうてるなあ。
でも、サイト上にファイルは存在しているな。

/Users/shinoda/.nodebrew/src
ああ、ファイルではなく、このディレクトリが無いんか？

作る。
$ mkdir -p ~/.nodebrew/src
$ ls -la /Users/shinoda/.nodebrew/src
total 0
drwxr-xr-x 2 shinoda staff 64 12 27 14:53 .
drwxr-xr-x 3 shinoda staff 96 12 27 14:53 ..

そして再度インストール。
$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v11.6.0/node-v11.6.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

お、成功したな。

確認。
$ nodebrew list
v11.6.0

current: none

Node.js v11.6.0 がインストールされたようだ。

5.Node.js を使えるように、もう一仕事
　nodebrew list で見たときに「current: none」になっているのは、使えるバージョンが指定されていないということ。（nodebrew では、複数のバージョンをインストールしておき、使いたい Node.js のバージョンを選ぶことができる）

$ nodebrew use v11.6.0
use v11.6.0
$ nodebrew list
v11.6.0

current: v11.6.0

「current: v11.6.0」に変わっている。

node のパスを通す。

$ ls -la /Users/shinoda/.nodebrew/current/bin
total 78800
drwxr-xr-x 6 shinoda staff 192 12 27 15:02 .
drwxr-xr-x 9 shinoda staff 288 12 27 14:54 ..
-rwxr-xr-x 1 shinoda staff 40345424 12 26 16:13 node
lrwxr-xr-x 1 shinoda staff 33 12 27 15:02 nodebrew -> /Users/shinoda/.nodebrew/nodebrew
lrwxr-xr-x 1 shinoda staff 38 12 27 14:55 npm -> ../lib/node_modules/npm/bin/npm-cli.js
lrwxr-xr-x 1 shinoda staff 38 12 27 14:55 npx -> ../lib/node_modules/npm/bin/npx-cli.js
$ cat ~/.bashrc
export PATH=$PATH:/Users/shinoda/.nodebrew/current/bin
^D
$ source .bashrc
$ set|grep PATH
PATH='/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Applications/VMware Fusion.app/Contents/Public:/Library/Frameworks/Mono.framework/Versions/Current/Commands:/Users/shinoda/.nodebrew/current/bin'

Node.js を実行してみる。

$ node -v
v11.6.0

node.js のパッケージマネージャーである npm も実行してみる。

$ npm -v
6.5.0-next.0

ばっちり。

これで、Node.js のインストールは終了である。

« プログラミング: 2018年9月 | メインページ | アーカイブ | プログラミング: 2019年1月 »

このページには、2018年12月以降に書かれたブログ記事のうちプログラミングカテゴリに属しているものが含まれています。

前のアーカイブはプログラミング: 2018年9月です。

次のアーカイブはプログラミング: 2019年1月です。

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

プログラミング: 2018年12月アーカイブ

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

Mac OS X への Electron のインストール

Mac OS X への Node.js のインストール

検索

このアーカイブについて

2020年2月: 月別アーカイブ

カテゴリ

月別アーカイブ

プログラミング: 2018年12月アーカイブ

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

Mac OS X への Electron のインストール

Mac OS X への Node.js のインストール

検索

このアーカイブについて

2020年2月: 月別アーカイブ

カテゴリ

月別 アーカイブ

月別アーカイブ