▼ 今すぐ使えます！ ▼ReadStack

開発駆動コース 仲山ゼミ

しーぴー / 永田直希

技術記事の未読消化をサポート

積み記事が溜まり過ぎて もう読む気が起きないなぁ...

https://read-stack.cp20.dev/
記事が溜まるつらさ ― 開発背景

録

ざ受信箱→スタック→アーカイブという流れで消化されていきます。
そ 過程 様々な機能を通してサポートしていきます。

既存の管理方法から簡単に移行できるように既存ツールからのインポートができるようになっています。現在はブラウザのブックマークとテキストからのインポートをサポートしており、使い始める際の手間を減らし、使ってもらいやすくしています。
記事

セスした記事 (の一部) を自動的に記録して、受信箱へと登録します。後から記事を探すときに役立ちます。ブラウザ拡張ではショートカットキーから記事を受信箱やスタックに追加することができます。

また特定のデータソース (e.g. RSS) から記事を自動的に取得して受信箱へと登録できます。興味のある記事だけを簡単にスタックに積めるようになっています。

せ 土台 作スタック
記事を読む途中にも自動で進捗管理がされるようになっています積む

読みたい記事を受信箱

並
モチベ ショ 湧 づ
特 大量
そ さざ適切ミ グ 通知 飛そ 時々合ェス促
考
この機能によってふとした空き時間などを活用して効率的に記事を読み進めることができるようになります。

ただ積み記事が んでるだけでは消化のーンが き らいと思います。 にに積んでいる人は の多 にうん りしてしまうかもしれません。
なタイ ン でが んできたり、あるいは のにった記事をサジトすることで未読消化を したいと えています。

全文検索

記事を既読に記事の過去に読んだ記事を必要な時に簡単に見返せるようにするために、アーカイブの中から全文検索できるような機能を実装しました。受信箱・スタックの中から検索することもできて、読みたい記事を探す手がかりになればと考えています。

ブラウザ履歴の検索やGoogle検索などは既にありますが、ブラウザ履歴の検索ではタイトルしか検索対象に含められず、Google検索では自分が読んでない記事まで含めてしまいます。
両方のいいところを合わせたような機能になっています。

アーカイブ

興味ない記事を戻す
N などへの記録の共有によって記事を読むモチ ションを上げようと考えていますS S
ベー

記事録 共有

記 の現購

記事の 読

開発者の体験を良くする ― こだわり
向けた体験を圧倒的に良くするために3つのこだわりを意識して設計・開発を行いました。

また、全体を通してユーザー目線でサービスを設計しており、自分自身およびテストユーザーのフィードバックをもとに改善を続けています。
開発者に手間を極限まで減らす

また「既存ツールからの移行サポート」の機能によって移行の手間を極限まで減らしています。

使い始めるまでに手間がかかるとそもそも使ってもらえませんし、使うのに手間がかかると続きません。一方で未読管理アプリは継続して使って未読の記事を減らすことが目的なので、使い続けられなければ意味がありません。そこでReadStackでは「何もしなくても勝手に未読管理がされている」状態を理想として設計・開発を行いました。
例えば「積み記事の自 管理」ではなるべく自 で記録されるようにしたり、ショ トカット
動動

既存のアプリを使っていて不満点・改善点が見つかったとき、自分だったら直せるのに、と思ったことはありませんか？ReadStackはGitHub上にソースコードが公開されており、誰でもコントリビュートできるようになっています。さらに開発者向けAPIが整備されているので、それを使って自由に遊ぶこともできますし、極論を言えば自分専用のクライアントを作ることも可能です。

キレイで使いやすいUIにする

細かいところを上げるとキリがないですが、単にキレイというだけでなく、使いやすい (UXに配慮した) UI設計を心掛けました。具体的なところは実際にアプリを触って確かめてもらえればと思います。

※画像は開発中のものです 実際のアプリ画面とは異なる場合があります

積み記事の表示技術構成

a asSupabase 
認証

Sup b e Cloud

アプリ
Webアプリ
Next.js
スマホアプリ Flutter
ブラウザ拡張 Plas o

自宅サーバー
APIサーバー ono
フロントエンド Next.js on T e r t
APIドキュメント a er I

Cloudflare Tunnel& データベース

Gr f n Cloudyp Sc ip

マホアプリはCodeMagicを、ブラウザ拡張はGitHub Actionsを使ってCDを実現していますスmSw gg U

TaPNilscale V

苦労したポイント

各種メ

ns bl

A i e 
サーバー構成管理

接続

ス モニタ

ービス ログ 収集

プ イ D

デ ロ (C )グ

今も頑張ってくれてる自宅サーバー

ービス 外形監視

サーバー自体のメトリクスと、サービス固有のログやレスポンス時間などのモニタリングを行っています

1つはWeb、スマホアプリ、ブラウザ拡張などのマルチプラットフォーム対応です。特にスマホアプリに関しては、iOSデバイスを持っていない中でiOSアプリを作るのがかなり大変でした。さらに大変だったのは、全く触ったことがないような技術領域に数多く手を出したところです。Webフロント以外はほとんど未経験で、データベース設計、APIサーバーの実装 (Hono) 、OpenAPI、ネイティブアプリ開発 (Flutter) 、ブラウザ拡張 (Plasmo) 、Dockerベースのデプロ
イ、Ansibleによるサーバー構成管理、Grafanaによるモニタリングなど例を挙げればキリがないほどの新しい技術にチャレンジしました。
新しい技術にチャレンジした分だけ成長できました

最初からセキュアに作るス

画像はAndroidアプリですが、iOSアプリも用意しています

新しい記事の追加

aa aGrafana トリク のリン
Grafana Loki サの のPrometheus 
サのH

最初からセキュリティ面を考慮に入れた上で設計・開発を行いました。認証をかけるべき部分にはかけていますし、APIの権限設定もしっかりと行っています。また、ずさんなパスワード管理によるアカウント乗っ取りを防ぐためにID/Pass認証はあえて用意していません。
ただし マホアプリでは トアの審査を通す都合上ID/Pass認証を用意しています
購読RSSの表示・削除・新規追加

ポスターの左上のQRコードまたはURLから自分の手元で今すぐに試せます

アプリ画面 ー お手元で試せます

技術構成 / 苦労したポイント / セキュリティー

キーを用いて簡略化したりとユーザーのアクションをなるべく減らすように設計しています。

カスタマイズ性を高くする

毎日Google DiscoverやTwitter (現X) から記事を確気になる記事は開いてみて、パッと見面白そうならとりあえずReadStackに保通勤通学中、一人でのご飯中、予定まで少しだけ時間があるときなどのスキマ時間で積み記事を消積み記事がしっかりと消化されて嬉しい！！！

動 管理しま記事の未読消化サポート

記事の追加

ブラウザアクセス
在はRSSのみ対応しています
が、RSS以外に記事を配信する形式ってあるんでしょうか？

既

Pocketに代表されるような既存ツールの多くは記事自体を保存して専用リーダーで読むという形式を取っていますが、この形式はコンテンツや画像が上手く保存できなかったりという問題を生む可能性があります。ReadStackはこれとは対照的に元のサイトで読むというところを非常に重要視しています。しかしそれゆえの技術的制約が多く、情報を上手く取得するためにPCではブラウザ拡張機
能、スマホではネイティブアプリを使っています。

既存ツールからの移行サポート

録・購読

さず積

積み記事の自動管理

ボクの考える理想の記事のライフサイクル

積み記事を記 し、 らに未読か 読か、どこまで読んだかを自 でみ記事を消化さ るを ります。

す。これによってま積み記事は っくり
ReadStackは のを記事の記

みなさんも 幸せになりませんか？

積み記事を自動で管理してくれる消化をサポートしてくれる使い始めるのも楽ちん！

また「前読んだ記事を見返したいけど、タイトルも内容もほとんど覚えてないから辿り着けない...」という悩みもしばしば感じています。この2つの問題を解決するべくReadStackの開発を始めました。

記事の消化をサポート ― 機能紹介

積み記事が継続的に消化されていい感じ～♪
ReadStack右のような悩みを持ったことはありませんか？この悩みはエンジニアなら誰しもが抱いたことのある悩みではないかと思っていて、もちろんボク自身も抱えています。漠然とした読みたいという気持ちはあれど、実際に未読は消化されないということが起こります。あまりに多くの記事が積まれすぎて何を積んでいるのかを自分自身で把握できていないという人も多いでしょう。

アクアイコン: https://twitter.com/sora_douhu

ス

ライトモード/ダークモードをテーマに合わせて自動で切り替えます

全文検索

新しい記事の追加

2023/10/25

ランディングページ

記事の一覧

記事の追加

1
設定画面