中学生がAI作品の投稿サイト「AIPIC」を作った話

## 概要

中学生が[AIPIC](https://www.aipic.app)というサービスを開発してから、ベータ版をリリースするまでの記録です。
だだっこぱんださんの[高校生がAI作品に特化した画像投稿サービス「Aivy」を個人開発した話](https://zenn.dev/ddpn08/articles/aivy-run-release)に対抗意識を持ってしまったので書いています。

https://zenn.dev/ddpn08/articles/aivy-run-release

## 作ったもの

https://www.aipic.app

https://twitter.com/AiArt_Official/status/1592481064219709441

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2168774/ea4ff3f8-b6fc-f61f-63ea-a1c6ac4a6592.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2168774/741259a9-f5f5-510b-feea-d8c39506a6df.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2168774/f8eb8f28-e897-d387-5328-1e089f4db169.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2168774/5c8fbbce-3e26-0014-bc4c-d01bc3cce5ef.png)

## どんなサービスか

最近はやっている（？）画像生成AIで生成した画像の投稿サイトです。
画像と一緒に、生成するために使ったプロンプトなどを共有できます。
ぜひ使ってみてください！

## なぜ作ったか

画像生成AIのコミュニティ（Discord）で、AI生成画像の投稿サイト欲しいなーという話をしていて、僕も欲しかったので作りました。

## 技術的な話

:::note warn
注意
この記事はあらゆる点において初心者の中学生が書いているので、ツッコミどころがたくさんあると思います。温かい目で見守ってください。
:::

### 開発体制

#### メンバー
- 僕一人

#### 開発開始からベータ版公開まで

- 36日間(10/10~11/15)
開発に慣れてなくて、なかなか時間がかかりました。
途中から、他の開発者さんが問題や実装する機能などをまとめてくれて、今ある問題を把握することができたので助かりました。issue管理って重要ですね...

### 使ったフレームワーク・サービスなど

- Next.js
- Tailwindcss
- Vercel
- [Supabase](https://supabase.com/)
  - DBや、認証系などを扱えるオープンソースのBaaSです、
- [Cloudflare R2](https://www.cloudflare.com/ja-jp/products/r2/)
    - Cloudflareが公開している、AWS S3の代替サービスです。 

#### Next.js x Tailwindcss

これらを選んだのは、Reactのライブラリの多さと、Tailwindcssが直感的にわかりやすかったので、これを選びました。
最初の頃は、Next.jsの中でComponentの切り分けを全くしてなかった（今もあんまり改善してない）のと、Reactの基本をあんまり理解してないままゴリ押ししたせいで、いろいろと苦しい思いをしました。
Tailwindcssに関しては、すごく直感的でわかりやすいのすが、それぞれの要素のクラスがすごく長くなってしまうので、どうすればいいのか模索中です。

#### Supabase

Supabaseはすごく便利です。みんなも使いましょう。
本当はFirebaseでも良かったのですが、今以上にプログラミングが出来ないときにFirebaseを触って挫折した経験があって、触りたくなかったので今回は使っていません。

#### 認証系

AIPICでは、Google認証とEmail認証を扱っています、
今回は使いませんでしたが、[Supabase UI](https://ui.supabase.io/)というライブラリで、サインイン・サインアップ画面を簡単に実装できるようです、

#### DB

アカウントから画像、フォロー、いいねなど、いろいろな情報を保存しています。
sqlへの理解が乏しくてここでも苦しんだ記憶があります、
だだっこぱんださんのZennで言われていましたが、DBの設計が正しいのかよくわからずにすごく迷っています
また、DB関連では、supabase-jsのDBのクエリもすごく使いやすかったです、

#### Cloudflare R2

画像に使用しているストレージです。
（多分）安いので、これを選びました。

ただ、いま現時点でこれを使って運用するのは少し難しそうなので、今の懸念点を紹介しておきます。

- アップロードの制限が厳しい
これは、厳密にはS3の話ではないのですが、Vercel x S3を行う人は注意したほうがいいかもしれません。
aws-sdkをクライアント側で使えないので、next.jsのAPIで処理しているのですが、
Vercelにアップロードする時に、4MBの制限がかかってるそうです、4MB以上のファイルはアップロードできないということです。
ダイレクトアップロードも方法はあるっぽいですが、僕はエラーがでてアップロードすることができませんでした、

あと、これは同じCloudflareのサービスである、Cloudflare Imagesと比較しての感想ですが、next.jsはnext/imageで圧縮するので、vercelの使用制限に引っかかったりするので、画像を扱う人は、R2ではなくCloudflare Imagesを使うことをおすすめします

#### Exifの読み込み

webuiやnovelaiで、内部のメタデータの形が全く違うので、ちょっと苦労しました。
それぞれ、pngのtEXt chunkに格納されているのですが、絵文字や特殊文字（日本語含む）が入ってる場合、tEXt chunkでは処理できずにiTXt chunkに格納されるので注意が必要です。

### 反省点

#### デザイン！
デザイン、大変ですよね。
僕はCSSに関する理解が乏しかったので、tailwind UIなどを見ながら実装していったのですが、そのせいで業務ツール感がするデザインになってしまいました。
そのうちモダンなデザインにしたいです。

#### コードがやばい
上記の通り、初心者なのでコードがやばいです、TypeScript使ってるのに、型指定がほとんどAnyになっています...
あとは、componentを切り分けていなかったりして、一つ一つのファイルがすごく見づらいです。

#### 時間かかりすぎ
コードを書くのがおそすぎて、僕がのろのろ開発している間に、[chichi-pui](https://www.chichi-pui.com/)や[aivy](https://aivy.run)といった競合サービスが出てきていました。
しかもそれが各ニュースサイトで取り上げられてるのを見て、すごく羨ましかったです...
やっぱりこういうのは時間が命なんでしょうか...

## あとがき
高校生であれだけ話題になるなら、中学生だともっと話題になるよな？というおかしな感情で書きました。
よければ、[aipic](https://www.aipic.app)を使ってみてくださいね！