インストールしたTT-RSSではAPIを利用できるようです。
参考にしたページは下記。
APIリファレンス
HTMLとJavaScriptの勉強がてら、(1)ログインして、(2)フィード一覧を取得して、(3)コンテンツ一覧を取得する といった流れを作成してみます。
出来たのがこちら。実用性は全く無いですが、備忘のためにメモメモ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TT-RSS API Test</title>
<style>
.accordion {text-align: left;}
.accordion .inner {display: none;}
.accordion p{cursor: pointer; padding: 10px;}
.feedList {float: left;}
.feedInfo {float: left;}
</style>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var API_URL = './tt-rss/api/'; // APIの場所
var DATA_TYPE = 'json'; // データの形式
var ttrss_sid = "";
// loginボタンがクリックされたら
$('button#login').click(function(){
var data = {
op: "login",
user: $("#userid").val(),
password: $("#password").val()
}
$.ajax(
{
url:API_URL,
type:'post',
dataType: DATA_TYPE,
data: JSON.stringify(data),
contetType: 'application/json'
})
// Ajaxリクエストが成功したら
.done( (data) => {
ttrss_sid = data.content.session_id;
// session_id が取得できたらログインフォームを隠す
if(ttrss_sid){
$('#first').hide();
getFeedView(ttrss_sid);
}else{
$('.feedList').text(data.content.error);
};
})
// Ajaxリクエストが失敗したら
.fail( (data) => {
$('.feedList').html('server error');
})
// Ajaxリクエストが成功・失敗どちらでも
.always( (data) => {
console.log(data);
});
});
// ログインした後に呼ばれる
function getFeedView(data){
$('.feedList').text("ログイン成功！データ取得中･･･");
var data = {
sid: ttrss_sid,
op: "getFeedTree"
}
$.ajax(
{
url:API_URL,
type:'post',
dataType: DATA_TYPE,
data: JSON.stringify(data),
contetType: 'application/json'
})
.done( (data) => {
console.log(data);
var catList = "";
// 取得したリスト分だけ繰り返し
for( var i=0; i<data.content.categories.items.length; i++){
var feedList = "";
catList = catList + "<ul class='accordion'><p class='"+ data.content.categories.items[i].bare_id + "'>" + data.content.categories.items[i].name + "</p>";
// こっちは総数が直接分からないのでeachで繰り返し
$.each(data.content.categories.items[i].items,function (index,val){
if(index == 0){feedList = "<ul class='inner'>";}
feedList = feedList + "<li id='" + val.bare_id + "'>'" + index + ":" + val.name + "</li>";
});
catList = catList + feedList + "</ul></ul>";
}
$('.feedList').html(catList);
});
}
//.accordionの中のp要素がクリックされたら
// 動的に生成しているHTMLなので、$(document)を使う
$(document).on("click",".accordion p", function(){
//クリックされた.accordionの中のp要素に隣接するul要素を開いたり閉じたりする。
$(this).next('ul').slideToggle();
});
//.innerの中のli要素がクリックされたら
$(document).on("click",".inner li", function(){
console.log($(this).attr('id'));
var fid = $(this).attr('id');
var data = {
sid: ttrss_sid,
op: "getHeadlines",
feed_id: fid // 他にも引数はあるみたいだけど省略･･･
}
$.ajax(
{
url:API_URL,
type:'post',
dataType: DATA_TYPE,
data: JSON.stringify(data),
contetType: 'application/json'
})
.done( (data) => {
var feed_title = "";
var feed_link = "";
var title = "";
var feed_html = "<p>" + data.content[0].feed_title + "</p><ul>";
// 取得したリスト分だけ繰り返し
for( var i=0; i<data.content.length; i++){
feed_link = data.content[i].link;
title = data.content[i].title;
feed_html = feed_html + "<li><a href='" + feed_link + "' target='new'>" + title + "</li>";
}
feed_html = feed_html + "</ul>";
$('.feedInfo').html(feed_html);
console.log(data);
});
});
//feedInfoの中のa要素がクリックされたら
$(document).on("click",".feedInfo a", function(){
console.log($(this).attr(''));
// 外部サイトをページ内に埋め込むのは難しそうなので延期
// $.ajax(
// {
// url: $(this).attr('id'),
// timeout : 1000, // 1000 ms
// datatype:'html'
// })
// .done( (data) => {
// var out_html = $($.parseHTML(data));//parse
// $('contents').html(out_html);
// });
});
});
</script>
</head>
<body>
<div id="first">
<form id="form" method="post" accept-charset="utf-8" return false>
<p>id <input type="text" name = "userid" id ="userid"> </p>
<p>pw <input type="password" name = "password" id="password"> </p>
</form>
<button id="login">login</button>
</div>
<div class="feedList"></div>
<div class="feedInfo"></div>
</body>
</html>
コメント