みなさんこんにちは。
イーロン・マスクの買収によっていまやニュースなどで聞かない日はないTwitter
大量解雇だったり、汚職事件の解明だったり…
逆に大量解雇の影響でアプリのスピードが上がったり、トレンドが正常化したのではないかという声も上がっていますね！
さてこのシリーズ前回は「Twitter API」のPHP実装編として「Twitter API」を実際に使ってデータの取得などを行いました。
今回の内容は「Twitter API」のJavascript実装編 として実際に取得したデータを加工してサイト内に表示させていきたいと思います。
最終的にどのような形で表示したいかを考える。
まず、実際に取得したデータを加工する上で一番重要なのは、どのような形で表示したいかを考えることです。
基本的にはこのあとお見せするスライダーを用いて表示することが主かなと思われますが、実際に掲載したいサイトの雰囲気や形式に合わせてデザインすることも重要になってきます。
それでは、今回の記事で実際に作っていくものがコチラとなります。
はい、めちゃくちゃ手抜きシンプルなスライダーですね。
今回はとてもシンプルなスライダーですが,UI/UXを考慮して矢印ボタンを付けたり、ページネーションをつけたりするのもおすすめです。
他にも掲載の仕方の例などは下記の記事でも紹介しているので是非参考にしてみてください。
まずはテンプレートを作成しよう
さて、デザインや見せ方が決まったら次はHTMLやCSS、JSを使用してテンプレートを作成していきます。
今回の記事では細かくHTMLやCSS、JSの解説は省いて行きますのでご了承ください。
ちなみにスライダーのプラグインはSwiper.jsを使用して作成をしています。
「tweeter api」で取得したデータをもとにJSで量産しよう。
さて、ここからが本題です。 前回のPHP実践編で取得したデータをもとにJavascript でスライダーの量産をおこなっていきます。
さてまずは以下のコードでjsonの取得をおこなっていきます。 下記のコードは前回の記事で取得したtweet.json のパスを指定しています。
const url = "/tweet.json"; // 読み込むJSONファイル
次に、以下のコードで画面のロード後に Fetch API を使用して json データを取得しています。 Fetch APIに関して説明するととっても長くなってしまうので今回は割愛します。 最終的にはデータ取得完了時に formatJSON という関数に受け取ったjsonのデータが引数となり作動するようになっています。
window.addEventListener("load", () => {
fetch(url)
.then(response => response.json())
.then(data => formatJSON(data));
});
次に上記で出てきた formatJSON の関数の中身を作成していきます。
function formatJSON(json) {
var add_html = "";
var slider = document.getElementById("slider");
for (var i = 0; i < json.data.length; i++) {
var html = `
<div class="swiper-slide">
<a href="https://twitter.com/nontan3135/status/${json.data[i].id}" class="slider" target="_blank">
<p class="slider__thumb">
<img src="https://ent-plus.com/wp-content/uploads/2022/12/thumb.jpg" alt="">
</p>
<p class="slider__text">
<span>${json.data[i].text}</span>
</p>
</a>
</div>`;
add_html += html;
}
slider.innerHTML = add_html;
const swiper = new Swiper('.swiper', {
slidesPerView: 1.3,
centeredSlides: true,
spaceBetween: 20,
breakpoints: {
// 768px以上の場合
768: {
slidesPerView: 2.3
}
},
});
}
上から順番に解説していくと、まず下記の２つは最終的に挿入するデータと、データを挿入する箇所を準備しています。
// 最終的に挿入するデータ
var add_html = "";
// データを挿入する箇所
var slider = document.getElementById("slider");
そして次に、「Twitter API」で取得したデータをfor文で展開し、先程作成したテンプレートに各種値を代入しています。 最後に先程指定したデータを挿入する箇所へと作成しデータを挿入し、使用しているsliderのプラグインを起動させれば無事！冒頭で紹介したスライダーの完成になります！
for (var i = 0; i < json.data.length; i++) {
// 作成したテンプレートのhtml
var html = `
<div class="swiper-slide">
<a href="https://twitter.com/nontan3135/status/${json.data[i].id}" class="slider" target="_blank">
<p class="slider__thumb">
<img src="https://ent-plus.com/wp-content/uploads/2022/12/thumb.jpg" alt="">
</p>
<p class="slider__text">
<span>${json.data[i].text}</span>
</p>
</a>
</div>`;
add_html += html;
}
slider.innerHTML = add_html;
const swiper = new Swiper('.swiper', {
slidesPerView: 1.3,
centeredSlides: true,
spaceBetween: 20,
breakpoints: {
// 768px以上の場合
768: {
slidesPerView: 2.3
}
},
});
まとめ
さて、長きにわたるtwitter api系の記事も今回で最後となります。
機会があれば、より詳しく複雑で詳細な構築方法の記載もしていきたいと思います。
ENTACLGRAPHICXXXでも上記のようなTwitter APIを用いた制作をしています。
ENTACLGRAPHICXXXオフィシャルサイト
サイトに掲載されていない実績も数多くございます。実績のお問い合わせ等はこちらから
よろしければお手軽にお問い合わせください！
