electronでnpm installしたsvg.jsを使用する

 electronでsvg.jsを使用する場合、公式サイトからsvg.jsファイルを直接落としてきてもよいのですが、バージョンを管理したい都合もあり、幸いにもnpmで提供されているので、npmから導入して使用することにします。



electronとsvg.jsをインストールします。
`npm install electron`
`npm install svg.js`

起動する状態のelectronアプリケーションを作ってから、下記のような内容を追記します。

``` : ./js/index.js
'use strict';

var SVG = require('svg.js');

window.onload = function(e){
    var draw = SVG('drawing').size(300, 300)
    var rect = draw.rect(100, 100).attr({ fill: '#f06' })
}

```

``` : index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>daisy sequence - UML sequence diagram editor -</title>

        <script type="text/javascript" src="./js/index.js"></script>
    </head>
    <body>
        hello!
        <div id="drawing"></div>
    </body>
</html>

```

svg.jsは、`var SVG = require('svg.js');`でロードできます。
注意する点として、onloadの前にsvg.js機能を呼びだそうとすると、
`Uncaught TypeError: Cannot read property 'nodeName' of null`
というエラーに見舞われます。

OD4K-32B1 4Kディスプレイを購入

 というわけでNTT-Xで4Kディスプレイを購入したので開封写真等。

縦に引っ張るのは難しかったので、横に倒して取り出した。



脚をとめるためのネジと簡易なドライバがついてきている

NTT-Xサイトの商品画像の通り、脚が細い

裏側の操作ボタン。ゲーム用のスティックのように操作する

ACアダプタとHDHIケーブル
ちなみに付属のHDMIケーブルは使わずに、以前購入した
DisplayPort2.0で繋いだけれど、付属のHDMIケーブルは表記を信じるならHDMI1.3or1.4なので、多分4K60Hz出るのだと思う。


ところでディスプレイの設定機能がKEIANの4Kディスプレイと同じに見えるのだけれど、単に同じファームなのか、あるいはKEIANのOEMか何かなのだろうか。

スピーカーはおまけ程度とレビューされていましたが、実際に昔のラジオ演出みたいに聞こえるので、三菱ディスプレイと比べると明らかに違いました。


英単語訳ブラウザ拡張を公開(WebExtension)

ブラウザ上で英語の単語の上にマウスオーバーすると、日本語翻訳をホバー表示(ツールチップ表示)するブラウザ拡張、lina_dicto_english for webextensionを公開しました。

 


以前から公開している、エスペラント語翻訳のブラウザ拡張lina_dicto for webextensionの辞書を置き換えて作成しました。ブログ記事も書いてあります。「エスペラント翻訳ブラウザ拡張を公開(WebExtension)

ソースコードはGitHubにてBSD Clause-2にて公開しています。 
今の所FireFox対応Chromium(Chrome)仮対応で、Chromiumは正式対応予定です。

以下、作成の際のちょっとした知見など。

## データサイズ制限

辞書データをJSONで持っているのですが、辞書サイズがエスペラント語辞書データ(3MB)に比べて英語辞書データ(9MB)が3倍程度大きいため、アドオン配布システムのaddons.mozilla.org(以下AMO)から公開するWebExtensionの、4MB制限にひっかかってしまいました。
(エラーメッセージによると、4MB以上のJSONをファイルをパースしていると引っかかる模様。AMOのWebExtensionはモバイルブラウザ対応もありますし、この制約があるのは妥当だと思います。)
 今回は、extensionが今のところ1ワードの単語しか検索しないため、2ワード以上の熟語等を辞書データから取り除くことで軽量化を行いました。今後2ワード対応するつもりですが、それでも辞書は4MBを超えないと思うので、とりあえずはこれでOKとしました。

## 名称によるURL長制限

AMOでextension個別ページに付けられるURLには最大長があるようです。
lina_dicto_english for webextensionでは、
https://addons.mozilla.org/ja/firefox/addon/lina_dicto_english_for_webexte/ 
と途中で切れる結果になってしまいました。 
また、デフォルトではextension名の空白は"-"に置き換えられます。
こんなに長く、アンダーバー等を用いた名前を付けることはあまりないと思いますが、一応、名前付けの際の参考に。

以上です。

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モードある。モードが有るとは思っていなかった

モードの説明

electronでnpm installしたsvg.jsを使用する

 electronで svg.js を使用する場合、公式サイトからsvg.jsファイルを直接落としてきてもよいのですが、バージョンを管理したい都合もあり、幸いにもnpmで提供されているので、npmから導入して使用することにします。 electronとsvg.jsをイン...