🍺限界大学生 ハッカソンで散る。【ギリギリアウトな作品】

## はじめに
今回，「[ツクってアソぶハッカソン](https://tsukuaso.com/)」に出場しましたので，その時の作品と感想を残しておきたいと思います．

こちらのハッカソン，通称`ツクアソ`は，毎年九月に開催されているハッカソンで，お題も参加者が出し合い，多数決で決めるというハッカソンです．
賞金も用意されており，`毎年，15~30人`ほどが参加しています．

今回のハッカソンのテーマは，『ギリギリ商売できないアプリ』でした．

私は`現在大学4年生`で，今回が初めてのハッカソンになりました．

### 技術一覧
| 項目         | 内容                                   |
|--------------|------------------------------------------|
| 言語            | HTML,CSS, JavaScript,        |
| フレームワーク     | [Svelte](https://svelte.dev/)          |
| デプロイ方法    |[Vercel](https://qiita.com/Notta_Engineering/items/1db3a14be8caa9a63ab2)（無料でGitHub連携可能）                |
| API             |    [Google Maps APIs](https://qiita.com/Haruka-Ogawa/items/997401a2edcd20e61037) |
| テスト            | テストをする時間なかった... |


## 作ったもの
「[外人さんや．これが日本どす～](https://tsukuaso2024-kanaji.vercel.app/)」というWEBアプリです．

[![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/c4b448e5-0296-ebd7-0520-7527cf09da7f.png)
](https://tsukuaso2024-kanaji.vercel.app/)

**本アプリ**は，
「**舞子さんが，日本全国を<font color="DeepPink">ディスりながら</font>案内してくれるアプリ** 」です．



### 地方選択
まずは，それぞれの地方を選択する必要があります．

例として四国地方を選択すると，このような画面に移ります．
そうすると，それぞれの都道府県を選択できるようになります．
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/126f05b4-b9e5-6cc2-e5ee-b52705327cce.png)

:::note warn
- 都道府県ごとの，クリック可能な領域（ヒットボックス）が全て長方形で，他の県と干渉している所もあります
- 特急で作成したのでスマートフォンだと形が崩れます
:::

### 都道府県の選択
例として，**徳島**を選択してみます．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/373798f7-c612-cb24-6525-2e9eb1cd84e0.png)

すると，**徳島**の`おすすめスポット`が出現します．

その**3秒後**，

自動でこちらの`ポップアップ`が出現します．

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/915283b3-7af4-98e7-6ff0-050a29b411d1.png)

#### なんだこれは
- 各都道府県のおすすめスポットを確認することができると思いきや，`最終的に京都に誘導`されてしまう
- `舞子さんが毒舌`すぎて全国からおこられる( ｀ー´)ノ

`全都道府県`にこういったポップアップを用意しています！

## いくつかご紹介
### 岡山県

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/06c044d0-8321-485e-f606-1bef28ec71cb.png)

### 宮崎県
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/02a234b5-7825-bfbc-74cf-72c16e6ba5f7.png)

### 山口県
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/2a32618e-512c-571d-cd73-4dd219c3b2db.png)

### 奈良県
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/01111231-a735-14e0-07b1-59618c0fba8a.png)

### 埼玉県
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/92b9cd73-356e-89ac-cab1-c659be78c14a.png)

### 青森県
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457930/c66c8588-b16a-87e4-b1ad-a223a41428ff.png)

全国47都道府県，全て用意しています！


## 怒らないで～。
`毒舌`で，`けなしている`ように見るかもしれませんが，各都道府県の`名所`や，`食材`をきちんと紹介しています．
どうか，炎上しないことを祈ります．

**本WEBアプリ「外人さんや．これが日本どす～」は，下記から飛べます！**

https://tsukuaso2024-kanaji.vercel.app/


## ここだけの製作秘話
#### ~アルバイトに夜な夜な作成~
このハッカソンは3日間で行われたのですが，3日ともアルバイトが`8:30~21:00`まで入っていました．そこで，アルバイト終わり，`22:00~翌5:00`まで作成するという生活をしていました．

この3日間だけは，意識を失うかのように眠りについていました．

#### ~製作プロセスを教えてくれた先輩の助け~
自分の研究室には，ベテランの技術補佐員の方がいます．その方が，[クレイジー8](https://goodpatch.com/blog/crazys8)と呼ばれる，`高速でプロトタイプを作成する方法`を教えてくれました．

## 大会の結果と，反響
大会は，Zoomで行われ，一人3分の時間制限で行われました．

**残念ながら受賞はできませんでした．**

しかし，かなり反響がありました！
たくさんの方に笑っていただき，コメントも多く頂きました．

## まとめ
「限られた時間内で好きなものを作る」という，貴重な体験ができました．
今後は，人の役に立つようなソフトウェアも作ってみたいです！


**最後までご覧いただき，ありがとうございました！**

---
**本作品のソースコード**

https://github.com/kanaji2002/tsukuaso2024_kanaji/tree/main