Feed43で自サイトのRSSフィードを作る

こんにちは、ひろかずです。

突然ですが、自分のブログサイトをつくりましたので、Qiitaを卒業します。
自分のブログサイトにはRSSフィード機能がないので、[Feed43](https://feed43.com/)を使ってRSSフィードの作成しました。
作成方法を卒業エントリ代わりに、一筆書きます。

# tl;dr的な何か
RSSフィードはこちらです。今後もご贔屓に。
https://feed43.com/hirokazu-blog.xml

# 参考ドキュメント
[Feed43.com - Step-by-step example of feed setup](https://feed43.com/step-by-step.html)

# Feed43 is 何？
RSSフィード作成SaaSです。
ユースケースとしては、自分のお気に入りのサイトがRSS対応してない場合のRSSフィード作成や、自分のサイトのRSSを知ってほしい時に使うケースがありそうです。
ひろかずの場合は、後者ですね。

Freeプランがありますので、気軽に試せます。
<img width="693" alt="feed43-00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/817ea744-224a-7c63-8553-4d134bc6bdde.png">

# 工程
1. Feed43アカウントの作成
2. Feedの作成

# 1. Feed43アカウントの作成
[Create account]を選択して、利用者情報を登録

- 確認メールが届くので確認URLを選択

<img width="695" alt="feed43-01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/aa99aa04-4861-5882-f6a8-859cda629c6c.png">

[My feeds]を選択してログイン

<img width="685" alt="feed43-03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/90380cd6-bcad-61af-f3dd-b6ff8a4a9bd5.png">

# 2. Feedの作成
[Create your first feed]を選択
<img width="386" alt="feed43-04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/5127c57d-0d7b-818c-2cae-cb917689dcb5.png">

サービス内容を確認して[Continue]を選択
<img width="684" alt="feed43-05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/a598e6f4-d1be-c164-7e28-5918124282ca.png">

更新情報が表示されるページのURLを設定して、[Reload]を選択

- ひろかずのサイトは、トップページに各ページエントリが表示されますので、トップページを登録します

<img width="677" alt="feed43-06.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/5083090b-734a-a216-3387-ea01f0bcc9e9.png">

ページソースが読み込まれるので、取得する領域を確認

<img width="707" alt="feed43-07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/371f1cc1-6305-420c-6636-7fa5c585b3d7.png">

各ページエントリのブロックはこんな感じでした
ここから必要な情報をパースします

```
<header class="entry-header">
<h2 class="entry-title"><a href="https://www.fnifni.net/aws-reinvent-2018-security-recap-2nd/" rel="bookmark">AWS re:Invent 2018 Security re:Cap 第二部 ～セキュリティセミナー～ に行ってきた</a></h2> <div class="entry-meta">
<span class="byline"> By <span class="author vcard"><a class="url fn n" href="https://www.fnifni.net/author/hirokazu/">yoshidahirokazu</a></span></span><span class="posted-on"> <a href="https://www.fnifni.net/2018/" rel="bookmark"><time class="entry-date published" datetime="2018-12-24T17:01:22+09:00">2018-12-24</time><time class="updated" datetime="2018-12-25T21:27:30+09:00">2018-12-25</time></a> </span> </div><!-- .entry-meta -->
</header><!-- .entry-header -->
```

URLとアンカーテキスト、公開日時と更新日時を取得することにします

```
<header class="entry-header">{*}
<a href="{%}"{*}>{%}</a>{*}
<time class="entry-date published" datetime="{%}"{*}>
<time class="updated" datetime="{%}"{*}>{*}
</header>
```

[Extract]ボタンを選択し、情報が取得できることを確認

<img width="676" alt="feed43-12.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/a5e320bf-be84-5b76-25d8-a0e55c55b341.png">

出力フォーマットを設定

<img width="257" alt="feed43-13.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/3f987d82-b776-86f8-ffca-5c0ba5fcf38a.png">　<img width="223" alt="feed43-14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/f18bc848-ac0f-b21d-8911-4d5ca7bcb6dc.png">

[Preview]ボタンを選択し、内容を確認

<img width="692" alt="feed43-15.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/490ffe39-f824-5446-da37-53b31c54f791.png">

Feed URLが作成されましたが、ちょっとわかりにくいですね

<img width="494" alt="feed43-16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/bd52ca2c-9407-6f7e-3ca2-3c7f3c18b8ba.png">

[Change file name]を選択し、Name欄を`hirokazu-blog`と変更して、[Rename]を選択

- ファイル名が`hirokazu-blog.xml`になりました

<img width="470" alt="feed43-18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/237a1cb8-8220-8526-684e-47e96d397cf4.png">

Feed URLにアクセスすると、きれいに表示されていますね。

<img width="693" alt="feed43-19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/46611/a15bb413-ec30-dfcc-5752-66dec49f8194.png">

自分のサイトのRSSフィードが作成できました。

今日はここまでです。
お疲れ様でした。