【個人開発】オンラインで絵踏みができる「fumie~対戦~」を開発した

![efumi-taisen.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/aca21032-f467-3e62-8bee-ee5ec9c831ac.png)

# はじめに

<h3>こんにちは！！ Watanabe Jin (@Sicut_study)です！</h3>

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![CF405A5C-FF9A-43BE-B009-D34EE8295C25.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/d52b18f6-30e8-2d4d-5b61-062293d332d2.jpeg)
寝てたら年を越しててこの顔です


突然ですが、皆さんは**踏絵**をご存知ですか？？

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/8136bf5a-913b-9377-3731-364a443339f9.png)
https://mag.japaaan.com/archives/92525

> 「踏絵」は、十字架やキリスト像、マリア像などが描かれた板を踏ませ、キリスト教信者でないことを証明させるものです。 絵を踏むことを拒んだキリスト教信者は、捕らえられ、処刑されました。 江戸幕府はキリスト教を禁止するため、信者を見つけ出そうと、踏み絵を行いました。

<font color="gray">(ちなみに廃止は3月9日ということでミクの日でした)</font>

中学校で多くの方が習っていたかと思う「踏絵」ですが、私は**とある問題**を解決する<font color="blue">**現代の最強ツール**</font>だと考えました。

その問題とは、、、、

### タダ飯おじさんおじさんがイベントに現れる

<font color="gray">※IT勉強会の懇親会に飲食目的で来ていると疑われる人</font>

実は私も最近以下のようなイベントを開催して受付で<font color="blue">**飯目的の人出ないか見極める**</font>という大役を任されていました。

https://uzabase-tech.connpass.com/event/303399/

ここで考えたわけです。

### <font color="red">踏絵ならタダ飯おじさんの侵入を防ぐことができるのでは？

![taisaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/e82fc0cb-593d-e835-d708-374d4148cc2c.png)

ということで<font color="red">**fumie~対戦~**</font>を開発しました

![fmie.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/a86220e0-c278-07c2-9a77-314e8c9845bd.png)

# fumie ~対戦~

オンラインで記録を管理できる現代版踏み絵システムです。
絵を踏むまでのタイムを計測して記録します。

## 機能紹介

### 1. 踏絵の設定

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/a7bbb3de-ae97-3e78-3f95-0f213177fbfc.png)
トップ画面

ここでは踏み絵に関する設定をすることができます。
`踏み絵を行うユーザー名`、`踏む絵のタイトル`、`踏む絵の写真`が登録ができます。

<font color="blue">**スタートを押すとタイマーがスタートします**</font>

キャンセルボタンを押すと、設定が全てクリアされます。

### 2. 踏絵タイム

こちらはスマホでもハードウェアでもどちらでも可能です。

| スマホ | ハードウェア  |
|---|---|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/f632403f-14ef-2afa-7caa-13f757c72129.png)|![5CE584AA-C8AF-4D3F-8505-2C4155A74E9B.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/e966361f-4e0a-8ad1-c612-759d3849cba0.jpeg)


<font color="gray">(画像はAIで生成)</font>

ハードウェアではキースイッチを裏に隠しており、押されることでタイマーが止まる仕組みになっています。

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/5059edbe-cfe3-b989-e03f-75ad110e8133.png)
踏んだあと

踏むとスタートしてから踏むまでにかかった時間が表示されます

### 3. 記録一覧

過去の記録をみることができます

|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/cc02847b-3ae3-9077-dfaa-2c6c0b12c86f.png)

## 技術スタック

開発期間 : 2時間
開発人数 : 1人
フロントエンド : React, TypeScript
ライブラリ : ChakuraUI

今回の挑戦はハードウェアを使ってアプリを作成したことでした。
中国からよくわからないキースイッチを購入してそれを利用して作ってみました

アプリ的には特に難しいことはありませんでした

## 今後の展開

#### <font color="red">踏絵の世界オンライン対戦できたら面白そう

というのはかなり先の話で、実はデータの永続化をしていなかったり、記録一覧を順位順にしたりソートできたりはしたいと考えています。

また今回は印刷した絵を貼って使っていますが、こちらを薄いディスプレイに変更して設定した写真がモニターに表示されるような作りにしても良いかもと思いました。

~~このクソアプリにそこまでやる人がいればですが~~

# 実践してみた

ということで実際に踏絵をしてきます。
この年で1度も踏絵をしたことがない私ですが、ワクワクします。

## 1. AIが生成したタダ飯おじさん

実際の利用用途を想定して**AIが生成したタダ飯おじさん**を用意しました。

![2B1804A3-D027-4D8D-A947-FBE05320A6A3.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/63cc51c2-521a-fb69-5b8d-63a32a7c34e4.jpeg)

では実際にやっていきます。

![efumi-1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/c3238ab2-97ba-cc47-c049-c266d00be66e.gif)

結果はかなりの好タイムでした。これなら**タダ飯目的ではない**ことが明らかです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/02173f7c-2e4f-83a3-d793-09c86e9b1aee.png)


## 2. 自分のイラスト

このアプリですが、タダ飯おじさん撃退**以外**にも使うことができます。

それは、、、、

#### <font color="red">過去の自分との決別</font>

![81779C83-CBDD-4240-80D1-B4AC828598F8.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/241f0422-85fd-43ca-0cca-23bd672f16ee.jpeg)

今回は2024年どうしても<font color="blue">**痩せたい**</font>と考えている私が<font color="blue">**太っていた頃の自分と決別**</font>するために踏んでいきます。

![Peek 2024-01-03 20-21.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/79985973-2fe6-32c6-fb64-5885295d8f2d.gif)


少し躊躇したもののなかなか良いタイムです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/bdae3178-89c4-ee00-ef5b-1b0342281df0.png)



きっと2024年はダイエットに成功するでしょう

## 3. 家族の写真

最後に自分がどうしても<font color="blue">**踏めない絵**</font>でおじさん側の気持ちも味わいたいと思います。

![ACE1F85A-D261-4594-850D-16C7F3E26FF4.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/99fbc183-f590-00fb-af19-0f539be82d42.jpeg)


![2ADD2672-568E-4DE7-96FE-27DA04143D1D.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/819a4f79-f95e-b33f-f606-80039ee861b0.jpeg)

![2AA17687-3402-405B-A8AA-6002BCDBC16D.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/c147801f-6ff6-b8c4-d12f-5d33b2a9e47f.jpeg)

![E20C0E72-5D35-4696-8FA4-F3FA1B8D6A66.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/9f6e6313-b1f0-c20a-21b7-5c77c9e672b4.jpeg)


![Peek 2024-01-03 20-20.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/de7d8bfa-a01e-da78-a2c9-789f06587f34.gif)


|　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|![450本の記事の中で 特に自信作をまとめるぞ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/b5e68bbe-b2ce-912a-5cb5-d20ed42b1308.png)

#### <font color="red">思わず抱きしめてしまいました

# おわりに

いかがでしたでしょうか？
そろそろ新年会シーズンタダ飯おじさんに困っている方がいたらぜひ試してみてください！

ここまで読んでいただけた方は**いいね**と**ストック**よろしくお願いします。
@Sicut_study を**フォロー**いただけるととてもうれしく思います。

今週もプログラミング頑張りましょう！

![jisou-banner.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/810513/217ea52d-8130-3266-0619-990fa968408a.png)

# 2024年個人開発一覧

https://qiita.com/Sicut_study/items/830d1edbf95e77390690

# おすすめ記事

https://qiita.com/Sicut_study/items/cff86da10b8ee0809ccb

# About Me

Webエンジニア転身して1年間本気で勉強
転職ドラフトで高額オファーを複数獲得
そこでの経験からアウトプットやマインドセットの発信に強みがある
エンジニアをやりながら、起業に挑戦中
アイデア作りやパブリックスピーキングを得意としてる

■ Twitter
https://twitter.com/Sicut_study
■ Instagram
https://www.instagram.com/himariajin
■ Youtube
https://www.youtube.com/channel/UCBFrGAJhPuuaoLwUIHBILsA
■ TikTok
https://www.tiktok.com/@sicut_study
■ プログラミングコーチングJISOU
https://projisou.jp
■ 登壇依頼などご依頼はこちらから
himaria.jin.watanabe@gmail.com

# 参考

https://mag.japaaan.com/archives/92525