エスペラント翻訳ブラウザ拡張を公開(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インチディスプレイと並べて設置したところ

以上です。

技術書典5「クロス本」売り上げ報告ほか

この記事は 技術同人誌 その2 Advent Calendar 2018 Advent Calendar 2018 の17日の記事です。 #技術書典 daisy bell #技術書典5 | 一般 当落状況:当選(き08) 16:00 時点で、事実上の完売というこ...