概要
自分用に使い勝手の良い、はてブviewerをReact/Reduxで作って公開しました。
Pasta - Hatena Bookmark Viewer -
スクリーンショット
どんなものか
登録したキーワードに関連するニュースを配信する『Zite』というアプリがあるんですが、配信される記事が英語のみなので、こいつの日本語版を作ろうと思い着手しまた。当初はReact Nativeでスマホアプリを作り始めたんだけど、先にWEB版を作ってしまったほうが変なところで躓かずにすむんじゃないかと思い、こちらを先に実装することにしました。
ただリリース直前で気づいたんですが、公式にも同様の機能の『関心ワード』なるものが実装されたらしく全力で泣きました。
とはいえ公式にはない機能もあるので説明します。
できること
自分がはてぶを使用していて欲しいと思った機能をできるだけ載せてます。
- ブックマーク数によるフィルタリング
- 無限スクロール
- キーワード登録
- ユーザー登録
- お気に入り
- 1アクションでのコメント表示
ブックマーク数によるフィルタリング
スライダーでブックマーク数によるフィルタリングがかけれるようにした。 現状の範囲は1〜250だけど、ユーザー側で調整できるほうが良さそう。 はてブは『新着』や『人気』に分けずにブックマーク数によるフィルタリングだけできればいいと思ってる。
無限スクロール
よくあるやつです。 ページ下部までスクロールすると自動的に次の記事をロードします。
キーワード登録
メインの機能です。キーワードを登録すると、キーワードを含む記事を配信します。
『テクノロジー』の『新着』を眺めていてもすぐに記事が流されて行ったり、そもそもはてブ数が少なくピックアップされない記事を見つけるのに重宝しています。例えば自分の場合は『react』とか『elixir』とか登録しておくと捗ります。登録したキーワードはIndexedDBに保存しているので登録情報はブラウザ毎となります。
ユーザー登録
ユーザーフィードの登録が可能です。例えばid:bokuwebといったid:usernameの形式で登録しておくとユーザーフィードが配信されます。
自分の場合はJavaScript周りの情報を追ったりするのにid:efclさんとか登録しておくことで捗ってます。
お気に入り
正直蛇足感がありますがつけました。このツール上からブックマークを1アクションで行うことができないので『あとで読む』的な使用方法になるかと思います。ブラウザ間での共有もできませんし。キーワードと同様IndexedDBに保存してます。
1アクションでのコメント表示
公式ではコメントを表示するまでのステップが異様に多いので1ステップで表示できるようにしました。
以上です。他にはインクリメンタルサーチをつけたかったんですが、現状のAPIではフロントのみでは困難なので諦めてます。その他に機能の要望などフィードバックいただけると嬉しいです。
主な構成など
React + Redux + IndexedDBです。基本的には、はてなのフィードを GoogleFeedAPIを介してJSONPで取ってきてます。
buildしてindex.htmlを開けば動きます。
主要ライブラリ
| 名称 | 概要 |
|---|---|
| dexie | Wrapper for IndexedDB |
| material-ui | material design, スライダーとボタンを使用 |
| react-infinite | 無限スクロール |
| redux-logger | ログを見やすく |
| redux-thunk | 非同期アクション用 |
| jsonp | JSONP用 |
困った点など
React-Infinite内アイテムの高さ変更React-Infiniteはアイテムの高さをこちらから渡してやる仕様になっていて、サボるとスクロールがうまくいかなくなる。- 今回は定期的にアイテムの
ClientHeightを見にいって高さを渡すというバッドノウハウでかわしてる。 - ただし、アイテムの表示はリングバッファになってるぽくて、表示されているアイテムしか
ClientHeightは取得できない。
- Reducer間のステートの依存とか、Reduxのループ中のどこでどのステートが必要となるか十分な検討をせずに進めたため、でかいステートをぶんぶん振り回すこととなり失敗した。
さいごに
正直あまりモチベーションがありませんが、Electron版、React-Native版にもできれば着手したいです。
フィードバック歓迎です。何かございましたらTwitter,GitHubなどでアクセスいただければと思います。