PWA で SS リーダーアプリ作った

More than 1 year has passed since last update.


アプリについて

成果物: https://ssconnect.elzup.org/ (モバイル対応のみ)

リポジトリ: https://github.com/elzup/ssconnect

icon-60@3x.png




リーダーと呼びましたが、いわばアンテナアプリ側です。複数のSSまとめサイトの SS リンクリストを表示します。

このアプリの一つ目の特徴は検索です。作品タグ + キャラ名で絞り込み、検索クエリをタブ化して保存できます。

もう一つの特徴は複数のサイトをあつかっていながらSSの重複がないことです。タイトルをある程度正規化して集約しています。

データは Rails で実装した API からとってきています。記事データは SS アンテナサイトの RSS を収集しています。SSをRSSで非SSRです。

実はこのアプリのコアはサーバーサイドで、収集やタグ整理、管理の自動化に力を入れています。


PWA

React Native で作っていた個人開発アプリを PWA に移行しました。(1から)

作っているものが Native である必要がないこと、アプリストア管理やリリース準備などの手間を感じていたこと、デバッグ環境が軽くなりそうなことなどがきっかけです。(小さい個人開発しかして無いので狭い視点かもしれません)。もちろん PWA にはもっとたくさんメリットがあると思います。


デプロイまでした感想

GitHub Pages と create-react-app を使っているのでその時点で結構パフォーマンスが満たされている

感じがします。

manifest.json など最低限の設定でスプラッシュ画面がつく体験が良かった。

やはり Web 開発なので View の開発が断然楽で体に良かった。

今後

Audits などで PWA しっかり最適化して記事を上げたいと思います。

まだ触っていませんが、PWA でも store の migration などは必要になって来ると思います。

PC 対応は自分に需要がないので後回しです。


使っているもの


Redux

必須。


FlowType

型は必須。


s2s

https://github.com/akameco/s2s

Action の Type 書いた瞬間に Redux 構成と reducer, action, Flow 型づけ、テストなどなどを一瞬で作ってくれるので神。自分は必須。


styled-components

必須。

https://www.styled-components.com/

綺麗に整理して使ってないけど最近は Component ファイル内に雑に生やして使っている。

https://github.com/SSconnect/ssconnect/blob/master/src/components/StoryCell/index.js

擬似クラスや keyframe も書きやすい。


redux-persists

必須。

2行くらいで Store 永続化出来る。after REHYDRATE で Action 呼ぶ機能が欲しい。


material-ui

http://www.material-ui.com/#/

コンポーネント群ライブラリ。特にこだわりなく適当に選んだ。


デバッグ系


Redux DevTool Extension

必須

Developer_Tools_-_http___localhost_3000__and_index_js_—_components_StoryCell_—____ghq_github_com_SSConnect_ssconnect_and_Tomato_One.png


StoryBook

Storybook_and_Document2.png

横幅 full のコンポーネントのための Wrap が欲しい。


デプロイとか


react-create-app

開発のための script (react-scripts)が付いている。

service worker や manifest.json など一通りデフォルトでつくので良い。

react-scripts reject があるのがやっぱり好き。


gh-pages

今回は GitHub Pages に上げている。gh-pages は dist 用のブランチ管理して push してくれる。

なので gh-pages コマンドで一発。


ごく普通のものだけですがこの辺で以上です。

React Native はつまづくところ多かったり開発が安定しなかったのでしばらく 書かないかなと思います。

Redux + Flow の現在の構成がしっくり来すぎてコード書くのが楽しい時期です。