PokemonAPIを使用してポケモンアプリを開発しました
みなさんこんにちは。
小学2年生になる息子がいるのですが、
ポケモンが大好きです。
かつ、今後のICT教育を見据え、パソコンにはどんどん触れてほしいと思い、ポケモンアプリを開発することにしました。
ゲームボーイカラー風ポケモンアプリ
https://pokemon-app-ff27a.web.app
見た目はこのようになります。
開発背景
息子には5歳のころからパソコンに触れてもらっています。
当初はマウスの移動、クリック動作がかなり高い壁だなという印象でした。
(マウス自体も大きかったので小さい手に馴染んでいなかったというのも要因かもしれませんが。。。)
せっかくなので何か作ってあげたいなというのがきっかけです。
PokemonAPIとの出会い
ちょうど同じころPokemonAPIを発見しました。
ポケモンの画像、名前、タイプ、重さ、etc…
このAPIを発見したときはとてもテンションが上がりました。
ポケモンもついにAPI化されたのか!と。
Pokemon Game Sound Libraryとの出会い
初代ポケモン世代としては、当時のBGMが掲載されているPokemon Game Sound Libraryは衝撃を受けました。
PokemonAPIとPokmon Game Sound Libraryを活用して子供向けのアプリを開発しようと考えました。
アプリ詳細について
前提条件
小学2年生だとPCでのマウス操作やキーボード入力もこれから頑張って習得していく時期かと思います。
ですので、あくまでも子供たちに対してPCの操作に慣れてもらうことを目的としています。
主な操作はクリック操作、テンキー入力、エンターキー入力をベースに作成しています。
実装環境
React × firebaseで実装しております。
firebaseの環境構築については以下の記事をご参考ください。
UIについて
30代40代のゲームボーイ世代大興奮(?)なゲームボーイカラーを模倣しております。
画像は使用しておらず、フォントの選定からすべて実装で表現しております。
ポケモンの情報について
PokemonAPIを使用してポケモンの画像と名前をランダムに表示しています。
PokemonAPIの発見は今回の開発のきっかけになりました。
その他にも面白いAPIはたくさんあります。
そちらに関しては以下の記事でご紹介させていただいております。
参考:ポケモンAPIとは?
ポケモンのBGMについて
Pokemon Game Sound Libraryから音楽データを取得しています。
初代ポケモン世代としては開発していく中でBGMを聞くのが一番楽しかったですw
以下が、Pokemon Game Sound Libraryのサイトになります。
参考:Pokemon Game Sound Libraryについて
フォントについて
ゲームボーイのフォントに近いDotGothic16を採用しています。
DotGothic16については以下の内容をご参考ください。
参考:DotGothic16について
ゲームの内容について
小学2年生でも簡単な1桁同士のたしざん、ひきざん、かけざんを使用しています。
計算問題の難易度に重点を置くというよりは、
マウス操作、入力の流れ(テンキー入力⇒エンターキーで決定)などの練習を意図しております。
なので、ポケモンが大好きなお子様をお持ちのお父さんお母さんには、
ICT教育の一環としてぜひ使ってもらいたい内容になってます。
ご興味がありましたらぜひよろしくお願いします!
最後に
Firebaseを使用したWebアプリ開発サービスをココナラで出品しております。
webアプリのスモールスケール開発サービスです。
販促、集客目的でwebアプリを作ってみたいけど、
まずは、小さな一歩から踏み出したいというお客様に向けたサービスです。
もちろんそうでないお客様も大歓迎!!!
スモールスケールのWebアプリ開発します 先ずはスモールスケールのWebアプリから始めませんか?