LoginSignup
16
5

More than 1 year has passed since last update.

【プリキュア20周年】プリキュアでGraphQL作りました【プリキュアの日】

Last updated at Posted at 2023-01-31

はじめに

みなさんこんにちは!
本日2023年2月1日はなんの日かわかりますか?
そうです。プリキュア20周年のプリキュアの日です。

しかし、こんな悩みを持った方はいませんか?

  • GraphQLって最近流行ってるから勉強してみたい
  • Go!プリンセスプリキュアの放送開始日っていつだっけ
  • プリキュアって今年で20周年みたいなんだけど、プリキュアの情報をGraphQLで取得できないかな?

そんなあなたに朗報です! この度、そのプリキュア20周年を記念して、プリキュアのGraphQL APIを開発しました。題してGraph PreQL です。
graph-preql-logo1.png

Graph PreQL

GraphQLのPlayGroundはこちら
https://graph-preql.vercel.app/api/graphql

Graph PreQLとは

プリキュアシリーズの様々なデータをGraphQLで取得できる、まさにデリシャスマイルなAPIです。発想はポケモンのデータやStarWarsのデータをGraphQLでとってくるAPIから思いつきました。
今まではプリキュアのデータをRubyで提供してくださるsue445さんのrubicureなどがありましたが、こちらは完全に独立で、自分でデータを収集してGraphQLにしたAPIです。
取得できるデータは、プリキュア各キャラクターの必殺技や色、満年齢、声優やプリキュアチーム加入放送日他
プリキュアシリーズ自身のデータや主題歌に関するデータもあります。

機能紹介

precureAllStars

プリキュアのキャラクターに関する情報をGETできます。プリキュア各キャラクターからとってこれる情報は以下です

  • id - 通し番号
  • name - 普段の名前
  • cure_name - 変身後のプリキュア名
  • color - プリキュアカラー
  • age - 満年齢
  • sereis - 出演シリーズ
  • birthday - 誕生日
  • before_prologue - 変身前口上
  • after_prologue - 変身後口上
  • fairy - 妖精
  • item - 変身アイテム
  • special - 必殺技 soloは個人必殺技、teamはチーム必殺技
  • debut - プリキュアチームに加入した放送日(例えばムーンライトは1話ではなく33話の正式にチームに加入した話数の放送日)
  • voice - 声優
  • voice_birthday - 声優さんの生年月日、生年が不明な方は便宜上9999年にしてあります。

指定できる条件は

  • before - 指定した日以前にデビューしたプリキュア
  • after - 指定した日以降にデビューしたプリキュア
  • color - 指定した色のプリキュア
  • age - eq:指定した年齢のプリキュア(null指定も可) lt:それ以下の年齢のプリキュア gt:それ以上の年齢のプリキュア

です。

seriesAll

プリキュア作品に関する情報を取得できます。取得できるデータは、

  • ID - 通し番号
  • title - 作品名
  • start - 放送開始日
  • end - 放送終了日
  • total - 全話数
  • producer - 東映アニメーションプロデューサー
  • director - シリーズディレクター
  • writer - シリーズ構成
  • characterdesign - キャラクターデザイン
  • music - 音楽

です。メインスタッフの方たちの情報を取得できます。
指定できる条件は

  • before - 指定した日以前に放送されたプリキュアシリーズ
  • after - 指定した日以降に放送されたプリキュアシリーズ
  • total - eq:指定した話数のプリキュアシリーズ lt:その話数以下のシリーズ gt:その話数以上のシリーズ

songAll

プリキュア主題歌に関する情報を取得できます。取得できる情報は

  • id - 通し番号
  • title - 曲名
  • term - 放送期間、allは全期間、firstは前期、secondは後期です。
  • type - オープニング、エンディング区分
  • lyric - 作詞
  • music - 作曲
  • arrange - 編曲
  • vocal - プリキュアシンガー

です。

例えば、

query
query PrecureAfter2020{
	precureAllStars(after:"2020"){
    cure_name
  }
}

で取得できるデータは

{
  "data": {
    "precureAllStars": [
      {
        "cure_name": "キュアグレース"
      },
      {
        "cure_name": "キュアフォンテーヌ"
      },
       ...省略
      {
        "cure_name": "キュアスカイ"
      },
      {
        "cure_name": "キュアプリズム"
      }
    ]
  }
}

情報を取得できます。
プリキュアの画像は著作権の都合上、こちらでは用意していないので、自分でダウンロードして用意してください。

例えば、このGraph PreQLを使って、自分だけのプリキュア図鑑なんか作ってみるのもいいかもしれません。こんなふうに。
プリキュア図鑑

使っている技術

Next.js,Apollo Serverを用いて実現しています。理由はVercelを使うためです。ちなみに、データはデータベースを使わずに愚直にJSONファイルを静的データとしてそこから読み取っています
元のデータはスプレッドシートで管理し、それをApps Scriptを使ってJSONを出力しています。

苦労した点

意外とプリキュアのデータが正規的でないところです。1キャラ1プリキュアにつき1シリーズだととても扱いやすいのですが、ふたりはプリキュア~プリキュア5GoGoまでは変則的で、2シリーズあったり、スプラッシュスターにいたっては1作品のなかで1人2プリキュアをやっていたりするので、仕方がなくデータは配列にしました。
また、わかりやすさを重視したためシリーズ名は各テーブルに入れたためあえて正規化していません。

最後に

今までプリキュアのAPIがないと叫んでいたそこのあなた、GraphQL使ってみたかったけどいい勉強材料がなかったあなた!ぜひこの機会にGraphQLデビューしてみてください!
そして、2023年2月5日から放送のひろがるスカイ!プリキュアもぜひご覧になってください!

あと、今現在4月からの業務委託の案件を募集中です。詳しくはプロフィールまでご覧ください。

16
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
5