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

10000hの技術メモ

この先生きのこるための勉強内容&時間記録

Electronではじめるアプリ開発 2-2 アプリケーション作成の準備

Electronを本で勉強。今回は2-2を。

Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう

Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう

package.jsonを作成する

まずはアプリケーション作成用のディレクトリelectron_first_appを作って移動。

そこでnpm initする。

以下、本の通りの値(名前は自分の)を入力。

rrcs-172-254-99-29:electron_first_app yoshikiito$ 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> --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (electron_first_app) 
version: (1.0.0) 
description: My first Electron app
entry point: (index.js) main.js
test command: 
git repository: 
keywords: 
author: yoshikiito
license: (ISC) MIT
About to write to /Users/yoshikiito/workspace/electron_first_app/package.json:

{
  "name": "electron_first_app",
  "version": "1.0.0",
  "description": "My first Electron app",
  "main": "main.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yoshikiito",
  "license": "MIT"
}


Is this ok? (yes) yes

Electronのインストール

npm install electron@1.6.1 --save-dev

・・・ここでわりと待たされる・・・

$ npm install electron@1.6.1 --save-dev

> electron@1.6.1 postinstall /Users/yoshikiito/workspace/electron_first_app/node_modules/electron
> node install.js

electron_first_app@1.0.0 /Users/yoshikiito/workspace/electron_first_app
└─┬ electron@1.6.1 
  ├─┬ electron-download@3.3.0 
  │ ├─┬ debug@2.6.3 
  │ │ └── ms@0.7.2 
  │ ├─┬ fs-extra@0.30.0 
  │ │ ├── graceful-fs@4.1.11 
  │ │ ├── jsonfile@2.4.0 
  │ │ ├── klaw@1.3.1 
  │ │ ├── path-is-absolute@1.0.1 
  │ │ └─┬ rimraf@2.6.1 
  │ │   └─┬ glob@7.1.1 
  │ │     ├── fs.realpath@1.0.0 
  │ │     ├─┬ inflight@1.0.6 
  │ │     │ └── wrappy@1.0.2 
  │ │     ├─┬ minimatch@3.0.3 
  │ │     │ └─┬ brace-expansion@1.1.7 
  │ │     │   ├── balanced-match@0.4.2 
  │ │     │   └── concat-map@0.0.1 
  │ │     └── once@1.4.0 
  │ ├── home-path@1.0.5 
  │ ├── minimist@1.2.0 
  │ ├─┬ nugget@2.0.1 
  │ │ ├─┬ pretty-bytes@1.0.4 
  │ │ │ ├── get-stdin@4.0.1 
  │ │ │ └─┬ meow@3.7.0 
  │ │ │   ├─┬ camelcase-keys@2.1.0 
  │ │ │   │ └── camelcase@2.1.1 
  │ │ │   ├── decamelize@1.2.0 
  │ │ │   ├─┬ loud-rejection@1.6.0 
  │ │ │   │ ├─┬ currently-unhandled@0.4.1 
  │ │ │   │ │ └── array-find-index@1.0.2 
  │ │ │   │ └── signal-exit@3.0.2 
  │ │ │   ├── map-obj@1.0.1 
  │ │ │   ├─┬ normalize-package-data@2.3.6 
  │ │ │   │ ├── hosted-git-info@2.4.1 
  │ │ │   │ ├─┬ is-builtin-module@1.0.0 
  │ │ │   │ │ └── builtin-modules@1.1.1 
  │ │ │   │ └─┬ validate-npm-package-license@3.0.1 
  │ │ │   │   ├─┬ spdx-correct@1.0.2 
  │ │ │   │   │ └── spdx-license-ids@1.2.2 
  │ │ │   │   └── spdx-expression-parse@1.0.4 
  │ │ │   ├── object-assign@4.1.1 
  │ │ │   ├─┬ read-pkg-up@1.0.1 
  │ │ │   │ ├── find-up@1.1.2 
  │ │ │   │ └─┬ read-pkg@1.1.0 
  │ │ │   │   ├─┬ load-json-file@1.1.0 
  │ │ │   │   │ ├─┬ parse-json@2.2.0 
  │ │ │   │   │ │ └─┬ error-ex@1.3.1 
  │ │ │   │   │ │   └── is-arrayish@0.2.1 
  │ │ │   │   │ ├── pify@2.3.0 
  │ │ │   │   │ └─┬ strip-bom@2.0.0 
  │ │ │   │   │   └── is-utf8@0.2.1 
  │ │ │   │   └── path-type@1.1.0 
  │ │ │   ├─┬ redent@1.0.0 
  │ │ │   │ ├─┬ indent-string@2.1.0 
  │ │ │   │ │ └─┬ repeating@2.0.1 
  │ │ │   │ │   └── is-finite@1.0.2 
  │ │ │   │ └── strip-indent@1.0.1 
  │ │ │   └── trim-newlines@1.0.0 
  │ │ ├─┬ progress-stream@1.2.0 
  │ │ │ ├── speedometer@0.1.4 
  │ │ │ └─┬ through2@0.2.3 
  │ │ │   ├─┬ readable-stream@1.1.14 
  │ │ │   │ └── isarray@0.0.1 
  │ │ │   └─┬ xtend@2.1.2 
  │ │ │     └── object-keys@0.4.0 
  │ │ ├─┬ request@2.81.0 
  │ │ │ ├── aws-sign2@0.6.0 
  │ │ │ ├── aws4@1.6.0 
  │ │ │ ├── caseless@0.12.0 
  │ │ │ ├─┬ combined-stream@1.0.5 
  │ │ │ │ └── delayed-stream@1.0.0 
  │ │ │ ├── extend@3.0.0 
  │ │ │ ├── forever-agent@0.6.1 
  │ │ │ ├─┬ form-data@2.1.4 
  │ │ │ │ └── asynckit@0.4.0 
  │ │ │ ├─┬ har-validator@4.2.1 
  │ │ │ │ ├─┬ ajv@4.11.6 
  │ │ │ │ │ ├── co@4.6.0 
  │ │ │ │ │ └─┬ json-stable-stringify@1.0.1 
  │ │ │ │ │   └── jsonify@0.0.0 
  │ │ │ │ └── har-schema@1.0.5 
  │ │ │ ├─┬ hawk@3.1.3 
  │ │ │ │ ├── boom@2.10.1 
  │ │ │ │ ├── cryptiles@2.0.5 
  │ │ │ │ ├── hoek@2.16.3 
  │ │ │ │ └── sntp@1.0.9 
  │ │ │ ├─┬ http-signature@1.1.1 
  │ │ │ │ ├── assert-plus@0.2.0 
  │ │ │ │ ├─┬ jsprim@1.4.0 
  │ │ │ │ │ ├── assert-plus@1.0.0 
  │ │ │ │ │ ├── extsprintf@1.0.2 
  │ │ │ │ │ ├── json-schema@0.2.3 
  │ │ │ │ │ └── verror@1.3.6 
  │ │ │ │ └─┬ sshpk@1.11.0 
  │ │ │ │   ├── asn1@0.2.3 
  │ │ │ │   ├── assert-plus@1.0.0 
  │ │ │ │   ├── bcrypt-pbkdf@1.0.1 
  │ │ │ │   ├─┬ dashdash@1.14.1 
  │ │ │ │   │ └── assert-plus@1.0.0 
  │ │ │ │   ├── ecc-jsbn@0.1.1 
  │ │ │ │   ├─┬ getpass@0.1.6 
  │ │ │ │   │ └── assert-plus@1.0.0 
  │ │ │ │   ├── jodid25519@1.0.2 
  │ │ │ │   ├── jsbn@0.1.1 
  │ │ │ │   └── tweetnacl@0.14.5 
  │ │ │ ├── is-typedarray@1.0.0 
  │ │ │ ├── isstream@0.1.2 
  │ │ │ ├── json-stringify-safe@5.0.1 
  │ │ │ ├─┬ mime-types@2.1.15 
  │ │ │ │ └── mime-db@1.27.0 
  │ │ │ ├── oauth-sign@0.8.2 
  │ │ │ ├── performance-now@0.2.0 
  │ │ │ ├── qs@6.4.0 
  │ │ │ ├── safe-buffer@5.0.1 
  │ │ │ ├── stringstream@0.0.5 
  │ │ │ ├─┬ tough-cookie@2.3.2 
  │ │ │ │ └── punycode@1.4.1 
  │ │ │ ├── tunnel-agent@0.6.0 
  │ │ │ └── uuid@3.0.1 
  │ │ ├─┬ single-line-log@1.1.2 
  │ │ │ └─┬ string-width@1.0.2 
  │ │ │   ├── code-point-at@1.1.0 
  │ │ │   ├─┬ is-fullwidth-code-point@1.0.0 
  │ │ │   │ └── number-is-nan@1.0.1 
  │ │ │   └─┬ strip-ansi@3.0.1 
  │ │ │     └── ansi-regex@2.1.1 
  │ │ └── throttleit@0.0.2 
  │ ├─┬ path-exists@2.1.0 
  │ │ └─┬ pinkie-promise@2.0.1 
  │ │   └── pinkie@2.0.4 
  │ ├─┬ rc@1.2.1 
  │ │ ├── deep-extend@0.4.1 
  │ │ ├── ini@1.3.4 
  │ │ └── strip-json-comments@2.0.1 
  │ ├── semver@5.3.0 
  │ └─┬ sumchecker@1.3.1 
  │   └── es6-promise@4.1.0 
  └─┬ extract-zip@1.6.0 
    ├─┬ concat-stream@1.5.0 
    │ ├── inherits@2.0.3 
    │ ├─┬ readable-stream@2.0.6 
    │ │ ├── core-util-is@1.0.2 
    │ │ ├── isarray@1.0.0 
    │ │ ├── process-nextick-args@1.0.7 
    │ │ ├── string_decoder@0.10.31 
    │ │ └── util-deprecate@1.0.2 
    │ └── typedarray@0.0.6 
    ├── debug@0.7.4 
    ├─┬ mkdirp@0.5.0 
    │ └── minimist@0.0.8 
    └─┬ yauzl@2.4.1 
      └─┬ fd-slicer@1.0.1 
        └── pend@1.2.0 

npm WARN electron_first_app@1.0.0 No repository field.

警告が出た。 gitリポジトリを指定しなかったから出たものと想像。

参考:node.js - npm WARN package.json: No repository field - Stack Overflow

$ ./node_modules/.bin/electron

で起動して確認。

無事起動!

今回の勉強時間:16分 累計勉強時間:14時間49分