インフラエンジニアが Flutter で RSS リーダーアプリを開発するまで
1. はじめに
某社でクラウドを作るインフラエンジニアをしている akam1o です。
普段は kubernetes や OpenStack と戯れたり、kernel やドライバ周りのトラブルシュートをしたりして過ごしています。
2. なぜ RSS リーダーを作ろうと思ったか
元々 RSS リーダーで情報収集を行っていたのですが
- あまり刺さる RSS リーダーがなかった
- Google ニュースの記事のキュレーションでなんとなく十分になっていた
ため、RSS というものから遠ざかっていました。
しかしながらキュレーション全盛の昨今、下記のようなことに不満を持ち始めていました。
- 興味範囲の完全に外側の記事が出てくる
- もちろん興味をないなどのフィードバックをすればいいのだが、それでもしばらく出てきたりする
- 一度リストで見かけたのに間違って更新の動作をしてしまってリストから消失
等々、日々モヤっとすることが増えました。
また、久しぶりに Feedly を開いたときに、**「自分の興味のある情報しかない画面」**に衝撃を受けたのもきっかけでした。
これがザッピングをするように使えたらなんと便利なんだろう、と思い、アプリを書いてみることにしました。
3. RSS リーダーを自作する上で考えた課題
まず、既存アプリで納得いっていないポイントを挙げていきました。
- RSS 登録数制限
- これがとてもストレスになっていることに気づきました。課金しろよという話ではあるのですが、それなら Google ニュースでいいや、くらいの熱量でした。
- ザッピングしにくい UI
- 先述の通り元々 Feedly ユーザだったのですが、「ドロワーメニューを開く -> カテゴリを選択する」の2ステップの操作が必要でした。なんかもっと快適にぬるぬる情報をザッピングできると嬉しいなと考えました。
- 記事検索機能
- Feedly では課金機能だったのですが、これができればリストで見失ってしまったとしてもまた記事に出会うことができるので、絶対に欲しいと思いました。
さて要件をまとめるとこんな感じです
- RSS 登録数無制限
- ザッピングしやすい UI
- 記事検索機能
これらの課題を解決するようなアプリを開発したいと思いました。
4. Flutter を採用した理由
次に現代のアプリ開発について調べていきました。
学生時代に Android アプリを書いたことはあったのですが、その時代とはどうやらかなり様相が違っているようでした。
クロスプラットフォーム対応は絶対欲しいと思っていたので、React Native か Flutter が候補になりました。
React にはあまりいい思い出がなかったため、今回は Flutter を選択することにしました。
Flutter は Dart という言語で書いていくのですが、構文や言語仕様についてもそこまでとっつきにくさもなく、とても書きやすい言語だと感じました。
また UI についてもある程度適当に実装してもそれっぽい見た目に仕上がるため、そこもとても嬉しいポイントでした。
5. アプリの機能と特徴
そして最終的にできあがったのが「MilleFeed（みるフィード）」です。
ミルフィーユのように情報が積み重なっていくイメージからつけました。
5.1 主な機能
- カテゴリ毎のタブビュー
- とにかくザッピングしやすさを意識しました
- 操作モード
- 「スワイプが気持ちいいモード」と「Feedly ライクな操作モード」を用意し、気分で変えられるようにしました。
- サムネイル表示モード
- とにかくいろんな表示ができるようにしました。Google ニュースっぽく表示したり、Yahooニュースっぽく表示したり、そもそもサムネイルを非表示にできたりします。
- フィードの自動認識
- 現代の Web サイトは RSS への導線がわかりにくかったり、RSS はあるのに導線がなかったりします。そのためトップページを張るとバックエンド API がいい感じに URL 探して取ってくる実装を入れました。
- またその過程でキーワード検索できたら面白いかもと思ったので、フィードのキーワード検索もできるようにしました。
- 記事検索機能
- インクリメンタルサーチでサクサク検索できます。かなり気に入っています。
5.2 バックエンド API
サーバを持ちたくなかった（普段の仕事だけでお腹いっぱい）のと、手軽に高速に実装したかったため、Cloudflare Workers を利用しました。
こだわった点としては
- CPU 実行時間が 1req 10ms
- これは Cloudflare Workers の無料枠の制限ですが、とにかく高速に実装することを意識しました。結果として、1req あたり平均 1.40ms という超高速 API になりました。
- バックエンド DB に Cloudflare D1データベース
- 情報をどこに置こうかなと思ったときに、無料で高速かつ耐障害性も高い Cloudflare の DB を使うことにしました。最適化もありますが、クエリ当たり 0.5ms 程度という爆速レスポンスを返してきます。
- Cloudflare キャッシュに載せる工夫
- 当然ですが同じクエリを複数のユーザーが叩けばキャッシュにヒットします。しかしながらそのような理想状態はフリー入力ではまず起き得ません。そのため、フィード検索画面におすすめキーワードを表示し、そこに誘導することにしました。結果として、フィードをザッピングするという新たな体験も生むことができました。
6. 開発してみて良かったこと
正直形にならないだろうなあと思って始めたアプリ開発でしたが、なんだかんだで形になり、さらに自分の理想の RSS リーダーができたことは非常に良かったです。
普段の業務ではまずやらないことのオンパレードだったため、非常に良い気分転換になりました。
7. 今後の展望
さて、完成してやることがなくなったように思いますが、既にいくつかの課題を見つけています
- 無尽蔵に増えていくキャッシュ
- 1週間ほど使い続けていますが、500MB を超えるキャッシュを使っており戦慄しています。設定画面にキャッシュクリアの仕組みはありますが、自動でいい感じに掃除されるとユーザーも（私も）嬉しいので、キャッシュストラテジーの最適化がしばらくの楽しいパズルになりそうです。
- サムネイル画像の縦横比
- 先程自分で使っていて気付いたのですが、縦長の画像がサムネイルとして表示されると横長に潰れます。これはすぐに直すことになりそうです。
8. おわりに
RSS 文化を広げたい
キュレーション全盛の今、何を言っているんだという感じですが、声を大にして言いたい。
「RSSはいいぞ」
インフラエンジニアでも Flutter でアプリは作れる
知識ゼロからそれなりに動くものが作れました。
現代のアプリ開発を体験する、という意味でも大変貴重な経験になりました。
またインフラプロダクトとはまた違った達成感が味わえるので、とてもおすすめしたいです。
最後に
アプリのフィードバックやバグ報告待っています。
Discussion