nDiki : CSS

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

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

百科事典型ナレッジベースに向いているナレッジベース Obsidian

以前ノート間リンクのできるノートアプリを探してみた時に触った Obsidian をもう少し試してみた。

• https://obsidian.md/

Obsidian はナレッジベースアプリケーションで、一般的なノートアプリよりも情報間のネットワークを重視している。ローカルホスト上の特定フォルダ以下に置いた個別の Markdown ファイルを [[ファイルベース名]] 形式で内部リンクしていくのが基本。

ファイルの拡張子が md 固定で txt では駄目というのが個人的に不便(拡張子 txt にできないと Google ドライブ的に困る)なのだけれど、過去のノートテキストファイルの拡張子を変更してお試ししてみた。

内部リンク

ファイルベース名を指定して内部リンクを文中に書いていくのだが、ファイル名の先頭を日付にする流儀との相性が良くないな。[[ファイルベース名|表示テキスト]] 形式でプレビュー時のテキストを指定できるけど、編集モードだと文章として読みにくい。各ファイルで YAML front matter 形式で別名を宣言しておけばその別名で内部リンクできる機能があるので、丁寧に管理すれば読みやすくはできる。

ただ Obsidian 方言で書きすぎると「ローカルホスト上の Markdown ファイルなので特定アプリケーションに依存しない」良さがスポイルされてしまう。Markdown のショートカット参照リンク形式で内部リンクを張れるようになると良いのになと感じた。

グラフ表示

1ファイル1トピックにしてきちんと内部リンクを張っていかないと価値あるグラフにならない。1日1ファイル + 個別トピックファイルというスタイルだと役に立たないかな。

その他

検索は使いやすい。TaskPaper ほど優れてた UI ではないけれど、フォールディングやアウトライン表示もできたりする。デフォルトのスタイルは個人的に見出しが大きいなと感じるので、常用するなら CSS をいじる必要がありそう。

パーソナルナレッジベースとして

「時間とともに記録・整理しておきたいことが変遷していく」「ナレッジベースを作ること自体が主目的ではない」パーソナルナレッジベースの世界では、静的な情報を丁寧にネットワーク化していく百科事典型よりも日誌/日記型の方が良いと思ってる。内部リンクは編集・維持コストが高いので、パーソナルナレッジベースでは頑張らないのが幸せだ。

Obsidian は百科事典型のナレッジベースが欲しい人にはあいそう。一方自分のような日誌/日記型派にはやはり検索主体の howm 系の方がいいなとあらためて感じた。

[ Mac アプリケーション ] [ ノート・日記はテキストファイルに ] [ ファイル名の先頭を日付にする ]

今日のさえずり: Zettlr 2日目。カスタム CSS を設定して見出しが大きすぎるの直したら使いやすくなった。

• 21:47 Zettlr 2日目。ちょっと分かってきて楽しい。カスタム CSS を設定して見出しが大きすぎるの直したら使いやすくなった。

Obsidian Publish サイトでノート埋め込み部分の CSS 変更失敗

Obsidian はノートに別のノートの全体や一部を埋め込む機能があるのだけれど、埋め込むコンテンツの量が多いと全部は表示されず縦スクロールバーが出てしまう。

max-height が指定してあったので Obsidian アプリケーション用の CSS スニペットや Obsidian Publish サイト用の publish.css で max-height 設定を上書きするようにしてみた。

アプリケーションの方はうまくいったのだけれど Obsidian Publish サイトの方は何か変(リロードすると表示されなくなったりする)。やはり埋め込みは使わないのがいいかなあ。

Obsidian の CSS スニペットから publish.css を生成する

Obsidian の表示のカスタマイズ用に複数の CSS スニペットを用意して個別に有効・無効を切り替えられるのに今頃気が付いた。

「プレビュー画面用の CSS と編集画面用の CSS」「Obsidian 標準の構造用の CSS と独自の構造・クラス用の CSS」など分けたらずいぶん見通しが良くなった。

今までアプリ用の CSS と Obsidian Publish サイト用の CSS (publish.css) の2重管理が手間だった。「アプリだけ用の CSS」「Obsidian Publish だけ用の CSS」という切り口でもファイルを分けておき、 必要な CSS ファイルだけを make でマージして publish.css を生成するようにしたら解決できた。なるほどー。

今日のさえずり: 70:20:10 モデルのソース調査

• 08:41 Spirit #photography RICOH GR III #GR #GRIII #GR3 https://t.co/xD6m4FXrtZ
• 19:49 デザイン原則を参照しつつ、まずイラスト原則を定義。 みてねの「イラストガイドライン」をつくった話💡｜Miyu Matsumoto @miyumatsumoto https://note.com/.../n/n031372f5e718
• 24:19 2022年1月26日(水) やったこと - 花粉症の薬を手配 - 部内勉強会 (グロースハック) - 部内勉強会 (HTML と CSS) - 70:20:10 モデルのソース調査

Spirit#photography
RICOH GR III #GR #GRIII #GR3 pic.twitter.com/xD6m4FXrtZ

— Naney (@Naney) January 25, 2022

Obsidian Publish でセクションやブロックの embed が正しく表示されない

Obsidian Publish でセクションやブロックの embed が正しく表示されなくなったので、通常のリンクに書き換えた。

CSS の管理も煩雑だし Obsidian Publish での埋め込みは最小限にしておこう。

今日のさえずり: 鈴カステラいまいずこ

• 12:30 Obsidian で編集時の見出しフォントのサイズと太さを調整しようと CSS snippets を書き換えていたら午前中終わった。
• 15:26 ヴィーナスフォートの噴水広場を見納めてる。 https://t.co/3JoPq6qtIp
• 17:29 普段行くスーパーに鈴カステラ売ってなくて、ずっと食べたいと思っているのに食べられていない。 鈴カステラいまいずこ。
• 23:26 個人 Google アカウントの Google ドキュメントでも「ページ分けなし」(pageless)が使えるようになってた。よい。
• 24:25 2022年3月6日(日) したこと - Obsidian で編集時の見出しフォントのサイズと太さを調整 - お台場ウォーク - Sophos Home アカウント再作成 - 2022年4月2日放送開始の『ラブオールプレー』をチェック

ヴィーナスフォートの噴水広場を見納めてる。 pic.twitter.com/3JoPq6qtIp

— Naney (@Naney) March 6, 2022

今日のさえずり: 唐突にTweetDeckプレビューがやってきた

• 08:45 ついにタブをひっさげて Obsidian v0.16.0 がリリースされた。 UI の印象も変わったので、わくわくする!
• 17:03 Obsidian v0.16.0 で見出しのフォントサイズ指定方法が変わったので CSS snippets を更新。
• 17:50 輝く運河 #photography Lomo LC-A Minitar-1 Art Lens #Minitar #Minitar1 https://t.co/bANpPghZTV
• 20:50 唐突にTweetDeckプレビューがやってきた。 当然だけれど Better TweetDeck 未対応なので痒いところに手が届かないね。
• 25:01 2022年8月30日(火) したこと - Obsidian v0.16.0 へアップデート - 研修を受講 - TweetDeckプレビューを試用

輝く運河#photography
Lomo LC-A Minitar-1 Art Lens#Minitar #Minitar1 pic.twitter.com/bANpPghZTV

— Naney (@Naney) August 30, 2022

自分の Tweets のいいね数・Retweets 数はやっぱり表示する

7月から Twitter のいいね数・Retweets 数を非表示にしてみている。他人の Tweets のいいね数・Retweets 数が分からないのなかなか良い。

一方で自分の Tweets のいいね数・Retweets 数はやはり知りたくて仕方ない。トライブの報酬が欲しいの。

TweetDeck については Better TweetDeck のカスタムCSSを修正して自分の Tweets のいいね数・Retweets 数は表示するようにした。

 .stream-item:not([data-tweet-user-id='自分の ID (数字列)']) .like-count {
     display: none;
 }
 
 .stream-item:not([data-tweet-user-id='自分の ID (数字列)']) .retweet-count {
     display: none;
 }
 
 .stream-item:not([data-tweet-user-id='自分の ID (数字列)']) .reply-count {
     display: none;
 }