nDiki : SVG

SVG ドローツール Inkscape 0.43

Inkscape は Sodipodi からフォークしたドローツールである。 ロジック的な作図については最近もっぱら JUDE/Community を使っているが、やはりフリーハンドなドローツールも1つ使えるようにしておきたい。

以前少し使ってみた Sodipodi よりは使い勝手が良い感じ。 今度はこれを使ってみようかな。

やっぱりマウスが欲しくなってきた。

今日のさえずり: __FILE__ と __LINE__ を吐かせる日

• 09:47 今日は #C78 あたりをチェックしていれば動きがわかるのかな?
• 09:49 京浜東北線時間調整につき山手線にスイッチ。
• 09:54 「お、望遠レンズ?」とおもったら水筒。
• 10:02 今週なら覗いたんだけどな。 http://movapic.com/...
• 10:19 Windows Update がかかっているのでスロースタート中。
• 11:15 夜はみんなで @as_tone の家に移動してデバッグ? RT @as_tone: 弁当忘れた…夜の分も…
• 12:24 #C78 同じ話題が何度も何度も出てくるので辛い。
• 12:26 家から持ってきたバームクーヘン冷蔵庫に入れておくの忘れてた。1片は今食べてもう1片は冷蔵庫へ。
• 12:39 Inkscape Portable ってあったんだ。
• 12:51 Evernote が SVG 形式ファイルをインラインで表示できればハッピーなんだけどな。
• 14:02 RT @naofumiyoshida: 御巣鷹の日航機事故の時、たまたま家族旅行で現場近くにいた。ホテルのロビーにみんな集まってかたずをのんでテレビを見守る異様な雰囲気だったのを覚えている。いつも冷静な父親が慌てていたので、子供ながらただ事ではないと思った。思い出したなう。
• 14:36 @atq Evernote 上でささっと図を書きたいなと。インクノートだとちょっと。現状だと何かのドロー系ソフトウェアに関連付けられるファイルと、それを画像としてエクスポートしたファイルの両方をノートに貼っておくことになってちょっと手間です。
• 15:33 std::binary_function から継承してたって operator () があるとは限らないか。 #cpp #cplusplus
• 15:34 @atq 図に限っていえば検索とブラウズが Evernote に入れたい理由です。ファイルシステムからの解放。
• 15:38 template クラス化するしかないか。芋蔓式に template 化しなければならないのがちょっと嫌だけど。#cpp #cplusplus
• 16:27 あれー、公園前の通りにドトールあったと思ってたんだけど。
• 16:30 ダブルエスプレッソ 168円。 (@ ファミリーマート神田佐久間町店) http://4sq.com/biJuCj
• 17:18 @atq Evernote + 添付はファイル名の呪縛から解放されるという点が、個人的に気に入っています。
• 19:17 __FILE__ と __LINE__ を吐かせる日がやってまいりました。
• 19:56 帰りの時刻表 Evernote にクリップ。終電は逃せない。
• 21:10 親子丼 490円。 (@ なか卯 神田佐久間町店) http://4sq.com/9tdwTs
• 21:28 今日の親子丼とってもあっさりだった。というかこれ失敗だろ、分量違いか何か入れ忘れか。テイクアウトで箸入れ忘れられていて、こちらから声をかけたぐらいだし、覇気がなかったし、まあこれぐらいで済んでよかったのかも。
• 22:38 @madaaamj 店員一人ぼっちだったのでちょっと同情してあげました。
• 22:40 @madaaamj Evernote ようやく使いどころが分かってきたかなというところです。スマートフォンからノート追加したり、逆に閲覧できたりするの便利ですよ。自分も Xperia にしてからグンと使うようになりました。
• 23:10 結構ハズレがあるんですねえ。 RT @suzukis: 限りなく卵かけごはんに近い親子丼を出されたことならあります。卵入れ忘れたかと本気で疑いました RT @Naney: 今日の親子丼とってもあっさりだった。というかこれ失敗だろ、分量違いか何か入れ忘れか。
• 23:11 「そろそろ熱海の捜査官ですね」 in office。
• 24:11 えーと、東京ビッグサイトのアレ、パソケット?
• 24:46 弁当どうなってたんだろ。

今日のさえずり: 雪国出身の人の方がよっぽどはしゃいでる

2011年02月14日

• 09:23 今日からマスクしてる。
• 10:32 4GB の TrueCrypt 仮想ボリュームの3/4を使って心許無くなってきたので 8GB で作り直しているところ。ついでに TrueCrypt も 6.3a から 7.0a にアップデート。
• 13:40 プリンタの保守契約をしている会社の、エンジニアも営業マンも「代替」を「だいがえ」と言うので気持ち悪い。
• 13:54 バレンタインデーのチョコレートは去年単発でしたね。やはり。 http://bit.ly/gwg4Hf
• 14:56 Windows で MD5 を計算するのは CryptoAPI かな。
• 14:56 @as_tone 大丈夫です。持参しました!
• 16:12 C++ (Windows)での MD5、CryptAcquireContext -> CryptCreateHash -> CryptHashData -> CryptGetHashParam のラッパー書いて Perl の Digest::MD5 で検算。行数の違い泣ける。
• 17:06 ここ最近 git commit; git branch new-feature; git reset --hard master^; git checkout new-feature してばかり。
• 18:32 Google Apps アカウントの新しいインフラストラクチャ移行に関する組織内向けアナウンスの草稿を書いてる。今月末には全員移行させたい。
• 21:43 『東京って雪がちょっと降ったぐらいで電車止まったり大騒ぎしたりするよね』っていう雪国出身の人の方がよっぽどはしゃいでる。東京生まれは実はそんなの何とも思ってない。
• 21:44 って毎回思う自分も自分。
• 21:53 思ったより早く剥げてきた。しかも剥れっぷりが半端ない。これがエレコム クオリティか。「Xperia 宇宙刑事シャリバンシェルカバー (2010-11-14) http://bit.ly/gOcLRr 」
• 21:54 こっちの方が長持ちした。「Xperia 宇宙刑事シャリバンジャケット (2010-04-11) http://bit.ly/91n8Ip 」
• 21:59 次の Xperia のカバーはレイアウトのハードコーティングシェルジャケット RT-SE10C2/R にしようかな。ラバーコーティングのはホコリがつきやすかったので。 http://amzn.to/em17RZ #Xperia
• 22:17 えー、前に Inkscape で作った SVG 形式ファイル開いたら中の画像が1つ「Linked image not found」って。
• 22:26 SVG ファイル開いて image 要素の xlink:href で file: で参照しているところを発見。

今日のさえずり: 今日は白骨温泉(自宅)

• 10:10 初午祭 (@ 梶原稲荷神社) http://4sq.com/e1R90Y
• 11:35 定例。 (@ 品川区立 品川図書館) http://4sq.com/gy3l32
• 16:02 今日は白骨温泉(自宅)。
• 21:01 はてなブックマークの [Twitterからブックマークを追加] の [無視する投稿元] に foursquare を設定。
• 21:54 RSS Graffiti を設定してみました。
• 21:57 あ、そか。Facebook ページ -> Twitter って設定を以前してみたんだっけ。Facebook ページ -> Twitter -> Facebook と流れてきて思い出した。
• 22:20 Cacoo http://cacoo.com/ のアカウント作った。
• 22:39 Cacoo、「見栄えのするステンシルがある程度そろってる」「図形のスタイル指定ができる」「ドロップシャドウがつけられる」ので簡単に綺麗なのが書けていいな。 #Cacoo
• 22:44 SVG 形式出力が有料プランなのはビジネス的に理解できるけど、4,800円/年は予想使用頻度を考えるとちょっと高く感じるな。 #Cacoo
• 22:59 Linux 上でも使えるというのは大きいな。 #Cacoo

今日のさえずり: やられたー。イチゴが高くなってる。

2014年12月20日

• 10:56 やられたー。イチゴが高くなってる。
• 16:48 久しぶりに aufs 使ってみて「なぜか ro の方に書き込まれる! なぜ?」って思ったら、書き込んでいたところがシンボリックリンク先でアウトオブ aufs だった。
• 24:24 アイロンがけ。
• 24:36 “モンスターストライク リアルディスクバトル” http://bit.ly/1w8SW0d
• 25:06 “東京の鉄道路線図SVGを作りました＆パブリックドメインで配布します - Liner Note” http://bit.ly/1xyfQ7P

HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させる

6月上旬に使い始めた Markdown エディタ Typora で mermaid を使いダイアグラムを作成してみたらなかなか良かったので、先日 mermaid のデータから画像を単独で生成できるよう CLI を入れてみた。しかしやはり都度画像ファイルに変換して管理するのは面倒。ちょっとしたノートを置いておくスペース nNote では事前に画像ファイルに変換しないで直接ページ上に書かれた mermaid ダイアグラムを SVG 変換して表示されるように設定してみた。

• https://mermaidjs.github.io/

mermaid.min.js を Web サーバに配置し、ページの下部に以下が含まれるようにフッタファイルを編集。

 <script src="/path/to/mermaid.min.js"></script>
 <script>mermaid.initialize({startOnLoad:true});</script>

これでページ中に

 <div class="mermaid">
 graph LR
     a --- b
     a --- c	
 </div>

のようにダイアグラムの定義をmermaid クラスの要素の中に書いておくと、ダイアグラムの SVG 要素が生成し置き換えてくれる。表示は以下のような感じ。

画像ファイルの管理から解放されるのでいろいろ捗って嬉しい。

とりあえず nNote 全フッタで mermaid.min.js を読み込むようにしちゃったけれど 8.0.0 ので 1.11MB ありダイアグラムの無いページで読み込ませるのはちょっと忍びない。 mermaid ダイアグラムの定義がある時だけ読み込むようにした方が良いね。

HTML ページ中の Graphviz 定義を自動的にクライアント側で SVG 変換し表示させる

昨日 HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させるようにしたらいい感じなので、勢いで Graphviz の DOT 言語で書かれたグラフ定義も Viz.js を使って SVG 変換できるようにしてみた。

• https://github.com/mdaines/viz.js

mermaid では HTML ページ中の mermaid クラスをもつ要素を SVG 要素に変換するコードが入っているのだけれど Viz.js にはそれは無さそう。なので mermaid の実装を参考に dot クラスの要素を変換するようにしてみた。

 <div class="dot">
 digraph {
   graph [rankdir = LR];
   a -> b;
   a -> c;
 }
 </div>

と書いたら以下のように変換される。

mermaid よりずっとメジャーな Graphviz (互換)が使えるとさらに捗って嬉しいぞ。

Viz.js は mermaid よりさらに大きいので、さすがに全ページで読み込ませるのはまずい。なので Viz.js と mermaid についてそれぞれの定義があった場合のみ動的ロードするようにしておいた。

で、まずます動くようになったのでちょっとしたノートを置いておくスペース nNote だけでなく nDiki でも動くように設定しちゃった。Viz.js や mermaid が使えなくなった時のことを考えて記事の寿命が長い nDiki の方では多用はしないつもりではある。

Obsidian-Excalidraw プラグインを使い始める

ちょっとした図を書くのに Excalidraw を使ってみることにした。

• github.com/excalidraw/excalidraw

Obsidian 上で Excalidraw ファイルを編集・管理できて便利な Obsidian-Excalidraw プラグインを使う。

• github.com/zsviczian/obsidian-excalidraw-plugin

図を更新すると自動的に対応する SVG 形式ファイルや PNG 形式ファイルにエクスポートし更新してくれる機能が入っているのが入っているのがめちゃくちゃ嬉しい。

マインドマップツール iThoughtsHD (現 iThoughts) がマインドマップを更新・同期するたびに PDF や PNG + HTML にエクスポートしてくれてとても便利だったんですよ。更新するたびに自動的にスタンダードな形式でエクスポートしてくれる機能すごく良いんだけれど、実装されているアプリケーションほとんど無いんだよね。

Obsidian-Excalidraw プラグインで図を書きながら考える

図を書きながら考える時にたまに SimpleMind Pro を使うんだけれど、Obsidian ノートと一緒に管理するのが面倒で結局すぐやめてしまう。やはり Obsidian-Excalidraw プラグインを使っていくかなあ。

Obsidian Publish や MkDocs を使って公開/共有するノートに埋め込む場合の方法を確認しておいた。

• ノートに埋め込んだ Excalidraw ファイルの図を直接表示できるのは Obsidian 上のみなので、オートエクスポートした SVG ファイルを埋め込むようにする。
• オートエクスポートを使うとすると SVG ファイルと同じフォルダに Excalidraw ファイルを置いておくことになる。Excalidraw ファイルは公開時に除外するようにする。
  • Obsidian Publish 向けでは Excalidraw ファイルの YAML front matter に publish: false を書いておく。
  • MkDocs では mkdocs-exclude プラグインを使って除外指定しておく。