🙈

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

2022/12/14に公開約9,600字

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

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

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

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

おしゃべりマン

https://twitter.com/yui_active/status/1313279939349639169?s=20&t=DqiLeFEc-2faeXimsxGg1g

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

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

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

作成時期

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

技術記事

https://qiita.com/yuikoito/items/04ccc89164c6bb57b09b

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

技術スタック

  • GAS
  • LINE Messaging API

ネコリス

https://twitter.com/yui_active/status/1296717663201157120?s=20&t=82bLsCNPM_ZyBib1fMnmFw

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

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

作成時期

2020年8月

リポジトリ

https://github.com/yuikoito/TETRIS

技術スタック

  • HTML
  • JavaScript
  • githubホスティング

PicTranslator

https://twitter.com/yui_active/status/1316547840995278848?s=20&t=-Y6YjVwzaprZ8dYL3B-2gA

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

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

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

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

作成時期

2020年10月

技術記事

https://qiita.com/yuikoito/items/717c00d642705875792a

リポジトリ

https://github.com/yuikoito/pictranslator

技術スタック

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

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

https://twitter.com/yui_active/status/1347886993733267458?s=20&t=DqiLeFEc-2faeXimsxGg1g

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

https://chrome.google.com/webstore/detail/site-bomb/hnnabnffilimfgdcinlijkjkdemdonea/related?hl=ja&authuser=0

作成時期

2021年1月

技術記事

https://qiita.com/yuikoito/items/3ff1d884fbe2cd991bfb

技術スタック

  • HTML
  • JavaScript

塗り絵ツクール

https://twitter.com/yui_active/status/1366738405904642048?s=20&t=DqiLeFEc-2faeXimsxGg1g

https://nurie-maker.com/

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

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

作成時期

2021年1月

リポジトリ

https://github.com/yuikoito/nurie-creator

技術記事

https://zenn.dev/yui/articles/0507acb6cdc100

バックエンドは夫がやってくれました。
https://qiita.com/ba-yu/items/a0ff7d8ae960c144edbf

技術スタック

  • Nuxt.js
  • tailwind css
  • Vercel
  • Python
  • OpenCV
  • AWS(Lambda, ECR, API Gateway)

UI Components

https://twitter.com/yui_active/status/1398990248609161223?s=20&t=DqiLeFEc-2faeXimsxGg1g

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

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

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

作成時期

2021年5月

リポジトリ

https://github.com/yuikoito/ui-components

技術記事

https://qiita.com/yuikoito/items/1288fed0dcc24c71e159

技術スタック

  • React
  • TypeScript
  • Sass
  • Vercel

絵画ツクール(停止中)

https://twitter.com/yui_active/status/1403347800151138306?s=20&t=DqiLeFEc-2faeXimsxGg1g

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

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

作成時期

2021年6月

技術記事

https://qiita.com/yuikoito/items/126b0e2d36a707bfd36e

技術スタック

  • Nuxt.js
  • tailwind css
  • AWS(Lambda, S3, SQS, EC2, API Gateway)
  • Vercel

GOHAN

https://twitter.com/yui_active/status/1406226902885433348?s=20&t=DqiLeFEc-2faeXimsxGg1g

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

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

作成時期

2021年6月

技術記事

https://qiita.com/yuikoito/items/c1aef147cef4458f9d2e

技術スタック

  • GAS
  • LINE Messaging API
  • Geocoding API
  • Places API

ポケモンAAツクール

https://twitter.com/yui_active/status/1414458679110234116?s=20&t=DqiLeFEc-2faeXimsxGg1g

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

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

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

作成時期

2021年7月

技術記事

バックエンド側解説記事
https://qiita.com/yuikoito/items/7dcf1deeed46f46b2f2e

アプリ紹介記事
https://qiita.com/yuikoito/items/da5954a5d78da9de6a4e

リポジトリ

バックエンド側リポジトリ
https://github.com/yuikoito/aa-pokemon-backend

フロントエンド側リポジトリ
https://github.com/yuikoito/poke-art-creator

技術スタック

  • Nuxt.js
  • tailwind css
  • Vercel
  • OpenCV
  • Python
  • AWS(Lambda, ECR, API Gateway)

漫画ツクール

https://twitter.com/yui_active/status/1416788568186318849?s=20&t=DqiLeFEc-2faeXimsxGg1g

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

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

作成時期

2021年7月

技術記事

https://qiita.com/yuikoito/items/a76ea5bf05f04a44df8d

リポジトリ

バックエンド側リポジトリ
https://github.com/yuikoito/manga-backend

フロントエンド側リポジトリ
https://github.com/yuikoito/manga-creator-frontend

技術スタック

  • Nuxt.js
  • tailwind css
  • Vercel
  • OpenCV
  • Python
  • AWS(Lambda, ECR, API Gateway)

表情筋チャレンジ

https://twitter.com/yui_active/status/1437600731356282885?s=20&t=W9KlOKcsKCiFK3i8bKLRjA
https://face-expression-challenge.vercel.app/

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

作成時期

2021年9月

技術記事

https://qiita.com/yuikoito/items/a0c588e19999e50f5a0b
https://qiita.com/yuikoito/items/04e95735aa4340a11cf8

リポジトリ

https://github.com/yuikoito/face-expression-challenge

技術スタック

  • Next.js
  • TypeScript
  • face-api.js
  • Vercel

Eyedol

https://twitter.com/yui_active/status/1467834998351089665?s=20&t=YtbTd8xIwFtHlrawzpwHmg
https://eyedol.vercel.app/

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

作成時期

2021年12月

技術記事

https://qiita.com/yuikoito/items/eed0a9c37675be27c812
https://qiita.com/yuikoito/items/28b47788f9c1590b7903

リポジトリ

https://github.com/yuikoito/eyedol

技術スタック

  • Next.js
  • TypeScript
  • Chakra UI
  • Vercel
  • Python
  • OpenCV
  • Amazon Rekognition
  • AWS(ECR, API Gateway, Lambda)

YOSO

https://twitter.com/yui_active/status/1571347166375079936

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

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

作成時期

2022年9月

技術記事

https://zenn.dev/yui/articles/fc86bfdb061d06

技術スタック

  • Next.js
  • TypeScript
  • Sass
  • Vercel
  • Python
  • AWS(ECR, API Gateway, Lambda)
  • CLOVA Speech

結婚式のクイズアプリ

動作イメージ
https://www.youtube.com/shorts/Ou9YuOuBsxU

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

作成時期

2022年11月

技術記事

https://zenn.dev/yui/articles/dfab1b18c3f62e

技術スタック

  • React
  • TypeScript
  • Chakra UI
  • Python
  • AWS(ECR, API Gateway, Lambda, DainamoDB, s3, Amplify)

今作っているもの

AI Code Reviewer

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

https://twitter.com/yui_active/status/1603154552269996032?s=20&t=oQISjP7EwSN_V-NxwCp1hQ

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

Mosaic

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

刺繍ツクール

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

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

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

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

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

https://twitter.com/yui_active/status/1396480098421850113?s=20&t=DqiLeFEc-2faeXimsxGg1g

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

制作時期

2021年5月

技術記事

https://qiita.com/yuikoito/items/b8062b9f89f72c6865ed

リポジトリ

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

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

https://twitter.com/yui_active/status/1419494821782114306?s=20&t=DqiLeFEc-2faeXimsxGg1g
https://travel-app-three.vercel.app/

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

制作時期

2021年7月

技術記事

https://qiita.com/yuikoito/items/bb9c40bbb673e4f71abe

リポジトリ

https://github.com/yuikoito/tensorflow-bodypix-sample

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

https://twitter.com/yui_active/status/1424386546577313796?s=20&t=DqiLeFEc-2faeXimsxGg1g
https://face2emoji.vercel.app/

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

制作時期

2021年8月

技術記事

https://qiita.com/yuikoito/items/a494402993ac4be46d97

リポジトリ

https://github.com/yuikoito/face2emoji

あとがき

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

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

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

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

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

Discussion

ログインするとコメントできます