Pocket から Raindrop.io に移行しました（自分のデータも記事下のシェアボタンも）

2025 年 7 月 7 日

こなさんみんばんわ。

前回、Pocket がサービス終了するので記事下のシェアボタンを何とかしないといかんなぁという話を書いたのですが、その後に Pocket の代替となりそうなサービスを色々と検討してみましたところ、Raindrop.io というブックマーク・サービスに外部から記事を保存できる URL が用意されているようでした。

実際にアカウントを作って色々試してみるとその使い勝手も割とよく、無料プランでも必要十分な機能を備えてそうでしたので、そのまましばらく常用してみることにしまして、同時に先の URL を利用した「Raindrop.io に保存」ボタンを作って Pocket ボタンの後釜に据えてみました。

という訳で、今回はその辺のいきさつや実装メモ的な内容となります。Pocket ボタンの代わりをどうしようかと悩んでおられる方のご参考になればと思います。

あっ今回は別に Pocket からの移行指南をしたい訳ではないので、Raindrop.io アカウントの作り方やアプリの使い方などは説明しておりません。お気をつけください。涙

移行までのいきさつ

繰り返しになりますが、2025 年 7 月 8 日をもって Pocket が終了してしまうため、このサイトの記事下に置いてあるような「Pocket に保存」ボタンも機能しなくなる（…はず😅）ので削除しないといけないんですが、それと同時に自分が今まで Pocket に保存しておいたデータの移行先をどうするかとか、Pocket を使ってやってたことをこの先どうやって代替するかというのも考えないといけなかったのでした。

Raindrop.io の Web サイト

そこで、記事を書いてからあわてて（実はそれほどあわててないけど🤣）Pocket の移行先候補となりそうな代替サービスを色々とチェックして検討してみたのですが、その中で目に留まったのが Raindrop.io です。Free プランでもブックマーク数は無制限ですし、機能的にもライトな使い方をする分には必要十分なものが揃ってそうです。

とりあえず自分の Pocket データの退避先としてアカウントを取りまして、エクスポート済みの CSV を取り込んでみますと、何の問題もなくあっさり完了。ついでにそのデータ整理などの作業を色々試してみたところ、Web ブラウザからでも使い勝手は全然悪くないです。

記事の保存はパソコンであればブラウザ拡張機能から、iPhone や iPad ではアプリを入れておけば共有メニューなどからできるので、どんな環境からでも使えてとっても便利。こりゃいいやという訳で、しばらくの間 Free プランのまま常用することにしてみた次第です。

「Raindrop.io に保存」ボタンを作る

さて、そんな Raindrop.io には Pocket やはてブのように「コピペで簡単!」みたいな保存ボタンが公式にある訳ではありませんが、外部（例えば Feedly などの RSS リーダー）から記事を保存するための特別な URL が用意されており、これを使うことで容易に自作のボタンを作成することができます。

このサイトでは今年の 1 月に各種のシェアボタンを再実装したのですが、その Pocket ボタンに使ってた部分の URL をこの特別な URL に変更して、あとはアイコンと色をどうにかすれば簡単に「Raindrop.io に保存」ボタンに差し替えられそうですね。これなら前回書いてたようなただ単にアイコンを差し替えるだけじゃなくてレイアウトや文言も含めて考え直さないとみたいな作業もいらないので、ちょっと楽になりますし。涙

という訳で、その差し替え作業の内容を簡単に。

HTML + Liquid

保存のための URL は先ほどの公式ヘルプにあるように https://app.raindrop.io/add?link=${url}&title=${title} となります。${url} の部分にページの URL が、${title} の部分にページのタイトルが入るようにすればいいので、URL エンコードの処理なども含めるとボタン用の a 要素開始タグのコードは、Jekyll (Liquid) だと次のようになります。実際には class なども含んでますが割愛。

<a href="https://app.raindrop.io/add?link={{ page.url | absolute_url | cgi_escape }}&amp;title={{ page.title | cgi_escape }}" rel="noopener" target="_blank">

ボタンの背景色

ブランド・ガイドラインのようなものが公開されてないので実際のところは分からんのですが、ロゴマークに使われている色などから判断するに #1988E0 あたりがブランド・カラー的な扱いなのではないかと思います。

ですが、これだと白とのコントラスト比が 3.7:1 程度と少し低めになるんですね。なので、公式サイトのリンク色に使われているもう少しだけ濃いめの青 (#0b7ed0) を採用しております。まぁ非テキスト内容ですし、アイコンサイズも 25 ピクセルくらいの大きさにしているので問題ないとは思いますが、念のため…ということで。

アイコン

アイコンの加工順を示したもの。左から順にオリジナル・調整レイヤーで白黒化したもの・明度を透過度に変換して色情報を抜いたもの

はい、一番時間掛かったのがこれですね😭 他のボタンとテイストを合わせたいので、カラーのロゴマークをそのまま使う訳にはいかないけど、かといって X や Facebook みたいに公式が黒背景用の単色ロゴ素材などを用意してくれてもないので、元のロゴからそれっぽいものを自力ででっち上げないといけません…

という訳で、元のロゴマークの SVG ファイルを取ってきまして（正式に配布されてる訳ではないけど GitHub にソースの形で公開はされています）いくつかの加工などをして作ったものを使用しております。処理内容を全部詳しく書いていると日が暮れるので、ざっくりと箇条書きで。

ロゴの SVG ファイルを Affinity Designer 2 で開き、オブジェクトの複製や合成（ジオメトリ）を使って色の違いごとに 5 つのパーツを作る
これに調整レイヤーを 2 つ（「白黒」と「レベル」）重ね、パラメータを変更して白黒化する
- その際、白レベルは一番明るいパーツが #FFFFFF になるように調整しておく
このファイル (a) を一旦保存し、それを複製したもの (b) を開く
b のファイルから調整レイヤーを削除し、すべてのパーツのカラーを #FFFFFF に変更する
a のファイルに戻って、スポイト・ツールを使って各パーツの白黒化された後の色を拾い、HSL ホイールでその明度値を確認する
5. で調べた各パーツの明度値を、b のファイルの対応するパーツの不透明度値に設定する
b のファイルを「ファイル > 書き出し…」メニューから SVG に書き出す
書きだしした SVG ファイルを Icomoon.app にアップして SVG スプライト化し、“Generate SVG & More” からセット一式をダウンロード
zip ファイルを解凍すると symbol-defs.svg という最適化 & シンボル化された SVG ファイルがあるので、それをテキストエディタで開く
各 path 要素から fill 属性を削除（色は CSS から設定するので）して、<symbol>〜</symbol> を既存の SVG スプライトファイルにコピペ

一連の作業としてはこんな感じですが、全部テキストで無駄に長いのでちょっと分かりにくいですかね、すみませんすみません😭 まぁポイントとしては白黒に変換してその明度を各パーツの不透明度に変換するというただ一点のみでして、使うアプリやツールはご自身の使い慣れてるもので、ご自由にしていただければいいんじゃないかと思います。

そんな訳で

以上のような手順を踏みまして実装したものが、今現在この記事ページの下の方、はてブボタンの横にあるボタンです。まぁでも作って置いたからといって、多分誰も使わないとは思うんですよ😭 だってユーザーの方はすでにブラウザ拡張機能やスマホアプリ入れてると思うし、そうでない方は押したところで単にログイン画面が開くだけだし…

なので、別にこのボタンでブックマークされやすくなるとか、そういった効果があるとはあまり思ってないんですが、例えばこのボタンを見た誰かが「何やこのボタン?」となったところから Raindrop.io のことを知り、そこからユーザーになっていただけるかもしれないし、それでその利用者が増えるきっかけくらいにでもなってくれれば、それでいいのかも…とか思っております。普通にいいサービスだと思うんで、ユーザー増えてほしいですね。

という訳でみなさん、よかったらこの新しいボタンで、試しにこの記事をあなたの Raindrop.io アカウントに保存してみてくださいね。ではさいならーﾉｼ

…ああ、無事に Pocket がサービス終了する前にアップできてよかった。涙