Steemitの投稿リストを表示してみました

yasu (74)in #japanese • 2 months ago (edited)

こんにちは、@yasuです。

例の https://ojagggyo.github.io/ サイトで動的ページを作ってみました^^

前回の動的ページよりは使えるかも^^;
JavaScriptで動的ページを作ってみる

今回はjquery以外にも、steem-jsを使用しています。

機能

投稿を表示します。（20件）
表示する項目は、投稿のタイトル、投稿日、写真すべて。
投稿をクリックすると、該当の投稿を表示します。

以下のURLで表示します。
https://ojagggyo.github.io/postlist.html#yasu

アカウント指定方法、
#アカウント名（＠マークを除く）

#以降を省略すると、steemitblogアカウントを表示します。

ソースはおまじないの部分が多く、実際の処理はHTMLのHEAD部に記述したjavascript文ぐらいです。

ソース

<!doctype html>
<html lang="en">
    <head>
        <title>post list</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

        <script src="https://github.com/steemit/steem-js/releases/download/v0.6.4/steem.min.js"></script>                
        <script>
            var username;
            function saveUserName(){
                username = window.location.hash;// #username
                if (username == null || username.trim().length == 0){
                    username = "#steemitblog";
                }
                
                username = username.substr(1);//#を取る
                username = decodeURI(username).trim();//デコード、トリム
            }
            
            function load(){
                steem.api.getDiscussionsByBlog({tag: username, limit: 20}, function(err, result) {
                   
                    if(result.length == 0){
                       return;
                    }
                    
                    var posts = [];
                    for(let i = 0; i < result.length; i++){ 
                        const json = JSON.parse(result[i].json_metadata);
                        const title = result[i].title;
                        const permlink = "https://steemit.com/@"+username+"/"+result[i].permlink;
                        const created = new Date(result[i].created).toDateString();
                       
                        posts.push(
                            `<div class="list-group-item" style="width: 100%;" onclick=location.href="${permlink}">
                            <h4 class="list-group-item-heading" style="width: 100%">${title}</h4>
                            <div>${created}</div>
                            </div>`
                        );

                        if(json.image){
                            posts.push(`<div style="float: left; display: inline; background-color:#fff;" onclick=location.href="${permlink}">`);
                            for(let j = 0; j < json.image.length; j++){
                                posts.push(  
                                    `<img src="${json.image[j]}" style="padding: 2px; width: 300px; vertical-align: top"/>`
                                );
                            }
                            posts.push(`</div>`);
                        }
                    }
                    $("#postList").html(posts.join(''));//合体                    
                });
            }
            
            window.onload = function() {
                steem.api.setOptions({url: 'https://api.steemit.com'});
                saveUserName();
                load();
            };
        </script>
    </head>
    <body>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
        <div>
            こんにちは、
        </div>
         <div class="list-group" id="postList"></div>
    </body>
</html>

実行結果

その他

この前に紹介したスタートテンプレートに、投稿を表示する処理を追加しました。
Bootstrapって何

#jp #zzan #marlians #mini

2 months ago in #japanese by yasu (74)

$16.25