🙈

【個人開発】これまでに作ってきた14個+αの個人開発アプリを振り返る

2022/12/15に公開

個人開発

idea

この記事は個人開発 Advent Calendar 2022の15日目の記事です。

こんにちは、yuiです。
早いもので2020年の12月からエンジニアとしてのキャリアがスタートして丸2年がたちました。

この記事ではこれまで作ってきた個人開発アプリをざっくりと振り返ります。

※コードはとても公開できたレベルではないものも多いのですが、今更恥ずかしがっても仕方がないので供養も込めて公開できるものは公開します。

おしゃべりマン

こちらはまだ旅行会社で働いているときにエンジニアとして働くことも特にイメージしないまま趣味で勉強しつつGASで作りました。
これを作るためだけに2ヶ月ぐらい勉強したような記憶があります。

これが初めての個人開発でしたが、このLineBotを作ったあとは普通に旅行会社で働いていただけで特に勉強をすることもなく、その後2年弱ぐらいはほとんど何もしていなかったのでエンジニアを目指すぞとなったときにはこの経験はびっくりするぐらい役に立ちませんでした。笑

ただ初めて作ったということもあり、思い出深い一品です。

作成時期

作成: 2018年10月
更新: 2020年12月

技術記事

2020年のクソアプリアドカレでアプリを作りきることができなくて、ちょっとだけ改善を加えて記事を書きました。

技術スタック

GAS
LINE Messaging API

ネコリス

https://yuikoito.github.io/TETRIS/

猫の手形などで作られたテトリスが振ってくるアプリケーションです。
当時はやっとhtmlやjsを理解したところでした。
このレベルのものでも当時は全然書けなくて、めちゃくちゃ苦戦したのを覚えています。

作成時期

2020年8月

リポジトリ

https://github.com/yuikoito/TETRIS

技術スタック

HTML
JavaScript
githubホスティング

PicTranslator

https://pic-translator.vercel.app/

これは初めてちゃんと作ったwebアプリケーションでした。
ボタン一つで画像から翻訳できたら便利じゃないかという思いから作りました。
今だとありきたりな機能ですが、当時はあまりメジャーなものがなかったんですよね。

Vue.jsに関してもほとんど初心者レベルだったので、状態管理どうしたら良いのかわかんなくて苦戦したのを覚えています。

なんのことはないアプリですが、このアプリのおかげでエンジニアとして転職できました。
やはり何か作ったものを出しておくのは良いことですね。

作成時期

2020年10月

技術記事

リポジトリ

技術スタック

Vue.js
vuetify
heroku→途中でVercelホスティングに切り替え

すべてを爆発できるChrome拡張機能

初めての拡張機能作成でした。
動きをなめらかにするのが難しかったです。
この頃になるとだいぶコードを書くということに慣れてきたように感じます。（本当か？）

作成時期

2021年1月

技術記事

技術スタック

HTML
JavaScript

塗り絵ツクール

https://nurie-maker.com/

ボタン一つで塗り絵を作ることができるアプリケーションです。
このときに初めて動的OGPなるものを組み込んでアプリを作りました。

元々動的OGPには興味あったのですが、当時SSRやSPAという概念もわからず、なぜVue.jsだと動的にできないのだろうというところから調べて、なんとかSSRを理解してNuxt.jsで作った一品になります。

作成時期

2021年1月

リポジトリ

技術記事

バックエンドは夫がやってくれました。

技術スタック

Nuxt.js
tailwind css
Vercel
Python
OpenCV
AWS（Lambda, ECR, API Gateway）

UI Components

https://www.ui-components.com/

毎回アニメーションを書くためにググってを繰り返していたので、自分用のコピペ集を作ろうと思い作りました。
あとはこのアプリが個人開発で初めてのReact利用です。当時は仕事でVueメインで書いてましたが、Reactにも慣れたいと思っていたのでReactで書いてみました。

このアプリでようやくTypeScriptを個人開発で導入することになります。
今となっては型なしでは書けない体になってしまいました。

作成時期

2021年5月

リポジトリ

技術記事

技術スタック

React
TypeScript
Sass
Vercel

絵画ツクール（停止中）

初めての機械学習？系のアプリでした。
ただ、https://github.com/lengstrom/fast-style-transfer の処理をAWS上で動かしてAPI化しただけです。（営利目的ではないので大丈夫だとは思いながらも念の為に許可はとりました。）
こういうOSSを公開してくれると非常に勉強になるので助かってます。

こちらのアプリ、結構気に入っていたのですが、どうしても処理が重すぎて30秒のリミットを超えてしまうため、停止中です。

作成時期

2021年6月

技術記事

技術スタック

Nuxt.js
tailwind css
AWS（Lambda, S3, SQS, EC2, API Gateway）
Vercel

GOHAN

近くのごはん屋さんを教えてくれるLineBotです。
LineDevelopersのLT用も兼ねて作りました。

LineBotはこれ以外にも何十個と作ってきたのでいつものGASでサクッと作りました。

作成時期

2021年6月

技術記事

技術スタック

GAS
LINE Messaging API
Geocoding API
Places API

ポケモンAAツクール

https://poke.art-creator.net/

これはまごうことなきクソアプリですが、LambdaでOpenCVを動かしたりと絶妙にめんどくさいことをしているアプリでもあります。

このアプリ以前はOpenCVを使う系のものは夫にバックエンドをすべて担当してもらってたのですが、少しは私も理解したほうが良いということで、このアプリに関しては教えてもらいながらですが私がすべて作りました。
APIを自作するのも初めてだったので難しかったですが何回か作ってるうちに少しだけ分かるようになりました。
おかげでこれ以降Python+OpenCV+AWSの組み合わせで簡単なAPIは作れるようになりました。

作成時期

2021年7月

技術記事

バックエンド側解説記事

アプリ紹介記事

リポジトリ

バックエンド側リポジトリ

フロントエンド側リポジトリ

技術スタック

Nuxt.js
tailwind css
Vercel
OpenCV
Python
AWS（Lambda, ECR, API Gateway）

漫画ツクール

https://manga.art-creator.net/

ボタン一つで漫画化できるアプリです。
ポケモンAAツクールで学んだことを忘れないうちに作りました。

作成時期

2021年7月

技術記事

リポジトリ

バックエンド側リポジトリ

フロントエンド側リポジトリ

技術スタック

Nuxt.js
tailwind css
Vercel
OpenCV
Python
AWS（Lambda, ECR, API Gateway）

表情筋チャレンジ

表情筋を鍛えるというよくわからんコンセプトのまま作ったアプリです。
こちら初対面の人とどうしても無言の時間が続いた場合は「実は表情で遊べるゲームを作ったんですけどやります？」とコミュ障丸出しの誘い方をしてたまに遊んでいます。

作成時期

2021年9月

技術記事

リポジトリ

技術スタック

Next.js
TypeScript
face-api.js
Vercel

Eyedol

https://eyedol.vercel.app/

目を大きくできるアプリです。
こちらもまごうことなきクソアプリなのですが、Amazon Rekoginitionを使ったりしてちょっとだけ新しい挑戦をしています。

作成時期

2021年12月

技術記事

リポジトリ

https://github.com/yuikoito/eyedol

技術スタック

Next.js
TypeScript
Chakra UI
Vercel
Python
OpenCV
Amazon Rekognition
AWS（ECR, API Gateway, Lambda）

YOSO

夫とハッカソンに出たときに一緒に作ったものになります。
決勝まで行けて嬉しかったです。

音声を録音してAPIコールをする部分でポーリング時に無限ループが発生しないようにしたりなど、音の扱いに関してはほとんど初めてだったので結構難しかったです。

作成時期

2022年9月

技術記事

技術スタック

Next.js
TypeScript
Sass
Vercel
Python
AWS（ECR, API Gateway, Lambda）
CLOVA Speech

結婚式のクイズアプリ

動作イメージ
YouTubeのvideoIDが不正です

自分の結婚式用に作りました。
ページの描画速度を意識したりと、かなり頑張りました。
Reactで作ったのですが普通にCSRでデータを取得するとデータのロードが終わるまでの時間が長くて微妙過ぎたのでビルド時にAPIコールをしてデータを埋め込むスクリプトを書いたりなど、SSG的な動きになるように調整しました。

作成時期

2022年11月

技術記事

技術スタック

React
TypeScript
Chakra UI
Python
AWS（ECR, API Gateway, Lambda, DainamoDB, s3, Amplify）

今作っているもの

AI Code Reviewer

今はOpenAIを使ってコードレビューをしてくれるアプリを作っています。

大枠はできましたが、今はアイコン作ったりフォント考えたり、多言語化したりなどなど諸々調整中です。
こちらは20日担当のクソアプリアドカレに出すつもりなのでそれまでになんとかします！！

Mosaic

自分以外、あるいは自分と友人以外、など登録した人以外の顔にモザイクをかけることができるアプリです。
人混みの中で写真を撮ったときに背景に写り込んでしまった人がいる状態でSNSにアップしづらいというときに使うイメージです。
APIは出来てるんですがデザインが追いつかず実装半分ぐらいで止まってます。
完成させたい・・・。

刺繍ツクール

こちらは友達のミシン屋さんと一緒にやっていて、例えば子どもが書いたかわいい絵を使ってかばんにしたりすることができるプラットフォームを作っています。

写真を刺繍にできるレベルの簡単なイラスト化を行ってそれを刺繍にできたら楽しそうだなと思うので今はその写真→イラスト化の部分を実装しています。
OpenCVだけだとどうしてもうまくいかなさそうで、機械学習を入れるのでモデルの作成とAWS上で動かす場合の30秒の壁をどのように突破しようかと考えています。

おまけ〜TensorFlowを使ったDEMOアプリ達〜

わざわざ個別で紹介するまでもないアプリたちの紹介をします。
TensorFlowにハマっていて色々作った時期がありました。

顔にマスクをかけるアプリ

顔にマスクをかけるだけのアプリです。
なぜかdev.toで出した記事では結構トレンドにのったりしました。
当時TypeScriptとTensorFlowをあわせて使う場合に少しコツが必要なのに情報があまりなかったからかもしれません。

制作時期

2021年5月

技術記事

リポジトリ

https://github.com/yuikoito/mask-app

気軽にバーチャル旅行ができるアプリ

https://travel-app-three.vercel.app/

背景を変更するアプリです。bodypixを使っています。

制作時期

2021年7月

技術記事

リポジトリ

表情をアイコンで伝えるアプリ

https://face2emoji.vercel.app/

このアプリはTensorFlowを参考に作られているface-api.jsを使って作りました。

制作時期

2021年8月

技術記事

リポジトリ

https://github.com/yuikoito/face2emoji

あとがき

以上、今まで作ってきたアプリを振り返りました。
色々と思い出すことが多くてしんみりしました。

2020年→2021年への移り変わりでできることが大幅に増えてて我ながら笑いました。

とはいえ、まだまだできることは少ないのでもっといろんなアプリを作れるようになりたいものですね。
ちなみに去年は色々細かいものも作りすぎて全ては書ききれなかったのですが、もし興味あれば1年間で作った18個のアプリの振り返りと行った5つの挑戦に関してという記事で書いてますのでお読みいただけると嬉しいです。

私は作って覚えるタイプなので、今後も色々作りながら新しい技術を学んでいきます。
他の個人開発エンジニアと比べると作ってるものがしょぼすぎて出すのが辛いのですが、作りながら幅を広げていこうと思っていますので見守ってもらえると嬉しいです💪

ではでは、最後まで読んでいただいてありがとうございました〜！
良ければ私のTwitterをフォローしてくれると嬉しいです！