ブラウザ履歴をブックマークに無期限保存するchrome拡張機能｢Eternal-History｣をストア公開しました

Claude Codeのお陰で積ん趣味プロが一週間で片付いた - MANA-DOT でも紹介したChrome拡張機能をストア公開したので紹介します。

Eternal History on bookmarks - Chrome ウェブストア

このChrome拡張機能は Chromeの90日しか保持できない履歴を永続化 し、検索で使いやすくする拡張機能です。以下のような特徴があります。

• Chromeのhistory APIをもちいて、 すべての履歴をブックマークに保持 する
  • 通常、Chromeの履歴は90日で消えてしまいますが、ブックマークに保存することで永続化します
• 新しいタブを置き換え、スクリーンショットのような 履歴閲覧 & 検索UIを提供
  • ブックマークに保存した履歴を効率的にアクセスするためのUIを提供します
  • site: 、 - などのクエリを用いた検索ができます
  • 検索クエリを保存して、ショートカットとして利用することができます

一度開いたドキュメントへのアクセスを効率化するための拡張機能となっています。 会社で｢ドキュメントが色んなところにあり、一度見たあのドキュメントが見つからない！探すのに時間がかかる！｣ということが頻繁にあるため、その解決策として作りました。

もともと個人で作っていて作りかけで放置していたものを、Claude Codeを使って完成させたものになります。

【小ネタ】AIコーディングする場合、mainへのコミット禁止hookを書いておくと捗る

先週 Claude Codeのお陰で積ん趣味プロが一週間で片付いた - MANA-DOT という記事で、 Claude Code で趣味プロを久々に楽しんでいることを書きました。以降も自宅ではClaude Codeを使いまくっていますし、会社ではCopilot Agentを使っています。これらAIコーディング時に husky などで以下のようなpre-commitでのmainブランチへのコミットを防止するとはかどります。

branch=$(git rev-parse --abbrev-ref HEAD)
if [ "$branch" = "main" ]; then
  echo "Direct commits to main branch are not allowed."
  exit 1
fi

AIコーディングをしてるともはやブランチはコミット直前にAIに切らせるほうが事前に人間が名前を考えて切るよりも楽なのですが、この場合AIが作業中に勢い余ってmainにコミットしてしまうことがあり、これを防ぐためのhookです(一回、そのまま勝手にリモートのmainにpushされてしまい、それに気づいたAIがforce pushまでしようとしていたことがあった)。 もちろん作業開始時に作業内容を伝えてまずブランチを切らせてもいいですが、もはやそんな手間すら省略したいということです。

このhookを入れておけばAIはコミットが必要なときまずmainにコミットしようとしますが失敗し、このエラーメッセージを見て｢ブランチを切らないといけない｣と勝手に気づいてくれるため、そのまま適切な名前のブランチを切ってくれます。機械的に守れるだけでなく人間の手間が一つ減るので、考えることとやることの両方が減るのでおすすめです。

人間がどうしてもmainにコミットしたいとき

git commit --no-verify をすればpre-commitの実行をスキップできますが、 npm version patch など内部でコミットを行うコマンドの場合に困ります。huskyの場合は環境変数 HUSKY に 0 を指定することでもスキップできます。

HUSKY=0 npm version patch

自分はgithub actionsでバージョンコミットを作りたいときなどこの指定をしています。

このように、このhookを入れてもどうしても必要な場合の抜け道も存在するため、大きなデメリットにはなりづらいので入れ得です。

Claude Codeのお陰で積ん趣味プロが一週間で片付いた

ここ1～2週間ほど Claude Code が非常に盛り上がっています。 かく言う自分もこの火曜日から利用をはじめ、その自走力の高さに惚れ込んで毎日使い倒しています。 どのくらい使うかわからなかったのでクレジット課金にしていたんですが、追加購入しまくっててやばい。 というかここ数年平日は疲れ果てて趣味プロとか全然できなくなってたんですけど、Claude Codeのおかげで平日から趣味プロが捗りまくってます。すごい。

趣味プロというのはそもそも、最初にアイデアを思いついて熱量があるうちはいいんですが、次第に熱量が落ちて未完成のままGithubリポジトリの隅っこで埃を被るものだと思うんですよね。 自分はいくつもそういう状態のプロダクトが眠っているんですが、それらがここ一週間の間にClaude Codeの力で｢とりあえず完成｣と呼んでも良い状態まで持って行けています。

この記事ではそんなAIの力で完成した趣味プロダクトたちを紹介します。

2024年のtipsまとめ

仕事中などに気づいたプログラミングのtipsを個人のnotionにまとめているものです。

2024年頭に｢数ヶ月おきにnotionに溜まったtipsをブログ記事にしよう！｣と思っていたんですが、全然できてなかったので年末にまとめて放出します。

2024年のskeb･ドット絵活動まとめ

今年のskeb活動まとめです。去年は｢2024年はドット絵も描いていって創作活動も慣らしていこう｣と思っていたのですが果たして･･･？

去年: 2023年のskeb活動まとめ - MANA-DOT

skeb: https://skeb.jp/@manaten

2024年1月

昨年12月のコミッションを受けて、リクエストが何通か届いていたため、年末～年始休みに複数件承りました。

Teddy様

ヤンデレっぽい獣耳の男の子です。無邪気な笑顔が似合いそうだったので、笑顔多めで。 左右のぬいぐるみは少ないピクセル数ではうまく描けたのではないのでしょうか？

alessa様

白基調のパーカーの可愛らしい女の子です。参考イラストが白系の色で固められており、ドット絵でどう表現するかで悩みました(ある程度色のメリハリを付けたほうが見栄えが良くなる、という持論)。

alessa様からは追加でもう一件リクエストを頂きました。ありがとうございます。

Ixie Nova様

スペースドラゴンのvtuberさん。宇宙を思わせる髪のグラデーションが特徴的だったので、このサイズでどう表現するかに悩んだ記憶があります。このフォーマットは主線の黒でメリハリつけるスタイルなので、濃い髪色もやや苦手だなと感じました。 キャラの造形の良さでカバーできている印象。

狼谷 いのた様

狼のvtuberさん。銃を撃つモーションとマイクラしてるモーションがリクエストでした。 灰色の髪や動きの大きいモーションに苦戦した記憶です。

EC様

火と水を操れるお医者さんのキャラクターとのことです。 火と水と聞いてエフェクトを描きたくなったので、設定通り火と水を合わせて回復の元素を作る様子を描きました。

匿名様

もう一件、狐のキューピットの女の子の匿名リクエストをいただいています。

2024年1月~2月ころ

自分のオリキャラ

skebの依頼の参考用に作ろうとした、航海する海の魔女というイメージの自分のオリキャラです。

ちびキャラは完成してるのですが、もう一枚全身絵も線画状態であり、｢ちびキャラアニメと全身絵のいずれかをリクエスト可能！｣みたいにしたかったんですが、1月のテンションが切れ、仕事も忙しくなってきて、未完のまま終わりました。

実は結構前からこのサイト自体をリニューアルする構想があり、このキャラには役割があるんですが、それも未達となります。悲しい。

さいごに

去年の活動は以上です。

なんと、1月はやる気があったのに、正月休みが開けると失速して、そのまま再開できませんでした。 ｢参考用にオリキャラを描こう｣までは良かったんですが｢ちびキャラ版｣｢全身版｣両方用意しようとしたのが敗因に思えます。 ただ、仕事が忙しくなってきたのもそのあたりなのでやむを得ないところもあります。

またskebの方も｢一度投稿するとそれを見てくださった方たちから何件かリクエストが来る｣という鼠算式にリクエストが増えていく現象が発生し、途中受けきれなくなってリクエスト受付を閉じてしまいました。加えて閉じてる間も｢リクエスト再開待ちがXX件あります！｣のようなskebからのメールが来続けるため開けづらくなってしまいました。skebは受けたいリクエストだけ受けるものなのかもしれませんが、断るのが苦手な自分には難しい世界でした。

ただ、仕事も若干余裕が出てきたため、来年はぽつぽつリクエスト再開をして月1枚くらいのペースで描けたらいいな～とか思っています。 来年の自分がんばれ。

2024年のmanatenのフロントエンド

この記事は？

manatenが2024年末現在でフロントエンド(周辺)でアプリケーション開発をするときに、利用することが多い技術を概要や理由付きで挙げていきます。 フロントエンドの技術は移り変わりが激しいため、現在のトレンドと言うより、あくまでmanaten自身が今何をどう思って使っているかを備忘録的に記載しています。

去年: 2023年のmanatenのフロントエンド - MANA-DOT 去年も書いているため、今年は差分の記載となります。

自宅のモニタをついにウルトラワイドモニタした & 内蔵KVMスイッチのレビュー

Dellの34インチUWQHD(3440x1440)モニタ、 P3424WE を購入しました。

もともと デスク周り2022 - MANA-DOT で書いた通り、27インチのWQHDモニタを愛用していましたが、前々から作業領域的にはWQHDが最適だと思うものの作業領域外に追加の情報(figmaのデザインカンプだとか、ビルド後のプレビューだとか)を表示したいと思うことが多々あり、UWQHDサイズのモニタがほしいと思っていた(加えて会社のモニタはUWQHDであり満足していた)ための購入となります。

今回モニタ購入の際の検討事項の一つが、｢内蔵KVMスイッチの出来｣であったため、本エントリでは特にモニタ内蔵のKVMスイッチ周りについて記載をしようと思います。