nDiki : HTML

HTML (HyperText Markup Language)

関連情報

Perl モジュール

  • HTML::PopupTreeSelect
    • ディレクトリツリーなどのツリー構造のノードを選択させるウィンドウをポップアップさせるためのモジュール。
  • Template Toolkit

HTML への変換

2020年12月1日 (火)

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

[ 12月1日全て ]

2020年12月23日 (水)

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

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

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

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

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

こちらの方法にしよう。

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

[ 12月23日全て ]

2021年1月4日 (月)

iA Writer#nNote

iA Writer for Mac

Markdown

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

検索

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

iA Writer for Android

フォーカスモード

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

Dropbox 自動保存

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

[ 1月4日全て ]

2021年1月20日 (水)

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 を呼び出して

 - [[...]]

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

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

[ 1月20日全て ]

2021年1月27日 (水)

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

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

 - [[yyyymmddHHMMSS]] タイトル

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

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

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

 [yyyymmddHHMMSS]: <> "title"

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

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

[ 1月27日全て ]

2021年2月20日 (土)

八潮を散歩【日記】

image:/nDiki/2021/02/20/2021-02-20-142054-nDiki-800x1200.jpg

暖かい日ということで午後に八潮近辺を散歩してきた。歩けば体も温まるだろうと何も羽織らないで出掛けたら、さすがに運河エリアは肌寒かった。

勝島運河 → かもめ橋 → 八潮公園 → 大井ふ頭緑道公園 → 八潮橋というコース。大井ふ頭緑道公園は遊歩道がメインの細長い公園。東側の湾岸道路 & 首都高速湾岸線と南側の八潮パークタウンとに挟まれ景観・音どちらもいい訳ではないが、普段歩かない適度なアップダウンのある土の道が心地よかった。

Cloudflare で www.naney.org をプロキシ

昨日 Cloudflare を使えるようにしたので、今日 www.naney.org のプロキシを有効にしてみた。トップページの表示は体感速くなった気がする。

「とりあえず公開してサイト上で文章を見直して何度か書き直す」みたいなのはキャッシュされるのでやりにくくなるのかな?

追記

HTML ページはデフォルトではキャッシュされない仕様だった。

[ 2月20日全て ]

2021年2月26日 (金)

Obsidian 内部リンク形式を参照解決して Markdown 形式に置き換えるフィルタを書いた

Obsidian ノートとして内部リンク方言([[ファイルベース名]] や [[ファイルベース名|表示テキスト]])を書いた Markdown ファイルを HTML ファイルに変換する場合は Marked 2 から[[・]]を消す自作フィルタをプリプロセッサとして呼ぶようにしている。

単独ファイルとして HTML ファイルに変換する場合はこれで良かった。しかし最近はノート間のリンクを残しつつ変換したくなってきた。

ノートYAML front matter にそのノートURL (今だとノートGoogle ドキュメントにして共有しているので Google ドキュメントURL)を URL キーで宣言してある。内部リンク先の Markdown ファイルを探して URL が宣言されていれば [ファイルベース名](URL) あるいは [表示テキスト](URL) に書きかえるよう自作フィルタを改良した。

これでリンク元 Markdown ファイルではリンク先ノートURL を記述しておく必要がなくなり、普通に Obsidian ノートして書くだけでよくなった。めでたし。

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

[ 2月26日全て ]

2021年3月18日 (木)

Markdown 形式の Top of Mind ノートを pandoc で HTML ファイルに

Obsidian vault にある断片的なノートGoogle ドキュメント化共有をやめるのに合わせて、社内向け Top of Mind ノートの共有もやめた

しかし仕事に関する Top of Mind ノートは引き続き Obsidian で更新し、仕事用の Google Chrome のホームボタンや新規タブで表示できるようにしたい。 pandoc でさくっと HTML ファイルに変換するシェルスクリプトを作り Alfred から呼び出してさくっと更新することにした。

ちなみに個人的な Top of Mind ノートは引き続き Obsidian Publish サイト上に作って Google Chrome のホームボタンを押した時や新しいタブを開いた時に表示するように設定している

[ スタートページ ]

[ 3月18日全て ]

2021年10月8日 (金)

data-cfasync を指定して Cloudflare Rocket Loader で特定の JavaScript コードを除外する

HTML ページ中の mermaid 定義を自動的にクライアント側で SVG 変換し表示させるのが動いていないのに昨日気づいた。 initialize がうまく動いていいないっぽい。 Cloudflare の Rocket Loader をオフにしたら再び動くようになったのでそれが原因のようだ。

How can I have Rocket Loader ignore specific JavaScripts? – Cloudflare Help Center

によると

 <script data-cfasync="false" src="/javascript.js"></script>      

のように data-cfasync を指定するとそのスクリプトの読み込みを最適化から除外するらしい。

今回は HTML ファイル中に直接 script 要素で埋め込んだコードが動かなくなったので

 <script data-cfasync="false" type="text/javascript">
 ... // Rocket Loader オンで動かなくなったコード
 </script>

のように追加してみたところ Rocket Loader をオンにしても動くようになった。高速化のため、できれば Rocket Loader をオンにしておきたかったので良かった良かった。

[ 10月8日全て ]

2021年12月2日 (木)

Cloudflare で HTML ページのキャッシュを有効にしてみる

2月に Cloudflare で www.naney.org をプロキシするように設定した。デフォルトの設定では HTML ページはキャッシュされない。

www.naney.org ではほとんどのページを動的に生成しているがパーソナライズしていないので、 Cloudflare で全てキャッシュされるようにしてみた。

ページ ルール(Free プランでは3つまで)として以下を追加。

 www.naney.org/*
 キャッシュ レベル: Cache Everything, エッジ キャッシュ TTL: 2時間

ページを1回閲覧したあとに再読み込みしてもページフッタに出力しているプロセスタイムが変わらないのようになったので、ちゃんとキャッシュされるようになったっぽい。

しかし PV を考えると TTL 2時間ではキャッシュヒット率がかなり低いかもしれないな。保険的に有効にしておく感じだ。

[ 12月2日全て ]

About Me

Naney Naneymx Naney

Naney (なにい)です。株式会社ミクシィで SNS 事業の部長をしています。

About nDiki

nDiki1999年1月に始めたコンピュータ日誌を前身とする NaneyWeb 日記(兼パーソナルナレッジベース)です。

#nNote タグがついている記事は他の記事に比べて、より断片的・未整理・不完全なちょっとしたノートです。まだ結論に至っていない考えなども含まれます。頻繁/大幅に更新したり削除したりすることがあります。

※本サイトの内容は個人的見解であり所属組織とは関係ありません。

最近検索されている記事

Other Notes

ナレッジベースアプリケーション Obsidian で書いているノートの一部を notes.naney.org で 公開しています。

月別インデックス
Process Time: 0.073646s / load averages: 0.40, 0.62, 0.69
nDiki by WATANABE Yoshimasa (Naney)
Powered by DiKicker