nDiki : HTML

Web 日誌 / Web 日記を書き始めてから20年

途中ブランクがあったりするけど、書き始めてからついに20年だ。

いつ始めたか?

個人 Web サイトを作り始めたのが1995年か1996年ぐらい。それから数年経った1999年1月19日にコンピュータ日誌として日付ベースの記事を書き始めた。

当時既に Web 日記を書いている人はいたが、まだ HTML ファイルとして直接書いている人も多かったんじゃないかな。自分は当時マクロプロセッサ m4 を通して静的 Web ページを生成していたので、当初 Web 日誌も m4 マクロで生成していた。

ハイパー日記システムが公開されたのが前年の9月、 tDiary が SourceForge.net に公開されたのは3年後の2002年2月20日であった。その翌年の1月16日にはてなダイアリーベータ版がリリース、さらにその翌年日記機能をもつ mixi がオープンとなる。

そこそこ早い時期から Web 日記 (Web 日誌)を書いていたんじゃないかな。

20年続けて得られたものは?

20年続けて得られたものは以下だな。

• 自分の20年の情報が蓄積されたパーソナルデータベースとなった。自分の過去の何かについてはサイト内を Google 検索すればたいがい探せてしまう。
• パーソナルデータベースについての知見を得た。
  • 特に個人の情報は「いつ」のことかが重要。
  • 「システムの寿命よりもデータの寿命を特に重視して設計されていなければならない」「ノート・日記はテキストファイルに」「ファイル名の先頭を日付にする」
• ちょっぴり人の役にたった。
• ちょっぴり収入になった。

20年続けて失ったものは?

一方失ったものは時間。公開している以上、下調べしたり文章を整えたりするのにある程度時間がかかり1週間に数時間は費やしている(1日分で数時間の場合もザラ)。Web 日記を書いていなければ数千時間、他のことができていたであろう。

あ、もちろん無駄な時間だったとは思ってはいない。調べたり考えたり内省したり、日記を書き続けたから今の自分がいるんだよね。

続ける?

Web 日記は趣味だからね。

[ コンピュータ日誌 ]

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 の方では多用はしないつもりではある。

HTML・CSS についての勉強会【日記】

今年2回目の部内での HTML・CSS についての勉強会が今日あった。 複数人・複数チームでで開発保守する大規模サイトにおける共通部品化のデメリットの話など、なるほどと。

iA Writer の Web プレビューを Google ドキュメントに貼り付けて共有する

テキストファイルと Google ドキュメント間で内容を同期したい件について引き続き検討。

Markdown ファイルをローカルで更新したら Google ドキュメントに自動できれいに反映されればベストだけれど、そういうのは無さそう。共有したいノートの作成・更新頻度を考えると手動にするか。

iA Writer の Web プレビューを全選択しコピーするとリッチテキストとしてクリップボードに入る。これを Google ドキュメントに貼り付けたところいい感じに書式付けされた。

Markdown ファイルの最初の見出しの次に Google ドキュメントの URL を HTML コメントで書いておけば、更新時にさっと開ける。 Google ドキュメントへの反映も思ったほどは億劫で無かった。

うん、これでいいかなと。

今日から運用開始する。

2020年12月12日 追記

画像を データ URL 化して埋め込めば、その画像も Google ドキュメントに貼り付けられた。

• iA Writer の Web プレビューを Google ドキュメントに貼り付けて共有する(画像付きで)

[ ノート・日記はテキストファイルに ] [ Markdown で書いているノートを Google ドライブで共有する ]

今日のさえずり: Nintendo Switch で撮影した画面写真や動画をスマートフォンに転送できるようになったの、メチャいいな

• 06:15 良かったものをふりかえるのは至福のひととき。 / “買って良かったもの 2020” https://www.naney.org/...
• 07:57 ちょっと肌寒い12月のスタート。リビングのエアコンをつけた。ぬくい。
• 08:52 昨日の夜に考えた通りウルトラライトダウンジャケットを着て出てきた。胴体ポカポカ。
• 19:47 Nintendo Switch で撮影した画面写真や動画を microSDXCカードを抜かないでスマートフォンや PC に転送できるようになったの、メチャいいな。
• 21:16 スマートフォンから Nintendo Switch に Wi-Fi 接続したあと Nintendo Swtich 上の HTML ページに HTTP アクセスする形式なのね。なるほど。
• 21:21 Pixel 4 の Google カメラ(Google レンズ)で URL の QRコード読み取りをすると Wi-Fi 通信の方ではなくてモバイル通信の方でアクセスしようとしてうまくいかない。モバイル通信を切ると Google レンズで QRコードを読み取れない。
• 21:24 オフラインで使える QRコードリーダーを入れておくか URL をブックマークしておくかで対応かな。
• 21:26 iPhone 8 (iOS 13.7) からはハマることなくサクッとアクセスできた。
• 21:29 12月。クリスマス! クリスマス! #photography RICOH GR III #GR #GRIII #GR3 https://t.co/h4LAKkiJl2
• 24:20 12月2日からグラコロか! ノーマークだった!

12月。クリスマス! クリスマス!#photography
RICOH GR III #GR #GRIII #GR3 pic.twitter.com/h4LAKkiJl2

— Naney (@Naney) December 1, 2020

Markdown ファイルを Marked 2 で self-contained HTML に変換して Google ドキュメントに貼り付けて共有する(画像付きで)

Markdown ファイルを iA Writer で Web プレビューしたものを Google ドキュメントに貼り付けて共有する(記事1)時、画像データをデータ URL 化して Markdown ファイルに記述すれば一緒に貼り付けられることが分かった(記事2)。

でもやっぱり管理が面倒くさい。

そこまでするなら「別のアプリで self-contained HTML に変換」→「Web ブラウザで表示」→「コピー & ペーストで Google ドキュメントに貼り付け」を実行する方がいいのでは。いったん HTML に書き出すのが嫌だなと今まで思っていたけれど。

と思って調べたら、インストールしてある Marked 2 が self-contained HTML に変換できたし、Google Chrome で表示して全選択からのコピー & ペーストで画像付きで Google ドキュメントに貼り付けられた。

こちらの方法にしよう。

[ Markdown で書いているノートを Google ドライブで共有する ]

iA Writer の #nNote

iA Writer for Mac

Markdown

Markdown から HTML への変換に MultiMarkdown を使っているので MultiMarkdown 固有の文法が一部使える。

• https://github.com/...

検索

ファイルリストのフィルタで検索しても探せない文字列がある。検索文字列の最後に * をつけると検索できる場合がある。

iA Writer for Android

フォーカスモード

Android の iA Writer はフォーカスモードにするとカタカタ上下に画面が動くので逆に集中しにくい。

Dropbox 自動保存

テキストファイルを開いた状態でホームに戻った際に変更があれば自動保存される。ただし再度開いた時に Dropbox 上のファイルが更新されているかのチェックはないので、コンフリクトが起きる可能性はあり。一度編集画面からファイル一覧画面に戻る必要あり。

Zettlr 2日目

昨日から使い始めた Zettelkasten メソッドのための機能を備えた Markdown エディタの2日目。昨日の時点で使い続けるかちょっと迷ったんだけれど、もうちょっと使い方を探ってみようと今日も使ってみている。内部リンク(ノート間リンク)の活用方法がちょっと分かってきて楽しい。

内部リンクの使い勝手が良い

エディタ上で内部リンクを「command + クリック」「control + クリック」すると「リンク先のファイルを開く」と同時にその「リンク文字列での検索」が実行される。ファイルを開くと同時にいい感じに関連するファイルのリスト(実質バックリンクリスト)が表示されて便利。内部リンクを充実させたい気持ちが高まってきた。

ID を YAML front matter に埋め込む

アプリケーションに依存する Markdown ファイルを作らないという Zettlr の原則により Markdown ファイル中のどこに ID を書いてもいい仕様になっている。

自分としてはプレビュー時に文中に出ないように、昨日ひとまず ID を HTML コメントの形式で Markdown ファイルに埋め込んでみていた。 Zettlr やメインで使っている iA Writer、プレビューに使っている Marked 2 が YAML front matter に対応しているのでそこの方がわかりやすいかな。 front matter に ID を書くことにした。

ID のパターンは初期設定の「%Y%M%D%h%m%s」で

日時については基本「2021-01-20-095836」という書式を使っているので Zettlr の ID のパターンも初日に「%Y-%M-%D-%h%m%s」にカスタマイズしたのだけれど「%Y%M%D%h%m%s」に戻した。過去のノートファイルに現在日時の ID を付与するというズレが心理的に気持ち悪かったので。

Also, our own experiences show that when one doesn't use easy-to-recognise IDs, one is less prone to assume stuff, making them better suited to cross-link files. Just try it yourself! — https://docs.zettlr.com/en/academic/zkn-method/

というの納得。

内部リンクは独立した行に書き、 Marked 2 で消す

内部リンクは Zettlr をナレッジベースとして使う上で便利だが、単独の Markdown ファイルをエクスポートして共有する際には不要だ。

Markdown ファイルを各種フォーマットに変換する Marked 2 に自作のカスタムプリプロセッサを通す機能があるので、 Zettlr で管理している Markdown ファイルを共有する際は Marked 2 を呼び出して

 - [[...]]

を含む行を消してしまうように設定した。ノート関係の宣言のための内部リンクは上記のように独立した行に書いておこう。

これで個人的なナレッジベースとしてノート間リンクの充実させるという要求と、一部はエクスポートして共有したいという要求を満たせそうだ。

Markdown リンク定義にリンク先ノートの ID を書く

Markdown エディタ Zettlr で内部リンク(ノート間リンク)を

 - [[yyyymmddHHMMSS]] タイトル

のように書き、エクスポートする時は Marked 2 のカスタムプリプロセッサで消す(記事)というマイルールを作った(yyyymmddHHMMSS は ID)。が Zettlr から iA Writer に戻し、ノート間リンクは自作の PopClip エクステンションで開けるようにした(記事)ので、必ずしも [[yyyymmddHHMMSS]] 形式で内部リンクを表現しなくても良くなった。であれば、最初から変換した時にドキュメントに現れない形式で Markdown ファイルに内部リンクを書いておきたい。

Markdown ファイル中に HTML コメント形式で内部リンクを書いておけば、 HTML 等に変換した時にドキュメントに出現しなくて済むのだが iA Writer だと全文検索にひっかからないので却下。

ドキュメントに出現しない表記にはもう1つ「リンク定義」があるのでこれを使うことにした。

 [yyyymmddHHMMSS]: <> "title"

として内部リンクを書いておけばプレビューしたドキュメントには現れない。若干やぼったい感じもするがなかなかいいんじゃない。

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