HTMLページの購読が使いやすくなりました

いつもFeedeenのご利用ありがとうございます。運営者の伊藤です。

本日Feedeenの新バージョンを公開し、HTMLページを購読する際のUIを改善しました。マウスクリックでフィードに含めるリンクを指定することで、簡単かつ柔軟にフィードのないHTMLページを購読できるようになっております。Feedeenの活用の幅がさらに広がりますので、ぜひご利用ください！

追加したUIの概要

従来、HTMLページを購読するには次の2つの方法がありました。

• フィードを自動生成する
• CSSセレクタを指定してフィードを生成する

前者は手軽ですが、自動生成ゆえに必ずしも購読したい内容がうまく生成されるとは限りません。後者はHTML内のリンクをほぼ自由に指定できますが、CSSの知識とページ構造の把握が必要で、簡単に使えるものではありませんでした。

そこで今回、マウスクリックで指定したリンクのCSSセレクタを自動生成する機能を後者のUIに追加しました。前者よりも柔軟で、かつ後者よりも簡単に使えますので、HTMLからのフィード生成をより多くの方々にご活用いただけるかと思います。

使い方

購読ダイアログに購読したいHTMLページのURLを入力すると、従来の自動生成に加えて「リンクを指定して作成」という選択肢が表示されます。これをクリックすると、フィード生成のカスタマイズの画面に移行します。

カスタマイズ画面では、上の枠内にHTMLページの内容が表示スタイルを外した状態で表示されます。見た目が元のページとだいぶ異なるかと思いますが、JavaScriptなどで表示が切り替わる部分も選択可能とするためですので、なにとぞご了承ください。

※ 初回は「説明」タブが表示されるので、その場合は「編集」タブに切り替えてください。

HTML内のリンク（青背景で表示されます）をクリックすると、選択されて「CSSセレクタ」と「抽出されたアイテム」が自動で更新されます。

選択されたリンクをもう一度クリックすると選択解除されます。購読したい箇所が選択されるように調整してください。その後、「購読」ボタンをクリックすれば購読が開始され、選択したリンクの内容（表示内容やURL）が更新されるたびにフィードアイテムが追加されます。

なお、詳細設定の購読機能にもほぼ同様のUIを追加してあります。

狭い画面を想定しているのでリンクの選択と抽出アイテムの確認に画面遷移が必要ですが、デスクトップ版と同等の機能が利用できます。

制限事項

残念ながら、今回の機能には制限もあります。マウスクリックによって生成されるCSSセレクタはタグ名とクラス名の組み合わせに限られるため、あまり複雑な絞り込みはできません。したがって、クリックしたリンクと似通ったものが同時に選択・解除され、理想的な状態にできないことがあります。

その場合は、やはりCSSセレクタ欄により高度な指定を手入力する必要があります。クラス名以外の様々な要素で絞り込めば、理想に近い状態にできるでしょう。

ただ、頻繁に内容が更新されないリンク（ナビゲーションメニューのリンクなど）は混ざっていても問題ない場合もあります。目的のリンクを全て含んだ状態で購読し、様子を見てみるのも手です。

拡張機能からの購読時の遷移先変更

もうひとつの変更点として、拡張機能から購読する際の遷移先の変更を行いました。従来、拡張機能の「このページを購読」は詳細設定の購読画面に遷移していましたが、今回からデスクトップ版の購読ダイアログを呼び出すように修正されております。これにより、拡張機能から購読する際もデスクトップに適したUIが利用できます。

なお、購読画面の呼び出しは拡張機能以外でも以下のURLで実現できます。

https://www.feedeen.com/subscribe?u=[URLエンコードした対象ページのURL]

デスクトップブラウザであればデスクトップ版の購読画面に、モバイルブラウザであれば詳細設定の購読画面にそれぞれ遷移します。ブックマークレットなどでご活用ください。

今回は運営者の入院などもあってだいぶ開発に時間がかかってしまい、たいへん申し訳ありませんでした。引き続き改善に努めてまいりますので、今後ともFeedeenをよろしくお願いいたします。