[Javascript] ディスカッションを表示してみました
こんにちは、@yasuです。
ディスカッションもブログも表示するものに違いはないように思いますが、
データの取得にgetDiscussionsByCreatedを使用したので、
ディスカッションの方の言葉を使用しました。
記事を新しい順に取得できます。
特に目的を持って作ったのではなく、
getDiscussionsByCreatedの理解のために作りました。
実行方法
https://ojagggyo.github.io/steemitapi/getdiscussionsbycreated.html
実行結果
ソース
html
<!doctype html>
<html lang="en">
<head>
<title>getdiscussionsbycreated</title>
<meta charset="utf-8">
<link rel="stylesheet" href="getdiscussionsbycreated.css" type="text/css" />
<script src="https://github.com/steemit/steem-js/releases/download/v0.7.7/steem.min.js"></script>
<script src="https://ojagggyo.github.io/steemitapi/getdiscussionsbycreated.js"></script>
</head>
<body>
<p>ディスカッションを表示します。</p>
<span id="text"></span>
<input type="button" value="もっと見る" onclick="clickBtn()" />
</body>
</html>
javascript
function donokuraimae(date){
date1 = new Date(date);
date1.setHours(date1.getHours() + 9);
var now = new Date();
sa = now - date1;
if(sa >= 86400000){return Math.floor(sa / 86400000)+'日前';}
if(sa >= 3600000){return Math.floor(sa / 3600000)+'時間前';}
if(sa >= 60000){return Math.floor(sa / 60000)+'分前';}
if(sa >= 1000){return Math.floor(sa / 1000)+'秒前';}
return 'たった今';
}
function getTags(json_string){
const json = JSON.parse(json_string);
if ('tags' in json) {
return json.tags.map(tag => "#" + tag).join(' ');
}
return '';
}
function getImages(json_string){
const json = JSON.parse(json_string);
if ('image' in json) {
let html = "";
for(let i=0; i<json.image.length; i=i+1){
html = html + "<img src=" + json.image[i] + " loading=lazy />";
}
return html;
}
return "";
}
async function aaa(){
let query = { limit : 10, tag : "hive-161179" };
query["limit"] = _limit;
query["start_author"] = _author;
query["start_permlink"] = _permlink;
let ret = steem.api.getDiscussionsByCreatedAsync(query);
return ret;
};
function clickBtn(){
aaa().then(result => {
if(_author != ''){
result.shift();//配列の先頭を削除
}
if(result.length > 0){
_author = result[result.length - 1].author;//最後の要素を保存
_permlink = result[result.length - 1].permlink;//最後の要素を保存
_limit = 11;
}
_discussions = _discussions.concat(result);//合体
makeTable(_discussions);
}).catch(err => {
});
}
function makeTable(records){
let html = '<table border=1 >';
//テーブルのヘッダー
html = html + '<tr>';
html = html + '<th></th><th>author</th><th>title</th><th>beneficiaries</th><th>tags</th>';
html = html + '</tr>';
for(let i=0; i<records.length; i=i+1){
html = html + '<tr>';
html = html + '<td align=right>' + donokuraimae(records[i].created) + '</td>';//
html = html + '<td>' + records[i].author + '</td>';
html = html + '<td><a href=' + 'https://steemit.com' + records[i].url + ' target=_blank>' + records[i].title + '</a>'
+ '<br/>' + getImages(records[i].json_metadata) + '</td>';
html = html + '<td>';
for(let j=0; j<records[i].beneficiaries.length; j++){
html = html + records[i].beneficiaries[j].account + ' ';
html = html + records[i].beneficiaries[j].weight.toString().slice(0,-2) + '%';
html = html + '<br/>';
}
html = html + '</td>';
html = html + '<td>' + getTags(records[i].json_metadata) + '</td>';
html = html + '</tr>';
}
html = html + '</table>';
document.getElementById("text").innerHTML = html;
}
steem.api.setOptions({url: 'https://api.steemit.com'})
_author = "";
_permlink = "";
_discussions = [];
_limit = 10;
window.onload = function() {
_author = "";
_permlink = "";
_discussions.length = 0;//配列の初期化
clickBtn();
};
css
img {
width: 32px;
height: 32px;
object-fit: cover;
}
ありがとうございました。
steemit サインアップ
https://ojagggyo.github.io/steemitsignup
steemit 知識
https://ojagggyo.github.io/steemittips
日本語 Steemit Discord (超初心者～誰でも)
https://discord.gg/zKJgfzS
👍👍