nDiki : ノート

ノート - notebook

記事

A6 方眼ノート比較

2019年6月25日 (火)

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 要素が生成し置き換えてくれる。表示は以下のような感じ。

graph LR a --- b a --- c

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

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

スポンサードリンク

[ permalink ]

[ 6月25日全て ]

2019年6月26日 (水)

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>

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

digraph { graph [rankdir = LR]; a -> b; a -> c; }

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

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

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

[ permalink ]

[ 6月26日全て ]

2019年7月31日 (水)

今日のさえずり: 使っているところを見たことがない、路地の入り口にあるコインロッカー

2019年07月31日

05:57 RT @Naney: 渋谷スクランブルスクエア RICOH GR III BW #GR #GRIII #GR3 https://t.co/liKXK8Ymrn
06:00 使っているところを見たことがない、路地の入り口にあるコインロッカー。 RICOH GR III #GR #GRIII #GR3 https://t.co/FwuWdG2Umd
09:39 2019年7月31日 #朝の渋谷 246 305 RICOH GR III HardBW #GR #GRIII #GR3 https://t.co/qZfIYbpREE
09:50 眼鏡がオシャレ! @k12u 氏。 / “フリーランスエンジニアをやめてフルタイムCTOを選んだキャリア選択の“3つの軸” ➖ メディカルノートCTO河本穣のキャリアパス | kiitok (キイトク)” http://bit.ly/2ZnUk6y
17:42 RT @Naney: 直線とざわざわ線と。 RICOH GR III #GR #GRIII #GR3 https://t.co/9DyGBc47Bl
17:45 鳥居 DSC-RX0 #RX0 https://t.co/Yi1eVbEaQf

[ permalink ]

[ 7月31日全て ]

2019年8月1日 (木)

今年もノートンセキュリティプレミアム 5デバイス新規再購入

ノートンセキュリティプレミアムが切れたのであらためて新規購入。前回とデバイスは変わっていなくて MacBook Pro 2台と Android デバイス2台をそれぞれ更新。

去年Mac 版ノートンセキュリティは一度アンインストールして同じものを再インストールしなければならないと書いたけれど、今回確認したら[ヘルプ]-[キーの入力]でプロダクトキーを入れて再アクティベーションできる事がわかってさくっと更新できた。

で忘れないように自動延長サービスは即停止。重要。

[ permalink ]

今日のさえずり: 空きが 1024MB を切ると Dropbox が同期を一時停止するということを知った

2019年08月01日

05:57 RT @Naney: 5時の方向へ。 #トイデジ #デジタルハリネズミ https://t.co/mE4sLMW6q5
08:06 MacBook Pro のストレージの空きが 1GB 未満になって死ぬかと思った(再起動したら 35GB 以上の空きになった)。
08:17 ストレージの空きが 1024MB を切ると Dropbox が同期を一時停止するということを知った。
08:23 傘の出番がようやく減ってきて嬉しい。突然の雨に折り畳み傘は手放せないけど。 PowerShot G9 X Mark II ラフモノクロ https://t.co/jIwTqHeSle
09:55 2019年8月1日 #朝の渋谷お昼に外に出ないでいいように今週は毎朝コンビニでお昼ご飯を買っちゃってる。 DSC-RX0 #RX0 https://t.co/8rXyRnsQHc
12:36 渋谷だけピンポイントで雨降ってるっぽい。
17:39 RT @NerotanOwl: 夕方はかるくお写んぽしてきましたん♡ GR3を買ってから街歩きの楽しさを知りました(*n´ω`n*) #兵庫県 #竹野浜 #海水浴 #日本海 #GR3 #RICOH https://t.co/kZdMGIn7TG
17:42 RT @Naney: 最前線の電柱。 RICOH GR III #GR #GRIII #GR3 https://t.co/c9NcrjkqUe
17:45 江の島。 RICOH GR III #GR #GRIII #GR3 https://t.co/S2f7s9YXCD
19:45 金王八幡宮横、いつもより Pokémon GO 勢が多いなー。
21:31 「IKEAカタログ 2020」がポストに届いていた。1月にチェストや引き出しユニットなどガッツリ買ったからかな。「一番安いもの探し」「一番高いもの探し」ゲームまたやろう。
21:52 「ノートンセキュリティプレミアム 5デバイス」が切れたので新規購入し直した。
22:03 そして直ちに「ノートンセキュリティプレミアム 5デバイス」の自動延長サービスを停止。

[ permalink ]

[ 8月1日全て ]

2019年8月16日 (金)

Web 日記での画像貼り付けを後回しにする

Web 日記 nDiki を書いて公開するのを後回しにする理由として

貼り付ける写真の準備ができない(デジカメから PC に移して現像・リサイズが済まない)。
言及する日記がまだ未公開なので、その記事へリンクしようとしている記事も公開できない。

がある。先送り理由になるタスクは記事にタグ付けしておいて、週末とかにまとめてやってみることにしよう。

 < [[画像準備中]] [[記事間リンク準備中]] [[キーワードページ更新準備中]] >

みたいなのをテンプレートに入れておいて、不要なタグを順次消していく感じで。記事毎の残タスクをタスク管理ツールに入れるのは手間で続かないので、記事にタグ付けしちゃうのが個人的ポイント(非公開のノートとかもそうしている)。

[ permalink ]

[ 8月16日全て ]

2019年8月28日 (水)

今日のさえずり: そういえばと思って「ほぼ日手帳2020」のサイトを訪問中

2019年08月28日

06:45 赤バス。スリップストリーム。 #渋谷スクランブルスクエア RICOH GR III #GR #GRIII #GR3 https://t.co/X3NydGlud8
09:33 倒れても何度でも立ち上がる。 2019年8月28日 #朝の渋谷 #渋谷3丁目 DSC-RX0 #RX0 https://t.co/52vMmJSNAm
17:45 ホース。 #しながわ区民公園 RICOH GR III #GR #GRIII #GR3 https://t.co/EwpqxPMzgD
22:32 そういえばと思って「ほぼ日手帳2020」のサイトを訪問中。買うことはないけどねと思ってたんだけれど day-free っていう方眼ノートが登場してるじゃない! 気になる!
22:45 メニュー。 RICOH GR III #GR #GRIII #GR3 https://t.co/7Vc2Gtf9tK
22:47 あ、5月31日にズバリ「ほぼ日の方眼ノート」というのも出てたのね。 day-free は「日々の言葉」入りなのが魅力。 #ほぼ日の方眼ノート

[ permalink ]

[ 8月28日全て ]

2019年10月2日 (水)

Ulysses 18 for Mac でプレーンテキストファイル編集ができなくなった

外部フォルダで、シートを「Ulysses ファイル」形式(拡張子 ulyz)での保存・管理を選べるようになった。Ulysses ファイルとして扱う設定にした外部フォルダではイメージ添付などができるようになった。

しかし Ulysses ファイルはバイナリファイルで他のテキストエディタを併用できない。自分のノート管理方針上使えない。

一方今回のアップデートでフォーマット無しのテキスト(プレーンテキスト)として表示・編集する機能が無くなってしまった(拡張子 txt のファイルも Markdown 形式として扱われてしまう)。これはかなり辛い仕様変更である。

Ulysses はすぐに \ でエスケープしてくるので気をつけないとすぐ \ だらけになってしまうんだよね。困った。

[ ノート・日記はテキストファイルに ]

[ permalink ]

[ 10月2日全て ]

2019年11月2日 (土)

今日から Pixel 4

10月22日に注文した Pixel 4 が1週間後の今週火曜日10月29日に届いた。まとまった時間で Xperia Z5 から移行したいと思って土曜日の今日まで待ってから開梱・設定した。

移行

Xperia Z5 で使っているドコモnanoUIMカード(nano SIM カード)を抜いて Pixel 4 に挿入し電源オン。 APN は自動設定された。

Pixel 4 には「クイックスイッチアダプター」が同梱されていて、これを使ってケーブル経由でデータ移行ができるようなのだけれど、移行の範囲がよくわからないことと、せっかくの機会なので見直しをしたいということで手作業で移行。こういう時のタスクの書き出しは TaskPaper が便利。ほぼ丸一日費やして移行完了。

前デバイスで機種変更手順が必要なのは以下。