Electron with Vue.js でのデバッグのやり方をまとめる
Electronでアプリを開発しててデバッグのやり方につまずいたのでまとめておきます。
デバッグはメインプロセスとレンダラープロセスでやり方が違うので注意してください。
メインプロセスとレンダラープロセスがわからない方は以下の記事を確認いただければなんとなく理解できると思います。
デバッグする前の設定(vue.config.jsをおく)
ルート(.gitignoreと同じ場所)に以下のvue.config.jsを配置します。これはメインプロセス、レンダラープロセスどちらでのデバッグでも必要な設定です。
メインプロセスのデバッグ
メインプロセスのデバッグはVisual Studio Codeで行います。
手順は以下に書いてあるとおりにやればできましたが、英語なので簡単に必要なことだけ書きます。
1. デバッグ構成ファイルをおく
ルートにある.vscodeフォルダ(なければ作成)に以下のlaunch.jsonとtasks.jsonを配置する。
2. ブレークポイントをはる
background.tsの止めたいところにブレークポイントをはります。
3. vscodeからデバッグ実行する
構成は"Electron:Main"を選択して実行ボタン(緑の▷)をクリックします。
ちなみに"Electron:All"を選択するとvueファイルでもブレークできますが、切り替える必要があるのでレンダラープロセスは後述する方法がおすすめです。
4. とまる
変数の中身も確認できますし、値も変更できます。
レンダラープロセスのデバッグ(ロジック)
レンダラープロセスでのロジックのデバッグは通常のchromeと同様でデベロッパーツールで行います。
このデバッグ手順は通常のVue.jsでの開発も同じです。
1. デベロッパーツールのSourcesを開く
アプリを起動するとデベロッパーツールが右側に表示されているのでSourcesタブに変更します。
2. ツリーからvueファイルを選択する
ツリーにある"webpack://"を開いて"."フォルダを開いて"src"フォルダを開くとvueファイルがあるので選択します。
ファイル名の後ろに"?"がついているものもありますが、何もついていないものを選択します。
3. ブレークポイントをはる
vueファイルを選択するとソースが表示されるので止めたいところにブレークポイントをはります。
4. とまる
変数の中身も確認できますし、値も変更できます。
レンダラープロセスのデバッグ(Vue.js)
通常のVue.jsの開発と同様にChrome拡張を入れることでvueオブジェクトのデータがリアルタイムに確認できます。
1. Chromeのアドオンをインストール
Chromeを開いて"Vue.js devtools"をインストールします。
chrome.google.com
2. background.tsのコメントアウトを解除する
background.tsのapp.on("ready")にinstallVueDevtools()の処理がコメントアウトされているので解除します。
app.on("ready", async () => { if (isDevelopment && !process.env.IS_TEST) { // Install Vue Devtools // Devtools extensions are broken in Electron 6.0.0 and greater // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode // If you are not using Windows 10 dark mode, you may uncomment these lines // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines try { await installVueDevtools(); } catch (e) { console.error("Vue Devtools failed to install:", e.toString()); } } createWindow(); });
3. デベロッパーツールでVueタブを選択
アプリを起動してVueタブを選択し、Vueオブジェクトを選択するとデータが確認できます。変更もできます。
※ Vueタブが表示されない場合
Electron 9.0だとVueタブが表示されないという事象が発生します。
その場合、vue uiからアプリを起動するとコンソールに以下の表示がされていると思います。
(electron) 'BrowserWindow.addDevToolsExtension' is deprecated and will be removed. Please use 'session.loadExtension' instead. (node:5400) ExtensionLoadWarning: Warnings loading extension at C:\Users\final\AppData\Roaming\emptydirectorycleaner\extensions\nhdogjmejiglipccpnnnanhbledajbpd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'. Permission 'contextMenus' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system. (node:5400) ExtensionLoadWarning: Warnings loading extension at C:\Users\final\AppData\Roaming\emptydirectorycleaner\extensions\nhdogjmejiglipccpnnnanhbledajbpd: Unrecognized manifest key 'browser_action'. Unrecognized manifest key 'update_url'. Permission 'contextMenus' is unknown or URL pattern is malformed. Cannot load extension with file or directory name _metadata. Filenames starting with "_" are reserved for use by the system.
これについて調べたところ、electron-builder公式のissueにありました。
background.tsのfunction createWindow()のところを以下のようにasyncとawaitを追加します。
// ①↓asyncを追加 async function createWindow() { // ... if (process.env.WEBPACK_DEV_SERVER_URL) { // Load the url of the dev server if in development mode // ②↓awaitを追加 await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string); if (!process.env.IS_TEST) win.webContents.openDevTools(); // ...
これでデベロッパーツールにVueタブが表示されるようになりました。
ちなみにこの対処方法は6/13に判明したのですが、それまではCtrl + Shift + iでデベロッパーツールを開き直せばいけてました。
最後に
vscodeでアプリをデバッグ起動してbackgroud.tsにブレークポイントをはって、デベロッパーツールでvueファイルにブレークポイントをはればメインプロセスとレンダラープロセスの連携した動作もデバッグできるようになり、Vue.js devtoolsで変更検知されているか確認できるのでElectronのアプリ開発が捗りますね。
最低限抑えておくレベルでElectronを使ったアプリ開発のプロセス間通信を簡単に理解する
Electronを使ってアプリ開発をしていましたが、Electronの仕組みを理解できていなかったので開発に必要なレベルで簡単にまとめました。
コードの説明はvue.js + typescriptを使った例になりますが、ほかの場合も考え方はほぼ同じだと思います。
- メインプロセスとレンダラープロセスはサーバーとクライアントのような関係
- クライアント・サーバー間の通信はHTTP、メイン・レンダラープロセス間の通信はプロセス間通信
- プロセス間通信のイメージ
- レンダラープロセスの実装(リクエスト送信)
- メインプロセスの実装(レスポンス送信)
- プロセス間通信を行うための設定
- まとめ
メインプロセスとレンダラープロセスはサーバーとクライアントのような関係
Electronはメインプロセス(1つ)とレンダラープロセス(複数)で動作します。
メインから画面を立ち上げるごとにレンダラープロセスが生成されます。
ここでいうプロセスはexeファイルのことだと思ってください。
メインプロセスでOSとのやり取りを行い、レンダラープロセスではユーザーとやり取りを行います。
メインプロセスをサーバーと考えれば、レンダラープロセスはクライアント(ブラウザ)というイメージですかね。
クライアント・サーバー間の通信はHTTP、メイン・レンダラープロセス間の通信はプロセス間通信
クライアントとサーバー間はHTTPを使って通信するようにメインとレンダラー間はプロセス間通信(IPC)で通信します。
プロセス間通信というと難しく聞こえるかもですが、HTTPと同じでリクエストを送って、レスポンスを受けるのと変わりません。
プロセス間通信のイメージ
私が理解したプロセス間通信をイメージを絵にしてみました。個人的なイメージなので間違ってたらすみません。
OSとやり取り(ファイル操作とか)するのはメインプロセスで、レンダラープロセスからは依頼(リクエスト)して結果(レスポンス)を受け取るイメージです。
レンダラープロセスの実装(リクエスト送信)
Node.jsにプロセス間通信を行うためのapiが用意されておりそれを使うことで簡単に実装できます。
レンダラープロセス内(vueファイル)でリクエストしたいタイミングでipcRenderer.invoke()を実行します。
以下の例はディレクトリパスを渡して配下のディレクトリを返却する検索処理だと思ってください。
"searchDirectory"が呼び出すAPIの名前で、this.directoryPathはAPIに渡すパラメタです。
import electron from "electron"; export default class App extends Vue { private ipcRenderer = electron.ipcRenderer; async search() { const response: IpcResponse<string[]> = await this.ipcRenderer.invoke( "searchDirectory", this.directoryPath ); if (response.error) { // エラーのときの処理 this.showMessage(MessageLevel.Warning, "ディレクトリーが存在しません"); return; } // 正常のときの処理 this.updateDirectories(response.data); }
ipcRendererにはsend()というメソッドがありますが、async/awaitで書けるinvoke()を使ったほうがシンプルに書けるのでおすすめです。
TypeScriptで書いているのでIpcResponseというレスポンスオブジェクトを定義しています。これは自作クラスです。標準で用意されているかと思い、探してなかったので作りました。
メインプロセスの実装(レスポンス送信)
レンダラープロセス同様にこちらもAPIが用意されています。
メインプロセス(background.ts)にipcMain.handle()の処理を実装しておきます。
以下の例は指定パスの配下のディレクトリを取得して返却する処理になります。
"searchDirectory"は待ち受けるAPI名で、directoryPathは受信したパラメタです。
import { ipcMain } from "electron"; ipcMain.handle("searchDirectory", async (event, directoryPath) => { try { const dirents = await fs.promises.readdir(dirpath, { withFileTypes: true }); return new IpcResponse(directoryPath); } catch (e) { return new IpcResponse(e); } });
ipcMainにもon()というメソッドがありますが、async/awaitで書けるhandle()を使ったほうがシンプルに書けるのでおすすめです。
プロセス間通信を行うための設定
デフォルトの設定でプロセス間通信を行おうとすると、アプリを起動しただけで以下のようなエラーに苛まれます。
index.js:4 Uncaught ReferenceError: __dirname is not defined at Object../node_modules/electron/index.js (index.js:4) at __webpack_require__ (bootstrap:853) at fn (bootstrap:150) at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/AppMain.vue?vue&type=script&lang=ts& (app.js:1056) at __webpack_require__ (bootstrap:853) at fn (bootstrap:150) at Module../src/views/AppMain.vue?vue&type=script&lang=ts& (AppMain.vue?679e:1) at __webpack_require__ (bootstrap:853) at fn (bootstrap:150) at Module../src/views/AppMain.vue (AppMain.vue?8622:1)
これはだいぶハマったのですが、どうやらデフォルトではセキュリティを高めるため、プロセス間通信できないようになっています。
background.tsの以下の箇所にある"nodeIntegration"をtrueにすればOKです。
// Create the browser window. win = new BrowserWindow({ x: AppStore.instance.get("window.x"), y: AppStore.instance.get("window.y"), width: 800, height: 600, webPreferences: { // Use pluginOptions.nodeIntegration, leave this alone // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info nodeIntegration: true, // ★ここをtrueにする }, title: "Empty Directory Cleaner", });
もしくはvue.config.jsでも指定できます。どちらかお好きな方で指定してください。
module.exports = { pluginOptions: { electronBuilder: { nodeIntegration: true, }, }, };
ただ、このnodeIntegrationをtrueにするのは推奨されない行為らしいです。
これをfalseのままプロセス間通信できるか調べて見ました。
以下でも議論されていますが、やり方はあるっぽいですが、Node.jsの便利なAPIは使えないっぽいです。
まとめ
Electronのプロセス間通信はwebと同じで、サーバー(メインプロセス)とクライアント(レンダラープロセス)間で行われるHTTP通信のようなもの。
はてなブログで最終更新日を表示するときに投稿日と同じ場合は表示しないようにするカスタマイズ
はてなブログで最終更新日を表示したくなり、やり方を調べて実装したことをまとめておきます。
やり方は以下の記事を参考にさせてもらいました。
ありがとうございます!
上記のとおりで実装して表示できたのですが、投稿日と最終更新日が同じ場合、以下のように表示されてしまいます。
ちょっとだけカスタマイズさせてもらって、投稿日と最終更新日が同じ場合は、表示されないようにしました。
記事上に表示したかったので記事上ところに貼り付けました。
sitemap.xmlは各自のサイトに合わせて修正してください。
ちなみにプレビューには反映されませんので注意。確認は変更を保存してから実際のページで確認してください。
<!-- 更新日時表示 --> <!--[if lt IE 9]> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.3.min.js"></script> <!--<![endif]--> <script> (function($) { "use strict"; var urls = [], opts = { cache: false, dataType: "xml" }, p, url = "https://final.hateblo.jp/sitemap.xml"; function parseSitemapXML(url) { var d = new $.Deferred(); $.ajax( $.extend(opts, { url: url, }) ) .done(function(xml) { $(xml) .find("sitemap") .each(function() { urls.push( $(this) .find("loc") .text() ); }); d.resolve(); }) .fail(function() { d.reject(); }); return d.promise(); } function findURL(url) { $.ajax( $.extend(opts, { url: url, }) ) .done(function(xml) { var isMatched = false; $(xml) .find("url") .each(function() { var $this = $(this); if ($this.find("loc").text() === location.href) { isMatched = true; appendLastmod($this.find("lastmod").text()); return false; } }); if (!isMatched) nextURL(); }) .fail(function() {}); } function nextURL() { urls.shift(); if (urls.length) findURL(urls[0]); } function appendLastmod(lastmod) { // 投稿日と更新日が同じ場合は表示しないようにする var pubdate = $("time[pubdate]").first().attr("datetime"); pubdate = pubdate == undefined ? "" : pubdate; if (lastmod.substr(0, 10) == pubdate.substr(0, 10)) return; var $container = $("<div></div>", { class: "lastmod" }).text(lastmod.replace(/T.*0/, "")); if ( $(".entry-header > .date") .get(0) .tagName.toLowerCase() === "span" ) { $(".entry-title").before($container); } else { $(".entry-date").append($container); } } p = parseSitemapXML(url); p.done(function() { findURL(urls[0]); }); p.fail(function(error) {}); })(jQuery); </script>
追加したところはコメントいれてますが、以下のところだけです。
あとSSLサイトなのでjqueryのurlをhttpsに直しました。
function appendLastmod(lastmod) { // 投稿日と更新日が同じ場合は表示しないようにする var pubdate = $("time[pubdate]").first().attr("datetime"); pubdate = pubdate == undefined ? "" : pubdate; if (lastmod.substr(0, 10) == pubdate.substr(0, 10)) return;
投稿日の取得ははてなブログの仕様が変わったらできなくなりそうな気がしますが、
そのときはそのときということで。
なんこかはてなブログのサイトを開いて試しましたが、とれたのでほかのサイトでも使えると思います。