Go言語でポケモンかるたを作ってみた

2021-02-24 11:33:44

最近、三歳の息子がポケモンにハマってる。
くら寿司のおもちゃでポケモンのマグネットをもらったときから、
急に好きになったみたいなので、
スマホゲームのポケモンクエストやったり、Amazonプライムで古いポケモンアニメみたりしている。
(スイッチなんて買い与えるのはまだ早い&高いので、やだw)

新しいポケモンは親が分からないので、
息子にはまだ初代151匹のみしか見せてないが、
すぐにポケモンの名前や進化先、タイプなどを覚えてしまう。
子供の吸収力はあなどれないなー。少し分けてほしい。

ちょうど、ひらがなはだいたい読めるようになってきたので、
ポケモンでカタカナを覚えさせるのはどうだろうと思って、
ポケモンかるたを作ってみようと思い立った。

ポケモンかるたというけど、
ただポケモンの画像にモンスター名いれて印刷しただけなんだけどね。

ポケモンは公式で、ポケモン図鑑というサイトがあり、

フシギダネ|ポケモンずかん

画像などは載っているから、そこからダウンロードしてくればいい。
しかし、いくら初代だけとはいえ151匹もいるので、
一個一個落として、名前いれるのは面倒。

ということで、プログラムでやることにした。
選んだのは最近サボり気味なGo言語。
ポケモンGoとかいうゲームとは一切関係ないw

とりかかったときは、

  1. ポケモン図鑑サイトをスクレイピングして、画像をダウンロードし、モンスター名でファイル保存
  2. ImageMagickでモンスター名を画像にいれる。
  3. 同じくImageMagickで画像を結合して印刷。(A4サイズに12体ぐらい配置)

という手順で考えてたので、
goqueryというライブラリでスクレイピング処理を書いてたんだけど、
途中で、ポケモン図鑑のサイトのモンスターデータまわりは、JSで動的に読み込んでいることに気づいた。
まあ最近の流れでいえば、そりゃそうかって感じなんだけど。
うーん、これだとただのスクレイピング処理ではできないので、
ChromeのWebDriver使うしかないかなー、インストールしなきゃいけないし、
これだけのために入れるのやだなーって思って、他に探してたら、
こういうのが見つかった。

fanzeyi/pokemon.json: Pokemon dataset in JSON.

ポケモンデータをJSON化してあり、画像も入ってる。
こりゃいいと思い、方針転換。

  1. JSONからモンスター名を取り出し画像ファイルと引き合わせる。
  2. ImageMagickで画像のまわりに余白をいれる。
  3. 同じくImageMagickでモンスター名を画像にいれる。
  4. 同じくImageMagickで画像を結合して印刷。(A4サイズに12体ぐらい配置)

余白をいれているのは、
元々ポケモン図鑑のサイトほ画像が縦横570pxだったが、
上記のJSON付随の画像は縦横400pxで余白がなかったから。

というわけで、作ったプログラムはGistにあげておいた。
使いつぶしだと思っているので、リファクタリングなんかしてない。

pokemon_karuta.go

方針転換があったとはいえ、3時間と少しかかってしまった。
できた後は印刷して、切り分けて、子供と遊んだ。
「カ」で始まるポケモン集めてーとか言うと、
まだ知らないポケモンでも、カタカナを見て夢中で探すので、作った甲斐があったなーと思う。

余談

ImageMagickで画像を結合する場合、

# 縦結合
$ convert -append in01.jpg in02.jpg in03.jpg out01.jpg

# 横結合
$ convert +append in01.jpg in02.jpg in03.jpg out01.jpg

こんな感じで結合できるんだけど、
今回のように縦横並べたい場合は一気にできないのかなと思ったら、

$ montage in01.jpg in02.jpg in03.jpg in04.jpg in05.jpg in06.jpg -tile 2x3 out01.jpg

ってな感じにすれば、2列×3行で結合される。(1行目の左がin01で、右がin02)
ただ、このやり方だと、結果の画像ファイルのサイズが、
必ずしも元画像の合計サイズにならないし、
-geometryオプションや-resizeオプションつけたら、
バカでかくなってしまったりで、
今回は普通にconvertコマンドで横結合してその後縦結合した。




Comments

There are currently no comments on this article, be the first to add one below

Add a Comment

Note that I may remove comments for any reason, so try to be civil. If you are looking for a response to your comment, either leave your email address or check back on this page periodically.