LoginSignup
0

More than 3 years have passed since last update.

便利ページ:自分のQiita記事を一覧表示

Last updated at Posted at 2019-04-20

前回、なにかと便利なページを作成しました。

 便利ページ:Javascriptでちょっとした便利な機能を作ってみた

今回は、それに自分が投稿しているQiitaの記事一覧を表示します。
いいね数だけでなく、View数やView平均数がわかるようにします。
Qiitaへは、RESTfulサーバを立ち上げてアクセスします。

クライアント側

クライアント側の実装は以下の感じです。

start.js
        qiita_items: function(){
            var body = {
                apikey: this.qiita_apikey
            };

            this.progress_open();
            do_post(this.qiita_url + '/qiita-items', body)
            .then(json =>{
                this.progress_close();
                if( json.result != 'OK'){
                    alert('失敗しました。');
                    return;
                }
                this.qiita_item_list = json.items;
                this.qiita_items_received_date = new Date().toLocaleString();
                Cookies.set('qiita_apikey', this.qiita_apikey, { expires: 365 });
                Cookies.set('qiita_url', this.qiita_url, { expires: 365 });
            })
            .catch(error =>{
                this.progress_close();
                alert(error);
            });
        }

this.progress_open()とthis.progress_close()は、記事一覧取得には時間がかかるため、「少々お待ちください」ダイアログを表示させています。

サーバ側

サーバ側の実装は以下の感じです。

index.js
const QIITA_PRIVATE_TOKEN = Qiita用プライベートアクセストークン;
const qiita_base_url = 'https://qiita.com/api/v2';

const QIITA_APIKEY = Qiita用ApiKey;

exports.handler = async (event, context, callback) => {
    if( event.path == '/qiita-items' ){
        var body = JSON.parse(event.body);
        if( body.apikey != QIITA_APIKEY )
            throw 'apikey mismatch';

        return qiita_items()
        .then(items =>{
            var now = moment();
            for( var i = 0 ; i < items.length ; i++ ){
                var created_at = moment(items[i].created_at);
                var days = now.diff(created_at, 'days');
                items[i].elapsed_days = days;
                items[i].average = (days != 0) ? Math.floor(items[i].views / days) : items[i].views;
            }
            return new Response({ result: 'OK', items: items} );
        });
    }
}

function do_get_token(url, qs, token){
    var params = new URLSearchParams();
    for( var key in qs )
        params.set(key, qs[key] );

    var p = params.toString();
    var url_params = url + ((!p) ? '' : ('?' + p));
    console.log(url_params);
    return fetch(url_params, {
        method : 'GET',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded', 'Authorization' : 'Bearer ' + token }
    })
    .then((response) => {
        return response.json();
    });
}

async function qiita_items(){
    var json = await do_get_token(qiita_base_url + '/authenticated_user/items', { page: 1, per_page: 100 }, QIITA_PRIVATE_TOKEN );
    var items = [];
    for( var i = 0; i < json.length ; i++ ){
        var item = await do_get_token(qiita_base_url + '/items/' + json[i].id, {}, QIITA_PRIVATE_TOKEN );
        items.push({
            id: json[i].id,
            title: item.title,
            url: item.url,
            views: item.page_views_count,
            likes: item.likes_count,
            created_at : item.created_at
        });
    }

    return items;
}

以下については、環境に合わせて設定が必要です。

【Qiita用プライベートアクセストークン】
 一覧表示したいQiitaのアカウントの個人用アクセストークンを指定します。詳細は以下をご参照ください。
 Qiitaの閲覧数をMQTTで記録する

【Qiita用ApiKey】
 念のため、サーバが変な攻撃に使われてしまわないように、任意のApiKeyを指定しておきます。ブラウザから呼びだすときに同じApiKeyを指定するようにします。

表示結果

こんな感じで取得されます。
View数と平均View数のおかげでアクセス具合が比較できます。

image.png

以上

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0