有名サービスのアイコンでカルタゲームの作成

はじめに

こんにちは @yui10 です。
今回サービスのロゴがまとめられているプロジェクトがあったのでそのデータを元に名前からロゴを当てるゲームを作ってみました。
完成したものだけを見たい人はこちら

経緯

ある日、ネットサーフィンをしていると高専かるたというゲームを見つけました。
このページを見た時にふと、世の中にある色んなロゴを対象で行ったらどうなるかと思い作ってみることにしました。
まず、やるべきことは使用するロゴを探しだすことです。多くのロゴがまとめられておりかつフリーで利用できるものを条件にして調べました。
最初は大量のアイコンがセットになっているMaterial Iconsが思いつきましたが、それだけは面白くないと思い、少しの間ネットの海を漂ってました。
そんなときSimple Iconsというものに出会い、登録されているアイコンの量の多さや知らないものが数多くあるためこれでやったら面白そうと思い、このアイコン達で作ることに決めました。

Simple Iconsとは

Simple Iconsとは世界的に有名なサービスやブランドのロゴがまとめられたものです。

特徴は以下通りです

• 3100以上のアイコンが登録されている
• ライセンスはCC0 1.0 Universal
• 公式よりCDNやnpmパッケージが用意されている
• サードパーティー拡張機能としてReactやVueなど20以上が提供されている

なお有名である基準を満たして入れば誰でもアイコンを追加することができます。もし追加したいアイコンがある方は、公式のページやこちらの記事を参考にしてください。

技術一覧

• 開発環境 : Docker
• サーバー,フロントエンド : Next.js
• UIコンポーネントライブラリ : Material UI
• アイコン : Simple Icons

技術スタックとしては、ローカルサーバでアイコンを返すエンドポイントを作成するためにバックエンドが必要だったので Next.js にし、見た目を装飾するものとしては簡単に出来そうな Material UI を使用しました。

完成したもの

作った結果この様な形になりました。
機能としてはランダムに選ばれた12,24,36個のアイコン全てを当てるモードと、永遠と続けるものがあります。
工夫というか特徴としてこのゲームはアイコンを読み込んでいるため通信量が多いかと思われますが、実際はSVGファイルなので通信量は少ないです¹。なので外でも通信量を気にすることなくプレイできます。

おわりに

最後まで見ていただき、ありがとうございます。
現時点では対戦機能がなくただ一人でやるだけのゲームではありますが、知らないサービス名に対して名前からロゴを推論する点は面白いと評価を頂きました。これを読んでいる方も、icons-karutaを遊んでみてください。
ゲームで遊んだ感想や不具合、機能の追加案がありましたらissue、pull request、コメント等頂けますと幸いです。

1. Chromeのデベロッパーツールからみた通信量だけで言えば阿部寛のHPといい勝負できるくらいには ↩