【個人開発】自分のお気に入りサイトを音楽のプレイリストのようにまとめられるWebサービスを作った

# はじめに

最近Twitter界隈が何やら騒がしいですよね。
１日100回くらい上から下にスワイプを繰り返すヘビーツイッタラーな自分としては、Twitterがなくなってしまうことに不安を隠しきれません。

Twitterのいいね機能は**お気に入り**の一覧集として、とても重宝しています。他の方がいいねした内容などを確認することで、自分の知らなかった記事やその人の個性などが浮き彫りになるのでとても好きな機能だったりします。

ただ、これから先Twitterがどうなるのか皆目見当もつきません。もしかしたら終わるかもしれないし、もっと発展するかもしれない。

そんな焦ったい気持ちに心を動かされ続けては、日々の仕事が手につきません。

そこで、自分のお気に入りを他人に購読してもらえるめちゃくちゃシンプルなWebサービスを作っちゃいました。

# 何を作ったのか

今回、僕が作ったのは「**rsstree**」というWebサービスです。

![名称未設定のデザイン (59).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/024b5700-fecb-9ac0-121b-8150af54f4c4.png)

https://www.rsstree.net/


自分がお気に入りに登録した記事やサイトの一覧を、**フィード**として**RSS**フォーマットで全世界に配信することができるようになっています。

友人とフィードを購読し合うことで、言葉を交わすことなくお互いの趣味や嗜好を暗黙的に理解することを助けます。

そして、日本語と英語の両方に対応しているので、お好みの言語を選択してサービスをご利用ください。

# どうして作ったのか

先ほど述べたように、2023年の今日、Twitterはとてもアンバランスです。
自分の趣味や嗜好、およびコミュニケーションの手段は誰かの不安定さによって担保されるべきではありません。

だからこそ、自由で開けた接続性に特化した**RSS**を配信のフォーマットとして選択しました。

https://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%BC%E3%83%AD%E3%83%B3%E3%83%BB%E3%82%B9%E3%83%AF%E3%83%BC%E3%83%84

自分が好きなもの、みんなに見てもらいたいものをまとめる。
それはまるで、昔CD-RやMDに自分のお好みの曲だけを選定してリミックスしたプレイリストのように自分だけのリンク集を作りたいと思ったことがきっかけでした。

# どういう技術で作ったか

僕はRemixの信奉者です。

https://remix.run/

なので、Remix Indie Stackをベースに開発を行いました。

https://github.com/remix-run/indie-stack

デプロイ先はもちろん、個人開発者の強い味方の**Fly.io**を採用しまいた。
DBとして、Fly.ioでボリュームを作成し、その上でSQLiteを活用しています。

https://twitter.com/kentcdodds/status/1478806810949656576

https://fly.io/

# リリースまでにかかった時間

運営社ギルドの自分のtimesチャンネルに、メモ書き程度に次のように書かれていたのが2月24日でした。

> すごく作ってみたいサービスを思いついてる。
利益とか何も考えず、ただただ自分が欲しいってやつ

アイデアがまとまって、実際に開発に着手したのは2月26日だったので、大体20日程度です。ただ、実可動的にいうと、まるまる20日間開発を行なってたわけではないので、１週間かそれよりも短い計算になるのでしょうか。

# 使い方

それでは実際に使い方を見ていきましょう。

![名称未設定のデザイン (60).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/03d98d0d-95b9-3708-1137-7d126ed0931c.png)

まずはトップページにアクセスしてください。

https://www.rsstree.net/

## アカウント作成

自分だけのフィードを作るにはアカウント登録が必要になります。
上部のログインボタンをクリックして、ログインページに遷移してください。

![名称未設定のデザイン (61).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/0b059fde-b720-d44b-ee1f-2b0a665de6dd.png)

利用規約に同意した上で**LOGIN WITH AUTH0**ボタンをクリックします。
遷移先はAuth0のページになります。

![名称未設定のデザイン (62).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/a4dbfd69-3b60-f77c-9106-70705b9a0d9b.png)

すでに**rsstree**のアカウントをお持ちの方はログインを。お持ちでない方はアカウントの作成をお願いします。

## ブックマーク

ログインが完了すると管理画面に遷移します。

![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/cd953b8b-0371-143e-dce8-7f75dca49c45.png)

ここからは本当に簡単です！

お気に入りに登録したいサイトや記事の**URL**をテキストフィールドにコピペします。
そして**ブックマーク**ボタンをクリックするだけ！

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/52b06042-2f03-d74d-c865-39a98163d06c.png)

ジャジャーーん！！！これでリンクが登録されました！
それでは、フィードのリンクを共有しましょう・・・・・と、その前にユーザー名を変更しておきましょう。

## ユーザー名とタイトルの変更

ユーザー名はとても大事です！
なぜならフィードのリンクの一部として使われているからです！

```
https://www.rsstree.net/takagimeow/feed
```

そしてタイトルもとっても大事です！
RSSリーダーにて購読される際に、そのタイトルが表示されてしまうからです！
適切なタイトルに変更してあげましょう。

ユーザー名とタイトルの変更は設定画面から行います。
管理画面の右上に表示されている**メニュー**から**設定**をクリックします。

**ユーザー名**のところにアルファベットと英数字でユーザー名を入力してください。
**RSSフィードのタイトル**のところに、お好みのタイトルを入力してください。

![名称未設定のデザイン (63).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/965c0cc3-4bd5-30a9-16c5-ad545308d476.png)

入力が完了した**保存**ボタンをクリックします。

## リンクをRSSリーダーで購読

最後に、生成されたフィードのリンクを購読してみましょう！

まず、管理画面で**COPY LINK**ボタンをクリックして、リンクをコピーしましょう。
これで、クリップボードにリンクがコピーされました。

![6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/52b06042-2f03-d74d-c865-39a98163d06c.png)

今回は、RSSリーダーとして有名な、Feedlyを使って購読してみましょう。

https://feedly.com/

先ほどコピーしたリンクを、テキストフィールドにペーストします。

![8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/1013a856-0d21-4591-21d2-8bf72ff47f1b.png)

そしたら、自分のフィードの内容が画面上に表示されると思います。
表示されたら、**FOLLOW**ボタンをクリックしましょう！

![9.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/7ca2a5ec-452a-54a3-0cc0-6312ee7e74bb.png)

サイドバーに購読した自分のリンクが表示されたら成功です！

![10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/577119/a207206c-ffb9-143d-7a92-d4b13d8904b7.png)

# まとめ

Webはより自由であってほしいとの個人的な思いがきっかけで、[rsstree](https://www.rsstree.net)を開発しました。
そして個人開発はもっと自由であってほしいとの願いで、今回この記事を書きました。
路上ミュージシャンやインディーズバンドがライブハウスで演奏したり、自主制作CDを作って手売りするような感覚で、もっと気持ち的に自由でインディーズな個人開発の世界になることを切に願います。

---

こちら、僕のフィードリンクです。ぜひぜひ購読してね〜！

https://www.rsstree.net/takagimeow/feed