みんな大好きポケモン！PokeAPIで画像と図鑑情報を取得しTwitter APIでつぶやく

前回はTwitter APIの高度なアクセスを行うことができる、「Elevated」の申請方法を解説しました。
今回は PokeAPI を使い、ポケモンの画像と図鑑の情報をツイートするところまで作ってみたいと思います。
ポケモンの情報を取得してみたい方、自動でポケモンの情報をツイートしてみたい方は本記事を参考にしてみてください。

前回の記事はこちらです。

転生しないブログ

Twitter API Elevated(高度なアクセス)の利用申請をしてみる！

https://tensei-shinai.com/2022/04/27/twitter-api-elevated

Twitter APIに慣れてきたところで、もっと高度な使い方をしてみたくなったのではないでしょうか？この記事を読んでいるあなたは、画像の投稿等をTwitter APIで行いたいと思っていますね？もちろん出来ます！本記事では、Twitter APIの高度なアクセス「Elevated」への申請方法を解説していきます。ElevatedとはTwitter API v11.を使用することが出来ます。こちらの記事でTwitter APIの利用申請を行いましたが、登録初期段階では「Essential」という状態です。「Essential」はTwitter API v2のみ使用可能で、Twitter API v1.1は使用する...

PokeAPIとは？
ポケモンのデータを取得する
ポケモン図鑑の情報を取得する
ポケモン図鑑を作成してみる
ツイート
まとめ

PokeAPIとは？

ポケモンのデータを返してくれるAPIです。
毎月250,000,000回以上使用されているそうです。

さっそくアクセスしてみましょう。
PokeAPI

ポケモンのデータを取得する

サイト上で試すことが出来ます。
知らない人はいないであろう有名なポケモン、ピカチュウで試してみましょう。

ポケモン図鑑の番号、またはポケモンの名前を英語で入力してみます。
ピカチュウのポケモン図鑑番号は25です。
また、英語では「pikachu」です。
取得できる結果は同じものになります。

{
    "abilities": [
        {
            "ability": {
                "name": "static",
                "url": "https://pokeapi.co/api/v2/ability/9/"
            },
            "is_hidden": false,
            "slot": 1
        },
        {
            "ability": {
                "name": "lightning-rod",
                "url": "https://pokeapi.co/api/v2/ability/31/"
            },
            "is_hidden": true,
            "slot": 3
        }
    ],
    "base_experience": 112,
    "forms": [
        {
            "name": "pikachu",
            "url": "https://pokeapi.co/api/v2/pokemon-form/25/"
        }
    ],
    "game_indices": [
        {
            "game_index": 84,
            "version": {
                "name": "red",
                "url": "https://pokeapi.co/api/v2/version/1/"
            }
        },
        {
            "game_index": 84,
            "version": {
                "name": "blue",
                "url": "https://pokeapi.co/api/v2/version/2/"
            }
        },
================ 省略 ================
    "types": [
        {
            "slot": 1,
            "type": {
                "name": "electric",
                "url": "https://pokeapi.co/api/v2/type/13/"
            }
        }
    ],
    "weight": 60
}

これだけでも、いろいろなデータが取得できることがわかると思います。
ちなみに、全データだと11203行分のデータが取れます。

このデータ内でもある程度の情報が取得できますが、日本語の情報や画像を取得するAPIは別です。
図鑑情報を作るために必要な情報は、APIを複数実行する必要があります。

ポケモン図鑑の情報を取得する

それではJavascriptで情報を取得する方法を解説していきます。

HTTP通信

今回はHTTP通信にaxiosを使用してみます。

const axios = require('axios');

ポケモンの画像を取得する

ゲーム画面の画像やアートワークがあります。

// ポケモン情報取得.
const response = await axios.get("https://pokeapi.co/api/v2/pokemon/25");

上記実行時の結果の中で「sprites」があります。
こちらから画像のURLを取得することが出来ます。

    "sprites": {
        "back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/25.png",
        "back_female": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/female/25.png",
        "back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/25.png",
        "back_shiny_female": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/female/25.png",
        "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/25.png",
        "front_female": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/female/25.png",
        "front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/25.png",
        "front_shiny_female": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/female/25.png",
        "other": {
            "dream_world": {
                "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/25.svg",
                "front_female": null
            },
            "home": {
                "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/25.png",
                "front_female": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/female/25.png",
                "front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/shiny/25.png",
                "front_shiny_female": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/shiny/female/25.png"
            },
            "official-artwork": {
                "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/25.png"
            }
        },
        "versions": {
            "generation-i": {
                "red-blue": {
                    "back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-i/red-blue/back/25.png",
                    "back_gray": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-i/red-blue/back/gray/25.png",
                    "back_transparent": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-i/red-blue/transparent/back/25.png",
                    "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-i/red-blue/25.png",
                    "front_gray": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-i/red-blue/gray/25.png",
                    "front_transparent": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-i/red-blue/transparent/25.png"
                },
                "yellow": {
                    "back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-i/yellow/back/25.png",
                    "back_gray": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-i/yellow/back/gray/25.png",
                    "back_transparent": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-i/yellow/transparent/back/25.png",
                    "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-i/yellow/25.png",
                    "front_gray": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-i/yellow/gray/25.png",
                    "front_transparent": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-i/yellow/transparent/25.png"
                }
            },
            "generation-ii": {
                "crystal": {
                    "back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/back/25.png",
                    "back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/back/shiny/25.png",
                    "back_shiny_transparent": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/transparent/back/shiny/25.png",
                    "back_transparent": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/transparent/back/25.png",
                    "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/25.png",
                    "front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/shiny/25.png",
                    "front_shiny_transparent": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/transparent/shiny/25.png",
                    "front_transparent": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/crystal/transparent/25.png"
                },
                "gold": {
                    "back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/gold/back/25.png",
                    "back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/gold/back/shiny/25.png",
                    "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/gold/25.png",
                    "front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/gold/shiny/25.png",
                    "front_transparent": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/gold/transparent/25.png"
                },
                "silver": {
                    "back_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/silver/back/25.png",
                    "back_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/silver/back/shiny/25.png",
                    "front_default": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/silver/25.png",
                    "front_shiny": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/silver/shiny/25.png",
                    "front_transparent": "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/versions/generation-ii/silver/transparent/25.png"
                }
            },
================ 省略 ================
        }
    },

例えば、「front_default」の画像はこちら。

「official-artwork」の画像はこちら。

かわいいですね！
って感想はどうでも良いですね。

今回は「official-artwork」の画像を使うことにします。

// 画像を取得.
const imageUrl = response.data.sprites.other['official-artwork'].front_default;

Jsonにハイフンが含まれていると「.」で取得できないため、[”]で囲みます

ポケモンの高さ

// ポケモン情報取得.
const response = await axios.get("https://pokeapi.co/api/v2/pokemon/25");

// 高さ.
const height = (response.data.height / 10).toFixed(1);

ピカチュウの高さを取得すると、結果は「4」となっています。
メートルで表現したいので、10で割ることと、小数点第一位まで表示するようにします。

ポケモンの重さ

// ポケモン情報取得.
const response = await axios.get("https://pokeapi.co/api/v2/pokemon/25");

// 重さ.
const weight = (response.data.weight / 10).toFixed(1);

ピカチュウの重さを取得すると、結果は「60」となっています。
キログラムで表現したいので、10で割ることと、小数点第一位まで表示するようにします。

ポケモンのタイプ

ここから若干ややこしくなります。
PokeAPIで取得できる情報にいろいろな言語があります。

取得できる言語

日本語(ひらがな)
ローマ字
韓国語
中国語 (繁体字)
フランス語
ドイツ語
スペイン語
イタリア語
英語
チェコ語
日本語
中国語 (簡体字)
ポルトガル語

日本語(ja)を取得していきます。

ポケモンのタイプは1匹で複数種類存在することがあるため、文字列を連結して表現してみます。
※汚いコードですみません。。

  // ポケモン情報取得.
  const response = await axios.get("https://pokeapi.co/api/v2/pokemon/25");

  // タイプ.
  const responseTypes = response.data.types;
  const typeNumber = responseTypes.length;
  let types = '';
  for (let i = 0; i < typeNumber; i++) {
    const responseType = await axios.get(responseTypes[i].type.url);
    const responseTypeName = responseType.data.names;
    const type = responseTypeName.find((v) => v.language.name == "ja");
    if (i > 0) {
      types += '/';
    }
    types += type.name;
  }

ポケモンの名前

ポケモンの名前、分類、説明文は「species」から取得します。

  // ポケモン情報取得.
  const response = await axios.get("https://pokeapi.co/api/v2/pokemon/25");

  // ポケモン種族情報取得.
  const speciesUrl = response.data.species.url;
  const responseSpecies = await axios.get(speciesUrl);

  // 名前.
  const names = responseSpecies.data.names;
  const name = names.find((v) => v.language.name == "ja");

ポケモンの分類

  // ポケモン情報取得.
  const response = await axios.get("https://pokeapi.co/api/v2/pokemon/25");

  // ポケモン種族情報取得.
  const speciesUrl = response.data.species.url;
  const responseSpecies = await axios.get(speciesUrl);

  // 分類.
  const genera = responseSpecies.data.genera;
  const genus = genera.find((v) => v.language.name == "ja");

ポケモンの説明文

バージョンによって説明文が異なります。
※一緒の説明文もあります。

また、新しいポケモンは昔のバージョンの説明文はないため、取得方法を切り替える必要があります。
※汚いコードですみません。。

  // ポケモン情報取得.
  const response = await axios.get("https://pokeapi.co/api/v2/pokemon/25");

  // ポケモン種族情報取得.
  const speciesUrl = response.data.species.url;
  const responseSpecies = await axios.get(speciesUrl);

  // 説明文.
  const flavorTextEntries = responseSpecies.data.flavor_text_entries;
  let flavorText = flavorTextEntries.filter(function(v) {
    return (v.language.name == "ja") && (v.version.name == "sword");
  });
  if (flavorText.length == 0) {
    // バージョンをYで取得し直す.
    flavorText = flavorTextEntries.filter(function(v) {
      return (v.language.name == "ja") && (v.version.name == "y");
    });
  }
  if (flavorText.length == 0) {
    // バージョンをサンで取得し直す.
    flavorText = flavorTextEntries.filter(function(v) {
      return (v.language.name == "ja") && (v.version.name == "sun");
    });
  }

3種類ぐらいから取得するようにしておけば、漏れはないかと思います。

ポケモン図鑑を作成してみる

取得した情報をもとに、ポケモン図鑑を作成してみます。

No.025
ピカチュウ
分類:ねずみポケモン
タイプ:でんき
高さ:0.4m 重さ:6.0kg
説明:
つくる　電気が　強力な
ピカチュウほど　ほっぺの　袋は
軟らかく　よく　伸びるぞ。

画像付きでツイートする場合、Twitter API v1.1を使用する必要があります。
画像をアップロードし、アップロード結果のidを指定してツイートします。

画像の取得からツイートまでの実装例です。

  // ポケモン情報取得.
  const response = await axios.get("https://pokeapi.co/api/v2/pokemon/25");

  // 画像を取得.
  const imageUrl = response.data.sprites.other['official-artwork'].front_default;
  const responseImage = await axios.get(imageUrl, {
    responseType: 'arraybuffer'
  })

  // 画像のアップロード.
  const result = await client.v1.uploadMedia(responseImage.data, {mimeType: "image/png"});

  // ツイート.
  await client.v1.tweet('ツイートの文言', {media_ids: result});

ツイート結果です。