この記事はZOZO Advent Calendar 2024 シリーズ7の7日目の記事です。
はじめに
突然レッサーパンダの写真を見たくなる瞬間がよくあると思います
自分は各SNSのアルゴリズムがしっかりチューニングされているので、いつでもレッサーパンダを見ることができます
しかし誰しもそうでなはないと思うので、そんな人に向けて今回はレッサーパンダがたくさん見れるサイトを作成しました
作ったもの
今回作ったのはこちらのサイトです
ソースコードも公開してますので興味ある方は覗いてみてください
技術スタック
- Remix
- TailwindCSS
API
今回レッサーパンダの画像取得にはTinyFoxというAPIを使っています
使い方
画像を取得するエンドポイントはこちらです
https://api.tinyfox.dev/img.json
パラメーターにanimalを指定することができ様々な動物の画像を取得することができます
詳しくはAPIドキュメントをご覧ください
今回はレッサーパンダの画像を取得したいのでanimal=wahを指定します
https://api.tinyfox.dev/img.json?animal=wah
そして取得したデータのlocプロパティに画像のパスが入っているので、それを元に画像を表示するURLを生成できます
`https://api.tinyfox.dev${data.loc}`
おわり
今回はレッサーパンダがたくさんみれるサイトを作ってみました！
使ったAPIは非常に簡単に使え、様々な動物に対応しているのでぜひ使ったみてください
APIの制作者様ありがとうございます！
レッサーパンダについて語り足りないところですが、記事の本質と外れてしまうので別の機会にしようと思います...
レッサーパンダについてわからないことがあればぜひ質問してみてください！