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インチディスプレイと並べて設置したところ

以上です。

エスペラント辞書アプリをElectronで作って公開しました

エスペラント辞書アプリをElectronで作成し、リリースしました。
エスペラントto日本語の単語変換をします。とりあえずエスペラントの単語を引くことができます。
名前はlina_dictoです。
https://github.com/MichinariNukazawa/lina_dicto

なおエスペラント辞書データですが、すばらしい辞書データ が公開されており、これを使っています。
感謝。


ダウンロードはこちら。
https://github.com/MichinariNukazawa/lina_dicto/releases


本記事では辞書アプリ固有の話はしません。なぜなら今は2017年であり、辞書データをすべてメモリに置き、かつ動的言語を使って辞書データを頭から尻尾まで舐めるという超富豪コーディングをしても、ユーザ体験をまったく損ねず遅延もまったく体感しない辞書アプリケーションが作れるからです。IntelとJavaScriptエンジンのエンジニアには足を向けて寝られません。データサイズが小さかったのもあるかな。

事前に検索インデクスくらいは作る必要があるだろうと想像していたので、正直、拍子抜けの気持ちが無いといえば嘘になります。

# エスペラント固有の話

先にエスペラント固有の話をします。固有の話は2つあります。

## 語根分かち書き

語根とは、語尾の変化による現在形への変換などをされる前の単語です。詳しくはWikipedia。
特にエスペラントは、語根を組み合わせて単語を作ることで、話者の記憶リソースへの負担を軽減する設計になっています。エスペラントは語根がはっきり定義されており、なぜなら人工言語であり、そういう設計だからなのですが、単語が複数の語根から成る場合がかなりあります。詳しくはWikって略すな。
今回使用した辞書データには、単語が語根分かち書き形式で収録されています。この分割部データもいずれは有効に使いたい所存ですが、検索時は、普通のユーザがタイプするであろう分かち書きされていない単語文字列と、分かち書き済み単語データをマッチングしなければなりません。
なので、分かち書きは単純に取り除きます。
上で、動的言語で文字列のマッチング・ループなんて...って書いてありますが、実際にはもっとひどいことをしています。具体的には、分かち書き状態の単語文字列を、正規表現置換によって分かち書き除去を行っています。
(さらに踏み込むなら、大文字/小文字マッチのためのlowarCase()等、CPUリソースを暴虐無人に使っています。)
せめて起動時の、辞書データファイル読み込み・オンメモリ辞書データ生成の際にキャッシュを作っておけよという感じですが、キャッシュ管理はコードが複雑化するので避けたいというプログラマの怠惰な方針を今のところ支持しています。だって実際に問題ない速度が出てしまっていますし...。

## 代用表記

エスペラントが使用する文字には、ASCIIアルファベット以外の文字が含まれています。
具体的には下記のやつです。
``` Ĉ ĉ Ĝ ĝ Ĥ ĥ Ĵ ĵ Ŝ ŝ Ŭ ŭ Ŭ ŭ ```
現代的ブラウザなら、UTF-8かつ対応フォントで上記文字列が問題なく表示されます。

代用表記には4種類くらいあり、ぶっちゃけ初学者には"^-sistemo"(typoではない)以外はピンと来ません。ついでに言うと、他の代用表記は実装が難しいのでやりたくありません。
特に元祖本家のH-sistemoの変換ルールが最悪です。これってつまり代用表記か否かの判定に辞書が必要じゃねえかと。エスペラントはunicodeどころかコンピュータが影もカタチも存在しない時代の設計だから仕方がないねというところです。

 で、^-sistemoの実装ですが、 下記のコード。
```
str = str.replace(/C\^/g,"\u0108");
```
こういうのが12個くらい、ハードコートされて並んでいます。組み込みエンジニアは卒倒して良いと思う。
もし複数のsistemoj(?)に対応することになったら、その時ついでに書き直します。

# electronアプリの話

エスペラントに興味があって読んでくださった方は、ここから先はelectronという退屈な実装技術の話しかしないのでこの下は読まなくてよいです。実装技術に対する初心者の泥臭いトライアンドエラーで脳内物質が出てくる系の方はこんにちわ。エスペラント富豪コーディングの話は楽しんでくれましたか。

なおインストールからサンプルアプリ動作までの前半戦はこちら。
https://srad.jp/~m_nukazawa/journal/614745/

## リリースパッケージディレクトリの展開先について

リリースに使っている設定JSONファイルに書いた書き出し先パスがひとつ上になっているだけでした。そして、実はもっと深刻な問題を持っています。
設定しないと、electron-releasesはリリースディレクトリを、プロジェクトのroot的なソースパスに展開します。
そして、このディレクトリに置かれたファイルは、基本的にすべてがリリースに含まれます。
なので何も考えずに
```
node_modules/.bin/electron-packager . lina_dicto --platform=all --arch=x64
```
とかやると、初回はともかく、2回目以降はすべてのプラットフォームのリリースディレクトリ(バイナリとelectron付属物)がすべてのプラットフォームのリリースに含まれるというマトリョーシカを作ってしまいます。(私は途中で圧縮が長すぎるのに気づいてkillした)


ここらへん、本当はjavascriptのトランスパイラとかMakefileオルタネイティヴスが呼び出して使う想定で単純な作りになっていて、直接使うことはあまり考えてないとかじゃないかなぁと妄想をたくましくする次第ですが、ともかくelectron初心者なので複雑なことはしたくない一心、jQueryすら使っていないこの単純プロジェクトにそんなものを入れたくはないので、成果物はとりあえずwin版だけzipできればいいやの精神で、vecterion_vgeの成果を転用したbashスクリプトをビルド&パッケージングスクリプトとして採用した次第です。

## MacOSXビルドについて

electronのバイナリ配布物、ようは『electron共通ブラウザコア(プラットフォーム固有) + Webページ的なもの(プラットフォーム非依存)』のセットでしかないので、インターネットから降ってきたプリコンパイル済みコアさえあればxcodeが無くともLinuxであってもOSXのバイナリ配布物が用意できるという理屈は納得できるのですが、それはそれとして起動するかどうかくらいは確認しないとリリースはしたくないので、動作検証してくださる方を募集しております。

## (ブラウザの)開発者モードON/OFFについて

一応、開発者モードをユーザがONにできてしまうことについては悩んではいます。 ユーザはOFFにできないからアプリを落としてもらうしか無いなー、という程度ですが。
オープンソースだから中身を見られてもOKということで、私はデバッグモードが開ける状態でリリースしています。リリース候補のデバッグも楽です。問題無ければデバッグモードを殺す手間無しに、そのままリリースできるからです。
デバッグビルド/リリースビルドで開発者モード有効フラグを切り替えると上記の手間が発生してしまいます。
隠れショートカットで開発者モードを出せる、という方法は、万が一にユーザが隠しショーカットを押してしまったらシッチャカメッチャカになるのが目に見えています。

## Windows版インストーラについて

本当はLinux上でWindows版インストーラが作りたいのですが、必須機能ではありませんし、できるかどうか調べることもせず、vecterionで使っているスクリプトを改造して配布用zipを作りました。

# まとめ

エスペラントについて。
すばらしい辞書データ を公開してくださっていることに感謝。

Electronについて。
Webで何かやったことのある人がPCアプリケーションを作る羽目に陥ったなら、electronは良いと思います。なにしろWebKitブラウザなので、ハマった時にWeb上にQAや対処法がたくさんあります。
少なくとも私は3日程度でクロスプラットフォームPC辞書アプリが構築できたので、electronすごく良かったです。


以上です。

ComfyUIでXYZ-PlotするワークフローのサンプルとTips(ComfyUI-XYZ-Stitch)

 ComfyUIでAutomatic1111的なXY-Plotをしたいのだが、ComfyUIデフォルト機能には用意されていない。     カスタムノードが必要となるのだが、Webには古いとか何故か動かないとかなXY-Plotパッケージの使ってみた系記事か、githubに上げられた...