InoreaderのPCフロントエンドとして動くRSSリーダのIrodrが十分安定したので1.0.0をリリースしました。

IrodrLDRライクな操作感を実現するために作成したInoreaderのフロントエンドです。 RSSの管理やRSSのクロールなどはInoreaderが行っていて、IrodrはAPI経由でRSSを取得しているだけです。 未読などはInoreaderと同期しているため、Inoreaderのウェブ版やモバイルアプリとの併用もできます。

LDR(Live Dwango Reader)は大体1年前にサービスが終了しました。

LDRがなくなると困るかつまた同じような操作感のRSSリーダがなかったためIrodrを作ることにしました。RSSのクロール周りがとても大変なことは知っていました。そのため既存のRSSリーダをバックエンドにして、フロントエンド部分だけを作ることでLDR終了間際の数日で作ることができました。

大体1年ぐらい使っていて、一日数千フィードとかは読める程度には安定しているので1.0.0をリリースしました。 今も細かいところは直したりしているので、興味がある人はIssueを見てください。

使い方

  1. https://irodr.netlify.app/ を開く
  2. Connect to Inoreaderをクリックする
  3. AuthorizeでOAuth認証する
  4. 自動でIrodrに戻ってくるのでRSSを読む

Focus Management of Irodr

Keyboard ShortcutはREADMEを参照してください。

後述するUserScript APIでキーバインドを変更できたような気もします。

モバイルデバイスのブラウザでも動きますが、Inoreaderのネイティブアプリを使ったほうが良いです。

技術的な部分

IrodrNetlifyで動いています。Netlifyの_redirectsを使ったCORS Proxy機能を使い、APIを叩く部分をProxyしています。

ステート管理周りはAlminddd-base を使ったよくあるレイヤードアーキテクチャな感じです。 そこまで大きなアプリではないのでドメイン周りもレイヤーが分かれてるぐらいで大したことはしてないです。

UI周りはReactを使いUIフレームワークとしてOffice UI Fabricを使っています。 Office UI FabricはTypeScript + Reactでちゃんと扱えるフレームワークなので結構使うことが多いです。 また、IrodrではListをたくさん使っているので、無限スクロールや折りたたみなどが実装がとてもめんどうな部分をオブジェクト渡すだけでできるので良かったです。

Irodr list

このListコンポーネントを使ってLDRライクなショートカットでフィードを移動するようなフォーカスコントールとかも行えました。(まあまあ無理やり)

TypeScriptで書いていて開発環境周りはcreate-react-app-typescriptを使っています。この辺は特別なことはしてないです。

LDR的なUserScript向けの公開JavaScript APIがページ内にあるため、ReactっぽくないDOM API的なコードもちょこちょこ入ってます。 次のコードみたいな感じで表示するコンテンツを非表示にするUserScript(Greasemonkeyスクリプト)などを書けるようになっています。

window.addEventListener("userscript-init", (event) => {
    userScript.event.subscribe("SubscriptionContent::componentDidMount", (content) => {
       const element = document.querySelector(`[data-content-id="${content.contentId}"]`);
       if(element){
          element.querySelector(".SubscriptionContentsContainer-contentTitle").classList.add("ng-content");
          element.querySelector(".SubscriptionContentsContainer-contentBody").setAttribute("hidden", true);
       } 
    });
});

このAPIを使ってバックグラウンドでタブを開いたり、NGフィルターを作ったりするUserScriptもあります。

あとはGaiyasと連携してはてなブックマークのコメントを表示するスクリプトを書いて使ってたりします。

// ==UserScript==
// @name irodr: gaiyas integration
// @namespace info.efcl.irodr.gaiyas
// @include     http://irodr.netlify.app/
// @include     https://irodr.netlify.com/
// @include     http://localhost:13245/
// @version     1
// @grant       none
// @run-at      document-end
// ==/UserScript==
window.addEventListener("userscript-init", (event) => {
  window.addEventListener("message", function(event) {
    if(event.data.type === "gaiyas::contentscript-to-webpage"){
      window.postMessage({
        type: "gaiyas::webpage-to-contentscript",
        url: window.userScript.getActiveContent().url
      }, "*");
    }
  });
});

おわりに

LDRが終了して大体1年ぐらい経ったので(Irodrを公開して1年ぐらい経ったので)、あらためてIrodrの紹介記事を書きました。自分がつかっているうちは開発されると思うので、何かあったら次のリポジトリにIssueやPRを投げてください。