[Scratch]子供向けに技術動物園ゲームを作ったよ

スクラッチで子供向けに**技術動物園タッチゲーム**を作りました！
よかったら遊んでいってください〜

![スクリーンショット 2021-07-20 20.17.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/a9130acf-78b1-1677-e1ae-2a588fc47a7b.png)

[Tech Zoo - 技術動物園タッチゲーム on Scratch](https://scratch.mit.edu/projects/550939770)

※端末のスペックによってはカクつくかもです。

### ターゲット
1~2歳くらいの幼児。
というか**息子のため**に作りました。笑

### なぜ技術系アイコン？
仕事してて、なんかロゴに動物多いなーと思ったのがきっかけです。
無意識レベルで息子へ刷り込んで**技術への親しみ**を持たせます(?)

### なぜスクラッチ？

- 環境構築が不要
- 公開が楽&無料
- 子供が小学校のプログラミング授業で「教えて〜」と言われた時に操作が分かるように(**これがメイン**)

### 操作方法

アクセス後、**緑の旗アイコン**をクリックすると開始されます。
**背景をクリックorタッチ**すると動物が出てきます。
出てきた動物をクリックすると大きくなったりします。
登場人物全員出てくると最初にリセットされます。
効果音つけてるので音出し推奨です。

### 実装の様子
キャラクターをどう動かすかをプログラミングしてます。
普段プログラム書いてる人ならすぐに慣れると思います。

![スクリーンショット 2021-07-20 20.48.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/0989efff-d484-538a-9a48-3b991a7a994b.png)

公開も共有ボタン押すだけなので楽！

### 登場人物

#### Octocat / GitHub

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/d01bff04-190c-3119-7731-7dc016145108.png">

[GitHub](https://github.com/)のネコ、**Octocat**です。
Octopus + Cat で足はタコらしいです。

#### Dino / Google Chrome

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/d0b6ca11-c08c-79f8-dfe3-01adac436da2.png">

ネットに繋がっていない時に出てくる[Google Chrome](https://www.google.com/intl/ja_jp/chrome/)の恐竜、**Dino**です。
学生時代にこのゲームで遊んでスコアを競ったりするのは通過儀礼ですよね？

#### Tanuki / GitLab

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/5a043cdf-3199-9d2c-c000-ff34f8b65cbe.png">


[GitLab](https://about.gitlab.com/)のタヌキ、**Tanuki**です。そのまんま...
めちゃくちゃキツネに見えますがキツネじゃないです。

### elePHPant / PHP

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/6e229b17-791d-ca98-136f-9693b94b6ef0.png">

[PHP](https://www.php.net/)のゾウ、**elePHPant**です。
おめめがチャーミングですね。
名前にPHPが入ってるけどどうやって発音するんだろう。

### Swift

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/4b0cbc9f-ef7d-5697-6918-7b8215a2091a.png">

[Swift](https://swift.org/)のトリです。
swiftって英語でツバメの意味なんですね。
iOSエンジニアの友達曰くAppStoreのランキング上げるために日々奮闘だとか。

#### フォクすけ / FireFox

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/b02d2e9b-41c2-b0eb-cea3-5e67f3ae29fd.png">

[FireFox](https://www.mozilla.org/ja/firefox/)のキツネ、**フォクすけ**です。
一応日本仕様のマスコットらしいです。
一時期キツネが可愛いという理由だけでFireFox使ってました。

### Qiitan / Qiita

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/29fc53c9-066d-ffb1-ce4e-3f6f887ae613.png">

みんな大好き[Qiita](https://qiita.com/)のネコ、**Qiitan**です。

### MobyDock / Docker

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/156192bb-88c0-39ea-3cf4-6c8834642138.png">

[Docker](https://www.docker.com/)のクジラ、**MobyDock**です。
コンテナ持ってて力持ちですね。

### Gopher / Go

<img width="30%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/d93b39f5-df18-695e-c614-190b5ad06dbf.png">

[Go](https://golang.org/)のネズミ、**Gopher**です。
Gopherで英語でホリネズミって意味らしいです。

### Tux / Linux

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/28326778-dfba-55d9-72e0-9a1ab5b4bcc1.png">

[Linux](https://www.kernel.org/)のペンギン、**Tux(タックス)**です。
名前の由来はペンギンがタキシード(**tux**edo)を着ているように見えるからだとか。

### Raspberry Pi

<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/e67e9853-b08a-750a-9bfb-c8ebf24c482c.png">

[ラズベリーパイ](https://www.raspberrypi.org/)のラズベリーです。

### / Firebase

![firebase.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/53958876-a71b-bed1-0628-a3247048ced9.png)

[Firebase](https://firebase.google.com/?hl=ja)のチューリップです。

### AWS

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/34ffbe55-de39-2c5e-dfe6-73294d8d53cf.png">

[AWS](https://aws.amazon.com/jp/)の雲です。クラウドサービスは雲のロゴ率高め。

### GCP

<img width="80%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/d38675dd-5efb-a50c-c650-2421749027d8.png">


[GCP](https://cloud.google.com/)の雲です。カラフル。

### Apple

<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/f4c6c241-5b7b-e04a-9265-84a66c404587.png">

[Apple](https://www.apple.com/jp/)のリンゴです。

### ユーザーの反応

ユーザー(息子)に遊んでもらいます。

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/ce908a09-6d2a-8dbc-b62c-f62bafecbeb9.jpeg">

喜んでる！
PHPのゾウが気に入ったみたいです。

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/d4b7de3d-8cff-aefb-37a2-0b35b0bec0a8.jpeg">

なかなかタッチが上手です。
結構ハマってました。
IPadやIPhoneなら「ホーム画面に追加」をしておくとアプリみたいに開けて良さそう。

<img width="50%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/140953/87672b47-4625-595e-6a6d-f84292bf6865.jpeg">

もちろんPCでも遊べます。(息子よ、そこはタッチパネルではない)

ちなみに同僚に見せたら、何の技術アイコンかを当てるクイズが始まりました。笑

### 最後に

意外とキャラクターの名前知らないの多かったです。

アプリ開発は今後も続く予定なので、次回作をお楽しみに！
ちなみに前作↓
[GitHubの活動履歴を捏造するアプリを作ったよ - Qiita](https://qiita.com/mgmgmogumi/items/9c82828ce9542b5eaad6)


おしまい