そういえば、書く場所へは共有できなかった。Qiita・Zenn・note・Medium・アメブロへの共有ボタンを足しました

こんにちは、プロマリの紫です。この記事の下にも並んでいる、丸い共有欄のお話です。この共有欄に、ある日ふと思ったのです。そういえば、Qiita や Zenn へは共有できなかったな、と。X・LINE・Facebook はあるのに、技術ブログを読んだ人がいちばん使いそうな「書く場所」への入口がありません。そこで、Qiita・Zenn・note・Medium・アメブロの5つを共有先として足しました。足すだけの話かと思いきや、調べてみると、この5つのうち4つには共有の入口そのものが無かったのです。この記事では、その「無い」をどう埋めたかを、調査から実装、公開の順番まで、図と一緒に読み解いていきます。

点線の付いた用語は、その言葉を押すと詳しい説明が開きます。意味、身近なたとえ、この実装での使い方を順に読めます。キーボードではTabで用語へ移動し、EnterまたはSpaceで開き、Escapeで本文へ戻れます。各ページで最初に出る用語から参照できるようにしました。

共有ボタンの部品そのものの成り立ちは、本編のiframe から、丸型の共有ボタンと「いいね」へ。Promari SNS Share を公開しました。で詳しくご紹介しています。この記事は、その連載の番外編です。本編を読んでいなくても分かるように書いていますが、あわせて読むと、今回の変更が「どの差し込み口に、何を差したのか」がよく見えます。

この記事は5ページあります。1ページ目で、何が足りなかったのかと、5つのサービスに共有の入口があるかどうかを確かめます。2ページ目は、入口があった note を、これまでと同じやり方で足す話です。3ページ目では、入口の無い4つのために新しく作った動き「compose」の中身と、その動きを作るときに気をつけた順番、そして貼った先で記事のカードにする書き方（4.2.0）を見ます。4ページ目はボタンの並べ方で、どれを見える場所に置くか、スマホの幅に収まるか、書き間違いをどこで止めるかを扱います。5ページ目で、何を試験したか、配布物をどう守るか、どの順で公開するかを確かめて締めくくります。図は21点で、1枚ずつ違う物の絵で描きました。

そういえば、書く場所へは共有できなかった

まずは、今回の変更で共有欄がどう変わったかを見てください。上がこれまで、下がこれからの共有欄です。

これまでの共有欄には、X・LINE・Facebook の3つのボタンと、URL のコピー、端末の共有機能を呼び出す「その他の共有」が並び、その右に、はてなブックマーク・LinkedIn・メールをしまった「その他」がありました。どれも、記事を読んだ人が「これ、よかったよ」と誰かに知らせるための道具です。

そこへ今回、Qiita・Zenn・note・Medium の4つを、見える列に並べました。アメブロは「その他」の中に入れています。足したのは、読んだ人が「知らせる」ためではなく、「自分で書く」ための入口です。この違いが、今回の話のいちばん大事なところなので、少し丁寧にお話しします。

このブログに来てくださる方の多くは、エンジニアや、Web の仕事をしている方、これから学ぼうとしている方だと思います。そういう方が技術記事を読んで「これは使える」と思ったとき、X で一言つぶやくこともあるでしょう。けれど、同じくらいよくあるのが、自分の Qiita や Zenn の記事で「この記事を参考にしました」と紹介したり、note に感想を書いたりすることです。実際に試してみた結果を書く、つまずいたところを補足する、別のやり方と比べる。技術の世界では、記事を読んだあとの行動が「書く」になることが多いのです。

ところが、これまでの共有欄には、その「書く」へ向かう入口がありませんでした。読んだ人は、URL をコピーして、Qiita を開いて、ログインして、新しい記事の画面を探して、貼り付ける。そこまでの手間をかけてくれる人だけが、紹介してくれていたわけです。共有欄は、記事を気に入ってくれた気持ちを、次の行動へ運ぶための道具です。その道具に、いちばん大事な行き先が抜けていた。そういえば、無かったのです。

なぜ、これまで無かったのか

ここで少し、振り返っておきます。なぜ、これほど大事な行き先が、これまで抜けていたのでしょうか。

この共有欄は、もともと、以前 promari.jp で使っていた iframe の共有ボタンを置き換えるところから始まりました。本編の題にもある「iframe から、丸型の共有ボタンへ」です。iframe は、別のページを小さな枠に入れて表示する仕組みで、貼るだけで使える手軽さがありました。けれど枠の中は別の文書なので、ボタンの見た目をこちらの CSS で整えられず、ボタンが押されたことも外から正確には観測できません。そこで、同じ行き先を、自分たちで管理できる丸い共有ボタンに置き換えたのです。

置き換える前の共有欄に並んでいたのは、Facebook・X・LINE の青・黒・緑のボタンでした。新しい共有欄は、この3つを出発点に、はてなブックマーク・LinkedIn・メール・URL のコピー・端末の共有を加えた形で作りました。そのときの関心は、いま並んでいるものを、よりよく置き換えることにありました。見た目をサイトになじませる、押された回数を数える、共有先を足しやすい作りにする。そうした置き換えの仕事としては、正しい順番だったと思います。

ただ、そのぶん、「そもそも、このサイトの読者にとって、ほかに並ぶべき行き先はないか」という問いは、後回しになっていました。共有先を足しやすい作りを先に整えていたからこそ、今回、その問いに気づいたときに、すぐ足せたとも言えます。作りを整えることと、何を並べるかを問い直すことは、別の仕事で、今回はようやく後者に手が回った、というのが正直なところです。

共有ボタンの部品を、ざっとおさらい

足した話に入る前に、この共有欄がどういう仕組みで動いているかを、ざっとおさらいしておきます。仕組みを知っていると、今回「どこを変えて、どこを変えなかったか」が分かりやすくなります。

共有欄は、promari.jp のページの中に置かれた、<promari-sns-share> という1つの部品です。ブラウザの標準の仕組みで作ったWeb Componentで、ページの HTML にこのタグを置くと、部品が自分で共有ボタンを描き、押されたときの動きも受け持ちます。部品のプログラムは、promari.jp のサーバーではなく、世界中からファイルを配ってくれるCDNから読み込んでいます。

部品の中は、役割ごとに4つの層に分かれています。どの共有先へ何を送るかといった決まりごとを置く domain、ボタンが押されたときの手順を進める application、クリップボードや窓を開くといったブラウザの機能を実際に呼ぶ infrastructure、そしてボタンを画面に描く presentation です。この4つの層と、それぞれの層の役目は、本編の連載で1つずつ読んできました。

そして、共有先そのものは、どの層のコードにも書かれていません。destinations というフォルダに、共有先ごとの定義のファイル（カード）が並んでいて、配布物を作るときに、そこから一覧が組み立てられます。共有先を足すことと、動きを足すことは、別の種類の変更です。note は共有先を足すだけで済み、入口の無い4つは動きを1つ足す必要がありました。この違いが、2ページ目と3ページ目の分かれ目になります。

記事を読んだ人は、どこへ向かうか

記事を読み終えた人の「次の行き先」を、路線図のように描いてみると、抜けていたものがはっきりします。

行き先は、大きく3つの方向に分けられます。1つ目は、X・LINE・Facebook・はてなブックマークのような言いふらす場所です。記事の URL に一言そえて、知り合いやフォロワーに知らせます。2つ目は、URL のコピーや端末の共有機能のような手元に残す場所です。あとで読むためにメモしたり、特定の人にだけ送ったりします。そして3つ目が、Qiita・Zenn・note・Medium・アメブロのような書く場所です。記事を読んで考えたことを、自分の記事として書き、その中で元の記事を紹介します。

言いふらす場所と、書く場所の違いは、読んだ人が使う時間の長さです。言いふらすのは数秒で終わりますが、書くのは数十分から数時間かかります。そのぶん、書かれた記事は長く残り、検索からも読まれ、元の記事にとっても息の長い紹介になります。書く場所への共有は、押される回数は少なくても、1回あたりの重みが大きい行き先だと考えています。

ちなみに、この3つの分け方は、この記事で説明するための整理です。X に長い文章を書く人もいますし、note で短くつぶやく人もいます。サービスの使われ方は人それぞれで、きっちり線が引けるわけではありません。それでも、「知らせる」と「書く」のあいだに、これまで入口の差があったことは確かです。

これまでの共有先は、どんな入口を使っていたか

足す前に、これまでの共有先が、それぞれどんな入口を使っていたのかを並べておきます。今回の話は、この「入口」の有る無しがすべての出発点だからです。プラグインの中には、共有先ごとに、入口の URL（endpoint）と、その URL に付ける項目（params）が書いてあります。

表を見ると、同じ「記事の URL」を送るのでも、X と はてなブックマークは url、Facebook と LinkedIn は u、と項目の名前がばらばらです。題名を受け取るかどうかも、サービスによって違います。入口の形はサービスが決めるので、こちらはその形に合わせるしかないのです。このプラグインでは、この違いをすべて共有先ごとの定義（データ）に閉じ込めて、URL を組み立てるプログラムは1つで済むようにしています。その仕組みは、次のページで note を足すときに詳しく見ます。

そして、表の下の2つ、URL のコピーと端末の共有には、入口がありません。入口が無くても共有先として成り立つのは、クリップボードや端末の共有の画面という、ブラウザや端末が持っている機能を使っているからです。入口の無い Qiita や Zenn をどう扱うかを考えるとき、このことが1つのヒントになりました。入口が無いなら、ブラウザの機能と組み合わせればよいのではないか、と。

もう1つ、この表から分かることがあります。入口の形は、足す前に1つずつ開いて確かめる必要があるということです。どの項目名で、何を受け取るかは、サービスごとに違い、書いてある資料が古いこともあります。次の節では、5つのサービスについて、実際にそれを確かめました。

5つのサービスに、共有の入口はあるか

それでは、足すことにしましょう。と言いたいところですが、その前に確かめることがあります。それぞれのサービスに、外のページを共有するための入口があるかです。

共有ボタンは、魔法でサービスの中に記事を送り込んでいるわけではありません。サービスの側が「この形の URL を開けば、記事の URL が入った投稿画面を出しますよ」という共有の入口を用意してくれていて、ボタンはその URL を組み立てて開いているだけです。たとえば X なら、https://twitter.com/intent/tweet に、記事の URL や本文を付けて開くと、それが入った投稿画面が出ます。入口の形はサービスが決めるので、入口が無いサービスには、同じやり方では共有できません。

そこで、2026年10月1日に、5つのサービスについて、公式の入口があるかを1つずつ調べました。

結果は、少し意外なものでした。外のページを共有する公式の入口があったのは、note だけでした。note には「noteで書く」というボタンを外のサイトに置くための公式の入口（https://note.com/intent/post）があり、記事の URL を渡すと、その記事を引用した投稿画面が開きます。

残りの4つには、入口が見つかりませんでした。Qiita・Zenn・Medium は、どれも記事を書いて公開するためのサービスで、新しい記事を書く画面（投稿画面）はあります。けれど、その画面に外から URL を渡す口がありません。アメブロには、かつて「Ameba Now」という短い投稿のサービスがあり、そこへの共有の口がありましたが、サービスそのものが終わっています。

この表の右の2列は、実際にその URL をログインせずに開き、ページが返ってくるか、どこへ転送されるかを確かめた結果です。ブラウザの外から確かめたので、画面の中で何が起きるかまでは分からないものもあり、その場合はそう書きました。Zenn は、新しい記事の画面らしい articles/new を開くと 404（ページが無い）でした。そのため、記事の管理画面（ダッシュボード）を投稿画面の代わりにしています。こうした URL は、共有の入口として公開されているものではないので、サービスの都合で予告なく変わることがあります。調べた日付を記録に残したのは、そのためです。

さて、ここで分かれ道です。note は入口があるので、これまでと同じやり方で足せそうです。けれど残りの4つは、同じやり方では足せません。入口が無いサービスのボタンを、押したら何が起きるようにすればよいのか。次のページではまず、簡単なほうの note から片付けていきます。