# 🗞️Topics
今週は画像の扱いについて、[[Obsidian]]([[Minerva]])と[[Neovim]]共に環境を強化しましたので、それに関するトピックスを何点か紹介します。
## [[OGP]]以外の画像を[[AVIF]]に変更
半年強前に一度却下した[[AVIF]]を、条件付きで採用するようにしました。
<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">
💿MIN-0039 OGP以外の画像ファイルにはAVIFを使う
</div>
<div class="link-card-v2-content">OGPにはWebPを引き続き使うことを条件に、ファイル内の画像はAVIFにする。ネックだったコンバート速度が大きく改善され、macOSのRetinaディスプレイ対応により、ファイルサイズ削減の重要性が増したため。ImageMagicKの `-quality` は `35` を推奨とする。</div>
<img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/minerva-adr3.webp" />
<a data-href="💿MIN-0039 OGP以外の画像ファイルにはAVIFを使う" class="internal-link"></a>
</div>
%%[[💿MIN-0039 OGP以外の画像ファイルにはAVIFを使う]]%%
## Obsidianの画像環境改善
### クリップボードの画像をAVIFに変換して挿入
[[🦉Carnelian]]に新しいコマンド `Paste clipboard as AVIF` を追加しました。クリップボードに[[PNG]]画像がコピーされている状態で実行すると、[[AVIF]]に変換してから画像ファイルを挿入します。
<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">
feat(carnelian): Paste Clipboard as Webp と Paste Clipboard as AVIF を追加 · tadashi-aikawa/carnelian@778635b
</div>
<div class="link-card-v2-content">
Obsidianのプラグイン機能を使って、IncredibleなObsidian体験を実現するための機能を提供する宝石。紅玉髄(カーネリアン)。 - feat(carnelian): Paste Clipboard as W ...
</div>
<img class="link-card-v2-image" src="https://opengraph.githubassets.com/6997ae2ed5757400bcc02d7e292899aefff4c30bfd75057f586fabcc765daf50/tadashi-aikawa/carnelian/commit/778635bc4aa52dbd80b0a66460da70ba37d38c4a" />
<a href="https://github.com/tadashi-aikawa/carnelian/commit/778635bc4aa52dbd80b0a66460da70ba37d38c4a"></a>
</div>
当初は[[WebP]]に変換しようとしていたので、[[WebP]]のクチもあります。[[🦉Carnelian]]は自分用なので、設定とか前提条件(要 [[ImageMagick]])はベタ書きです。
![[20250609_07_46_39.mp4]]
`<space>p` で貼付けできるよう [[Notes/obsidian.vimrc.md|obsidian.vimrc]] にも設定を追加しています。
```
exmap pasteClipboardAsAVIF obcommand carnelian:carnelian_paste-clipboard-as-avif
nmap <Space>p :pasteClipboardAsAVIF<CR>
```
## Neovimの画像環境改善
### クリップボードの画像をAVIFに変換して挿入
[[Neovim]]でも同様のことができるように、[[img-clip.nvim]]を導入しました。
<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">
📜2025-06-08 img-clip.nvimを使ってpng画像をAVIF画像として挿入できるようにする
</div>
<div class="link-card-v2-content">NeovimでMkDocs用ドキュメント作成時、クリップボードのPNG画像をWebPやAVIFに変換しMarkdownへ挿入する作業が煩雑だったため、img-clip.nvimを導入した。dir_pathや拡張子、変換コマンドを設定し、画像の自動保存や品質調整、Markdown形式でのリンク挿入を実現した。</div>
<img class="link-card-v2-image" src="https://publish-01.obsidian.md/access/35d05cd1bf5cc500e11cc8ba57daaf88/Notes/attachments/activity.webp" />
<a data-href="📜2025-06-08 img-clip.nvimを使ってpng画像をAVIF画像として挿入できるようにする" class="internal-link"></a>
</div>
%%[[📜2025-06-08 img-clip.nvimを使ってpng画像をAVIF画像として挿入できるようにする]]%%
pathやlink形式周りで、以下のプラグインやツールすべてと整合性をとるのに苦労しました。
- [[snacks.image]] (preview)
- [[blink.cmp (Neovim)|blink.cmp]]
- [[obsidian.nvim]]
- [[MkDocs]]
[[Obsidian]]と同様、こちらも `<space>p` にキーバインドしています。
![[20250609_08_03_38.mp4]]
### 画像プレビューをフローティングウィンドウに変更
画像プレビューには[[snacks.image]]を使っていますが、インラインプレビューではなく[[フローティングウィンドウ (Neovim)|フローティングウィンドウ]]での表示に設定を変更しました。
```lua
opts = {
image = {
doc = {
-- インラインではなくフローティングにする
inline = false,
},
},
}
```
変更前の表示はこんな感じでした。
![[2025-06-09-08-24-40.avif]]
変更後の表示は以下動画のとおりです。
![[20250609_08_22_39.mp4]]
[[フローティングウィンドウ (Neovim)|フローティングウィンドウ]]の方が画像を大きく表示できる(表示しても編集を妨げない)というメリットはありますが、カーソルをあわせなければ内容を確認できません。どちらが自分にマッチするかはしばらく使ってみて見極めてみます。
アイコンやロゴ表示ならインラインの方がいいのですが、画面のスクリーンショットとなるとどうしてもサイズが欲しくなります。直接画像ファイルに移動して確認もできますが、何度か表示していると表示されなくなってしまう([[snacks.image]]のバグ?)ので、それならば[[フローティングウィンドウ (Neovim)|フローティングウィンドウ]]の方がいいと判断しました。
## オススメNeovimプラグイン動画
[[👤linkarzu]]氏が2ヶ月前に配信された以下の[[Neovimプラグイン]]紹介動画が非常に参考になりました。
[[img-clip.nvim]]の存在は前から知っていましたが、導入しようと決めたのはこの動画を見たからです。[[oil.nvim]]より[[mini.files]]を推されていたので、[[mini.files]]も試してみましたが私にはあいませんでした。
他に紹介されていたプラグインは大体導入済みだったので、自身の環境が時代についていけているかを見直す良い機会にもなりました。
# 👀Reading
## Claude Code を利用しようと思っているのでvimmer が住む村に帰ろうと思います。 - じゃあ、おうちで学べる
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://syu-m-5151.hatenablog.com/icon/favicon" />
<span class="link-card-v2-site-name">じゃあ、おうちで学べる </span>
</div>
<div class="link-card-v2-title">
Claude Code を利用しようと思っているのでvimmer が住む村に帰ろうと思います。 - じゃあ、おうちで学べる
</div>
<div class="link-card-v2-content">
はじめに 前回、「NeovimをCursorのように進化させる - yetone/avante.nvim の導入」を書いた。あの記事では、まるで自分だけの剣を鍛え上げていくように、エディターと共に成長していくPDEの哲学につ ...
</div>
<img class="link-card-v2-image" src="https://ogimage.blog.st-hatena.com/8454420450094081900/6802418398452607898/1748669195" />
<a href="https://syu-m-5151.hatenablog.com/entry/2025/05/30/180912"></a>
</div>
~~~
エモくていい。触発されて自分も書きたくなった。
~~~
## marp.nvimを開発してCursorから完全移行した話 - じゃあ、おうちで学べる
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://syu-m-5151.hatenablog.com/icon/favicon" />
<span class="link-card-v2-site-name">じゃあ、おうちで学べる </span>
</div>
<div class="link-card-v2-title">
marp.nvimを開発してCursorから完全移行した話 - じゃあ、おうちで学べる
</div>
<div class="link-card-v2-content">
なぜmarp.nvimが必要だったのか 前回の記事でClaude Codeに移行し、Neovimに完全回帰することを決めた。コーディング、ドキュメント作成、設定ファイルの編集――すべてが再びターミナルで完結するようになった。 ...
</div>
<img class="link-card-v2-image" src="https://ogimage.blog.st-hatena.com/8454420450094081900/6802418398453140199/1748670940" />
<a href="https://syu-m-5151.hatenablog.com/entry/2025/05/31/105405"></a>
</div>
~~~
普段、marp cli --watchを起動して、Neovimで編集しつつブラウザで確認してるけど、それと比べて嬉しい点が何か気になる
~~~
## 2025年6月にClaude Codeが突然話題になった理由をまとめる
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://static.zenn.studio/images/logo-transparent.png" />
<span class="link-card-v2-site-name">Zenn</span>
</div>
<div class="link-card-v2-title">
2025年6月にClaude Codeが突然話題になった理由をまとめる
</div>
<img class="link-card-v2-image" src="https://res.cloudinary.com/zenn/image/upload/s--R68sevZ7--/c_fit%2Cg_north_west%2Cl_text:notosansjp-medium.otf_55:2025%25E5%25B9%25B46%25E6%259C%2588%25E3%2581%25ABClaude%2520Code%25E3%2581%258C%25E7%25AA%2581%25E7%2584%25B6%25E8%25A9%25B1%25E9%25A1%258C%25E3%2581%25AB%25E3%2581%25AA%25E3%2581%25A3%25E3%2581%259F%25E7%2590%2586%25E7%2594%25B1%25E3%2582%2592%25E3%2581%25BE%25E3%2581%25A8%25E3%2582%2581%25E3%2582%258B%2Cw_1010%2Cx_90%2Cy_100/g_south_west%2Cl_text:notosansjp-medium.otf_37:Oikon%2Cx_203%2Cy_121/g_south_west%2Ch_90%2Cl_fetch:aHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzFlNjI2MjNlZTQuanBlZw==%2Cr_max%2Cw_90%2Cx_87%2Cy_95/v1627283836/default/og-base-w1200-v2.png" />
<a href="https://zenn.dev/oikon/articles/adac12ea9e839b"></a>
</div>
~~~
> しかし、3月〜4月にかけてライバルのOpenAI o3とGemini 2.5 Proがリリースされ、Anthropicはリリーススピードで遅れをとった印象が否めなかったです。
個人的にはコーディングに限ってはGemini 2.5 Proやo3よりもClaude 3.7 Sonnet の方が上だったと思ってはいるけど。コーディング以外だとo3はやはり強い。
~~~
## 📘さようならTemplater
<div class="link-card-v2">
<div class="link-card-v2-site">
<img class="link-card-v2-site-icon" src="https://masaki39.github.io/static/icon.png" />
<span class="link-card-v2-site-name">masaki39.github.io</span>
</div>
<div class="link-card-v2-title">
📘さようならTemplater
</div>
<div class="link-card-v2-content">
ObsidianのTemplaterから移行し、Gemini連携やpCloudアップローダー、WebP変換など画像処理に特化した機能を備えた自分専用の自作プラグイン「Crystal」の説明と実装機能の紹介。 ...
</div>
<img class="link-card-v2-image" src="https://https//masaki39.github.io/%F0%9F%93%98%E3%81%95%E3%82%88%E3%81%86%E3%81%AA%E3%82%89Templater-og-image.webp" />
<a href="https://masaki39.github.io/%F0%9F%93%98%E3%81%95%E3%82%88%E3%81%86%E3%81%AA%E3%82%89Templater"></a>
</div>
~~~
感化されて pasteClipboardToWebp をつくりはじめた。
前提: PNG画像がクリップボードに入ってる
操作: pasteClipboardToWebp
1. クリップボード画像データをwebpに変換し、50% resize
2. attachmentsディレクトリにwebp画像ファイルを作成
3. 2へのリンクを挿入
masaki39.github.io/%F0%9F%93%98...
~~~
# 📚New Notes
- [[Colima]]
- [[Retinaディスプレイ]]
- [[Terminal for Obsidian]]
- [[YouTube]]
- [[コマンドIDを確認 (Obsidian)]]
- [[カスタムテーマを設定 (delta)]]
- [[クリップボード]]
- [[ステータスバー (VSCode)]]
- [[特定ファイルやディレクトリを圧縮対象から除外 (7zip)]]
- [[画像をリサイズ (ImageMagick)]]
- [[👤linkarzu]]
- [[💿MIN-0039 OGP以外の画像ファイルにはAVIFを使う]]
- [[💿OBS-0004 Obsidianのターミナルプラグインを使う]]
- [[💿VIM-0004 MkDocsの画像表示はMarkdownリンクを使う]]
- [[📓画像管理ルール]]
- [[📘目指せ二刀流！ VSCodeをNeovim色にコーディネートしてみた -後編-]]
- [[📜2025-06-08 img-clip.nvimを使ってpng画像をAVIF画像として挿入できるようにする]]
- [[📝Shottrでキャプチャ撮影後にエディタを開くと画像のズームサイズが小さすぎる]]
- [[📝brew services start colimaがInput Ouputエラーになる]]
- [[📝snacks.imageでwikiリンク形式の画像リンクがプレビューされない]]
- [[📰2025年22週 Weekly Report]]