読者です 読者をやめる 読者になる 読者になる

bokuweb.me

べんきょうしたこととか

はてブviewer『Pasta』をReact + Reduxで作って公開した

React.js Redux

概要

自分用に使い勝手の良い、はてブviewerをReact/Reduxで作って公開しました。

※GoogleFeedAPI停止につき現在利用できません。申し訳ありません。
Pasta - Hatena Bookmark Viewer -
ひとまず復旧したようです。 デスクトップ版もご利用ください。

blog.bokuweb.me

スクリーンショット

f:id:bokuweb:20151126221414p:plain

どんなものか

登録したキーワードに関連するニュースを配信する『Zite』というアプリがあるんですが、配信される記事が英語のみなので、こいつの日本語版を作ろうと思い着手しまた。当初はReact Nativeでスマホアプリを作り始めたんだけど、先にWEB版を作ってしまったほうが変なところで躓かずにすむんじゃないかと思い、こちらを先に実装することにしました。

ただリリース直前で気づいたんですが、公式にも同様の機能の『関心ワード』なるものが実装されたらしく全力で泣きました。

とはいえ公式にはない機能もあるので説明します。

できること

自分がはてぶを使用していて欲しいと思った機能をできるだけ載せてます。

  • ブックマーク数によるフィルタリング
  • 無限スクロール
  • キーワード登録
  • ユーザー登録
  • お気に入り
  • 1アクションでのコメント表示

ブックマーク数によるフィルタリング

スライダーでブックマーク数によるフィルタリングがかけれるようにした。 現状の範囲は1〜250だけど、ユーザー側で調整できるほうが良さそう。 はてブは『新着』や『人気』に分けずにブックマーク数によるフィルタリングだけできればいいと思ってる。

f:id:bokuweb:20151126225701g:plain

無限スクロール

よくあるやつです。 ページ下部までスクロールすると自動的に次の記事をロードします。

f:id:bokuweb:20151126230256g:plain

キーワード登録

メインの機能です。キーワードを登録すると、キーワードを含む記事を配信します。 『テクノロジー』の『新着』を眺めていてもすぐに記事が流されて行ったり、そもそもはてブ数が少なくピックアップされない記事を見つけるのに重宝しています。例えば自分の場合は『react』とか『elixir』とか登録しておくと捗ります。登録したキーワードはIndexedDBに保存しているので登録情報はブラウザ毎となります。

f:id:bokuweb:20151126230923g:plain

ユーザー登録

ユーザーフィードの登録が可能です。例えばid:bokuwebといったid:usernameの形式で登録しておくとユーザーフィードが配信されます。 自分の場合はJavaScript周りの情報を追ったりするのにid:efclさんとか登録しておくことで捗ってます。

f:id:bokuweb:20151126231920g:plain

お気に入り

正直蛇足感がありますがつけました。このツール上からブックマークを1アクションで行うことができないので『あとで読む』的な使用方法になるかと思います。ブラウザ間での共有もできませんし。キーワードと同様IndexedDBに保存してます。

f:id:bokuweb:20151126232520g:plain

1アクションでのコメント表示

公式ではコメントを表示するまでのステップが異様に多いので1ステップで表示できるようにしました。

f:id:bokuweb:20151126233420g:plain

以上です。他にはインクリメンタルサーチをつけたかったんですが、現状のAPIではフロントのみでは困難なので諦めてます。その他に機能の要望などフィードバックいただけると嬉しいです。

主な構成など

github.com

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などでアクセスいただければと思います。

github.com