はじめに
RSSとAWSのLAMBDAを使って自社ホームページにQiita記事を掲載する方法のメモ
Qiitaに限らず、CORS制限のかかっているRSS取得全般で使えるのではないかと思う
本メモでは主に、
・QiitaのRSS取得ロジック（Lambda関数内）
・非同期でLambda関数呼び出し、XML形式からJsonへの変換（JS）
を記録している
株式会社Growfit HP
目次
前提条件
・QiitaのRSS（記事情報）を取得してHtmlファイル（ホームページ）に追記したい
・Html,Css,Javascriptの構成で、バックエンドの言語とサーバー非使用
調べて分かったこと
・QiitaのRSSは、JSから非同期通信する際にCORS制限があり（バックエンドの）サーバーを経由しないといけなかった
・QiitaのRSSはXML形式で取得できる
・JSでは、XML形式からJsonへの変換は自力でやる必要がある
解決方法
・AWSのLambdaでQiitaのRSS（記事情報）を取得し、それを返す関数作成
・Javascriptで上記関数を非同期通信し、取得
・xmlからjsonに変換し、表示
以下、Lambda
https://qiita.com/organizations/{組織名}/activities.atom
でorganizationの最新投稿記事４件を取得できる
urllib.requestを使い、読み込む
lambda_function.py
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
/**
* 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);
})
}
}