みなさんこんにちは。
イーロン・マスクの買収によっていまやニュースなどで聞かない日はない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
}
},
});
「Tweeter API」の今後や有料化について
下記を含め計4回「Twitter API」について解説をしてきました。
（まだ見てない人は是非見てみたくださいね！）
そんな「Twitter API」ですが2023年に大きな動きがありそうです...
それは「Twitter API」の有料化です。
実は2022年からAPIの有料化の動きはありました。
ただそれはAPIの一部の利用が制限され、有料のアクセスが必要になりました。
具体的には、APIのアクセス制限の強化、検索機能の制限、そして認証されたアカウントのAPIのみが特定の機能を利用できるようになるなどの変更が行われました。
なので今まで書いたような記事の処理を行うくらいなら特に関係なく無料で利用できていました。
ですが2/2に突如 Twitter の 開発アカウントから以下のようなアナウンスが発表されました。
Starting February 9, we will no longer support free access to the Twitter API, both v2 and v1.1. A paid basic tier will be available instead 🧵
— Twitter Dev (@TwitterDev) February 2, 2023
そこには要約すると「2/9以降、Twitter API への無料アクセスはサポートされなくなり、代わりに有料の基本レベルが利用可能となります。」との記載が。
なんと今回は先に上げた機能の有料化ではなく、「Twitter API」自体の有料化が宣言されました。
この投稿によりネットニュースになったり、皮肉なことにTwitter上でトレンド一位を獲得するなどの自体が起きました。
「でも Twiiter API が有料化しても、別にツイートの取得したりとかしないから自分は関係ない」と思われてる方、それは違います。
概要編でも話したとおり、「Twiiter API」は機能そのものを提供しています。
ですので、取得するだけではなくツイートを書き込んだり、twitterを利用して他サービスにログインするなどの今まで日常でつかってきたことも「Twitter API」に含まれています。
なので自動投稿システム、いわゆるBOTや、他サービスにTwitterのアカウントでログイン、認証させているwebサービスなどにも影響が広がっていくため便利だったサービスなどが閉鎖、停止されていく可能性があるのです！
実際、この発表のあと地震速報系のBOTで有名な「地震速報」のアカウントが以下のような声明を発表しました。
なので有料化によって今後このような優良なサービスがどんどんとだめになっていってしまうのが懸念されます。
ですが世界中からあまりにも多くの反発があったため 2/14にTwitter の 開発アカウントから以下のようなアナウンスが発表されました。
There has been an immense amount of enthusiasm for the upcoming changes with Twitter API. As part of our efforts to create an optimal experience for the developer community, we will be delaying the launch of our new API platform by a few more days.
— Twitter Dev (@TwitterDev) February 13, 2023
More information to follow… https://t.co/FUZcwJqf9p
「Twitter APIの今後の変更について、膨大な数の熱意が寄せられています。開発者コミュニティに最適な体験を提供するための努力の一環として、新しいAPIプラットフォームのローンチをさらに数日遅らせることになりました。
詳細については、今後数日中にお知らせします。引き続きご関心をお寄せいただき、ありがとうございます。」
とのこと...
「熱量」ではなく「反発」だろとのツッコミは置いておいて、さすがに移行期間もなにもない有料化はまずいと考えたのか延期を発表しました。
それから3/6現在新しい情報は発信されていません...
もしかしたらこの話自体なかったことになるかもしれませんし、唐突に明日にでも適用されるかもしれません。
今できることはただ動向を見守ることのみなので、新しい情報が発信され次第「ENT+」でも記事にしていきたいと思います！
まとめ
ENTACLGRAPHICXXXでも上記のようなTwitter APIを用いた制作をしています。
ENTACLGRAPHICXXXオフィシャルサイト
サイトに掲載されていない実績も数多くございます。実績のお問い合わせ等はこちらから
よろしければお手軽にお問い合わせください！
