LDRライクなRSSリーダのIrodr 1.0.0をリリースした
InoreaderのPCフロントエンドとして動くRSSリーダのIrodrが十分安定したので1.0.0をリリースしました。
LDRライクなInoreaderクライントのIrodr 1.0.0リリース。https://t.co/oco0VlPbBDhttps://t.co/UTPYfW3FnW pic.twitter.com/GzKLSj9zeo
— azu (@azu_re) September 30, 2018
IrodrはLDRライクな操作感を実現するために作成したInoreaderのフロントエンドです。 RSSの管理やRSSのクロールなどはInoreaderが行っていて、IrodrはAPI経由でRSSを取得しているだけです。 未読などはInoreaderと同期しているため、Inoreaderのウェブ版やモバイルアプリとの併用もできます。
LDR(Live Dwango Reader)は大体1年前にサービスが終了しました。
- 2017-07-24: announce to close
- 2017-8-31: scheduled date to close but it is still live
- 2017-8-31: Launch Irodr
- 2017-9-26: close http://reader.livedoor.com/reader/
- 2017-10-2: close http://reader.livedwango.com/reader/
LDRがなくなると困るかつまた同じような操作感のRSSリーダがなかったためIrodrを作ることにしました。RSSのクロール周りがとても大変なことは知っていました。そのため既存のRSSリーダをバックエンドにして、フロントエンド部分だけを作ることでLDR終了間際の数日で作ることができました。
- LDRがサービス終了のため、Inoreader/Feedlyをバックエンドに動くRSSリーダを書いている | Web Scratch
- Irodrを最初公開したのは2017-8-31なので1年前です
大体1年ぐらい使っていて、一日数千フィードとかは読める程度には安定しているので1.0.0をリリースしました。 今も細かいところは直したりしているので、興味がある人はIssueを見てください。
使い方
- https://irodr.netlify.app/ を開く
- Connect to Inoreaderをクリックする
- AuthorizeでOAuth認証する
- 自動でIrodrに戻ってくるのでRSSを読む
Keyboard ShortcutはREADMEを参照してください。
後述するUserScript APIでキーバインドを変更できたような気もします。
モバイルデバイスのブラウザでも動きますが、Inoreaderのネイティブアプリを使ったほうが良いです。
技術的な部分
IrodrはNetlifyで動いています。Netlifyの_redirects
を使ったCORS Proxy機能を使い、APIを叩く部分をProxyしています。
ステート管理周りはAlminとddd-base を使ったよくあるレイヤードアーキテクチャな感じです。 そこまで大きなアプリではないのでドメイン周りもレイヤーが分かれてるぐらいで大したことはしてないです。
UI周りはReactを使いUIフレームワークとしてOffice UI Fabricを使っています。 Office UI FabricはTypeScript + Reactでちゃんと扱えるフレームワークなので結構使うことが多いです。 また、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を投げてください。
お知らせ欄
JavaScript Primerの書籍版がAmazonで購入できます。
JavaScriptに関する最新情報は週一でJSer.infoを更新しています。
GitHub Sponsorsでの支援を募集しています。