Feedlyでトップ画像だけが表示されないのでフィードを調整する@nuxt.js

FeedlyというでRSSサービスを利用しています。
Feedly. Read more, know more.
ここには自身のブログも設定して、RSSリーダーでの見え方がどんな感じかをチェックしています。

先日、RSS2.0から、ATOMにフィードのフォーマットを変更しました。

nuxtjs/feedで実装したRSSフィードをRSS2.0からATOM1.0にする
ブログが更新されたことを伝えるフィード。このブログで採用していた仕様をRSS2.0からATOM1.0にアップデートしました。...

これを機に、以前から気になっていた問題に対処してみました。

  1. ヒーローイメージが表示されないのはなぜだ
  2. contentの中にイメージタグがあればOK
  3. bodyHtmlにヒーローイメージを突っ込む
  4. まとめ:全てはUX向上のために

このブログのステータスを紹介します。
Nuxt.jsで構築をして静的HTMLを生成しています。
Markdownで記事を書いており、パラメータで色々管理しています。

ヒーローイメージが表示されないのはなぜだ

これはRSS2.0時代から思っていたのですが、ヒーローイメージに設定している画像が、Feedlyで表示されないのです。

ヒーローイメージとは、記事の一番上にある画像で、記事そのものの内容を示す画像のことを言います。

一覧ではサムネイルが出るはずで、記事内の一番上に表示されてほしい。
ところは、ヒーローイメージは表示されないのです。

Feedlyの仕様としては、ATOMフィードの中の<content></contet>内のイメージタグ(<img>)を表示しているようです。

contentの中にイメージタグがあればOK


僕の場合、Markdownの先頭に色々とパラメータを書いているのですが、記事のヒーローイメージはここで設定しています。

ATOMフィードの<content></contet>内には単純に記事だけが入っています。
つまり、ヒーローイメージを設定したイメージタグは含まれていなかった のです。

そりゃ、表示されなくて当たり前だわな

bodyHtmlにヒーローイメージを突っ込む


さて、これを表示されるように調整します。
元々の記事には影響を与えず、フィードのみに挿入されるように処理を施してみました。
こんな感じで。

const heroImg = domain + 'img/blog/' + article.img
  const bodyHtml = '<img src="' + heroImg + '">' + article.bodyHtml

Markdownで書かれた内容が処理されて、htmlになった文字列が格納された変数である、bodyHtml
このbodyHtmlの先頭に、ヒーローイメージをimgタグにして突っ込むだけという感じです。

これで<content>の中に、ヒーローイメージを設定したimgタグを挿入することができました。

まとめ:全てはUX向上のために


細かい仕様にも目を向けなくてはいけないという、面倒なところでした。
やってみたら簡単なんですけどね。

逆に、この細やかに調整できるところが、CMSではなくてnuxt/vueを使うメリットでもあります。

このブログの記事は、Feedly内で全ての記事を読めるようにコンテンツを挿入しています。
Feedlyユーザーとしては、いちいち遷移しないと読めないのは面倒です。

こういった部分でも、UXを向上できる施策は、どんどん導入していきたいと思いいます。

この他に、良いアイデアを見つけた方は、twitterなどで是非お教えくださいね。

#nuxt
#blog
ChaosBoy

テーマは「脱・思考停止」。
コメントはtwitterでお気軽に。