はてぶのお気に入りをタイムライン形式で読めるHBFavというアプリがある。

このアプリは自分にとってはTwitterやFacebookの次くらいによく開くアプリで重宝している。

基本的な機能についてはほぼ不満はない。

しかし、クリップボードにコピーしたURLからブックマークをする方法については満足とはいえなかった。

この機能は、例えばTwitterやFacebookなどでシェアされたURLをコピーしてHBFavを開くと、画面上部にニョキッとURLが書かれたnotification viewみたいなものがでてきて、そこをクリックするとURLのページが開き、そこからブコメを見たり、ブックマークしたりということができる。

挙動自体はワンクリックでシンプルに！という気持ちを感じるしよいのだけど、問題なのは対象のURLがブックマークできるのはそのnotification viewが出てる間だけだということだ。

つまり、ブックマークしたいURLをそのタイミングでブックマークしないと、2度とHBFav経由でブックマークができなくなる。

これは結構困る。人間何か考え事をしてぼーっとしているときもあるし、URLをコピーしている状態でHBFavを開き他のブックマークに気を取られてしまうこともある。

そういうわけでなんとかその挙動を回避したいなと思い公開されているHBFavのソースを見るのだが、RubyMotionで書かれているというところでいつも思考停止し「まぁ我慢するか...」となっていた。

ただ、ちょうど最近は本家の方も色々大変そうでアプリを弄ってる余裕はなさそうだし、ReactNativeで色々アプリを作りたいという気分もあったので勉強がてらHBFavのReactNative版を自作してみることにしようという流れになった。

実際結構前からそういう気持ちはあったのだが、どうも業務や業務や業務などがあってまとまった時間が取れなかったのでお盆休みのタイミングでガッと書いてみた。ちなみにストアには出してないです(ストアで申請するのが一番面倒くさい...)。

名前

ReactNativeで書いたので頭にRNを付けて「RNHBFav」とした。

ソース

置いときます。星くれ。

RNHBFav

対応OS

iOSのみ。Android使いではないので...。

挙動

挙動 pic.twitter.com/JALWbGvlHH
— razokulover (@razokulover) 2017年8月20日

機能

基本挙動は本家HBFavと同じです。

ただ、実装は自分が普段使っている機能のみに絞ったので色んな機能が無いです。例えばmixiシェアとかmixiシェアとか...。

で、分かる範囲で本家と違う点は下記です。

人気/新着のエントリが無い
他のユーザーのブックマークが一覧ページが無い
ブックマーク時のシェアはTwitterのみ
ブックマークコメントにフォロワーのコメントまとめが無い
クリップボードのURLからブックマークする機能が無い
公開情報のみ扱う

また、オリジナルの機能としては下記です。

URLを入力してブックマークする機能
表記や色味や文字サイズなどのデザイン

実装期間

一応自分のフロントJSスキルを書いておくと、

ES6は最低限書ける
SPAではないWebアプリでVue.jsを使う程度
FluxはVuexしか知らん
Electron+Vue.jsで小さなTwitterClientを書いたことがある

この程度。React関連はReactNativeしか知らない。

このレベルでお盆に歌マクロスのリズムゲーでイベントを走りながら3~4日くらいでとりあえず使えるとこまで実装できた感じ。

実際は今週ドッグフーディングしながら修正等を仕事から帰ってきてからやってたので細かいとこまで入れると1週間くらいかかってるかもしれない。

歌マクロスやってなかったらもっと早く出来た可能性がある。

フレイアが可愛すぎた。

苦労した点

苦労は以下の3点に集約される。

OAuth認証ライブラリを自作しようとしてハマった
ブコメのスター・人気スター数表示機能
エラー・ローディングの制御

1つめのOAuth認証ライブラリを自作しようとしてハマったというのは、お盆のハイテンションで何を思ったか0からOAuth1.0aライブラリを書いてみたいという気持ちになってしまいやり始めたが、思いの外fetchの使い方、signatureの生成、デバッグなどなどにちょこちょこ苦戦し、結局有りもののoauthライブラリを使うことになったというやつ。

実際動くレベルで大体出来たんだけど、コード汚いし、綺麗でよりvalidなライブラリあるしこっち使ったほうがよくね？という車輪の再発明が馬鹿らしくなってしまったのが敗因。

2つめのブコメのスター・人気スター数表示機能というのは、ブコメ閲覧ページに表示するスターを取得するところ。

あそこは各ブコメのURLから各スターを取得するのだけど、スター取得APIはGETで、そのエンドポイントにブコメのuriをパラメーターとして付与してリクエストを投げるようになっているため、ある一定のブコメを超えると1本のリクエストでは412 URL Too Longエラーとなる。これを回避するためにリクエストを複数に分けるのだが、そうすると例えば1000ブクマとかある場合は10本以上スター取得のリクエストを発行しないといけなくなる。fetchとEventEmitterでなんとか書いたけどリクエスト数多い問題や実装汚い問題が残った。なんかもっといい方法ある気がする。

3つめのエラー・ローディングの制御というのは、アプリには付き物の非同期処理やユーザーへのレスポンスをしっかり返すという挙動を細かく設定するのが大変というやつ。

API通信をしている場合、ネットが切れてしまった場合、その他予期せぬエラーが発生した場合などなど、色々な状況が起きえるがその事象毎に適切なローディング・アラート・ページをしっかり返せるようにするのはデバッグで見落とす部分も多く、ドッグフーディングでわかることが多々あった。この辺の調整は結構再現が難しい場合も多く直すのに苦労する。