daisy_sequenceについて 動機・リリースまで・今後

daisy_sequenceについて、まずは動機・リリース前後の振り返り・今後について、ポエムと時系列を書いておきます。
ドキュメント作成の前準備として、また忘れないうちに備忘録として。

daisy_sequenceについて

 daisy_sequenceはマルチプラットフォームなGUIシーケンス図エディタです。フリーソフト。オープンソースにはしていませんがソースコードは読んだりコントリビュートすることができます。

本記事を書いた時点で、以下の特長を持っています。

• マルチプラットフォーム(Windows/Mac/Linux)
• 印刷/HiDPIにも使えるSVG/PNG書き出し
• CLIからの書き出し処理によるCI連携が可能
• PlantUML書き出し
• バージョン管理しやすいJSONテキストベースのネイティブファイルフォーマット

# 開発の動機

最終的にはLinuxでの使用を含め、自分で自由に改変できる気楽なシーケンス図エディタが欲しかったので書きました。

実際に作り始めるまでにはもうちょっと長いストーリーがあり、動機は複合的です。
- Aster* Community(以下Aster)がversion7から有償版に移行した。
- 複数Elementのrotateを気合で実装してしまったために、vecterion_vgeプロジェクト(以下vecterion)が行き詰まってしまった。
- lina_dictoプロジェクトが一段落して、electron(node.js)は速度が出ることがわかった。もう少し高度なGUIアプリケーションを試したくなった。

AsterはGUIによる高度なUMLエディタです。クラス図とかも描ける。
vecterionでもわざわざWindows環境を用意して使った(vecterionはUbuntuで開発している)くらいなのですが、無償利用できるのはversion6.9が最後となりました。これはそれなりに昔の話で、当時は自分のところでは6.9を引き続き使わせてもらおうということで決着していました。
vecterionは自作のベクタグラフィクスエディタです。マルチプラットフォームで、C/Gtk3で開発しています。
ベクタグラフィクスエディタを開発するにあたって、最大の問題は高速なラスタライザの実装なのですが、Gtk3がバックエンドでも使っているCairoライブラリが実用的に高速なラスタライザで、今のところ高速化を意識しない設計で書けています。

vecterionベクタグラフィクスエディタ

とはいえ、Cairoはあくまでラスタライザなので、ドキュメントの管理とレンダリングの指示はvecterion側でするわけで、そこが複雑化してしまいました。良くなかったのは「複数Elementのrotateを気合で実装してしまった」ことで、ここでいう気合とは、ドキュメントも設計もなくとりあえず動くまで実装をトライアンドエラーしてしまった、という意味です。これはわりと真剣に反省してます。
で、vecterionが行き詰まる前後に、lina_dictoシリーズが始まりました。これはElectron製の日本語とエスペラント語の辞書アプリケーションで、後に英語版を作りました。Javascriptエンジンで辞書データを回すことが最大の懸念でしたが、実用的な速度が出て、以前はこてんぱんに言われていたJavascriptを見直しました。
lina_dictoは当初の目的を叶えるすばらしい辞書アプリケーションとなり、開発は一段落しました。

lina_dicto辞書

次に何をしようかなと考えたとき、まだvecterion_vgeのエンジン改修は荷が重いだろうから、もう少し規模の小さいものをやって慣れよう、ということにしました。
というわけで、vecterionの知見を活かしつつ整理でき、lina_dictoよりElectron利用として発展的な課題になる、規模が小さいGUIエディタアプリケーションとして、シーケンス図エディタdaisy_sequenceを始めました。

# リリース前後
土日で実証モデルを構築しました。具体的には、JSONオブジェクトによるシーケンス図データ構造と、それを元にしたSVGエンジンによるシーケンス図描画、描画速度がユーザの編集操作に耐えることを、モックで確認しました。
02/03にgitリポジトリに最初のコミットをしています。開発開始はこの日のはずです。
03/01に最初のリリース。最低限の実用化に一ヶ月ということになります。
04/07頃に(当初の予定になかった)PlantUMLのエクスポートを追加しました。

本アプリケーションは実証モデルの頃から、必要十分なフォーマットのSVG、有用なラスタライザ・ライブラリのSVG.js、そしてChromeの高速なSVGレンダラ実装に支えられています。
Cairoも良かったのですが、Javascript動的変数とSVGの組み合わせは、GUIエディタのモックを作るにあたって強力です。

daisy_sequence実証モデル

daisy_sequence実証モデル

最初のリリースにおいて最大の問題はアプリケーション・アイコンでした。アイデアが早く思いついていれば、リリースは5日くらい早かったと思います。もちろんその間もコードを書いていたので機能的にはアップしていますが。
以前から、自作アプリケーションのアイコンは自分でデザインしています。得意というほどではないですが、フォントとか作っていたこともあるので。現在のアイコンはわりと気に入っています。

最初のリリース後、スラドの日記に書いたり周囲に見せたりして、いろいろ反応をいただきました。
その中で多かったのはPlantUML対応でした。
(Asterのネイティブフォーマットが読み書きしたいと言われたらどうしようと思っていたのですが、それは今の所まったく要望が無いです。)
また、自分しか要望していないですが、CI/Makefile連携のためにコマンドラインからのエクスポート機能を付けました。内部的にはテストにも使っています。

# 反省点
PlantUMLについて、事前にもっと調べておけばよかった。

# 今後について
- 本アプリケーションで描いたシーケンス図の見た目が、必要十分ではありますが、良いとは言えないので良くしたい。個人的に一番の問題。残念ながら自分では良いデザインを思いつかなかったので、できればどこか自分以外の外部にデザインを依頼したいのですが、その費用が捻出できるかどうかはちょっとわかりません。
- PlantUMLへの対応強化はちょっと考え中。インポートはPlantUMLの記法をフルサポートするのが厳しそうなので、ちょっとズルいショートカットで対処できないかなと、これは妄想段階ですが考えています。
- UML図フルサポートは大変なのでやらないつもりですが、最低限クラス図との連携はあると良いというアドバイスを頂いたので、これはいずれやれるといいなと思っています。
- 取扱説明書を書く。

開発自体はシーケンス図エディタが書けて、一段落したつもりです。今後については、何か新しいアイデアを思いつくかどうか、ユーザがどれくらい増えるかどうか次第ということにしています。
いろいろ手を入れたい気持ちはあるのですが、他にも書きたいものや作りたいものがあるので。

# おわりに
というわけで、自作シーケンス図エディタでした。今回のように一ヶ月くらいで作れてしまうものもあるので、みなさんもっと軽率にGUIな開発支援系エディタとか書くと良いと思います。

次はdaisy_sequenceの設計的なこと、技術的なことなどについて書きます。

@t-com光 Atermルータ インターネット接続の設定

自分用メモ。

接続設定

接続成功

以上。

マクロ設定可能な Qtop ゲーミングマウスでCtrl+z

安価にマクロボタンのある左手デバイスを手に入れたかったので。
できれば設定後にLinuxとかMacとかでも使えるものということで、ハードウェアだけでマクロが記録できるものを。

このマウスについては、ドライバやソフトなしでマクロが動作するのか、そういった情報がなく、安かったので試しに購入。
結果、マウス設定を保存して他のPCで使えるタイプでした。
Windowsで設定して、Linuxで動作確認しました。

# ソフトウェア
CDに入っているそうなのですが、ドライブを持ってくるのが面倒だったのでダウンロード。
http://www.etpc.cn/server.aspx?code=0301
からT7を選んでダウンロードできます。
rarだったので7zportableで解凍してインストール。

# 取扱説明書

# 付属CD

# 写真

背面に切り替えボタン。

USB端子部がけっこう長い。

ボタンに単なるCtrlを割り当てて、押しながら中ボタンのロールで拡大縮小しようかと思ったのですが、それはできませんでした。ロールの上下操作もマクロ指定できません。

左横のマクロキーは左手からだとアクセスが難しいようなのでまだ使っていません。
目的は安価にマクロボタンのある左手デバイスを手に入れることだったので、左手デバイスとして右クリックボタンにマクロでCtrl+Zを割り当てて、イラストのペン入れ練習に使い始めました。Undoしやすくて便利。

ロボット掃除機ILIFE V3s Pro買って2ヶ月目のレビュー(途中、故障交換あり)

プログラマならば家の掃除は自動化せよという風潮に習い、遅ればせながらロボット掃除機ILIFE V3s Proを導入しました。
その2ヶ月使用のレビューです。

主な使用環境

- 一人部屋
- 掃除するのは玄関・廊下・キッチン・部屋
- 風呂場・トイレは掃除させない
- 床は木のフローリング、階段・段差・高低差・しきい等なし
- 部屋には安カーペット、キッチンにはキッチンマット、玄関には玄関マット

# ロボット掃除機使用の流れ

初期設定作業は、
- 購入して封を開け、ゴミ入れをセット
- 充電器にセットし電源をONにしてタイマーを設定
です。

リモコン。液晶は現在時刻とタイマー時刻の表示のみ

出社後、11時くらいにセットしてあるタイマーで掃除を始め、自動の掃除を毎日繰り返しています。
これで、外出の間に、ロボット掃除機が掃除を済ませてくれるようになります。
ロボット掃除機はさすがに静かではないので、最初に在宅でロボット掃除機が問題なく掃除を済ませるところまで確認してからは、いつも家に居ない時に掃除をさせています。
(修理から帰ってきてからしばらく、タイマーのセットを忘れて、外出前にリモコンでスタートさせていました。)
 あとは、 人間がやっていることは、
- 毎日、掃除が終わって充電器に帰りつけなかったロボット掃除機を充電器にセット
- その他ロボット掃除機のペケがあれば適宜フォロー
- 水曜日と週末あたりに、ロボット掃除機に溜まったゴミを捨てる。- 2~3週に一度、なんとなく掃除機でカーペット等を掃除
となっています。

家に帰ってくると、 ロボット掃除機が廊下のどこかで止まっています。これはほぼ毎日。設置条件が取説通りでないためもあってか、戻っていたことは一度しかありません。(これについてはそもそも期待していなかったので、設置位置も戻るには悪い所に置いてあり、私は別に良いのですが)

取扱説明書。充電器の設置場所は前方180度に1mの間隔を開けよ、と書いてある

が、我が家では置き場の都合で物陰に設置している

あとは、玄関から落ちていたら拭いてやる等、必要に応じてフォローします。

ゴミ収容部は、我が家では一週間で一杯になりそうなサイズ感なので、週に二回、ゴミ捨てを行っています。

# 導入の効果

家でホコリを見かけることが、ほぼなくなりました。
掃除機のかけ忘れや、毎日の生活により、また、いつも掃除機をかける前日あたりは、小さなホコリが落ちている、というのを避けられません。ロボット掃除機を導入してからは、それらを見かけることがほぼなくなりました。
毎日家の廊下がそこそこ綺麗というのは、思いがけず良いものです。 買ってよかった。

# ハプニング集

いまのところ、幸い、ゴミ箱をひっくり返したことはありません。
掃除の後にゴミ箱の位置が移動してはいますが。
ゴミ箱以外にも、軽くて固定していないものはたいてい移動しています。
(この軽いものにはロボット掃除機の充電器を含む。)

出発時は大丈夫だが、その後に検知等せず蹴っ飛ばす。
充電ステーションに自動で戻ることを期待するなら、これもテープ留め等する必要があると思われる。

## 椅子にひっかかって止まった

椅子(アーロンチェア)に引っかかります。 ちょうど衝突検出しない&ロボット掃除機本体が嵌り込むサイズの意図しない罠になっている模様。


対処として、椅子の下に余っていたクッションを置きました。これでロボット掃除機が椅子の下に入り込まなくなります。

## コードに引っかかって止まった

巻き込んでしまうからコードを床に這わせないでくれ、と取説にも書いてあるので、気をつけるものの、ついうっかりということがあり、そういう時はコード等の紐に引っ掛かってしまいます。

## 玄関から落ちた

後述の故障が起こるまで玄関から落ちたことはなかったのですが、交換品になってから、玄関から2度も落ち、確率のいたずらか、まさか個体差があるのかと思ったりもしたのですが、もしやと思って玄関に立てかけて留具でとめずに立てかけてあった傘を(使ってから既に乾燥していたので)留具でまとめて置き直したところ、落ちなくなりました。
ロボット掃除機が動いている時、玄関は暗いのもあり、傘の落とす影が原因で段差を認識できなかったのではないかと考えています。

## キッチンマットをひっくり返して止まった

カーペットは(全体が大きいためか)引っかかって止まったりしないのですが、 キッチンマットは何度か端をひっくり返しながら巻き込み、止まってしまいました。
この時、キッチンマットもかなりほつれてしまったりで、安物だからまあ良いのですが、止まるのは困ります。

何度もロボット掃除機が引っかかったので一部が歪んだキッチンマット

テープで固定

対策として、キッチンマットと玄関マットはそれ用のシールで固定しました。

## ティッシュを飲み込んだ

丸めたティッシュくらいは飲み込みます。 必ずしも止まりはしないです。ゴミ収容部分は丸めたティッシュ２つ分くらいしか容量がないので、いかにも吸引力が落ちそうですが。
ただ、一度、飲み込んだティッシュの一部をバラバラにしながらキッチンマットに散らして止まっていたことがありました。

# 故障交換

使って2週間目にサイドブラシが回転しなくなる故障が起こり、サポートにメール(日本語)して、修理に出しました。
最初のメール返信で、故障品を倉庫に送れば届き次第交換品を発送するとの返答をもらい、『故障問題を紙で書いて、そして箱に入れてください』 『お客様が不良品を配送したら、こちらのページにて追跡番号を教えてください。』という指示と他に、送付先住所、『担当者』という番号をもらいました。
それらを書いて封入し、来た時の箱に入れて送り、追跡番号を応答すると、追跡番号を受け取った旨の連絡のあと、何の連絡もなしに、突然Amazonから交換品が届きました。
最初に剥がした保護シールや指示シールが貼られていたところを見ると、新品を送り直したもののようです。

というわけで、特に大きな問題もなく、交換はスムーズに終わりました。

# ゴミ収容部の写真

使ってからのゴミ収容部の写真は、まあ綺麗ではないのもあり、あまりなさそうだなと思ったので、何枚か置いておきます。

吸入口。見えているのは多分ブラシの端。

細かなホコリで汚れているものの、後段のフィルタは前段のフィルタによるのか、あまり詰まっている様子はない。

ゴミがフィルタに溜まっている様子

吸入口の返し

吸入口の返し。特にバネなどは入っていない。これで必要十分ということか

以上です。

ubuntu18.04 alphaで日本語入力(ibus-mozc 英字配列キーボード)

ubunu18.04 alphaの試用を始めました。
新しいUbuntu、特にリリース前の試用版を使おうとすると、まず問題になるのは日本語入力です。
LTSリリースでさえ、リリース日の前後に有志の方々(足を向けて寝られない)の力でやっと日本語入力できるようになった、という場合がけっこうあって、ubuntuの日本語入力機能のリリーススケジュールは体感ではリリース日後になる場合もある、という感じです。

それで、今回のubunu18.04 alphaですが、ちょっと驚いたのですが、最初から(設定すれば?)日本語入力できる状態になっています。ちょっと問題はありますが。

結果的に、これまでの経験(?)からfcitx-mozcを使おうとしたせいで、自分から問題に迷い込んでしまった格好です。

なお、あくまでalpha版なので、明日にも状況が変わるかもしれません。参考程度に。

TL;DR

ibus(ibus-mozc)使う。fcitx使わない。 im-configをdefaultのまま変えない。
(いちど変え直して再起動するといいとかの罠は無いと思う。多分。)

# fcitxを使おうとした(失敗)

http://www2.it-ishin.com/archives/2018/02/01/1506.html
では、fcitx-mozcを使ってim-configする方法を紹介している。
これは私の環境とバージョンでは失敗した。

im-configの勧めにしたがって一度はibusをアンインストールしたが、後にインストールしなおして、念の為fcitxの方をアンインストールした。

デフォルトがibusだったので、fcitxを使う場合は、 im-configをいじる必要があった。
自分はim-config、sudoありなしで両方とも設定してしまったが、両方とも戻した。

fcitx-mozcは、日本語入力はできるが、IME切り替えをしても変換処理が止まらず、英字を直接入力することができない。

IMEアイコンが２つ表示されている。IME切り替えキー操作をしてもfcitx-mozcが止まらない問題らしい。

また、fcitx？のアイコンから出てくるメニューは、各項目の内容が、一瞬だけ表示されてすぐ消えてしまうため、まったく設定が操作できなかった。

# 英字キーボード固有の話

 入力切替のショートカットキーの設定は、右上のIMEアイコンからではなく、Gnomeの設定アプリ(Ubuntuの設定)から行う。
場所は「デバイス>キーボード 」。

入力切替ショートカットキー設定

入力切替のショートカットキーがデフォルトでsuper+spaceになっている。
(日本語入力できていないうちに設定を変えてしまったので、動作を確認していない。)
この設定をCtrl+spaceにすると、上の設定も自動で書き換わる。特に悪さはしない模様。

# TIPS

IME設定を変えたら、Ubuntuを再起動する。ログオフではIME設定変更がうまく反映されない模様？

IME切り替えUIの表示が一瞬遅い&切り替えキーを離すと即消えるので、一瞬でやると切り替えUIが表示されない。最初は、『切り替えUIが出たり出なかったりする』ようにしか見えないので、特に日本語入力がうまく行っていないとき、IME切り替えができていないのではと思って、戸惑う。
UI自体はWindows10で感心したやつに近い仕組みで良いと思う。

日本語入力するために、毎回、mozcの入力モードを「ひらがな」にする必要あり。ibus-mozcの入力モードは、再起動すると「直接入力」(英字入力)に戻ってしまう。このこと以外は概ねうまく行っている。

ibus-mozcの入力モード設定

以上です。

ubuntu18.04 alphaにcudaをinstallする

 ubuntu18.04 alphaにcudaをインストールする手順です。

 
16.04でもnvidia公式リポジトリのおかげでかなり楽になっていましたが、18.04ではcuda9.0がubuntuリポジトリに上がっており、ドライバごとaptから導入できます。
最新版 は9.1が出ているっぽいですが。
(というかUbuntu16.04でcudaインストールが大変だった問題の、諸悪の根源はバラバラな方法が検索上位にいくつも上がってくるqiitaのような。昔のように最初から公式ドキュメントを読めばよかった。とはいえ本記事もalphaのこの時点ではうまく行ったという話なので信憑性は似たりよったり...閑話休題。)

# インストール

リポジトリ追加すら必要ありませんでした。
ドライババージョン等は、まだalphaなので、最新版が登場したり取り下げられたりするかもしれませんが。

```
sudo apt install nvidia-driver-390 libcuda1-384 libcufft9.0 nvidia-cuda-toolkit
```

(※02/28時点のalphaで下記cuda導入コマンド実行後に後からnvidiaドライバを導入しようとしたらUbuntuが壊れました。report中。)
```
sudo apt install libcuda1-384 libcufft9.0 nvidia-cuda-toolkit
```

libcufft9.0はなんとなく入れただけです。今回は動作確認していません。
nvidia-cuda-toolkitはnvccが入っています。ビルドに必要です。
この時点で、libcufft9.0のバージョンを信じるならば9.0？ って感じでした。

とりあえず単純なソースをビルドして実行するだけならば、ドライバライブラリへシンボリックリンクを手作業で貼り直したり、.bashrcにパスを設定したりする必要はありません。ubuntu16.04の頃を思うと、感動的に楽です。

# 確認

まずはコマンドで、次にビルドおよびバイナリの動作によりcuda環境の動作を確認。

## コマンド

```
$ nvidia-smi
Mon Feb 26 00:32:06 2018      
+-----------------------------------------------------------------------------+
| NVIDIA-SMI 384.111                Driver Version: 384.111                   |
|-------------------------------+----------------------+----------------------+
| GPU  Name        Persistence-M| Bus-Id        Disp.A | Volatile Uncorr. ECC |
| Fan  Temp  Perf  Pwr:Usage/Cap|         Memory-Usage | GPU-Util  Compute M. |
|===============================+======================+======================|
|   0  GeForce GTX 105...  Off  | 00000000:27:00.0  On |                  N/A |
| 45%   33C    P5   ERR! /  75W |    964MiB /  4035MiB |      2%      Default |
+-------------------------------+----------------------+----------------------+
                                                                              
+-----------------------------------------------------------------------------+
| Processes:                                                       GPU Memory |
|  GPU       PID   Type   Process name                             Usage      |
|=============================================================================|
|    0      1522      G   /usr/lib/xorg/Xorg                            57MiB |
|    0      1569      G   /usr/bin/gnome-shell                          47MiB |
|    0      1938      G   /usr/lib/xorg/Xorg                           534MiB |
|    0      2086      G   /usr/bin/gnome-shell                         321MiB |
+-----------------------------------------------------------------------------+

$nvcc --version
nvcc: NVIDIA (R) Cuda compiler driver
Copyright (c) 2005-2017 NVIDIA Corporation
Built on Fri_Sep__1_21:08:03_CDT_2017
Cuda compilation tools, release 9.0, V9.0.176

$ which nvcc
/usr/bin/nvcc

$ ldconfig -p | grep cuda
    libicudata.so.60 (libc6,x86-64) => /usr/lib/x86_64-linux-gnu/libicudata.so.60
    libcudart.so.9.0 (libc6,x86-64) => /usr/lib/x86_64-linux-gnu/libcudart.so.9.0
    libcudart.so (libc6,x86-64) => /usr/lib/x86_64-linux-gnu/libcudart.so
    libcuda.so.1 (libc6,x86-64) => /usr/lib/x86_64-linux-gnu/libcuda.so.1
    libcuda.so (libc6,x86-64) => /usr/lib/x86_64-linux-gnu/libcuda.so
```

## サンプルソース・アプリ動作

https://gist.github.com/dpiponi/1502434
で確認しました。ダウンロードしてビルドして実行したところ、動いているようです。
```
$ nvcc example.cu && ./a.out
```
以上です。

checkboxがdisableのときcssでlabelテキストの色を変更する

cssでcheckboxがdisableのときlabelテキストの色を変更したかったのですが、日本語で一発これという設定がなかったので探してみました。
checkboxが無効であるときは、ラベル文字列を含めて、チェックボックス全体が無効を示す色になっていたほうが、ユーザにとってわかりやすく使いやすいと思います。
他にCSSで装飾するかどうかは、その後でいいかと。

いまelectronで書いている、UML sequence diagramエディタで使っています。

html checkbox 赤がDisable 青がEnable

まずHTML側で、対応するcheckboxの書き方をする必要があります。
===
                    <label for='editor__message-spec'>
                        <input id='editor__message-spec' type="checkbox"/>
                        <span>Spec</span>
                    </label>
===
続いてCSS。
===
 input[type="checkbox"][disabled] + span{
    color: #707070;
}
===

以下、いくつかの理由とTIPS。
(ここで、ラベル文字列とlabel elementはそれぞれ別のものです。)

ラベル文字列をspanで囲っているのは、inputの次の要素をCSS selectorの"+"(プラス)記法で指定することで、ラベル文字列のcolorを設定するためです。

全体をlabelで囲います。
labelで囲んでfor attributeでIDを使ってinput checkboxと紐付けすることで、ラベル文字列をクリックしてもcheckboxが操作できるようになり、ユーザにとって押しやすいcheckboxになるのこと。

ちなみに試したのですが、 下記HTMLのような
`<input id='editor__message-spec' type="checkbox">Spec</>`
という書き方で、input elementで囲ったテキストの色を変えるCSSを見つけることはできませんでした。

以上です。