# 🗞️Topics ## Minervaの見出しスタイル変更 [[Minerva]]の見出しに関する[[CSS]]を更新しました。[[Minerva]]を安定運用してからは恐らく初だと思います。 ![[Pasted image 20250303120439.png|frame]] *見出しレベルごとの表示* `見出し6` は基本的に使わないので変更していません。 ## Obsidianの自動フォーマット機能実装 [[🦉Carnelian]]でファイル保存時 (`:w<CR>`) に自動でフォーマットする機能を追加しました。 具体的には、見出し間の改行数を統一するフォーマットです。見出し1の直前は3行、見出し2の直前は2行、それ以外は1行の空行を入れるようにしました。これにより、[[Obsidian]]で文章を書いているときもプレビューに近い見た目で編集できるようになりました。 ![[Pasted image 20250303120741.png|frame]] *[[Live Preview]]モードで編集中* ### 設計時の苦労 最初は『stringを受け取って新たなstringに変換する』チェーンを構成しようとしましたが、[[エディタの全文字列を置換 (Obsidian)|エディタの全文字列を置換]]してしまうと以下の問題があることに気づきました。 - **[[Vimモード (Obsidian)|Vimモード]]におけるジャンプリストやラベルなどの情報がすべて消失してしまう** - **[[Vimモード (Obsidian)|Vimモード]]におけるundo/redoが使えない** 上記が利用できなくなるのは致命的なので調べていたところ、[[エディタの文字列を複数個所それぞれ置換 (Obsidian)|エディタの文字列を複数個所それぞれ置換]]するように実装したら問題が解決しました。 先日の[[リンター]]に引き続き、[[フォーマッター]]も初めて実装しましたが、必要最低限の部分だけをフォーマットしつつ、その後の状態を如何に自然にするか... が重要だということを思い知らされました。 ### undo/redoの違和感 もう1つ問題がありました。今回実装したフォーマットをかませると、[[Vimモード (Obsidian)|Vimモード]]のundo/redoが直感的ではない動きになってしまいました。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" /> <span class="link-card-v2-site-name">Minerva</span> </div> <div class="link-card-v2-title"> 📝ObsidianのVimモードでuやCtrl+rによるundo,redoが期待通り動かない </div> <div class="link-card-v2-content">Vimモードを有効にし、u や Ctrl+r によるアンドゥやリドゥを実行しても、Ctrl+z や Ctrl+y による動作と異なる動作になる。具体的にはカーソルが変な場所に移動したりする。</div> <img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/troubleshooting.webp" /> <a data-href="📝ObsidianのVimモードでuやCtrl+rによるundo,redoが期待通り動かない" class="internal-link"></a> </div> %%[[📝ObsidianのVimモードでuやCtrl+rによるundo,redoが期待通り動かない]]%% こちらは、[[Vimrc Support Plugin (Obsidian)|Vimrc Support Plugin]]を使って[[Obsidian]]のundo/redo処理にマッピングすることで解決しました。ここは[[Obsidian]]の方でマッピングしてくれてもいいのになと思ったりも。 ## Denoのスライド [[TypeScript]]で何かを作ったり学習する際に、まずは[[Deno]]を選択肢として含められるようにしておくとイイゾというスライドをつくりました。 ![[👩‍🏫Denoはイイゾ]] 内容はかなり薄いですが、伝えたい点はコンパクトにまとめたつもりです。『[[Obsidianプラグイン]]を開発しようと思ったけど、[[TypeScript]]の勉強の仕方/動かし方がそもそも分からん..』にオススメです。[[Obsidianプラグイン]]プロジェクトは初心者が初見で見るには辛い構成だと思いますので...。 ## ghostwriter.nvim v0.13.0 リリース 久々に[[🦉ghostwriter.nvim]]をリリースしました。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://github.githubassets.com/favicons/favicon.svg" /> <span class="link-card-v2-site-name">GitHub</span> </div> <div class="link-card-v2-title"> Release v0.13.0 · tadashi-aikawa/ghostwriter.nvim </div> <div class="link-card-v2-content"> 0.13.0 (2025-03-01)⚠ BREAKING CHANGESGhostwriterPost/GhostwriterCopy/GhostwriterWrite: Add conversion of Markdow ... </div> <img class="link-card-v2-image" src="https://opengraph.githubassets.com/a092e51b783733619f1e671402cf45ee107bc98c4d6a585afa016cab2d7ef52a/tadashi-aikawa/ghostwriter.nvim/releases/tag/v0.13.0" /> <a href="https://github.com/tadashi-aikawa/ghostwriter.nvim/releases/tag/v0.13.0"></a> </div> ## MkDocs設定の手直し 先週のWeekly Reportでも触れた以下の記事について、いくつか加筆しました。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" /> <span class="link-card-v2-site-name">Minerva</span> </div> <div class="link-card-v2-title"> 📘MkDocsでObsidianと互換性の高いドキュメントベースを実現する </div> <div class="link-card-v2-content">Obsidianやobsidian.nvimと高い互換性を持ち、Markdown・Python・YAML・ターミナル操作の知識がある方向けに、MkDocsとMaterial for MkDocsを使った無料・クローズドなドキュメントサイト構築方法を詳しく解説します。プラグイン設定やカスタマイズ手順も紹介しています。</div> <img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/%F0%9F%93%98Articles/attachments/2025-02-23.webp" /> <a data-href="📘MkDocsでObsidianと互換性の高いドキュメントベースを実現する" class="internal-link"></a> </div> %%[[📘MkDocsでObsidianと互換性の高いドキュメントベースを実現する]]%% 一番大きな変更は[[MkDocs GLightbox]]プラグインの追加です。画像閲覧のユーザー体験がかなり向上します。 > [[📘MkDocsでObsidianと互換性の高いドキュメントベースを実現する#画像のズーム変更]] ## CodeCompanionの日本語レスポンス対応 [[CodeCompanion]]へ質問したとき、常に[[日本語で回答 (CodeCompanion)|日本語で回答]]されるよう設定をしました。設定はシンプルで `language` を指定するだけです。 ```lua { opts = { language = "Japanese" } } ``` 最近は[[Claude 3.7 Sonnet]]を使うことが多くなりましたが、素の状態だと英語で返ってくることが多かったです。この設定をしてからは常に日本語で返ってくるようになりました。 ## 今週のTDQ 今週は1本だけと控えめでした。 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/favicon-64.png" /> <span class="link-card-v2-site-name">Minerva</span> </div> <div class="link-card-v2-title"> 📒TDQ </div> <div class="link-card-v2-content">TypeScriptで開発ができるようになるための知識を詰め込んだ問題集。プログラミング経験はあるけどWeb開発経験がほとんどない読者を想定しています。</div> <img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/%F0%9F%93%97TDQ/attachments/tdq.webp" /> <a data-href="📒TDQ" class="internal-link"></a> </div> %%[[📒TDQ]]%% - [[📗TDQ-022 非同期処理はなぜ生まれたのか]] # 👀Reading ## Web制作者は要チェック! Chrome 133で新しく追加された7つのCSSの機能 <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://coliss.com/icon.svg" /> <span class="link-card-v2-site-name">コリス</span> </div> <div class="link-card-v2-title"> Web制作者は要チェック! Chrome 133で新しく追加された7つのCSSの機能 </div> <div class="link-card-v2-content"> Chrome 133で追加された、CSSの新しい機能7つを紹介します。 今回のアップデートで目玉となるのはattr()関数のパワーアップ、新しい疑似クラス:open、スクロール状態のコンテナクエリ、テ ... </div> <img class="link-card-v2-image" src="https://coliss.com/wp-content/uploads-202501/[email protected]" /> <a href="https://coliss.com/articles/build-websites/operation/work/chrome-133-adds-7-new-css-feature.html"></a> </div> ~~~ text-box-trimが気になる。 ~~~ ## Devinの代替OSS OpenHandsを使ってみた|IORI <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://assets.st-note.com/poc-image/manual/note-common-images/production/icons/android-chrome-192x192.png" /> <span class="link-card-v2-site-name">note(ノート)</span> </div> <div class="link-card-v2-title"> Devinの代替OSS OpenHandsを使ってみた|IORI </div> <div class="link-card-v2-content"> 会社にDevinが導入されて、これ個人で使いてえ〜ってなったんだけど 最近Ubieにジョインした新人AIのDevin君が凄すぎて椅子から転げ落ちた😂 例えばテストコードを依頼する例。テスト実例・ルールと共にSlack ... </div> <img class="link-card-v2-image" src="https://assets.st-note.com/production/uploads/images/176118027/rectangle_large_type_2_6925a530b9535fac27b68f9e71d09d49.png?fit=bounds&quality=85&width=1280" /> <a href="https://note.com/ioridev/n/n5525b1cabc5c"></a> </div> ~~~ 時代の流れが速い ~~~ ## テック大手への信頼感、米10代若者の間で急落 AIめぐり不信高まる(Forbes JAPAN) - Yahoo!ニュース <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://s.yimg.jp/c/icon/s/bsc/2.0/favicon.ico" /> <span class="link-card-v2-site-name">Yahoo!ニュース</span> </div> <div class="link-card-v2-title"> テック大手への信頼感、米10代若者の間で急落 AIめぐり不信高まる(Forbes JAPAN) - Yahoo!ニュース </div> <div class="link-card-v2-content"> 米国の10代若者たちの間でテック大手に対する信頼が着実に失われていることが、子どもの安全なハイテクメディア利用を支援する米NPO、コモンセンス・メディアの最新報告書から明らかになった。米ティーン ... </div> <img class="link-card-v2-image" src="https://newsatcl-pctr.c.yimg.jp/t/amd-img/20250224-00077343-forbes-000-1-view.jpg?exp=10800" /> <a href="https://news.yahoo.co.jp/articles/0b7ea8b316c6673ec734f7e69b5df4f833daa292"></a> </div> ~~~ 分かるなあ。。AI推しだしてる会社がウサンクサクミエテシマウあれ。 話はそれるけど、個人的にクリエイティブはプロセスとして自身のスキルアップが大事だと思ってて、成果物そのものにはそこまで関心なかったりする。欲しいモノは大体今の世の中なら大抵ある。 ~~~ ## Claude 3.7 Sonnet and Claude Code <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://www.anthropic.com/images/icons/favicon-32x32.png" /> <span class="link-card-v2-site-name">www.anthropic.com</span> </div> <div class="link-card-v2-title"> Claude 3.7 Sonnet and Claude Code </div> <div class="link-card-v2-content"> Today, we’re announcing Claude 3.7 Sonnet, our most intelligent model to date and the first hybrid reasoning mod ... </div> <img class="link-card-v2-image" src="https://cdn.sanity.io/images/4zrzovbb/website/9b52e961f8f275e21e75c477c99672abd13fe66b-2400x1260.png" /> <a href="https://www.anthropic.com/news/claude-3-7-sonnet"></a> </div> ~~~ 3.5も好きなのでこれは期待。Copilotでモデルが提供されるのを待つか…アカウントつくるか悩むところ。 ~~~ ## 現実世界にさようなら。「VRChat」を今さら始めたら,あっという間に美少女に堕ち,100万円近く飛んでいった <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://www.4gamer.net/favicon.ico" /> <span class="link-card-v2-site-name">4Gamer.net</span> </div> <div class="link-card-v2-title"> 現実世界にさようなら。「VRChat」を今さら始めたら,あっという間に美少女に堕ち,100万円近く飛んでいった </div> <div class="link-card-v2-content">  今さら「VRChat」を始めたところ,このVR SNSに生活が乗っ取られ,あっという間に100万円近くを使って,いろいろな買い物をしていた。ヤバイ。これは本当にヤバイ。1人のVRChatterが沼に沈んでいくまで,いったい ... </div> <img class="link-card-v2-image" src="https://www.4gamer.net/games/794/G079439/20250227068/SS/006.jpg" /> <a href="https://www.4gamer.net/games/794/G079439/20250227068/"></a> </div> ~~~ こういう面白くてエモくて、しかも中身がある記事が素晴らしい。最近こういう記事減ってきたから余計に。 ~~~ ## 大人になって変わったこと(44) 【漫画】「またかよ…」新しくなる社用ツール <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://news.mynavi.jp/favicon.ico" /> <span class="link-card-v2-site-name">マイナビニュース</span> </div> <div class="link-card-v2-title"> 大人になって変わったこと(44) 【漫画】「またかよ…」新しくなる社用ツール </div> <div class="link-card-v2-content"> 年を重ねるごとに人の趣味や味覚、感じ方は変化していくものです。今回は大人になって変わったことをマイナビニュースのアンケート会員に調査し、その回答を4コマ漫画にしてお届け。つい"あるある"とうなずいてしまうものから、意外なもの ... </div> <img class="link-card-v2-image" src="https://news.mynavi.jp/article/otonaninatte-44/ogp_images/ogp.jpg" /> <a href="https://news.mynavi.jp/article/otonaninatte-44/DETAIL/"></a> </div> ~~~ リアルw ~~~ ## クリーンアーキテクチャはなぜフロントエンドに合わないのか - パンダのプログラミングブログ <div class="link-card-v2"> <div class="link-card-v2-site"> <img class="link-card-v2-site-icon" src="https://panda-program.com/favicon/android-icon-192x192.png" /> <span class="link-card-v2-site-name">パンダのプログラミングブログ</span> </div> <div class="link-card-v2-title"> クリーンアーキテクチャはなぜフロントエンドに合わないのか - パンダのプログラミングブログ </div> <div class="link-card-v2-content"> クリーンアーキテクチャはなぜフロントエンドに合わないのか </div> <img class="link-card-v2-image" src="https://og-image-generator.panda-program.vercel.app/posts/clean-architecture-and-frontend/image" /> <a href="https://panda-program.com/posts/clean-architecture-and-frontend"></a> </div> ~~~ 途中でビジネスロジックの話に主眼が移ってたので『ん?』と思ってしまったけど、タイトルは『クリーンアーキテクチャ』に言及してるので、そこは分かる。最後まで読めばフォローはされてる。 ~~~ # 📚New Notes - [[Deno.readTextFileSync]] - [[GLightbox]] - [[Lightbox]] - [[Markdownのコメントアウトで引用ブロックの切り替え (nvim-comment)]] - [[MkDocs GLightbox]] - [[ウェブワーカー]] - [[エディタの全文字列を置換 (Obsidian)]] - [[エディタの文字列を複数個所それぞれ置換 (Obsidian)]] - [[メインスレッド (JavaScript)]] - [[引用ブロック (Markdown)]] - [[日本語で回答 (CodeCompanion)]] - [[👩‍🏫Denoはイイゾ]] - [[📗TDQ-022 非同期処理はなぜ生まれたのか]] - [[📝ObsidianのVimモードでuやCtrl+rによるundo,redoが期待通り動かない]] - [[📰2025年8週 Weekly Report]]