Qiitaの投稿も引き続きしていきたいと思っているのですが、
こちら側のサイトでも投稿した記事一覧を表示させておきたいと思ったので実装してみました。
APIで記事の取得は、「Qiita API を使って自分の投稿一覧を取得する」を参考にしてみました。
アクセストークンを発行する
まずは、サイトからQiitaの自分の投稿記事を取得できるようにアクセストークンを発行しましょう。
左メニューのアプリケーションから個人用アクセストークンの新規発行をクリックします。
管理用に任意のラベルを決めて発行されたトークンをコピーしておきます。（サイト側で必要）
アクセストークンをPHPで展開するようにファイルを作成
参考サイトのものをそのまま使って、PHPを自分のサーバにアップしました。
index.php
<?php
//
// https://qiita.com/api/v2/docs#get-apiv2authenticated_useritems
//
$json = [
'page' => '1',
'per_page' => '100',
];
$curl = curl_init('http://qiita.com/api/v2/authenticated_user/items');
$option = [
CURLOPT_CUSTOMREQUEST => 'GET',
CURLOPT_POSTFIELDS => json_encode($json),
CURLOPT_HTTPHEADER => [
'Authorization: Bearer 【ここに自分の発行したトークンを貼り付ける】',
'Content-Type: application/json',
],
];
curl_setopt_array($curl, $option);
$result = curl_exec($curl);
curl_close($curl);
ブラウザでアップしたファイルを確認して、きちんとAPIが取得できるか確認します。
そのデータを元に、Webサイトに展開できるようにします。
取得したデータをJSで展開する
以下のコードで、JSを展開させました。
今回は、タイトル・日付・リンクだけ取得しサイトに表示させました。
色々なデータが取得できるので、お好きなデータが取れるかと思います。
手っ取り早くjQueryを使って展開しておきます。
jQuery
function getQiita(){
var XHR = $.ajax({
type: 'GET',
url: '【アップ先のディレクトリパス】',
dataType: 'html'
});
return XHR;
}
var getHtml = getQiita();
// 成功時
getHtml.done(function(response) {
var data = JSON.parse(response);
// 10件表示
for(var i = 0; i < 10; i++) {
var d = new Date(data[i].created_at);
var date = d.toLocaleDateString().replace(/(\d+)\/(\d+)\/(\d+)/g, '$1.$2.$3');
var datetime = d.toLocaleDateString().replace(/(\d+)\/(\d+)\/(\d+)/g, '$1-$2-$3');
$('<dl class="entries-list">'+
'<dt class="entries-list__time"><time datetime="'+ datetime +'">'+ date +'</time></dt>' +
'<dd class="entries-list__heading">' +
'<h3 class="entries-list__title">' +
'<a href="'+ data[i].url +'" target="_blank">'+ data[i].title +'</a>' +
'</h3>' +
'</dd>' +
'</dl>').appendTo('#qiita-post');
}
}
// エラー時
getHtml.fail(function() {
$('#qiita-post').append('<p class="entries-fail">記事が取得できませんでした。</p>');
});
このような感じで、取得して展開してみました。
久々にこういったのやると忘れてますね。と実感している自分。。