- 投稿日:2020-03-23T23:42:33+09:00
初心者がElectron(NW.js)を始めてみて分かったことまとめ
目次
- はじめに
- 個人的にHTA(WSH?)とNW.jsはオススメしません
- electron開発の流れ
- electron-builderでビルドしようとすると
このシステムではスクリプトの実行が無効になっているため、~~~
というエラーが出るとき- 1つのプロジェクトを再ビルドしたいとき
- おわりに
はじめに
突然ですが、絵を描く用の画像資料が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をインストールしてください。
- ダウンロードする(私はWindows Installer (.msi)の64-bitをダウンロードしました)
- インストーラの指示に従ってインストールする
- 完了!
次におおまかにelectron開発の流れをなぞるとこんな感じです。
- プロジェクトフォルダ(名前は何でもOK:ここでは
moge
)を作るmoge
の中に必要なフォルダとファイルを作る(main.js
,index.html
,src/package.json
など)moge/package.json
を編集する- electronとelectron-builderをインストールする
- ビルドする
次で詳しく触れていきます。
プロジェクトフォルダの準備(名前は何でも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.json
、moge
直下の方をmoge/package.json
と呼ぶことにします。
(これ何で名前同じの2つ作らせる仕様なんですかね?ややこしい!)色んなの資料読んでるとどっちの
package.json
を指してるのか分かりにくくて初心者的には大変です。
体感ですが、moge/package.json
の方を指してることが多いと思います。ていうか多分そう。中身を編集する
まずは
main.js
からです。
main.js
は、どのプロジェクトでもほとんど同じようなものになるらしいです。
必要に応じて書き足したりするらしいですが、私にはよく分かりません。公式ドキュメントの読み方が分からない...!?♀️
main.jsconst { // アプリ作成用のモジュールを読み込む 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 -vPS D:\electron\moge> node -v v12.16.0確認できたら、
npm i -D electron
とnpm i -D electron-builder
を実行してください。
どちらも少し時間がかかります。
これは、electronとelectron-builderをmoge
フォルダにインストールするという工程です。
-D
を-g
にすることで、グローバルなインストールができるらしいですが、electronはローカルにインストールするのがいいらしいです?
下みたくなったらOKです。npm i -D electronPS D:\electron\moge> npm i -D electron + electron@8.0.2 added 85 packages from 93 contributors and audited 102 packages in 10.474snpm i -D electron-builderPS 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_modules
とpackage-lock.json
は何もしなくてOKです。プロジェクトフォルダmoge ├ node_modules ├ src │ ├ main.js │ ├ index.html │ └ package.json ├ package.json └ package-lock.json確認できたら、
npm start
を実行してください。npm startPS D:\electron\moge> npm start > moge@1.0.0 start D:\electron\moge > electron .テンション上がりますね!うおおお?
このままだとNode.jsやelectronがインストールされている環境でPowerShellから呼び出さないと起動できませんが、ビルドするとダブルクリックひとつ(?)で起動できるようになります!
次でビルドしていきます。ビルドする
ここによると、PowerShellはセキュリティの都合でよく分からないコマンドを実行できないような設定になってるらしいです。
electron-builderはその「よく分からないコマンド」に属しているらしく、初期設定のままだと実行できません。
なので、さっきの記事に従って設定を変更しましょう。
ちなみに私はSet-ExecutionPolicy RemoteSigned
を実行しました。そしたら、
electron-builder build --win
を実行しましょう。
この処理は1~2分くらいかかります。
下みたくなったら成功です。electron-builder build --winPS 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
と同じウィンドウが出てきましたね!
成功です?
以上がelectron開発の流れになります。
(長かった…)1つのプロジェクトを再ビルドしたいとき
単純にもう一回
electron-builder build --win
を実行するとエラーが出ることがあります。
そのときは、
dist
フォルダを削除するC:/Users/(Username)/AppData/Roaming/moge
を削除するで再ビルドできます。
もしフォルダを削除しようとして使用中なので削除できませんというエラーが出たときは、
moge 1.0.0.exe
を閉じる- タスクマネージャーでelectronアイコンのやつを全て閉じる
をするとフォルダを削除できるようになります。
(electron-rebuilderとかいうやつがあるとかないとか聞きますが、使い方が分かりません?♀️)おわりに
私が分かっていることは以上です。
こうして頭の中を整理してみましたが、今抱えている
「ビルドしたあとに外部ファイルを読み込ませるにはどうしたらいいか」
を解決する糸口は全くつかめませんでした?どなたか助けていただけると幸いです…
「公式ページのここに書いてありそう」とかでも構わないので教えてください…で、初心者の方にも分かりやすい構成を目指して書いてみたのですが、どうだったでしょうか(冗長すぎたかも)。
こんな記事でしたが、最後まで読んでいただいてありがとうございました!?
- 投稿日:2020-03-23T11:45:26+09:00
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
- 投稿日:2020-03-23T11:03:20+09:00
cheerio-httpcli - Node.js用WEBスクレイピングモジュールについて
下記2点で情報入手
①Webサイト
cheerio-httpcli - Node.js用WEBスクレイピングモジュール
②書籍(P53~P67)
Webクローラー/ネットエージェント開発テクニック
- 投稿日:2020-03-23T10:15:32+09:00
lockファイルがコンフリクトしたときの対処法
ヾ(・ω<)ノ" 三三三● ⅱⅲ コロコロ♪
------------------- ↓ 余談はここから ↓-------------------
lockファイルでインストールを制御ってのは、
割と理想論だと思っている。まぁ、それはいいとして、
lockファイルをコミットすると、
ほぼ間違いなくコンフリクトする。
そんなときの対処法を残しておこう。
------------------- ↓ 本題はここから ↓-------------------
composer.lock
コンフリクトを適当に解消して以下のコマンドを打つ
$ composer update --lockpackage-lock.json
コンフリクトした状態のまま以下のコマンドを打つ
$ npm install
- 投稿日:2020-03-23T10:11:37+09:00
async/await スリープ関数
// スリープ const sleep = delay => new Promise(resolve => setTimeout(resolve, delay)); (async() => { // 5秒待機 await sleep(5000); })();
- 投稿日:2020-03-23T01:23:03+09:00
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できない、とのことだった
- 投稿日:2020-03-23T00:25:52+09:00
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/