logo

アルパカログ

easy-notion-blogにRSSフィードを実装して更新ツイートを自動化する

ブログを書いたら更新を自動でツイートしたいですよね。

Notion Blog で RSS を配信する機能を追加する方法は以前 Notion Blogでブログの更新情報をRSSで配信する で説明しましたが、この記事ではもっと具体的に easy-notion-blog に RSS 配信機能を実装して、記事の更新を IFTTT で自動ツイートする方法を解説します。

💡
easy-notion-blog について知りたい方は Notion Blog が簡単に始められる easy-notion-blog の紹介 をご覧ください。
システムの全体像

今回作るシステムは、記事の更新情報を RSS フィードで配信し、IFTTT を使って RSS フィードの更新を検知して自動で Twitter に投稿するというものです。

すなわち、やることは下記の2つです。

  • RSS フィード配信機能の実装
  • 「RSS フィードの更新をトリガーにツイートする」というIFTTTアプレットを設定する

IFTTT はさまざまなトリガーに対してアクションを設定できる便利なアプリです。

例えば「RSS フィードが更新された」「新しいツイートがあった」などのトリガーに対して「ツイートする」「通知を送信する」などといったアクションが設定できます。

RSSフィード配信機能を実装する

ブログの各ページはコンテンツを HTML でレスポンスしますが、RSS フィードは更新情報を XML という形式でレスポンスします。

そのため、既存の HTML をレスポンスするページとは異なったソースになります。

まず、src/pages/api/ というディレクトリを作り、その中に下記の内容で feed.ts というファイルを追加します。

下記の箇所は自分の情報に置き換えてください。

  • 【著者の名前(Twitterアカウント名など)】
  • 【TwitterアカウントのURLなど】
  • 【フィードのタイトル】
  • 【フィードのサブタイトル】
import { IncomingMessage, ServerResponse } from 'http'
import { renderToStaticMarkup } from 'react-dom/server'
import { NEXT_PUBLIC_URL } from '../../lib/notion/server-constants'

import { getBlogLink } from '../../lib/blog-helpers'
import { getPosts } from '../../lib/notion/client'

function decode(string) {
  return string
    .replace(/&/g, '&')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
    .replace(/"/g, '&quot;')
    .replace(/'/g, '&apos;')
}

function mapToEntry(post) {
  const date = new Date(post.Date)
  return `
    <entry>
      <id>${NEXT_PUBLIC_URL}${getBlogLink(post.Slug)}</id>
      <title>${decode(post.Title)}</title>
      <link href="${NEXT_PUBLIC_URL}${getBlogLink(post.Slug)}"/>
      <published>${date.toJSON()}</published>
      <updated>${date.toJSON()}</updated>
      <author>
        <name>【著者の名前(Twitterアカウント名など)】</name>
        <uri>【TwitterアカウントのURLなど】</uri>
      </author>
      <content type="xhtml">
        <div xmlns="http://www.w3.org/1999/xhtml">
          ${renderToStaticMarkup(post.Excerpt)}
        </div>
      </content>
    </entry>`
}

function concat(total, item) {
  return total + item
}

function createRSS(posts = []) {
  const postsString = posts.map(mapToEntry).reduce(concat, '')
  const updated =
    posts.length > 0
      ? `
    <updated>${new Date(posts[0].Date).toJSON()}</updated>`
      : ''

  return `<?xml version="1.0" encoding="utf-8"?>
  <feed xmlns="http://www.w3.org/2005/Atom">
    <title>【フィードのタイトル】</title>
    <subtitle>【フィードのサブタイトル】</subtitle>
    <link href="${NEXT_PUBLIC_URL}/feed" rel="self" type="application/rss+xml"/>
    <link href="${NEXT_PUBLIC_URL}" />${updated}
    <id>${NEXT_PUBLIC_URL}/feed</id>${postsString}
  </feed>`
}

const Atom = async function(req: IncomingMessage, res: ServerResponse) {
  res.setHeader('Content-Type', 'text/xml')
  res.setHeader(
    'Cache-Control',
    'public, max-age=300'
  )

  try {
    const posts = await getPosts()
    res.write(createRSS(posts))
    res.end()
  } catch (e) {
    console.log(e)
    res.statusCode = 500
    res.end()
  }
}

export default Atom
src/pages/api/feed.ts

次に Vercel のプロジェクト設定を開き、環境変数 NEXT_PUBLIC_URL を設定します。

🔥
NEXT_PUBLIC_URL の末尾にはスラッシュ / を入れないように注意してください。
画像が読み込まれない場合はページを更新してみてください。
NAMEにNEXT_PUBLIC_URL, VALUEに自分のサイトのURLを登録する

次に、 サイトのURL/feed で、先ほど追加した src/pages/api/feed にアクセスできるようにします。

next.config.js を開き、下記の行を追加します。

    },

+   async rewrites() {
+     return [
+       { source: '/feed', destination: '/api/feed' },
+     ]
+   },

  }
next.config.js

ここまでできたら自分の GitHub リポジトリに push して Vercel にデプロイします。

デプロイ後、ブラウザで サイトのURL/feed にアクセスして RSS フィードが表示されれば成功です。

RSSフィードの更新をトリガーにツイートするIFTTTアプレットを設定する

RSS フィードの配信ができたので、次は IFTTT で RSS フィードの更新をトリガーにツイートできるようにしていきます。

まずお使いのスマホに IFTTT アプリをインストールします。

インストールしたらアカウントを作成し、Create メニューからアプレットを作成していきます。

まずは “If This Add” を選びトリガーを作っていきます。

画像が読み込まれない場合はページを更新してみてください。
まずはトリガーを追加する

今回は RSS フィードの更新をトリガーにしたいので、検索ボックスに RSS と入力して “RSS Feed” を選択します。

画像が読み込まれない場合はページを更新してみてください。
RSS Feed を検索する

新しい更新があればアクションしたいので “New feed item” を選びます。

画像が読み込まれない場合はページを更新してみてください。
New feed item を選択する

Feed URL に先ほど確認したフィードのURL 自分のサイト/feed を入力して Create trigger します。

画像が読み込まれない場合はページを更新してみてください。
Feed URL には easy-notion-blog に追加した RSS フィードの URL を入力する

これでトリガーの作成ができました。次に、アクションを追加していきます。

“Then That Add” を選択します。

画像が読み込まれない場合はページを更新してみてください。
次にアクションを追加する

今度は検索ボックスに “Twitter” を入力し、”Twitter” を選択します。

画像が読み込まれない場合はページを更新してみてください。
Twitter を検索する

ツイートしたいので “Post a tweet” を選択します。

画像が読み込まれない場合はページを更新してみてください。
Post a tweet を選択する

Twitter アカウントを連携、選択し、Tweet text を自分なりに編集します。

ツイート時には Entry Title に記事のタイトルが、 Entry URL に記事の URL が自動で挿入されます。

画像が読み込まれない場合はページを更新してみてください。
Twitter アカウントを連携し、ツイートテキストを編集して作成する

“Create action” でアプレットの作成が完了です。

アプレット作成後、新しい記事を公開すると IFTTT が RSS フィードの更新を検知してツイートしてくれます(すでに公開中の記事に対してはツイートしません)。

ただし、IFTTT の更新チェック間隔が微妙に長いのか、記事の公開からツイートまで 1~2 時間程度かかることが多いようですのでご注意ください。

以上です。

この記事では easy-notion-blog に RSS 配信機能を実装して、記事の更新を IFTTT で自動ツイートする方法を解説しました。

比較的簡単にできるカスタマイズなので、easy-notion-blog をお使いの方はぜひチャレンジしてみてください。

また、もしわからないことがあればお気軽に easy-notion-blog の Twitter コミュニティでお聞きください。