20200323のNode.jsに関する記事は7件です。

初心者がElectron(NW.js)を始めてみて分かったことまとめ

目次

  1. はじめに
  2. 個人的にHTA(WSH?)とNW.jsはオススメしません
  3. electron開発の流れ
    1. プロジェクトフォルダ(名前は何でもOK:ここではmoge)の準備
    2. 中身を編集する
    3. moge/package.jsonを編集する
    4. electronとelectron-builderのインストール
    5. ビルド
  4. electron-builderでビルドしようとするとこのシステムではスクリプトの実行が無効になっているため、~~~というエラーが出るとき
  5. 1つのプロジェクトを再ビルドしたいとき
  6. おわりに

はじめに

突然ですが、絵を描く用の画像資料が10GBを超えてしまいました。
何かいい画像ビューアないかなと探していたのですがイマイチだったので、自分で作ってみようと思いました。
HTML/CSSは少しやったことがあったので、ちょうどいいやということでelectronを始めてみました。?

あとこの記事ではwindows10のみを対象にしています。
macとかlinuxは使ったことがないので分かりません。すみません。
もちろんプログラム初心者です。間違いがあったら教えてください。

さて、googleでelectronについて検索してもヒットするのは古い情報が多いですよね。
(そのせいで合計2日分くらい無駄にしてしまいました)
私みたいな人を増やさないために、今の時点で分かったことを初心者目線でまとめておきます。
(あと頭の中身を整理して今抱えているエラーを解決するため)

個人的にHTA(WSH?)とNW.jsはオススメしません

画像ビューアを作ろうとしたとき、まずはこちらの記事(簡単なウインドウアプリ(GUI)開発のまとめ(Windows偏))を参考にさせていただきました。

まずは一番上にあったHTA(WSH?)を試してみたのですが、

  • 古い技術だからサポート切ってるブラウザが多いらしい?(要検証)
    • 私が試したときはIEでだけ動きました。
    • しかも毎回ポップアップで出てくるやつを許可しなきゃダメでちょっとメンドイ
  • ネット文献はそこそこヒットするけど、どれも文が硬く初心者向けではない

次にNW.jsを使ってみたのですが、

  • electronに比べユーザーが少ない
    • つまり文献も少ない(こういうエラーが出ました、など)
  • electronに比べてお手軽とあるが、やってみるとほとんど同じくらいの労力がかかる
  • なぜかビルドできない(これは個人の能力不足)

で、electronに至りました。electronは、

  • そこそこ文献がある
    • あるけどどれもレベルが高くて初心者が理解するには苦労する必要がある(でもないよりマシ!)
    • あと書籍としての文献もそこそこあるらしい(少し古いけど)
  • バージョンによって有効な書き方が違うことがあって少し大変

みたいな感じです。
個人的に積極的に使いたい子ではないです。
他のはウーンって感じだしC#はハードル高そうだしってなって消極的に採用しました。

他に何かよさげなのあったら教えてください!

electron開発の流れ

まずはNode.jsをインストールしてください。

  1. ダウンロードする(私はWindows Installer (.msi)の64-bitをダウンロードしました)
  2. インストーラの指示に従ってインストールする
  3. 完了!

次におおまかにelectron開発の流れをなぞるとこんな感じです。

  1. プロジェクトフォルダ(名前は何でもOK:ここではmoge)を作る
  2. mogeの中に必要なフォルダとファイルを作る(main.js, index.html, src/package.jsonなど)
  3. moge/package.jsonを編集する
  4. electronとelectron-builderをインストールする
  5. ビルドする

次で詳しく触れていきます。

プロジェクトフォルダの準備(名前は何でもOK:ここではmoge

適当なとこにmogeファイルを作ります。
mogeの中にsrcという名前のフォルダとpackage.jsonを作ります。
この段階では中身は空でOKです。
srcの中に、main.js, index.html, package.jsonを作ります。
これも中身は空でOKです。

プロジェクトフォルダ
moge
 ├ src
 │ ├ main.js
 │ ├ index.html
 │ └ package.json
 └ package.json

package.jsonが2つありますが、src直下の方をsrc/package.jsonmoge直下の方をmoge/package.jsonと呼ぶことにします。
(これ何で名前同じの2つ作らせる仕様なんですかね?ややこしい!)

色んなの資料読んでるとどっちのpackage.jsonを指してるのか分かりにくくて初心者的には大変です。
体感ですが、moge/package.jsonの方を指してることが多いと思います。ていうか多分そう。

中身を編集する

まずはmain.jsからです。
main.jsは、どのプロジェクトでもほとんど同じようなものになるらしいです。
必要に応じて書き足したりするらしいですが、私にはよく分かりません。

公式ドキュメントの読み方が分からない...!?‍♀️

main.js
const { // アプリ作成用のモジュールを読み込む
  app,
  BrowserWindow,
  Menu
} = require('electron');

let mainWindow;  // メインウィンドウ

function createWindow() {
  mainWindow = new BrowserWindow({  // メインウィンドウを作成する
    width: 960, // 横幅
    height: 540,  // 縦幅
    alwaysOnTop: true,  // 常に最前面
    webPreferences: {
      nodeIntegration: true // 必要なものらしい
    }
  });

  process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = '1'; // 警告(Electron Security Warning)が出なくなる
  mainWindow.loadFile('./src/index.html'); // メインウィンドウに表示するやつを指定する
  Menu.setApplicationMenu(null); // メニューバー削除
  mainWindow.webContents.openDevTools(); // デベロッパーツールの起動

  mainWindow.on('closed', function() {
    mainWindow = null; // ×が押されたらメインウィンドウを閉じる
  });
}
app.on('ready', createWindow);  // 初期化が完了したらcreateWindow()を呼び出す
app.on('window-all-closed', function() {  // 全てのウィンドウが閉じたら
  if (process.platform !== 'darwin')
    app.quit();  // macでない限りアプリを終了させる
});
app.on('activate', function() { // アプリがアクティブになったら
  if (mainWindow === null)
    createWindow(); // メインウィンドウが消えてたらもう一回メインウィンドウを作る
});

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

次はindex.htmlです。
今回はCSSで装飾してJSのログとHTMLのpを使ってみました。

html
<!DOCTYPE html>

<html>

<head>
  <title>moge</title>
  <style>
    body {
      background-color: #e5ddb0;
      padding: 20px;
      width: 100%;
      max-width: 800px;
      margin: 0 auto;
    }
  </style>
  <script>
    // メイン
    function main() {
      console.log("JSのテスト");
    }
  </script>
</head>

<body onLoad="main()">
  <p>HTMLのテスト</p>
</body>

</html>

最後にsrc/package.jsonです。
エッこれだけ!?って感じですよね。
src/package.jsonも、どのプロジェクトでもほとんど同じようなものになるらしいです。

src/package.json
{
  "main": "main.js"
}

moge/package.jsonを編集する

基本的にはこんな感じらしいです。

moge/package.json
{
  "name": "moge",
  "version": "1.0.0",
  "description": "",
  "main": "./src/main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "build": {
    "productName": "moge",
    "appId": "moge",
    "win": {
      "target": "portable"
    }
  }
}

"target": "portable"は、ビルドするときはポータブルアプリになるようにしてねって意味らしいです。
ポータブルアプリは、インストールしなくても使える.exeのことらしいです。

これでファイルの準備はおしまいです!

electronとelectron-builderをインストールする

エクスプローラでmogeフォルダの余白をshift + 右クリックして、PowerShell ウィンドウをここで開く(S)を選択してください。
(どうでもいいですけどPowerShell ウィンドウ「で」ここ「を」開く(S)じゃないですかね?)

そしたら紺色のウィンドウが出てくるはずです。
これはPowerShellというもので、コマンドを打ち込むとwindowsに命令を下せます。
electronの母体であるNode.jsは、モジュール?をインストールするのにこのPowerShellを使う必要があります。
よく見る.exeのインストーラーは使わないらしいです。

そしたら、まずはnode -vを実行してください。
下みたくなったらNode.jsのインストールに成功していることが確認できます。

node -v
PS D:\electron\moge> node -v
v12.16.0

確認できたら、npm i -D electronnpm i -D electron-builderを実行してください。
どちらも少し時間がかかります。
これは、electronとelectron-builderをmogeフォルダにインストールするという工程です。
-D-gにすることで、グローバルなインストールができるらしいですが、electronはローカルにインストールするのがいいらしいです?
下みたくなったらOKです。

npm i -D electron
PS D:\electron\moge> npm i -D electron

+ electron@8.0.2
added 85 packages from 93 contributors and audited 102 packages in 10.474s
npm i -D electron-builder
PS D:\electron\moge> npm i -D electron-builder

+ electron-builder@22.3.2
added 138 packages from 107 contributors and audited 770 packages in 15.356s

このとき、プロジェクトフォルダは次みたくなってるはずです。
追加されたnode_modulespackage-lock.jsonは何もしなくてOKです。

プロジェクトフォルダ
moge
 ├ node_modules
 ├ src
 │ ├ main.js
 │ ├ index.html
 │ └ package.json
 ├ package.json
 └ package-lock.json

確認できたら、npm startを実行してください。

npm start
PS D:\electron\moge> npm start

> moge@1.0.0 start D:\electron\moge
> electron .

少し待つとこんな感じのウィンドウが出てくるはずです!
無題.png

テンション上がりますね!うおおお?
このままだとNode.jsやelectronがインストールされている環境でPowerShellから呼び出さないと起動できませんが、ビルドするとダブルクリックひとつ(?)で起動できるようになります!
次でビルドしていきます。

ビルドする

ここによると、PowerShellはセキュリティの都合でよく分からないコマンドを実行できないような設定になってるらしいです。
electron-builderはその「よく分からないコマンド」に属しているらしく、初期設定のままだと実行できません。
なので、さっきの記事に従って設定を変更しましょう。
ちなみに私はSet-ExecutionPolicy RemoteSignedを実行しました。

そしたら、electron-builder build --winを実行しましょう。
この処理は1~2分くらいかかります。
下みたくなったら成功です。

electron-builder build --win
PS D:\electron\moge> electron-builder build --win
  electron-builder  version=22.3.2 os=10.0.17763
  loaded configuration  file=package.json ("build" field)
  description is missed in the package.json  appPackageFile=D:\electron\moge\package.json
  writing effective config  file=dist\builder-effective-config.yaml
  packaging       platform=win32 arch=x64 electron=8.0.2 appOutDir=dist\win-unpacked
  default Electron icon is used  reason=application icon is not set
  building        target=portable file=dist\moge 1.0.0.exe archs=x64

このシステムではスクリプトの実行が無効になっているため、~~~みたいなエラーが出た方は、上の記事に従って再度PowerShellの設定を変更してみてください。

ビルドに成功したら、mogeフォルダにdistというフォルダが追加されているはずです。

プロジェクトフォルダ
moge
 ├ dist
 ├ node_modules
 ├ src
 │ ├ main.js
 │ ├ index.html
 │ └ package.json
 ├ package.json
 └ package-lock.json

そしたらdistの中のmoge 1.0.0.exeを起動してみましょう!
さっきのnpm startと同じウィンドウが出てきましたね!
ddba20001abfb7f026aa13144984f2de.jpg

成功です?

以上がelectron開発の流れになります。
(長かった…)

1つのプロジェクトを再ビルドしたいとき

単純にもう一回electron-builder build --winを実行するとエラーが出ることがあります。
そのときは、

  • distフォルダを削除する
  • C:/Users/(Username)/AppData/Roaming/mogeを削除する

で再ビルドできます。
もしフォルダを削除しようとして使用中なので削除できませんというエラーが出たときは、

  • moge 1.0.0.exeを閉じる
  • タスクマネージャーでelectronアイコンのやつを全て閉じる

をするとフォルダを削除できるようになります。
(electron-rebuilderとかいうやつがあるとかないとか聞きますが、使い方が分かりません?‍♀️)

おわりに

私が分かっていることは以上です。

こうして頭の中を整理してみましたが、今抱えている
「ビルドしたあとに外部ファイルを読み込ませるにはどうしたらいいか」
を解決する糸口は全くつかめませんでした?

どなたか助けていただけると幸いです…
「公式ページのここに書いてありそう」とかでも構わないので教えてください…

で、初心者の方にも分かりやすい構成を目指して書いてみたのですが、どうだったでしょうか(冗長すぎたかも)。
こんな記事でしたが、最後まで読んでいただいてありがとうございました!?

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Node.js: printf風の文字列フォーマットをする方法

Node.jsでprintf風の文字列フォーマットをするには、util.format関数を使うと良い。

const {format} = require('util')
const message = format('値は %s のうちのどれかにしてください', [1, 2, 3])
console.log(message)
//=> 値は [ 1, 2, 3 ] のうちのどれかにしてください

公式ドキュメント: Util | Node.js v13.11.0 Documentation

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

cheerio-httpcli - Node.js用WEBスクレイピングモジュールについて

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

lockファイルがコンフリクトしたときの対処法

ヾ(・ω<)ノ" 三三三● ⅱⅲ コロコロ♪


------------------- ↓ 余談はここから ↓-------------------

lockファイルでインストールを制御ってのは、
割と理想論だと思っている。

まぁ、それはいいとして、
lockファイルをコミットすると、
ほぼ間違いなくコンフリクトする。
そんなときの対処法を残しておこう。


------------------- ↓ 本題はここから ↓-------------------

composer.lock

コンフリクトを適当に解消して以下のコマンドを打つ

$ composer update --lock

package-lock.json

コンフリクトした状態のまま以下のコマンドを打つ

$ npm install
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

async/await スリープ関数

// スリープ
const sleep = delay => new Promise(resolve => setTimeout(resolve, delay));

(async() => {
  // 5秒待機
  await sleep(5000);
})();
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

GlitchでPuppeteerを使う際の注意(--no-sandbox)

  • Glitch:Webサイト・APIなどをデプロイできるサービス
  • Puppeteer:ヘッドレスブラウザを立ち上げてスクレイピングなどに使えるNodeライブラリ。GoogleのChrome DevToolsチームが開発してる

ローカルのNodeで開発したPuppeteer利用APIをGlitchにデプロイして起きたエラーの解消メモ

コード(失敗時)

一般的な以下のような書き方で実行すると…

const puppeteer = require('puppeteer')

(async () => {
  const browser = await puppeteer.launch()
  const page = await browser.newPage()
  await page.goto('https://example.com')
  await page.screenshot({path: 'example.png'})

  await browser.close()
})()

エラー

次のようなエラーがログに吐き出される

UnhandledPromiseRejectionWarning: Error: Failed to launch the browser process!
No usable sandbox! Update your kernel or see https://chromium.googlesource.com/chromium/src/+/master/docs/linux_suid_sandbox_development.md for more information on developing with the SUID sandbox. If you want to live dangerously and need an immediate workaround, you can try using --no-sandbox.

コード(成功時)

エラーメッセージに出ているように、--no-sandboxオプションをつけてpuppeteer.launch()すればOKなので

(async () => {
  const browser = await puppeteer.launch({
    args: ['--no-sandbox']
  })
  const page = await browser.newPage()
  await page.goto('https://example.com')
  await page.screenshot({path: 'example.png'})

  await browser.close()
})()

で無事実行可能に。Glitchのディスカッションをみると、Glitchの各プロジェクトはDockerコンテナ内で実行されるためsandboxをrunできない、とのことだった

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

ScaffoldHubってすごいのでは?

はじめに

最近のWebアプリを作るために様々な技術が登場しています。
結局どれで作るのが良いのだろうとふと疑問に思った時、思わず目に入ってきたサイトを見つけました。それがScaffoldHubでした。
より多くの人にScaffoldHubを知ってもらいたいと思い
(実は既に知っている人大多数説あり)、恥ずかしながら記事の初投稿を決意しました。

この記事はScaffoldHubの公式サイトに書いてあることを記載しているだけなので、詳しくは以下のURLの公式サイトや公式ブログを参照してください。
https://scaffoldhub.io/

ScaffoldHubとは

ScaffoldHubとは、JavaScriptで書かれたWebアプリのコード自動生成サービスです。選べるものとして、フロントエンドには御三家(React, Vue, Angular)、バックエンドはNodeJSのみ、DBにはSQL, MongoDB, Firebase Firestoreが選べるようです。Webアプリ生成した後は、生成されたソースを基に機能拡張ができるので、自分好みに改良できます。一からWebアプリを作らなくて良いのは魅力的です。

ScaffoldHubの価格

サンプルとしてWebアプリを動かすのは無料ですが、ソースコードのダウンロードはもちろん有料です。気になる価格ですが、なんと39ドル!!
これは安いのでは!?と思いました。公式サイトを見る限り、これ以上かかる費用はなさそうですが、購入を検討されている方は購入前に必ず詳細を確認してください。

ScaffoldHubの特徴

いくつか抜粋して、ScaffoldHubの特徴を記載します。

  • 認証機能
    ユーザ名、パスワード認証やfacebook, Twitter, Google認証が実装されているようで、これらの認証機能を一から実装する必要がないようです。

  • ユーザ・ロール、パーミッション管理
    それぞれを管理でき、権限制御ができるようです。

  • 監査ログ
    ユーザのアクション(ログイン、ページ遷移等)がログに記録されるようです。

  • モバイルとの親和性
    ScaffoldHubから生成したWebアプリはモバイル用のデザインも用意されているようです。

まだまだ、ありますが公式サイトを見ると全容がわかるので、詳細はそちらを参照しください、

終わりに

ScaffoldHubは、2019年5月からサービスを開始していたようですが、
ScaffoldHubに関する記事が見当たらなかったので、記事投稿をしてみました。(今回の記事がQiitaデビュー)
まだ、次回の記事はScaffoldHubをしっかり見れていないのでこれからデモを動かしたときの使用感を試していきたいと思います。

ScaffoldHubについて、知っている方や気になる方がいらっしゃればこの記事を機会にぜひ公式サイトをみて欲しいです。また、気軽なコメントもぜひお待ちしております。
https://scaffoldhub.io/

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む