はてなブックマークのChrome拡張のようにツイートできるシステムを自分で作るという内容です。 作りながら仕様を考えてたので思考の整理も兼ねてまとめます。
制作背景
使っている人はご存知だと思いますが、はてなブックマークのTwitterシェア機能が死にました。 TwitterAPIの有料版がめちゃくちゃ高くなったので、 多分採算取れなくて切ることになるのかな〜と勝手に思っています。
ブクマをTwitterに投稿する手法としてIFTTTを使う方法やtwitterのツイート画面を開く方法などがあるようですが、 - IFTTTを使った手法は遅延がツイートまでに遅延がある - Twitter.comに毎回アクセスするのは手間がかかる というデメリットがあった為、 POST APIを一回叩くだけで即時に両方投稿できるシステムを勉強も兼ねて自分で実装しました。
はてなブックマークはとても便利なのですが、とがったコメントが目につくので コメント欄は見ない方がいいのかな〜と最近思ってます（でも見てしまう）
機能要件
- 操作はChrome拡張のポップアップのみで完結
- twitter.comへのページ遷移なしで記事をツイートできる
- twitter.comへPOSTしている通信履歴を残したくない
- はてなブックマークにブックマークできる
やること
はてなAPIとTwitterAPIのトークンを取得する
TwitterAPI
説明が非常に面倒な上に伝えたい本質の情報ではないので割愛します。 Developer認証が必要なようですが、数年前の自分がやってくれていたようなので よく分かりません。
参考にしたサイトだけ貼っておきます。
https://developer.twitter.com/en/portal/dashboard
https://di-acc2.com/system/rpa/9688/
はてなAPI
情報が古いものしかなく、かつ若干手間がかかりました。
下記の記事が非常に役に立ちましたので、こちらの記事を前提に書きます。
https://chayarokurokuro.hatenablog.com/entry/2019/10/01/081439
記事通りにスクリプトgetAccessTokenForWindows.pyを実行すると、アクセストークンが手に入りますが、これはスコープの設定がないアクセストークンの為、そのまま使うとユーザー情報が関連したAPIにはアクセスができません。
ブクマするには、write_publicをscopeに含める必要があり、
その旨をrequest_urlを書き加えます。
############### Oauth認証URL(共通） ###############
# Temporary Credential Request URL
request_url = 'https://www.hatena.com/oauth/initiate'
↓ 書き換える ↓
request_url = 'https://www.hatena.com/oauth/initiate?scope=write_public'
記事通りに実行するとトークンが合計で４つ手に入るので.envにでも書いて保存しておくと良いです。
あと、2020年からエンドポイントが変わっているので注意してください。
旧：http://api.b.hatena.ne.jp/1/my/bookmark
新：</code>https://bookmark.hatenaapis.com/rest/1/my/bookmark
https://developer.hatena.ne.jp/ja/documents/bookmark/apis/rest/bookmark/#post_my_bookmark
経由するWebAPIサーバーを建てる
無料でやりたかったので、Railwayを使います。 毎月５ドルまで無料で使用でき、基本的に軽いスクリプトなら超えることはないのでほぼ無料で使用できます。
https://railway.app/
上記のボタンをクリックするだけでFastAPIのテンプレートが簡単に作成できます。
設定からドメインを生成して、POSTが通ればここは問題ありません。
同環境で試したい方は、MITライセンスでリポジトリを公開しておくので、cloneして好きに使ってください。
https://github.com/9610r/BookmarkTweetFastAPI
popup.js の
115行目はサーバー側で設定した環境変数のVALUE、
129行目は作成したドメインに書き換えるようにしてください。
...
var raw = JSON.stringify({
"token": "APIサーバーで設定したSECURET_TOKEN",
"title": title,
...
// POSTする
fetch("https://XXXXX.XXXXXXXXXXX.XXXXXXX.railway.app/post", requestOptions)
.then(response => response.text())
...
基本的にここでの役割はテキストを整形して、POSTを投げるだけです。 タイトル、URL、コメントを分けて取得しているので、好きなように整形してからPOSTできると思います。 作成したリポジトリでは、はてなの方はコメントなしでブクマのPOSTを投げるようにしてます。
補足
通信履歴が残るのが嫌だったので経由地を作っていますが、 このサーバーは特に建てる意味はないような気がします。後述するChrome拡張でPOSTしているので、そこでTwitterとはてな両方に送信すればいいからです。 jsの経験がある方、特に通信履歴が気にならない方はChrome拡張の作成だけで十分かと思います。
Chrome拡張を作る
横着してChatGPTにコードを書かせようとおもったのですが、 最近はv2→v3への移行を推奨しているようなので、ちゃんと調べながらコードを書く必要がありました。
機能要件
- アクティブなタブのタイトル、URLを取得する。
- 選択しているテキストを取得する。
- コメントを書けるようにする。
- コピーできるようにする。
- POSTできるようにする。
コード自体は簡単でmanifast.jsのパーミッションがしっかり書けていれば、
普通に動いてくれる気がしました。
コード公開
現状サービスとして公開するにはTwitterAPIのコストがかかりすぎて現実的ではないので、 同様の方法を取る場合、自分でDeveloperプログラムに登録して取る必要がありますが、 APIを取得してしまえば、簡単だったので気になった方は使ってみてください。
APIサーバー
[https://github.com/9610r/BookmarkTweetFastAPI:embed:cite]
Chrome拡張機能
[https://github.com/9610r/ChromeExtensionBookmarker:embed:cite]
感想
理由は色々あるのですが、とりあえず経由地を一回挟むシステムを作りました。 APIサーバーの構築だけならほとんど手間がかからなかったので作って良かったと思います。
FastAPIとChrome拡張については作ったことがなかったので、ChatGPT-3.5を使って作ろうと思ったんですが、ほとんどのコードをまともに動かず、ほぼ自分で調べて書きました。 かなり自己満足なシステムでしたが、作っていて楽しかったです。
今回は割とローコストの開発にしたかったので最低限の機能しか実装していません。 Twitterへの文字数制限をかけていなかったり、例外処理を書いていなかったりします。 興味がある方はいい感じに改造して使ってみてください。
