electron-packagerのエラー解決

electron製のエスペラント日本語辞書アプリlina_dictoについて、パッケージ作成時のエラーを解決した際のメモ。



electron-packagerで下記エラーが出て、 node_modules再インストール等でも治らなかったので対処。

#  npm-check-updates によると思われるエラー
 
```

MN@daisy-bell:lina_dicto/$ npm install electron-packager --save-dev
npm ERR! path /home/HOME/lina_dicto/lina_dicto/node_modules/npm-check-updates/node_modules/npm/node_modules/dezalgo
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/home/HOME/lina_dicto/lina_dicto/node_modules/npm-check-updates/node_modules/npm/node_modules/dezalgo' -> '/home/HOME/lina_dicto/lina_dicto/node_modules/npm-check-updates/node_modules/npm/node_modules/.dezalgo.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/HOME/.npm/_logs/2017-12-21T12_10_15_965Z-debug.log


```

npm-check-updatesが競合か何かで悪さをしていた模様。
下記の通り依存パッケージから消して、node_modulesとpackage-lock.jsonを削除してから再インストールで解決。

```

MN@daisy-bell:lina_dicto/$ git diff
diff --git a/lina_dicto/package.json b/lina_dicto/package.json
index 200d447..387b961 100644
--- a/lina_dicto/package.json
+++ b/lina_dicto/package.json
@@ -22,13 +22,12 @@
     "babel-register": "^6.26.0",
     "electron": "^1.8.1",
     "electron-installer-debian": "^0.7.1",
-    "electron-packager": "10.1.0",
+    "electron-packager": "^10.1.0",
     "intelli-espower-loader": "^1.0.1",
     "mocha": "^4.0.1",
     "power-assert": "^1.4.4"
   },
   "dependencies": {
-    "npm": "^5.6.0",
-    "npm-check-updates": "^2.13.0"
+    "npm": "^5.6.0"
   }
 }

```









# ignore設定によると思われるエラー




下記のようなエラーが出た。

```
npm ERR! path /tmp/electron-packager/darwin-x64/lina_dicto-darwin-x64/Electron.app/Contents/Resources/app/node_modules/npm/node_modules/npmlog/node_modules/gauge/node_modules/object-assign
```


```
MN@daisy-bell:lina_dicto/$ bash ./installer_darwin.sh
~/lina_dicto/lina_dicto ~/lina_dicto
Packaging app for platform darwin x64 using electron v1.8.1
/home/HOME/lina_dicto/lina_dicto/build_darwin.js:19
                throw new Error(err);
                ^

Error: Error: Command failed: npm prune --production
npm ERR! path /tmp/electron-packager/darwin-x64/lina_dicto-darwin-x64/Electron.app/Contents/Resources/app/node_modules/npm/node_modules/npmlog/node_modules/gauge/node_modules/object-assign
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/tmp/electron-packager/darwin-x64/lina_dicto-darwin-x64/Electron.app/Contents/Resources/app/node_modules/npm/node_modules/npmlog/node_modules/gauge/node_modules/object-assign' -> '/tmp/electron-packager/darwin-x64/lina_dicto-darwin-x64/Electron.app/Contents/Resources/app/node_modules/npm/node_modules/npmlog/node_modules/gauge/node_modules/.object-assign.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/HOME/.npm/_logs/2017-12-21T12_29_30_221Z-debug.log

    at done (/home/HOME/lina_dicto/lina_dicto/build_darwin.js:19:11)
    at Immediate._onImmediate (/home/HOME/lina_dicto/lina_dicto/node_modules/nodeify/index.js:19:9)
    at runCallback (timers.js:789:20)
    at tryOnImmediate (timers.js:751:5)
    at processImmediate [as _immediateCallback] (timers.js:722:5)
error:./installer_darwin.sh(41) "node build_darwin.js" ""

```

設定のignoreから、objectを除くと解決した。

また、下記のようなエラーも出たので、さらにignoreを書き換えて解決した。

```
MN@daisy-bell:lina_dicto/$ bash ./installer_darwin.sh
~/lina_dicto/lina_dicto ~/lina_dicto
Packaging app for platform darwin x64 using electron v1.8.1
/home/HOME/lina_dicto/lina_dicto/build_darwin.js:19
                throw new Error(err);
                ^

Error: Error: Command failed: npm prune --production
npm ERR! path /tmp/electron-packager/darwin-x64/lina_dicto-darwin-x64/Electron.app/Contents/Resources/app/node_modules/npm/node_modules/update-notifier/node_modules/latest-version/node_modules/package-json/node_modules/got/node_modules/create-error-class/node_modules/capture-stack-trace
npm ERR! code ENOENT
npm ERR! errno -2
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename '/tmp/electron-packager/darwin-x64/lina_dicto-darwin-x64/Electron.app/Contents/Resources/app/node_modules/npm/node_modules/update-notifier/node_modules/latest-version/node_modules/package-json/node_modules/got/node_modules/create-error-class/node_modules/capture-stack-trace' -> '/tmp/electron-packager/darwin-x64/lina_dicto-darwin-x64/Electron.app/Contents/Resources/app/node_modules/npm/node_modules/update-notifier/node_modules/latest-version/node_modules/package-json/node_modules/got/node_modules/create-error-class/node_modules/.capture-stack-trace.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/HOME/.npm/_logs/2017-12-21T12_41_05_486Z-debug.log

    at done (/home/HOME/lina_dicto/lina_dicto/build_darwin.js:19:11)
    at Immediate._onImmediate (/home/HOME/lina_dicto/lina_dicto/node_modules/nodeify/index.js:19:9)
    at runCallback (timers.js:789:20)
    at tryOnImmediate (timers.js:751:5)
    at processImmediate [as _immediateCallback] (timers.js:722:5)
error:./installer_darwin.sh(41) "node build_darwin.js" ""

```

最終的に、package設定のファイルを以下のとおりに変更して解決した。
```
 diff --git a/lina_dicto/build_default.js b/lina_dicto/build_default.js
index 86dc120..4a7a678 100644
--- a/lina_dicto/build_default.js
+++ b/lina_dicto/build_default.js
@@ -20,7 +20,7 @@ module.exports =
        ignore: "node_modules/(electron-packager|electron-prebuilt|\\.bin)"
                + "|node_modules/(babel.*|intelli-espower-loader|power-assert.*|mocha)"
                + "|.*\\.txt"
-               + "|work|object|test"
+               + "|work/.*|test/.*"
                + "|data/.*\\.(zip|sh)"
                + "|release\\.js",
        'version-string': {

```

objectを除いておきたかったのだけれど、大きな実害はないのでとりあえずOK。

以上。

Focusrite Scarlett Solo G2 USBオーディオの開封写真、付属物等

Focusrite Scarlett Solo G2 USBオーディオを買ったので写真等。

Focusrite Scarlett Solo G2 開封したところ
シリアルは箱の蓋の裏(保証書で隠した)
思ったより好みな、金属光沢がグレアな赤で嬉しかったです。






付属のUSBケーブルは普通の材質(だけれど赤い)

裏側の足の黒い部分は、ホコリ等付きやすい感じの普通のゴム


なおUbuntu16.04にて、USB接続から正面ヘッドホン出力を確認しました。
(フルスペック出ているのかは私の耳ではわからないですが、問題はありませんでした。)

svgzについて

svgzについての調査メモ。
vecterionで書き出し形式にSVGを使っており、将来的にsvgzを使うこともあるだろうということで調査。

扱う:svgzの作り方、表示のしかた
扱わない:svgzの圧縮率、Windowsでどうするか、Webおよびブラウザでどうするか


svgzの作り方

svgzをInkScapeで作る

Save時に"svgz(通常ファイル)"を選ぶ。
InkScapeのメタ情報が失われるが、シンプルな分、あとで開いた時にxmlテキストが読みやすい。
ラスターイメージ(ex. jpg画像)を持ったsvgzを作ると、svgファイルにbase64で持たせる。

svgzの表示

eog(Eye of Gnome)で見られる。
InkScapeも読み込める。

CSS3プロパティ周り("color=rgba()"指定)は、InkScapeがまだ解釈できない。
eogでは表示に反映される。

svgzの解凍圧縮

解凍

$ gzip -d -S .svgz test02.svgz
test02という名前で、svgのXMLテキストファイルが出力される。
svgz拡張子はgzipコマンドの標準ではないので、オプションで拡張子を指定する必要がある。
入力ファイルは削除されるので、残しておきたければ-kオプションを付ける。


圧縮

$ gzip rl_test.svg
$ mv test.svg.gz test.svgz
gzipコマンドで圧縮をかける。
拡張子は後からsvgzに変更する。(これでeogなどで開けるようになる。)
解凍時とおなじく、入力ファイルは削除されるので、残しておきたければ-kオプションを付ける。

svgzに含まれるラスタイメージについて

ラスターイメージをbase64テキストではなくファイルとして持っているsvgzが欲しかったのだが、そういうものは無さそう。
(圧縮ファイルにアーカイブされている.jpgなどに相対URLでアクセスするような。)
(svgzの用途としてよくある)Web上に置いた際に、Webサイト上での相対パスと衝突すると思われる。
よくよく調べて考えてみれば、圧縮にgzip(アーカイバは含まれていないので別途tarなどが必要)を使うという時点で、svgz内にリンク先ファイルを持つことはできないことがわかる。

SVGに関するリソース

https://triple-underscore.github.io/SVG11/index.html#minitoc
https://developer.mozilla.org/ja/docs/Web/SVG
https://dev.w3.org/SVG/profiles/1.1F2/test/svg/

空気清浄機AC-4234Wを買ったので開封時、フィルタ写真等

TWINBIRD 空気清浄機 ファンディスタイル AC-4234W を買いました。
開封した際の写真と、起動時のウィザードのスクリーンショット等を載せておきます。

開封


電源ケーブル



フィルタウラ面


強弱2モードある。モードが有るとは思っていなかった

モードの説明

Aterm WG2200HPを買ったので写真等

 Aterm WG2200HPを買いました。
開封した際の写真と、起動時のウィザードのスクリーンショット等を載せておきます。



開封すると取説とQRコードのシール


取説の下に本体他

片足。はめる箇所を選べる

足またはカバーの接続箇所






付属のLANケーブル。使いませんでしたが

取扱説明書



スクリーンショット。ウィザードと通常の設定画面は、以前買った、今回よりもひとつ古いと思われる製品とほぼ一緒でした。使いやすくて助かります。
そういえば以前の製品では無かったですが、IPだけでなく固定のDNS名でも管理画面に入れるようになっていました。

 Aterm WG2200HP 管理者パスワードの初期設定


 Aterm WG2200HP Web接続ウィザード
なお、自宅では以前の機器と同様に、WiFi,LAN共に問題なく繋がっています。

====


エスペラント翻訳ブラウザ拡張を公開(WebExtension)


lina_dicto for webextensionは、マウスで したエスペラントの単語を日本語に訳して表示するブラウザ拡張です。Firefoxに対応。Chrome対応を予定。
FireFox版の取得はこちらから
ソースコードをgithubに公開しています。

マウスオーバーによる訳の表示

アドオン設定


lina_dictoはそもそもPC向けのエスペラント辞書アプリケーション(Win/Mac/Linux対応)です。
また、これを移植した Andorodアプリケーション版 も存在します。

技術的な話

lina_dicto for webextensionは、WebExtensionで作りました。
WebExtensionは、JavaScriptとjsonのテンプレートで、FireFox/Chrome等の、マルチブラウザ対応のブラウザ拡張を作ることができる技術です。

# ざっくり

- 名前空間は別なので名前空間トリック的なことはせずにベタ書きでいい。

#content_script.jsとbackground.jsの使い分け

content_script.jsはページに読み込まれるので、ページ毎にインスタンスが生成される。
background.jsはブラウザ上のタブ間で1つを共有する。

# webextensionから動的にアイコンを変更

webextension状態をアイコンに反映するコード。
``` : background.js
function setIcon(is){
    if(is){
        browser.browserAction.setIcon({path: "../icon/icon_48.png"});
    }else{
        browser.browserAction.setIcon({path: "../icon/disable_icon_48.png"});
    }
}
```

# background.jsのデバッグ

console.log()がデバッグコンソールに出ない。 Firefoxではアドオンのデバッグを有効にして、そのアドオンのデバッグリンクを押すと、別Windowでbackground.jsのデバッグコンソールが出る。
chromeもそんな感じ。

# タブ状態変更時のコールバック

新しいタブが作成された場合は `browser.tabs.onActivated.addListener(handleActivated);`
他は素直にonUpdate,onRemoveという名前が付いている。

# アクティブなタブの取得

background.jsはブラウザ上のタブ間で1つを共有する。
タブはtabIdで識別する。tabIdは同期的関数で取得することはできない模様。
`tabs.query()` のコールバックの中で取れる。使い方等は下記URL参照。
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/API/tabs/query
結果がtabsで帰ってくるので複数タブがactiveもありうるのだと思うが、カレントウィンドウのアクティブタブは一つしか無い気もする。今回作った作ったWebExtensionでは、とりあえずfor(tab in tabs)で取れるすべてに同じ処理を適用した。正しいかどうか不明。

# Firefoxでのbackground.persistent

manifest.jsonのbackgroundにpersistentを指定すると、Firefoxにその設定はないため、下記のエラーが出る。害はないので無視する
```
Reading manifest: Error processing background.persistent: Event pages are not currently supported. This will run as a persistent background page.
```

# chrome上でのbrowserオブジェクト

chrome上で`Uncaught ReferenceError: browser is not defined`というエラーが出る。chromeにはbrowserが提供されていないとのこと。
https://github.com/mdn/webextensions-examples/issues/194
を参考に、`var browser = browser || chrome`を追加して回避。
できるはずなのだが、今はまだ上手く行っていない。いずれやる。


```
Error in event handler for tabs.onUpdated: Error: Invocation of form tabs.query(object) doesn't match definition tabs.query(object queryInfo, function callback)
```

以上です。

エスペラント辞書アプリ lina_dicto for androidをリリースしました

lina_dicto for androidをリリースしました。
エスペラントと日本語で、単語を翻訳できるAndroidアプリです。
AndoidのPlayストアからインストールできます。


エスペラント単語の入力補完機能があり、入力中の文字から単語を予測します。
また、スペルミスによるミスヒットに対して、正しい単語の候補を示します。

エスペラント文では、単語検索だけでなく文章検索にも対応しています。
文章を入ると、自動で単語分割して結果表示してくれます。
Web上のエスペラント文を読みたい場合などに役立つ機能です。
 
ソースコードを公開しています。githubはこちら

技術的な話は少し下の日記に書きました。
https://srad.jp/~m_nukazawa/journal/616311/

lina_dictoはそもそもPC向けのエスペラント辞書アプリケーション(Win/Mac/Linux対応)です。これの裏側がelectronだったため、そのままWebViewを使ってAndroidアプリケーションにできるなと思って作りました。


KWIN-4K32B 4Kディスプレイ フォトレビュー等


いいかげん4Kディスプレイを導入しようということで、KWIN-4K32B を買いました。 
これまで27インチのディスプレイを使っていて、32インチははじめてです。
開封の様子と付属物、セットアップ等について、写真を中心にざっくり残しておきます。

 
フルHDと4Kディスプレイを繋いだUbuntuデスクトップのスクリーンショット。

開封前の箱

付属品等。リモコンと電池は別になっている。電源はACだった。
付属物の説明には1.5mのHDMI2.0ケーブルと書いてあるが、測ってみたら1.4mしかなかった(そういうものなのかもしれない)。いちおう、ケーブル長がぎりぎりの方は注意。

ディスプレイを支える下面の台座。最初は何かと思った。穴は単なる穴で、バリが残っていたりした。

取扱説明書に台座の取付方法が書いてある。

ディスプレイ下部。最初、回転するのを忘れていてずれているのかと思った。



写真の一番上が電源ポート。

HDMIが3つある。
取扱説明書に明記もないし、名前的にどれが4k対応60hz(HDMI2.0)なのかちょっと自信が持てない。

モニタアームを付ける場合に脚を外すことはできそう。

台座取り付けの様子。付属のネジを回しこむだけ。簡単。
ネジをさすときにほり込む仕組みでネジ溝掘ってないのではないかと思われる。

32インチディスプレイをA4ノートと比べた様子

設定パネル


リモコン。操作性について他の方がいろいろレビューしている。
私の場合、そもそも電池の入れ方がわからなかったので、試せていない。


垂直角度を設定するチルト機能が無いので、台座の下に挟んで調整した。
とりあえず石粉粘土入れたのだけれど、これからどうしよう。



ディスプレイ付属のHDMI2.0ケーブルで接続されているはずなのに、4Kで30Hzしか出ていない様子。
なぜ60Hz出ていないのか不明。ケーブル・ポート・ドライバか、あるいは何かの設定か。
 とりあえずDP 1.2にしておけば安心だろうということでケーブルを買いました。

==


FireFox(1.8倍設定)でWebを見たところ。
4K化で、ソース画像の小さいものは粗さが見えるようになったが、文字が綺麗になった。
奥の27インチディスプレイと並べて設置したところ

以上です。

[クロス本草稿]未調査の項目

# 未調査の項目 本章は、クロスプラットホーム・デスクトップアプリケーションについて、わたしが使ったことのないテクノロジーについて書いている。 なので、他の章よりさらに現実乖離度が高いと思われる。 個人的な印象であることに留意しつつ、短く留めるよう努力する。 ##...