インストールした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>
コメント