RSSとAWS-Lambdaを使って自社ホームページにQiita記事を掲載する方法メモ

# はじめに
RSSとAWSのLAMBDAを使って自社ホームページにQiita記事を掲載する方法のメモ
Qiitaに限らず、CORS制限のかかっているRSS取得全般で使えるのではないかと思う
本メモでは主に、
・QiitaのRSS取得ロジック（Lambda関数内）
・非同期でLambda関数呼び出し、XML形式からJsonへの変換（JS）
を記録している

株式会社Growfit HP

https://growfit.co.jp/
# 目次
1. [前提条件](#Chapter1)
1. [調べて分かったこと](#Chapter2)
1. [解決方法](#Chapter3)
1. [参考文献](#reference)

<a id="#Chapter1"></a>
# 前提条件
・QiitaのRSS（記事情報）を取得してHtmlファイル（ホームページ）に追記したい
・Html,Css,Javascriptの構成で、バックエンドの言語とサーバー非使用

<a id="#Chapter2"></a>
# 調べて分かったこと
・QiitaのRSSは、JSから非同期通信する際にCORS制限があり（バックエンドの）サーバーを経由しないといけなかった
・QiitaのRSSはXML形式で取得できる
・JSでは、XML形式からJsonへの変換は自力でやる必要がある

<a id="#Chapter3"></a>
# 解決方法
・AWSのLambdaでQiitaのRSS（記事情報）を取得し、それを返す関数作成
・Javascriptで上記関数を非同期通信し、取得
・xmlからjsonに変換し、表示

以下、Lambda

https://qiita.com/organizations/{組織名}/activities.atom
でorganizationの最新投稿記事４件を取得できる
urllib.requestを使い、読み込む

lambda_function.py
```Python
import json
import urllib.request

def lambda_handler(event, context):
    url = 'https://qiita.com/organizations/{会社の組織名}/activities.atom'
    with urllib.request.urlopen(url) as response:
        xml = response.read().decode("utf-8")

    return {
        'statusCode': 200,
        'body': xml
    }
```

以下、javascript

・fetchQiitaRss関数でfetchを使い非同期通信
・formatXmlToJson関数でjson形式にする
・createList関数でhtml要素的なものを作成
・fetchQiita関数で指定の場所にDOM作成、上記の関数を実行

api.js
```Javascript
/**
 * Qiitaのrssデータを取得する.
 */
function fetchQiitaRss () {
    var url = "Lambda関数で発行されたURL";
    return fetch(url)
}

/**
 * Qiita記事情報をxmlからjsonに整形して値を渡す.
 */
function formatXmlToJson (txt) {
    var parser = new DOMParser();
    var doc = parser.parseFromString(txt, "application/xml")
    var data = []
    $(doc).find("feed entry").each(function(index, item){
        data[index] = []
        data[index]['title']     = $(item).find('title').text()
        data[index]['published'] = $(item).find('published').text()
        data[index]['author']    = $(item).find('author').find('name').text()
        data[index]['url']       = $(item).find('url').text()
    })
    return data
}

/**
 * Qiita記事のDOMを生成する.
 */
 function createList(data) {
    var lists = '';
    for (var i = 0; i < data.length; i++) {
        var date = new Date(data[i]['date']);
        var year = date.getFullYear().toString().padStart(4, '0');
        var month = (date.getMonth() + 1).toString().padStart(2, '0');
        var day = date.getDate().toString().padStart(2, '0');

        lists += '<li class="top-qiita-articles__item">' +
                 '  <div class="top-qiita-articles__item-wrap">' +
                 '    <a href="' + data[i]['page_url'] + '" target="_blank">' +
                 '      <div class="top-qiita-articles__item-inner">' +
                 '        <div class="top-qiita-articles__item-inner-div">' +
                 '          <p>' + year + '-' + month + '-' + day + '</p>' +
                 '          <p class="content-title">' + data[i]['title'] + '</p>' +
                 '          <p> by ' + data[i]['author'] + '</p>' +
                 '        </div>' +
                 '      </div>' +
                 '    </a>' +
                 '  </div>' +
                 '</li>'
        ;
    }
    return lists;
}

function fetchQiita () {
    var selector = $('#anchor-qiita-articles .top-qiita-articles__contents');
    if (selector.length) {
        fetchQiitaRss()
            .then(function (response) {
                return response.text()
            })
            .then(formatXmlToJson)
            .then(createList)
            .then(function (lists) {
                selector.append(lists);
            })
    }
}
```

<a id="#reference"></a>
# 参考文献
- [aws lambdaではてなのホッテントリのRSSを取得するpython](https://gist.github.com/bz0/c8c68a96afea2d9a01bcfc084e44a510)
- [Qiita OrganizationのRSSを取得する方法](https://qiita.com/mikkame/items/23128361576ec973168c)
- [fetchで外部ドメインのXMLファイルを取得する｜ひとし - note](https://note.com/hitoshi2s/n/n1c2512757132)
- [JavaScript のクロス ドメイン (Cross-Domain) 問題の回避と諸 ...](https://tsmatz.wordpress.com/2011/06/24/jsonp-cross-domain/)
- [jQueryでXMLファイルの読み込みを行う方法を解説！ - Qumeru](https://qumeru.com/magazine/383)