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でnpm installしたsvg.jsを使用する

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