LoginSignup
2
3

More than 5 years have passed since last update.

@18konoe(Juhachi Konoe)

年末年始Webアプリ開発自習の記録6: Node.js+Electron+Vue.js開発環境準備

Last updated at Posted at 2019-01-06

はじめに

連休を機に考える、怠惰な私の自習戦略にて立てた計画に沿った自習の記録です。
前回：年末年始Webアプリ開発自習の記録5: Node.js+TypescriptでHabiticaにPOSTを送るWebアプリケーション作成

やりたいこと

  • URLから特定要素を組み替えるダウンローダー
    • 目標1
      • デスクトップのアプリを作る。Electronの出番だ
      • 最低限の入力フォーム
      • URLから取得したページの特定要素を探す
      • 特定要素を組み替えて新しいURLを作るロジック
      • 出来上がった新しいURLからファイルをダウンロードする
      • GUIを極限まで手抜きすれば年末年始の間にいけそう

例えばドライバーリストのページにリンクが貼ってあり、遷移した先にダウンロードリンクがあるような場合です。
Indexのページから既にダウンロードリンクを知ることができる場合、Indexのページから必要な要素を抜き出し、組み替えることでダウンロードリンク一覧を生成できるはずです。そしてできたリンクのリストから自動でダウンロードするといった流れです。

残念ながら前回Typescriptを頑張りすぎて時間をかけすぎてしまいました。早くも年末年始の休み最終日ですが、準備で終わりそうです。

electron-vueを使ったセットアップ

electron-vueの日本語ドキュメントを参考に、セットアップを始めます。

vue-cliインストール
> npm install -g vue-cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
C:\Program Files\nodejs\vue -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue
C:\Program Files\nodejs\vue-list -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue-list
C:\Program Files\nodejs\vue-init -> C:\Program Files\nodejs\node_modules\vue-cli\bin\vue-init
+ vue-cli@2.9.6
added 239 packages from 206 contributors in 18.981s
electron-vueプロジェクト作成
> vue init simulatedgreg/electron-vue simple-downloader

? Application Name simple-downloader
? Application Id com.example.yourapp
? Application Version 0.0.1
? Project description An electron-vue project
? Use Sass / Scss? Yes
? Select which Vue plugins to install (Press <space> to select, <a> to toggle all, <i> to invert selection)axios, vue-el
ectron, vue-router, vuex, vuex-electron
? Use linting with ESLint? Yes
? Which ESLint config would you like to use? Standard
? Set up unit testing with Karma + Mocha? Yes
? Set up end-to-end testing with Spectron + Mocha? Yes
? What build tool would you like to use? builder
? author 

   vue-cli · Generated "simple-downloader".

---

All set. Welcome to your new electron-vue project!

Make sure to check out the documentation for this boilerplate at
https://simulatedgreg.gitbooks.io/electron-vue/content/.

Next Steps:

  $ cd simple-downloader
  $ yarn (or `npm install`)
  $ yarn run dev (or `npm run dev`)
追加パッケージの取得
> cd .\simple-downloader\
> npm install

npm WARN deprecated babel-preset-babili@0.1.4: babili has been renamed to babel-minify. Please update to babel-preset-minify
npm WARN deprecated circular-json@0.5.9: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated nodemailer@2.7.2: All versions below 4.0.1 of Nodemailer are deprecated. See https://nodemailer.com/status/
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated circular-json@0.3.3: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated mailcomposer@4.0.1: This project is unmaintained
npm WARN deprecated uws@9.14.0: stop using this version
npm WARN deprecated socks@1.1.9: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
npm WARN deprecated node-uuid@1.4.8: Use uuid module instead
npm WARN deprecated buildmail@4.0.1: This project is unmaintained
npm WARN deprecated boom@2.10.1: This version is no longer maintained. Please upgrade to the latest version.
npm WARN deprecated hoek@2.16.3: This version is no longer maintained. Please upgrade to the latest version.
npm WARN deprecated cryptiles@2.0.5: This version is no longer maintained. Please upgrade to the latest version.

> uws@9.14.0 install C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\uws
> node-gyp rebuild > build_log.txt 2>&1 || exit 0


> electron-chromedriver@1.8.0 install C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\electron-chromedriver
> node ./download-chromedriver.js

successfully dowloaded and extracted!

> node-sass@4.11.0 install C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.11.0/win32-x64-64_binding.node
Download complete..] - :
Binary saved to C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\node-sass\vendor\win32-x64-64\binding.node
Caching binary to C:\Users\dmorita\AppData\Roaming\npm-cache\node-sass\4.11.0\win32-x64-64_binding.node

> electron@2.0.16 postinstall C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\electron
> node install.js

Downloading SHASUMS256.txt
[============================================>] 100.0% of 5.39 kB (5.39 kB/s)

> node-sass@4.11.0 postinstall C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\node-sass
> node scripts/build.js

Binary found at C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine

> webpack-cli@3.2.0 postinstall C:\Users\dmorita\source\repos\Study-Node\simple-downloader\node_modules\webpack-cli
> opencollective postinstall


     *** Thank you for using webpack-cli! ***

Please consider donating to our open collective
     to help us maintain this package.

  https://opencollective.com/webpack/donate

                    ***


> simple-downloader@0.0.1 postinstall C:\Users\dmorita\source\repos\Study-Node\simple-downloader
> npm run lint:fix


> simple-downloader@0.0.1 lint:fix C:\Users\dmorita\source\repos\Study-Node\simple-downloader
> eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src test

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN karma-webpack@3.0.5 requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN simple-downloader@0.0.1 No repository field.
npm WARN simple-downloader@0.0.1 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1930 packages from 2056 contributors and audited 19868 packages in 104.062s
found 6 vulnerabilities (1 low, 5 moderate)
  run `npm audit fix` to fix them, or `npm audit` for details
動かしてみる
> npm run dev

> simple-downloader@0.0.1 dev C:\Users\dmorita\source\repos\Study-Node\simple-downloader
> node .electron-vue/dev-runner.js

         ___                      __
   __   /\_ \       __     ___   /\ \__    _ __    ___     ___              __  __  __  __     __
 / ,.`\ \//\ \    / ,.`\  /'___\ \ \ ,_\  /\` __\ / __`\ /' _ `\   _______ /\ \/\ \/\ \/\ \  / ,.`\
/\  __/   \_\ \_ /\  __/ /\ \__/  \ \ \/  \ \ \/ /\ \_\ \/\ \/\ \ /\______\\ \ \/ |\ \ \_\ \/\  __/
\ \____\  /\____\\ \____\\ \____\  \ \ \_  \ \_\ \ \____/\ \_\ \_\\/______/ \ \___/ \ \____/\ \____\
 \/____/  \/____/ \/____/ \/____/   \ \__\  \/_/  \/___/  \/_/\/_/           \/__/   \/___/  \/____/
                                     \/__/
  getting ready...

┏ Main Process ---------------

  compiling...

┗ ----------------------------

┏ Renderer Process -----------

  Hash: 4c0d930b09a5bd821bc1
  Version: webpack 4.28.3
  Time: 2893ms
  Built at: 2019-01-06 16:55:38
                  Asset       Size    Chunks             Chunk Names
  imgs/logo--assets.png   60.4 KiB            [emitted]
             index.html  455 bytes            [emitted]
            renderer.js   1.16 MiB  renderer  [emitted]  renderer
  Entrypoint renderer = renderer.js
  [0] multi ./.electron-vue/dev-client ./src/renderer/main.js 40 bytes {renderer} [built]
  [./.electron-vue/dev-client.js] 731 bytes {renderer} [built]
  [./node_modules/strip-ansi/index.js] 161 bytes {renderer} [built]
  [./node_modules/vue-hot-reload-api/dist/index.js] 6.13 KiB {renderer} [built]
  [./node_modules/vue-loader/lib/runtime/componentNormalizer.js] 2.63 KiB {renderer} [built]
  [./node_modules/vue/dist/vue.esm.js] 290 KiB {renderer} [built]
  [./node_modules/webpack-hot-middleware/client-overlay.js] (webpack)-hot-middleware/client-overlay.js 2.16 KiB {renderer} [built]
  [./node_modules/webpack-hot-middleware/client.js?noInfo=true&reload=true] (webpack)-hot-middleware/client.js?noInfo=true&reload=true 7.59 KiB {renderer} [built]
  [./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.26 KiB {renderer} [built]
  [./src/renderer/App.vue] 1.13 KiB {renderer} [built]
  [./src/renderer/main.js] 382 bytes {renderer} [built]
  [./src/renderer/router/index.js] 264 bytes {renderer} [built]
  [./src/renderer/store/index.js] 342 bytes {renderer} [built]
  [axios] external "axios" 42 bytes {renderer} [built]
  [vue-electron] external "vue-electron" 42 bytes {renderer} [built]
      + 43 hidden modules
  Child html-webpack-plugin for "index.html":
           Asset      Size  Chunks  Chunk Names
      index.html  1.38 MiB       0
      Entrypoint undefined = index.html
      [./node_modules/html-webpack-plugin/lib/loader.js!./src/index.ejs] 1.15 KiB {0} [built]
      [./node_modules/lodash/lodash.js] 527 KiB {0} [built]
      [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {0} [built]

┗ ----------------------------

┏ Main Process ---------------

  Hash: 1d2af0f0b3c42299b467
  Version: webpack 4.28.3
  Time: 3612ms
  Built at: 2019-01-06 16:55:38
    Asset     Size  Chunks             Chunk Names
  main.js  211 KiB    main  [emitted]  main
  Entrypoint main = main.js
  [0] multi ./src/main/index.dev.js ./src/main/index.js 40 bytes {main} [built]
  [./node_modules/cross-unzip/index.js] 1.49 KiB {main} [built]
  [./node_modules/electron-debug sync recursive] ./node_modules/electron-debug sync 160 bytes {main} [built]
  [./node_modules/electron-debug/index.js] 2.46 KiB {main} [built]
  [./node_modules/electron-devtools-installer/dist/downloadChromeExtension.js] 2.26 KiB {main} [built]
  [./node_modules/electron-devtools-installer/dist/index.js] 5.02 KiB {main} [built]
  [./node_modules/electron-devtools-installer/dist/utils.js] 1.88 KiB {main} [built]
  [./node_modules/electron-is-dev/index.js] 256 bytes {main} [built]
  [./node_modules/electron-localshortcut/index.js] 8.16 KiB {main} [built]
  [./node_modules/semver/semver.js] 37.1 KiB {main} [built]
  [./src/main/index.dev.js] 364 bytes {main} [built]
  [./src/main/index.js] 801 bytes {main} [built]
  [electron] external "electron" 42 bytes {main} [built]
  [fs] external "fs" 42 bytes {main} [built]
  [path] external "path" 42 bytes {main} [built]
      + 33 hidden modules

  WARNING in ./node_modules/electron-debug/index.js 81:45-58
  Critical dependency: the request of a dependency is an expression
   @ ./src/main/index.dev.js
   @ multi ./src/main/index.dev.js ./src/main/index.js

  WARNING in ./node_modules/electron-debug/index.js 84:85-106
  Critical dependency: the request of a dependency is an expression
   @ ./src/main/index.dev.js
   @ multi ./src/main/index.dev.js ./src/main/index.js

┗ ----------------------------

┏ Electron -------------------

  Debugger listening
┗ ----------------------------

┏ Electron -------------------

   on ws://127.0.0.1:5858/14b8481a-3e79-4bbc-b8a1-e76ce223d548
  For help see https://nodejs.org/en/docs/inspector

┗ ----------------------------

なんかでた。

VSCode設定

一瞬満足しかけましたが、VSCodeで良い感じにDebugできるようになるまでが準備です。
下記を参考に、Build用のtasks.jsonと、Buildと起動を行うlaunch.jsonを設定しました。
- Debug Electron App with VS Code
- VSCode用のElectron+TypeScript+Vue+Webpackの開発・デバッグ環境のたたき台を作った

Shift+Ctrl+Bでtasks.jsonのBuildとCleanを作ることができました。実行してみるとdistやbuildフォルダ内になんかできるので、これで良さそうです。

tasks.json
{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [{
            "label": "build",
            "type": "npm",
            "script": "build",
            "problemMatcher": []
        },
        {
            "label": "clean",
            "type": "npm",
            "script": "build:clean",
            "problemMatcher": []
        }
    ]
}

RenderとMainのそれぞれのプロセスに対してデバッガを動かすみたいですね。どう違うかはそのうちわかるでしょう。

launch.json
{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [{
            "type": "node",
            "request": "launch",
            "name": "Electron Main Process",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            "cwd": "${workspaceRoot}",
            "program": "${workspaceFolder}/dist/electron/main.js",
            "protocol": "inspector",
            "preLaunchTask": "build"
        },
        {
            "type": "chrome",
            "request": "launch",
            "name": "Electron Renderer Process",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
            },
            "runtimeArgs": [
                "${workspaceFolder}/dist/electron/main.js",
                "--remote-debugging-port=9222"
            ],
            "webRoot": "${workspaceFolder}",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///./*": "${workspaceFolder}/*"
            }
        }
    ]
}

これでとりあえず始められるようにはなりましたが、正直なところelectron-vueの情報量が多くて、何から始めるのかわかりません。
Electronのみで始めた方がよかったかもしれないと後悔しつつあります。
次回：年末年始Webアプリ開発自習の記録7

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
3