アプリについて

成果物: https://ssconnect.elzup.org/ (モバイル対応のみ)
リポジトリ: https://github.com/elzup/ssconnect

リーダーと呼びましたが、いわばアンテナアプリ側です。複数の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

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

styled-components

必須。

綺麗に整理して使ってないけど最近は 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

必須

StoryBook

横幅 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 の現在の構成がしっくり来すぎてコード書くのが楽しい時期です。

Redux はー
まだガンには効かないが
そのうち効くようになる
— えるざっぷ (@_elzup_) 2017年11月1日

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