事前準備
Qiita記事一覧をたとえば自ブログなどに埋め込むには,まずQiitaで個人用アクセストークンを取得する必要があります.
まずは右上の自分のプロフィールアイコンから、
設定>アプリケーション>新しくトークンを発行する を選択し,read~(つまり読み込み)にチェックをします.
このとき,必ずトークンをコピペしといてください.
方法
メインとなるhtmlファイルの埋め込みたい箇所に,
index.html
<div id="qiita-posts">
<script src="qiita.js"></script>
</div>
を追加します.
タグのアイコンをfont awesomeを使って表示するのでhtmlファイルのヘッダに
<head>
~省略
<script src="https://kit.fontawesome.com/b740cfc262.js" crossorigin="anonymous"></script>
</head>
のように忘れずに追加します.
次に,自分のローカルに下記のqiita.jsファイルを作成します.
qiita.js
// Qiitaユーザー名を定数として定義
const userId = 'soburi06';
// APIエンドポイントを定数として定義（${}内には変数userIdが入ります）
const url = `https://qiita.com/api/v2/users/${userId}/items`;
// 投稿一覧を表示する要素のIDを取得して、container定数に代入する
const container = document.getElementById('qiita-posts');
// fetch関数によってQiita APIからデータを取得
fetch(url, {
headers: {
// Authorizationヘッダーにアクセストークンを指定
'Authorization': 'Bearer ここにトークントークントークン'
}
})
// 読み込んだレスポンスの内容をJSON形式に変換してリターンする
.then(response => response.json())
// JSON形式のデータを引数にしてコールバック関数を実行
.then(data => {
// HTMLの文字列を作成するための変数htmlを定義
let html = '';
// forEachメソッドで投稿データ一つずつループ処理を行う
data.forEach(post => {
// テンプレートリテラルを使ってHTMLの文字列を作成
html += `
<div class="qiita-post">
<a class="qiita-link" href="${post.url}" target="_blank" rel="noopener noreferrer"></a>
<p>${post.title}</p>
<div class="tags">
`;
// 投稿のタグ情報をループ処理でタグ名をHTML書式に追加する
post.tags.forEach(function(tag) {
html+= `<a class="tag-name" href="https://qiita.com/tags/${tag.name}">`+ tag.name + '</a>';
});
html += ` </div>
<div class="date">${post.created_at.slice(0, 10)}</div>
</div>
`;
});
// 完成したHTML文字列を要素に挿入
container.innerHTML = html;
})
// エラー時のコールバック関数
.catch(error => console.error(error));
cssでは,
#qiita-posts {
display: flex;
flex-wrap: wrap;
}
.qiita-post {
border-radius:1vw;
position:relative;
width: 29%;
margin: 1%;
padding: 1%;
background-color: #3d4144;
box-shadow:0.3vw 0.3vw #8c8b8d;
}
.qiita-post:hover{
box-shadow:none;
transition:0.2s;
transform:translateX(0.3vw)translateY(0.3vw);
}
.qiita-post .qiita-link{
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
margin:0;
}
.qiita-post p {
display: block;
font-size: 1vw;
font-weight: bold;
margin:0;
color: #ffffff;
text-decoration: none;
}
.qiita-post .tag{
display:flex;
}
.tag-name::before{
font-family: "Font Awesome 5 Free";
content: "\f02b";
-webkit-font-smoothing: antialiased;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
padding-right:0.1em;
font: var(--fa-font-solid);
color:#ffffff;
}
.qiita-post .tags .tag-name{
display:inline-block;
font-size:0.8vw;
font-weight:lighter;
position:relative;
z-index:1;
vertical-align:text-top;
padding-left:0.2em;
padding-right:0.2em;
color:#ffffff
}
.qiita-post .tags .tag-name:visited{
color:#d4d4d4
}
.qiita-post .date {
display:flex;
font-size: 14px;
color: #999;
text-align:right;
position:absolute;
right:0.7vw;
bottom:0.2vw;
}
とか適当にデザインを決めて貰えれば,
このようにQiitaの記事一覧が埋め込むことができました.
タグのurlはQiitaのタグ記事一覧に飛びますが,自分の記事をタグでソートしたページに飛ぶように改造すると便利かと思います.
引用