title: cosharetで記事をシェアすること author: Amane Katagiri summary: cosharetをつかう（でつくる） date: 2024-10-14T23:04:00+09:00 category: tech license: CC BY 4.0 rating: sfw ai_summary: 「cosharet」は、Fediverseを含む様々なSNSにリンクを共有できる、プライバシー重視のオープンソースツールです。公開1周年を記念したこの記事では、ブラウザ完結型で動作する仕組みや、ブックマークレットとしての活用法、ウェブサイトへのシェアボタン設置方法を詳しく解説しています。自由なカスタマイズ性と高い透明性が特徴で、自分のサイトへの導入や日常的な共有に便利なツールです。 ai_keywords: cosharet, SNS共有ツール, Fediverse, プライバシー保護, ブックマークレット, オープンソース, クライアントサイド動作, シェアボタン, カスタマイズ, 1周年記念 # はじめに みなさんは、[cosharet: COSmo SHARE Tool](https://cosharet.pages.dev/)を知っていますか？　cosharetは、Fediverseを含めた様々なSNSにウェブサイトのリンクを共有できる小さくて便利なツールです。完全にクライアントのみで動作して、いつでも自由に利用できて、そしてあなたのプライバシーを守ります。 私が[あまねけ！](/)にcosharetを導入してから1年が経ちました。あまねけ！で記事のシェアボタンをクリックするとcosharetのシェア画面が開きます（この記事もそうです！）。さらに、気に入った記事を[Fedibird](https://fedibird.com/)や[X (formerly Twitter)](https://x.com/)に共有する時も、これまでずっとcosharetのブックマークレットを使っています。 Fedibirdでは[#cosharet](https://fedibird.com/tags/cosharet)タグ付きで投稿しているので、これまでにcosharetを通じてどんな記事がシェアされてきたかを見ることができます。 ![cosharetを使ってFedibirdにシェアされた投稿の一覧](/images/cosharet-anniversary/fedibird-cosharet.png){width=750 height=500} 今回は、cosharetのv0.1.0の公開から1年が経った記念として、cosharetとはなにか、どういう利点があるのか、いつどのように使うのかについてまとめていこうと思います。 [TOC] # cosharetとはなにか ## どんな仕組み？ cosharetがやっていることは非常に簡単です。渡されたパラメータから共有するウェブサイトのURLと説明用のテキストを取り出して、各SNSでシェアするためのURLに変換して開きます。この処理は全てブラウザ上で完結し、サーバは静的なHTML/CSS/JavaScriptのファイルを配信するだけです。cosharetが各SNSへの書き込み権限を保持したり、利用者が閲覧しているURLを収集・分析することはありません。 ![cosharetの共有画面例](/images/cosharet-anniversary/cosharet-share.png){width=750 height=500} 例えば、X (formerly Twitter)でポストを投稿する画面を表示するには、 `https://x.com/intent/post` というURLに `text` と `url` パラメータを付けて開きます。以下のリンクをクリックすると、example.comをシェアするダイアログが表示されます。 [https://x.com/intent/post?text=nice example web site 😎&url=https://example.com/](https://x.com/intent/post?text=nice+example+web+site+%F0%9F%98%8E&url=https%3A%2F%2Fexample.com%2F) ![Twitterの投稿画面例](/images/cosharet-anniversary/twitter-intent.png){width=750 height=420} cosharetは、このような各SNS用のシェアリンクを生成する単純なプロキシです。共有先のSNSがURLを通じて投稿画面を表示できる機能さえ持っていれば、ごく簡単な変換ルールを実装するだけで対応できます。逆に言えば、ユーザーが各SNSで送信ボタンをクリックしなくても投稿を書き込めるマルチポストのような動作は実現できません。 ## 何ができる？ cosharetでは、主に2つの利用シーンを想定しています。 まずは、自分のウェブサイトにシェアボタンを設置したいケースです。cosharetに適切なパラメータを付与して開けばすぐにシェア画面を表示できるので、ボタン風のデザインに仕立てた `a` タグを1個置くだけでシェアボタンが完成します。途切れのないユーザー体験を提供するために、プリセットのカラーテーマやシェア元のウェブサイトに応じた細かい色設定を指定することもできます。 もう1つは、自分が閲覧しているウェブサイトをSNSにシェアしたいケースです。こちらの場合は、ブックマークレットを通じて現在見ているサイトのURLとタイトルをcosharetに引き渡します。ブックマークレットは主にPC環境から利用するものですが、スマホからでもある程度の利用に耐えるようわずかに工夫しています。こちらも、必要なら自分が好きなカラーテーマを設定した状態でシェア画面に移動できます。 なお、現在対応しているウェブサービスは以下の通りです。 - Mastodon系の分散型SNS実装（ `/api/v1/instance` が `version` を返すもの） - Misskey系の分散型SNS実装（ `/api/meta` が `version` を返すもの） - X (formerly Twitter) - はてなブックマーク - Facebook - LINE - Wayback Machine それぞれのサービスで投稿画面を表示するためのURLは今後変わることがありますが、仕様変更を発見しだいすぐに修正できるでしょう。 ## どんな利点がある？ cosharetは他のサービスよりも自由で使いやすく、開かれていて、プライバシーを重視しています。 まず、cosharetは[ソースコード](https://github.com/amane-katagiri/cosharet)を自由に利用できます。MIT Licenseでライセンスされているので、コードを自分好みに改変したり、別のドメインで同様のサービスをデプロイしたり、訪問者に広告を表示することさえも自由です。 cosharetの着想の元になった[donshare](https://donshare.net/)や[Misskey Share](https://misskeyshare.link/)はソースコードを利用できませんし、もちろん自分専用のサーバもデプロイできません。これらのサービスに全く不満がなければそのまま使えばいいのですが、私から見るといくつか欠点があります。共有時に #donshare や #misskeyshare という独自のアプリハッシュタグが強制的に付与されたり、広告が表示されたりしますし、自分が見ているウェブサイトを共有する機能もありません。あまねけ！での導入も考えると、新しいサービスを作るしかなかったというわけです。 また、cosharetはきめ細かいカスタマイズを簡単に行うことができます。例えば、シェアボタンを設置する際に元のウェブサイトのカラーテーマに合わせた共有画面を表示したり、ブックマークレットで表示する共有画面のカラーテーマを変更したり、よく使うSNSで素早くシェアできるようにする設定があります。donshareでは解除できなかったサービス独自のアプリハッシュタグ[^cosharet-hashtag]の付与についても、任意の設定項目として利用できるようになりました。 [^cosharet-hashtag]: cosharetでは #cosharet です。 そして、先述したとおりcosharetではURLや共有用のテキストを収集しません。設定内容の保存やURLの変換など、全ての処理はブラウザ上で完結します。cosharetはこの約束をより強固にするために、クエリパラメータ `?...` ではなくフラグメント `#...` を通じたパラメータの受け渡しにも対応しています。フラグメントは[RFC 7230](https://datatracker.ietf.org/doc/html/rfc7230)ではリクエストにおけるリソースの指定から除外される旨が明記されており、今日の一般的なブラウザでもそのように動作します[^brower-fragment]。そのため、cosharetが秘密裏にパラメータを収集しようとしても、フラグメントを明示的に送信でもしない限り実現できません。 [^brower-fragment]: [ウェブ上のリソースの識別 - HTTP | MDN](https://developer.mozilla.org/ja/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web#fragment) 以上の通り、cosharetは実用面・権利面・プライバシー保護面から見ていずれも優れたサービスになっています。 # cosharetを「つかう」 ## ブックマークレット [cosharet](https://cosharet.pages.dev/)をパラメータなしで開くと、以下のようなブックマークレットのカスタマイズ画面が表示されます。そのまま「cosharet」と書かれたボタンをブックマークバーにドラッグ・アンド・ドロップすると、閲覧中のサイトをcosharetでシェアできるブックマークレットを追加できます。 ![cosharetのブックマークレットカスタマイズ画面](/images/cosharet-anniversary/cosharet-bookmarklet.png){width=750 height=340} ブックマークレットの使い方は簡単です。シェアしたいウェブサイトを開いた状態でブックマークバーの「cosharet」をクリックすると、そのサイトのURLとタイトルを含んだ状態でcosharetが起動します。あとは好きなサービスを選んで「シェア」を押せば、使い慣れた素敵な投稿画面を表示できるでしょう。 ![cosharetの共有画面例](/images/cosharet-anniversary/cosharet-share.png){width=750 height=500} デフォルトの動作が気に入らなければ、以下の設定を調整できます。 - 表示テーマ: ブックマークレットから起動したcosharetのカラーテーマを変更します。 - ページにシェアボタンを追加する: ブックマークレット起動時の動作を調整します。 - このオプションが無効な場合は、すぐにcosharetを新しいタブで開きます。 - このオプションを有効にすると、まず起動したサイトの左上にcosharetを開くボタンを設置します。スマホからcosharetを呼び出せないケースを解消できる場合があります。 - ボタンをダークモードで表示する: ブックマークレットで設置するボタンのカラーテーマを調整します。 ## カスタマイズ 使い始めたばかりのcosharetは、まだあなた好みに調整されていません。特に、共有先のSNSリストには使わないサービスばかり並んでいるでしょう。ブックマークレットのカスタマイズ画面で右上の :gear: マークをクリックするか、共有画面を開いた状態で、共有先のSNS一覧を表示できます。 ![cosharetのサービス一覧画面](/images/cosharet-anniversary/cosharet-customize.png){width=750 height=520} この画面では、左下の「新しいインスタンスを追加する」ボタンからサービスを追加するか、既に追加されているサービスを :x: ボタンで削除することができます。さらに、右下の「その他の設定」ボタン（共有画面では :gear: ボタン）からも、細かな動作を調整可能です。 # cosharetで「つくる」 ## シェアボタン パラメータなしで開いた[cosharet](https://cosharet.pages.dev/)で「つくる」ボタンをクリックすると、以下のようなシェア用URLの生成画面が表示されます。必要な情報を入力して「このパラメータで開く」をクリックすると、パラメータが設定された状態のcosharetが新しいタブで開きます。このページのURLをコピーして、オリジナルのシェアボタンを設置しましょう。 ![cosharetのシェア用URL生成画面](/images/cosharet-anniversary/cosharet-builder.png){width=750 height=370} ```html このサイトをシェア ``` または、この生成機能を使わずに、例えば以下のようなフォームを利用してパラメータを指定することもできます。アクセシビリティの改善や、パラメータを動的に生成したい場合、コードの可読性を上げたい場合などに便利です。 ```html
``` # もっと！cosharet ## 細かいカラーテーマを設定したい `theme` パラメータを指定できる部分について、それぞれのカラーテーマを個別の設定で上書きできます。テキスト色やボタン色などの7箇所について、ダークテーマとライトテーマごとに指定することが可能です。詳しくは[cosharetリポジトリ](https://github.com/amane-katagiri/cosharet)のREADME.mdを読んでください。 ## アプリ表示名やアプリハッシュタグを変更したい cosharetでは、ユーザーからアプリ表示名（cosharet）やアプリハッシュタグ（#cosharet）を変更することはできません。しかし、以下の環境変数から簡単に設定可能です。これらを設定した状態でデプロイすれば、すぐに新しいリンク共有ツールをリリースできます。 - `VITE_APP_TITLE`: アプリ表示名 - `VITE_APP_HASHTAG`: アプリハッシュタグ（先頭の `#` は付与しないこと） - `VITE_APP_DESCRIPTION`: `meta` タグの `description` に設定されるアプリについての説明 - `VITE_APP_SOURCE_LINK`: ソースコードのリンク先として使用するURL ## アプリハッシュタグを自動的に付与して投稿したい 自分専用のcosharetを使っている場合は、投稿のたびに独自のアプリハッシュタグを付けると検索しやすいかもしれません。サービス一覧画面右下の「その他の設定」ボタン（あるいは共有画面右下では :gear: ボタン）から「ハッシュタグに #... を追加してシェアする」を有効にしてください。 ![cosharetのその他の設定ダイアログ](/images/cosharet-anniversary/cosharet-customize-dialog.png){width=750 height=500} # おわりに cosharetはカスタマイズ性の高いリンク共有ツールで、シンプルな仕組みながらもいろいろな機能を持っています。今後もあまねけ！のシェアボタンを通じてこの共有画面を見かける機会も多いと思いますが、ブックマークレットを保存して日常の投稿に使うのもおすすめです。 よかったら #cosharet ハッシュタグを付けてこの記事をシェアしてくださいね。