RSSを読み込んで表示するだけのツールをLaravel + BootstrapVueで作ってみました【#np2020】




Laravel + BootstrapVueの習作として、RSSを読み込んで何らかの形で表示するだけのツールを作成してみました。例によって僕個人が個人サイトで使用する目的のためだけに制作しているので、汎用性は保証していません。
(トラフィック次第では制限が掛かる可能性もあります)




動作例

リスト版


シンプル版




基本構成

例によってLaravelとVueの合わせ技です。
構成は至ってシンプルで、次の2つだけ。iframeで表示することを想定しています。

  1. LaravelでRSSを読み込んでJSONを出力するAPIを作成
  2. JSONを読み込んで整形してHTMLを出力するアプリケーションを作成

CSSなど装飾はBootstrap4に任せて独自の設定は極力控えています。RSSの取得をLaravelに任せているのは、CORS対策が面倒なためです。また後に公開されているAPIを叩いてJSONを出力する機能を持たせる予定があるためでもあります。



キャッシュ

LaravelでRSSを読み込む部分には「Awjudd\FeedReader」を通してSimplePieを使用しています。SimplePieには自前でキャッシュ機能があるのですが(ファイルキャッシュ)それは使わず、APIの前に入っているCloudFrontがキャッシュをコントロールするようになっています。CloudFrontでキャッシュするかどうかは、ヘッダーで制御可能です。今のところ上手く動いてくれているようです。

一方で表示ページ自体はキャッシュしていません。開発中で変更が多く行われているためです。

LaravelでAPIの結果をCloudFrontでキャッシュさせようとしてハマった話【#np2020】 | mutter



今後の展望

このブログ上部にある、Tumblrのサムネイル部分とFlickrのスライドショー部分もコレと同じ仕組みで作成し、差し替える予定です。スライドショーはまだ未定ですが、多分BootstrapVueのカルーセルコンポーネントになると思います。サムネイルの方はシンプルに水平リストです。

しかしそろそろ本ブログのWordPress引っ越しの段取りも考え始めないとなあ……