Unformed Building

はてなブックマークのビューワーを作った

公開:

パーマリンク

しんぷるはてぶ」というツールを作りました。
現在の主な機能としては次のようなものがあります。

  • はてなブックマークのフィードを取ってきてタブ形式で表示
  • エントリー一覧から任意のエントリーを選択すると情報とブックマーク一覧を表示
  • メタブックマークがある場合はブックマーク一覧をタブ形式で表示
  • エントリーがメタブックマークの場合は元エントリーも探してきてタブ形式で表示
  • ブックマーク一覧でIDコールがある場合はコメントの下にIDコール先、IDコール元のコメントを表示
  • メタブックマークでのIDコールは、コール先アカウントの下の階のコメントも表示
  • コメントにあるURLを自動リンク

Microsoft Edgeレガシ(EdgeHTML版のほう)とInternet Explorerはサポート対象外です。
また、スマートフォンというか小さい画面での閲覧も対象外です。こっちはいつか対応するかもしれませんが、いまのところやる気はありません。


2014年にも同じ名前のものを作りましたが、そちらはYQLに依存した作りになっていましたので、YQLのサービス終了とともに動かなくなりました。
これはしょうがないことなので、データを取得する部分は自前で作りました。

自前のAPIはPHPでできています。データを取りに行くのには「Guzzle」を使いました。

CORSは、許可したサイトのみOKという形を取っています。Stack Overflowにあった「Access-Control-Allow-Origin Multiple Origin Domains?」を参考にして対応しました。

フロントエンド部分は「Svelte」です。最初はVueで作っていたのですが、Svelteを覚えたかったのでそちらに移行しました。

Svelteは基本的に書きやすくて好きですが、いまのSvelte(公開時のバージョンは3.18.1)はCSSのスコープ周りに癖があってやりづらいので、CSSは全部グローバルで書いています。どういうものなのかはIssueを見るとわかると思います。

フロントエンド部分はGitHubの公開リポジトリに置いてありますので、バグとか要望とかありましたらIssue投げてもらえると助かります。

デプロイは、このサイトと同じ構成でGitHub Actionsを使っています。プレビューにはNetlify。

作っていた中でいろいろな現象に遭遇しましたので、近いうちに紹介できればと思います。