electron-pack で扱われてる .asar のナカミをファイル単位でぱぱっと確認できるようにしたくなったとき用のメモです。npx asar l something.asar にパイプしてにゃんにゃんCLIで叩けば手っ取り早いタイプの用途とは別に、GUIのファイルエクスプローラーでにんげんの脳でリアルタイムに探索的にナカミを確認できると便利のよいタイプの用途向けです。
TC4SHELL 7-Zip plugins\Asar7z http://www.tc4shell.com/en/7zip/asar/
↑このプラグインを7zipへ導入します。
↓導入して 7-zip File Manager で適当な .asar を開いてみた例
かゆいとき、かゆいところへすぐに手が届くようになって便利になりました👍
yarn/npm で client-side 向けの library X (仮) を追加しています。yarn/npm により node_modules/X ディレクトリーに取り込まれています。public/lib/ ディレクトリーに配置したいお気持ちです。ここで、
となる場合に symlink を使うとどうなるのか、です。
# zsh/arch/WSL2 # ; cmd 使いなら mklink -D を使い、 powershell 使いなら New-Item -ItemType SymbolicLink を使います。たぶん。 cd public/lib ln -s ../../node_modules/X file X X: symbolic link to ../node_modules/X
electron . → symlink もそのまま動作🙆♀️electron . 的にアプリを起動する場合は symlink で作成したファイルまたはディレクトリーはElectronを介したアプリ client-side からの参照に対して通常のファイルと変わりない挙動を示します。たぶん、 NTFS と OS のファイルシステムに依存した挙動と思いますが、Windows開発環境で困る事は怒ら無いようです。electron-builder → copy が .asar に入って動作🙆♀️electron-builder でリリース用のパッケージを作成する場合は symlink で作成したファイルまたはディレクトリーは copy が .asar に入り、できあがった .exe での Electron を介したアプリ client-side からの参照に対して結果的には symlink を辿った先にあったファイルそのものと変わりない挙動を示します。↑ここはこのメモの本質的な挙動確認の対象部分です。結果としてこの目的においては理想的な期待動作となる事がわかり安心が1つ増えました。 electron-builder を使うと symlink が相対パスを記したテキストファイルに化けてしまうとか何かしら問題が起こるのではないかと疑い、そのような挙動を示した場合には symlink で手軽に済ませるのはやめようと考えながらの確認でしたが、珍しく嬉しい誤算の期待動作に遭遇しました。のメモです。
wingetwinget を入れなくても対応パッケージが視えますwinget を導入Add-AppxPackageなど → 参考 How to Install .Appx or .AppxBundle Software on Windows 10
winget <- choco 移行例: Node.jswinget で導入
winget install nodewinget install node の場合、 CUI でパッケージのダウンロードが進むとインストール経過は GUI のウィンドウが勝手に出てきて進みます。放っておくと（たぶん）成功で完了して CUI に制御が戻ります。
いまのところは残念ながら、途中で GUI のウィンドウが"しゃしゃり出て"来てしまうので winget install をバックグラウンドで実行させつつ「ながら」で別作業を並行みたいなかっこいい使い方はできません。
また、既にインストール済みか一切チェックしやがらない現代のパッケージマネージャーとしてはわりとおばかさんな仕様のため、 winget install node が成功した状態で winget install node するとまったく同様にインストールを繰り返します。これは依存パッケージの仕組みやある目的のためにまとめてあれこれを導入したい場合にすっごい無駄です。
--updateでインストール済みならアップデート動作してほしい」↑では突然winget installしましたが、教科書的な手順としては winget search node, winget show node など確認してから winget install node です。
所感としては「実用するにはまだはやいけれど期待はしたい」です。Issueがたくさんあがっていますし、パッケージマネージャーとしてのコア機能部分でまだ不足が多いので、現在はパッケージが充実したとしてもパッケージマネージャーとしての機能性からは choco の方が便利でいますぐ移行した方がよいとは言えません。来週には既にそうではなくなっているかもしれませんし、①年後には「そんなプロジェクトもそういえばありましたね、ハハッ」になっているかもしれません。
yarn add electron-store
public/conf.js とか適当に作る例:
const path = require("path"); const store = require("electron-store"); const store_conf = { // https://www.npmjs.com/package/electron-store#schema schema: { // 'foo'でアクセスできる foo: { type: typeof 0, maximum: 100, minimum: 1, default: 50, }, // 'bar'でアクセスできる bar: { type: typeof "", format: "url", default: "https://example.com/", }, // 'window' でアクセスできる Object window: { type: typeof {}, // Object は明示的に default: {} を与えておかないと子要素のdefaultがあっても取り出せないとか起こるので注意します default: {}, // Object の子要素は properties で定義します properties: { // 'window.width' でアクセスできる width: { type: typeof 0, maximum: Number.MAX_SAFE_INTEGER, minimum: 480, default: 960, }, // 'window.height' でアクセスできる height: { type: typeof 0, maximum: Number.MAX_SAFE_INTEGER, minimum: 270, default: 540, }, }, }, }, // https://www.npmjs.com/package/electron-store#migrations migrations: {}, }; module.exports = new store(store_conf);
public/conf.js を使う例( public/electron.js エントリーポイントを想定 ):
const electron = require("electron"); const app = electron.app; const browser_window = electron.BrowserWindow; const conf = require("./conf.js"); let main_window; function createWindow() { app.allowRendererProcessReuse = false; main_window = new browser_window({ width: conf.get("window.width"), height: conf.get("window.height"), webPreferences: { preload: `${__dirname}/preload.js` }, }); // (...abbr...; 後略)
準備:
yarn add electron-localshortcut; https://www.npmjs.com/package/electron-localshortcut実装例(public/electron.js):
const electron = require("electron"); const app = electron.app; const browser_window = electron.BrowserWindow; const local_shortcut = require("electron-localshortcut"); let main_window; function createWindow() { // (...abbr...; 中略) } // (...abbr...; 中略) app.on("ready", () => { createWindow(); local_shortcut.register(main_window, "F12", () => main_window.webContents.toggleDevTools() ); }); // (...abbr...; 後略)
electron-localshortcut を使う方法は紹介されていません。グローバルショートカット(ウィンドウが非アクティブでも反応する)、Menuのアクセラレーター機能(メニューに項目を作る必要が生じる)、レンダラープロセス側でにゃんにゃん(若干面倒＆今回ケースの用途では直接レンダラープロセス側にコードをごりごりするのは微妙に美しくない気がしたので今回は↑の方法へ)yarn add i18next i18next-node-fs-backendpublic/i18n.js など適当に作りconst i18n = require('./i18n.js') してawait i18n.changeLanguage('ja-JP') のように l10n 先を実行時に設定する仕込みをしてi18n.t('hoge') とすると i18next で l10n した文字列を取り出せますloadPath に JSON で { "hoge": "ほげ" } のように key-value 的に l10n リソースを定義追加します。saveMissing を true にしておけば addPath で与える missing 用のファイルへ l10n リソースが未定義で実行時に要求された文字列のリストが保存されます。public/i18n.jsoptions は Configuration Options - i18next documentation を見て適当に。fallbackLng を定義すると、 missing による add 動作先も fallbackLng になりました。未設定にしておけば missing による add は dev.missing.json のように addPath で与える {{lng}} は dev になります。const i18n = require("i18next"); const i18n_backend = require("i18next-node-fs-backend"); const path = require("path"); // const is_dev = require("electron-is-dev"); const options = { // debug: is_dev, lng: "en-US", initImmediate: false, backend: { loadPath: path.resolve(__dirname, "..", "i18n/{{lng}}.json"), addPath: path.resolve(__dirname, "..", "i18n/{{lng}}.missing.json"), jsonIndent: 2, }, saveMissing: is_dev, // fallbackLng: "en-US", whiteList: [ "en-US", "ja-JP", //, "ko-KR" //, "zh-CN" //, "zh-TW" //, "zh-HK" ], }; i18n.use(i18n_backend); if (!i18n.isInitialized) i18n.init(options); module.exports = i18n;
i18n/ja-JP.json の例{ "hoge": "ほげ" }
Inkscape-1.0 では Theme 機能が実装されたので、 Edit -> Preferences -> Interface -> Theme を設定するとダークモードに優しいテーミングができるようになりました。嬉しいです。しかし、闇の世界に住む私たちの目にInkscapeの画面で最も眩しくて困る部分はドキュメント本体の背景色です。白い画面は疲れます。真っ黒なのも黒線が完全に埋没してしまいますし、初期値は暗い灰色が好みです。これはいまのところ Preferences からではなく、ドキュメント新規作成時のテンプレートを直接変更する必要があります。
C:\Program Files\Inkscape\share\inkscape\templates (Windowsのデフォルトのインストールパスを用いている場合)に default.svg (InkscapeのUIをen-USで使用している場合) があるので、管理者権限の適当なテキストエディターで開いて svg/sodipodi:namedview[pagecolor] を #FFFFFF からお好みの色へ変更して保存します。
GNU/Linuxでは /usr/share/inkscape/... とかそのあたりに templates があるかもしれません。 en-US 以外の言語をInkscapeのUIに設定している場合は default.ja.svg (日本語用) のように言語が付いたバージョンの templates/default.??.svg を編集します。
心穏やかに闇のInkscapeを使えるようになります👍