このサイトにおいてタイトルは一般的に{{ 記事のタイトル }} - osumiakari.jpとなっており、これがHTML文書の中の<title>タグの中に埋め込まれています。こうしたものを共有する際にわざわざ探し回るのは面倒ですし、FirefoxはWeb Share APIに対応する気がなさそうなこともあって、WebページをSNSに共有することは面倒なものとなっております。
また、ユーザーによって多様な需要があるはずなのに、共有できるテキストはワンパターンしかないというところも微妙に嫌なポイントです。こういった問題を解決するために「 sharecane 」という名前のブラウザ拡張機能を作成しました。その背景と開発過程について簡単に書いていこうかと思います。
結論
titleタグを探してコピペするのが面倒なのでそれを不要にする+αな拡張機能を作った- Claude Code様によってそれなりに爆速で開発できた
- ソースコードは公開中、そのうち各拡張機能ストアでインストールが可能になるはず
共有
私はFediverse上で「OApicks（@[email protected]）」という名称で、Fediverse内にある「おっ」と思った投稿やFediverse外のニュースを垂れ流しにしています。このうち後者においてはFediverse外からの投稿となりますので、必然的に投稿を作成する必要があります。この際にGIGAZINEなどでは「この記事のタイトルとURLをコピー」ボタンがあるので極めて楽なのですが、多くのサイトではそんなボタンは無く先述の通り煩雑かつ面倒な作業を強いられてしまいます。
基本的に私は手書きで共有をする際に「タイトルタグの中身を1行目、改行して2行目にそのURL」といったフォーマットで書いています。それ以外の場合はiPhoneの共有機能をそのまま使っています（NewsDigestアプリ由来のものなど、愛用しています）。この手書きで投稿を作成するといった作業はまるで自動化できそうなのにそうは問屋が卸させてくれないので、何とか問屋となるために（？）、ブラウザの拡張機能を自分で作ってみることにしました。
Claude Code
このブログを11tyに載せ替えたときに使用したClaude Codeのサブスクリプション期間（より正確に言えばClaude Proプランの期間）がまだ残っていたので、Claude Code様に頼りながら開発することとしました。WXTの公式サイトに従いnpx wxt@latest initと細かい設定の調整を行い、以下のような文言を投げました。
私はブラウザから情報を共有する際に、固定したフォーマットで「シェア」をする必要があることを問題だと感じています。このため、WXTを活用した様々なフォーマットで共有をするためのブラウザ拡張機能を作成しようと考えています。この際、ユーザーはポップアップにおいてmustache記法を用いてコピーするものを変えることが出来ると望ましいです。例えば「{{ title }}
{{ url }}」といったものをポップアップ中のテキストボックスで指定した場合、https://www.osumiakari.jp/articles/20250729-yamadalinesuspension/の場合ですと、「山田線が上米内駅～川内駅間で47日間の区間運休を10月6日から実施 - osumiakari.jp （強制改行） https://www.osumiakari.jp/articles/20250729-yamadalinesuspension/ 」といったテキストが生成され、ポップアップ中でコピーできるといった機能が欲しいです。CSSの装飾は後で付けますので、不要です。 think hard
実はほぼこれによって4分程度でsharecaneの骨組みは出来てしまっていました。その後細かい調整を2時間ほどかけてえっちらおっちら進めていきましたが、めちゃくちゃ引っかかるところはなく、スムーズに進めることが出来ました。
基本的に引っかかった点としてはBulmaの適用とPurgeCSSのインストールに関することが大半で、これも私が素のViteにおける開発経験に乏しいことからのものでした。またClaude Codeがmetaタグのすべてを取得していると見せかけてごく一部しか取得していなかったり、それを全力で嘘をつきながら主張してきたりもしました。
それはソースを見ればある程度気づけることなので助かりましたが、気づかないままで進めていたら面倒なことになっていたと思います。これに関連して後ろに付けている謎のワード「think hard」についても触れておきたいと思っています。このワードはClaude Sonnet 3.7の時代がある機能で（つまりSonnet/Opus 4を使用するClaude Code特有ではない）、AI様に「思考」を促すことが出来るものです。この機能はプロンプト中に指定ワードをきちんと埋め込まないと発動しないらしく、知らないとなかなか活用できない機能ですが、その分なかなか便利です。勝手に自分の書いたコードについて内省もどきを行ってくれ、勝手に修正してくれるので、こっちの負担を気持ち小さくしてくれます。
ちなみにこれは普段のClaudeとの会話においても使用可能で、思考中のログを見たりすると色々考えてくれているのを観察することが可能で、AIも大変に健気だなあと感じています。なお、Claude Opus 4でこれを行うと一瞬でレートリミットに至るので、Claude Maxプランに月あたり200ドルも課金している人以外にはおすすめ出来ません。
ロゴ
ちなみにロゴは自転車に乗ったペリカンのSVGすらまともに作れないAIに描かせてもまともなSVGファイルが出ないであろうと思っていたので、私がInkscapeを使って感動のものを作成しました。名前が「sharecane」、すなわち「共有する（時に使える便利な）杖」という意味なので、お年寄りが使っている杖をイメージして5分で作りました。
友人に聞いたところ「ハンマーにしか見えない」という極めて順当な意見をいただいたのですが、人間に備わっている「スルーするスキル」を最大限に活用することとしました。AIの活動の幅が広がる現在だからこそ、人間の出来ることは最大限使っていきたいですからね。
機能
詳しくはREADMEファイルを見てほしいのですが、基本的に以下の機能を備えています。
- デフォルトで「タイトルタグの中身を1行目、改行して2行目にそのURL」といった形のテキストをワンクリックでコピー可能
- デフォルトで「
{{title}}<br>{{url}}」が入力されています
- デフォルトで「
title、url、domainの基本3種類に加えて、定義してあるmetaタグを利用可能- より具体的には
<meta name="ほにゃらら">と<meta property="ほにゃらら">の双方を取得しており、そこに定義されているcontentが取得できるようになっています - JavaScriptの仕様の関係上、セミコロンなどの記号の一部はアンダースコアに置き換えて使用するという形を取っています
- より具体的には
- タグを組み合わせるだけではなく、固定の文言を入れることが可能
- 全ての機能がローカルで動作
- 英語に切り替え可能
リリースすることを優先したので、まだまだ機能不足ではありますが取り敢えず必要十分な機能が備わっているといえるかと思います。贅沢を言えばショートカットキーなどでコピー出来るようにしたかったのですが、思ったより面倒だったので実装を見送っています。
最後に
前回の技術関係の記事: Nuxt/Contentから11tyへ切り替えた
個人的に欲しかった機能をサクッと作成するのに、AIコーディングツールというのはきわめて便利で、重い腰を爆速で動かすことが可能となっています。とはいえ意外としょうもないミスをまだまだしてしまうので「Shift+Tab」を押しまくり芸人になるにはまだまだといった感じがします。押しまくり芸人をやってますとすぐにレートリミットも来てしまいますし。
このsharecaneはGitHub上でソースコードが公開されています。また、そのうち各種拡張機能ストア（Firefox AddonsとかChromeウェブストアとか）で公開されるはずなので、いい感じにインストールして使っていただければ幸いです。
