毎週アプリをリリースして3ヶ月経ったので振り返る

こんにちは、[Yui](https://twitter.com/yui_active)です。

実は5月後半から**週イチ発信**と称して、**週一でアプリをリリースして日本語と英語両方で記事を書く**という挑戦をしておりました。
まだもう少し続ける予定ですが、一旦は**3ヶ月完走した**ということでこのチャレンジ期間中に開発したアプリやできるようになったことを紹介していこうと思います。

参考になったと思えばLGTM :thumbsup: してもらえれば大変励みになります。


## 1週目: TensorFlowを使って画像にマスクをかけるアプリを作った

TensorFlow.jsを使った初めての開発でした。

https://twitter.com/yui_active/status/1396480098421850113?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1396480098421850113%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fqiita.com%2Fyuikoito%2Fitems%2Fb8062b9f89f72c6865ed

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

https://dev.to/yuikoito/face-detection-by-using-tensorflow-react-typescript-3dn5

最初[face-api.js](https://justadudewhohacks.github.io/face-api.js/docs/index.html)で動かそうとしてたんですが、なんでかモデルの読み込みができなくて（最終的にはできるようになった）TensorFlow.jsでやりました。

ただ、TensorFlow.jsを使うことにしたのは良いものの、React+TypeScriptで動かしてる例があまりなくて、最初はまあまあハマりました。笑
ただこれでTypeScriptで動かす方法がわかったので、この経験は今後も活用することになります。

また、このとき初めて英語の記事を書きましたが、それがトレンド4位になって嬉しかったです。

https://dormoshe.io/newsletters/ag/typescript/42?utm_source=twitter&utm_campaign=twitter

## 2週目: ボタン一つでコンポーネントのscssをコピーできるサイトを作った

自分がほしいなと思って作りました。

https://twitter.com/yui_active/status/1398990248609161223?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1398990248609161223%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fqiita.com%2Fyuikoito%2Fitems%2F1288fed0dcc24c71e159

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

https://dev.to/yuikoito/ui-components-website-released-2g8e

私はアニメーション系があんまり得意ではないので、よく使うアニメーション類はコピペできるようにメモ帳にまとめてたんですが、さすがにいい加減見にくいと思ってまとめることにしました。

結構便利じゃないですか？笑

## 3週目: ui-componentsに18個のコンポーネントを追加した

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

https://dev.to/yuikoito/i-made-18-ui-components-for-all-developers-17l6

前の週に作ったサイトにコンポーネントを新たに追加しました。

この週だけリリースじゃなくてアップデートになってしまいましたが、結構追加したのでまあまあ大変でした。

## 4週目: ボタン一つで有名絵画風の画像にできるサービスを作った

画像処理に興味を持ったので作ってみました。

https://twitter.com/yui_active/status/1403347800151138306?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1403347800151138306%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fqiita.com%2Fyuikoito%2Fitems%2F126b0e2d36a707bfd36e

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

https://dev.to/yuikoito/image-transformation-convert-pictures-to-add-styles-from-famous-paintings-24ml

記事にも書いてる通り、以下のリポジトリをAPI化する形で利用させてもらったので、画像処理を私がガッツリやったわけではないです。

https://github.com/lengstrom/fast-style-transfer

記事を書いてくれた人がいて、嬉しかったです。

https://momosiri.nagoya/33835

## 5週目: 現在地の近くのおすすめのごはん屋さんを教えてくれるLINE Botを作った

https://twitter.com/yui_active/status/1406226902885433348?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1406226902885433348%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fqiita.com%2Fyuikoito%2Fitems%2Fc1aef147cef4458f9d2e

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

https://dev.to/yuikoito/developed-an-app-to-transcribe-and-translate-from-images-32gp

（LINE関連のことは英語版で書いても需要がないと思って前に作ったアプリのリリース記事を翻訳しました。）

LINE Botは実は過去に何回も作ってるので、サクッと作れました。

この記事がきっかけでLINE Developer Communityの方から声をかけて頂き、登壇することになりました。

https://www.youtube.com/watch?v=uqt2YG3WDfs

一人だけCommentScreenの設定を間違えていて、コメントが流れない感じになってしまいましたが、楽しくはなさせて頂きました。

## 6週目: Next.js + TypeScript + Vercelデプロイで動的OGPを実現した

https://qiita.com/yuikoito/items/619120c592d99f9d3053

https://dev.to/yuikoito/generate-open-graph-images-with-next-js-and-typescript-on-vercel-110j

これはアプリと呼べるものではないですが、これまで動的OGPをNuxt.jsでしか行ったことがなく、Next.jsでもやりたいなと思ったので試してみました。

ちなみにNuxt.jsで動的OGPを実現してみた記事は以下です。

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

## 7週目: ポケモン画像でアスキーアート風に変換するAPIを作った

ふとポケモンの画像を眺めていて、なんとなくこれで画像を変換できたら面白いかなと思って作りました。

https://twitter.com/yui_active/status/1411500004896776194?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1411500004896776194%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fqiita.com%2Fyuikoito%2Fitems%2F7dcf1deeed46f46b2f2e

https://qiita.com/yuikoito/items/7dcf1deeed46f46b2f2e

https://dev.to/yuikoito/opencv-in-lambda-created-an-api-to-convert-images-to-pokemon-ascii-art-style-using-aws-and-opencv-287l

私は集合体があんまり得意ではないので、作ったは良いものの大変不快な気分になりました。笑
でもやるからにはちゃんとやりたいので無駄なこだわりを持ってちょっと粒度を修正したりしました。

https://twitter.com/yui_active/status/1411529653286625280?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1411529653286625280%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fqiita.com%2Fyuikoito%2Fitems%2F7dcf1deeed46f46b2f2e

LambdaでOpenCVを利用するというのがなかなか難しくて苦戦した部分です。

## 8週目: ポケモン画像でアスキーアート風に変換するwebアプリを作った

先週作ったAPIを利用してwebアプリを作りました（なんで？）

https://twitter.com/yui_active/status/1414458679110234116?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1414458679110234116%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fqiita.com%2Fyuikoito%2Fitems%2Fda5954a5d78da9de6a4e

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

https://dev.to/yuikoito/developed-a-web-app-to-convert-images-to-pokemon-ascii-art-style-mb7

## 9週目: ボタン一つで漫画風の画像にできるサービスを作った

7〜8週目でポケモンの画像で遊んだりしてちょっと画像処理楽しくなってきたので、その勢いのまま作りました。

https://twitter.com/yui_active/status/1416788568186318849?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1416788568186318849%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fqiita.com%2Fyuikoito%2Fitems%2Fa76ea5bf05f04a44df8d

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

https://dev.to/yuikoito/using-opencv-developed-a-web-app-to-convert-images-to-manga-style-23p0

なかなか楽しいと思うのでよければ遊んでください。
人物抽出をしてるわけじゃないので、背景を入れ替える場合は背景に何もおいてない画像じゃないとうまくいかないと思います。


## 10週目: バーチャル旅行を体験できるアプリを作った

ちょうど#web1weekが開催されてたので、「バケーション」というお題にのっとって作りました。

https://crieit.net/boards/web1week-202107/7510face763fc6998cc884bf20561721

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

https://dev.to/yuikoito/tensorflow-next-js-typescript-remove-background-and-add-virtual-background-image-with-web-camera-296k

背景を変えているだけですが、海外では結構需要があったようで、なんとトレンド１位になりました。

https://dormoshe.io/newsletters/ag/typescript/50?utm_source=twitter&utm_campaign=twitter

また、この記事がきっかけで3件ほど問い合わせメールがきました。
1週目にReact+TypeScriptでTensorFlow.jsを動かしたときは結構苦戦しましたが、このときはそこまで苦戦せずあっさりできてちょっとだけ自分の成長を感じて嬉しかったです。

## 11週目: オリンピックを盛り上げるためにピクトグラムさんになれるアプリを作った

こういう発信を続けていたらなんと[とみーさん](https://twitter.com/tommy19970714)からお声がけ頂き、一緒にピクトグラムアプリの開発をすることになりました。

https://twitter.com/tommy19970714/status/1422010924882296834?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1422010924882296834%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fqiita.com%2Fyuikoito%2Fitems%2F274f926b5c5e59b43ce9

https://qiita.com/yuikoito/items/274f926b5c5e59b43ce9

https://dev.to/yuikoito/tensorflow-next-js-typescript-let-s-become-pictograms-with-pose-detection-tokyo2020-17ia

ずっとDiscordをつないで2日間朝から夜中まで開発しました。

TBSの王様のブランチで紹介されたり、ねとらぼさんに紹介していただけたり、反響があって嬉しかったです。

## 12週目: 顔出しをせずに表情だけを伝えることができるwebアプリを作った

最近オンライン会議が多い中で毎回メイクするのめんどいな、でも表情もわからないのはさすがになと思ってその問題を解決できるアプリを作りました。

https://twitter.com/yui_active/status/1424386546577313796?ref_src=twsrc%5Etfw%7Ctwcamp%5Etweetembed%7Ctwterm%5E1424386546577313796%7Ctwgr%5E%7Ctwcon%5Es1_c10&ref_url=https%3A%2F%2Fqiita.com%2Fyuikoito%2Fitems%2Fa494402993ac4be46d97

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

https://dev.to/yuikoito/recognize-facial-expressions-and-change-face-to-emoji-using-face-api-js-with-next-js-typescript-21n9

需要あればChromeの拡張機能にでもして、実際の会議で使えるようにしようと思ったんですが、私の表情が乏しいのか怒った顔をしても悲しい顔をしても全く反応してくれなかったのでどうしようか迷ってます。笑
ただネタアプリとしてはおもしろいんじゃないかなと思いました。


## 感想
毎週リリースして発信するのは本当にしんどかったです。笑
仕事だとゴールがありますがこの挑戦に関してはゴールが見えないので何に向かって走ってるのかわからなくなるときがしばしばありました。

何度も**なんでこの苦行をやってるんだろう**と思いましたが、時々反響があるとやはり嬉しいので、あともう少しだけ続ける予定です。

実際に作りはじめるのが毎週土曜か日曜で、次の月曜（間に合わなければ火曜）に発信というスタイルをとっているので、実質アプリ開発にあてている時間は**丸1日**ぐらいだと思います。
そんな中で、最低限の機能でリリースをしてという作業を繰り返しているので、**MVPの作成**ははやくなったかなと実感しています。（とはいえ相変わらず変なところで詰まったりはしますが）

英語で記事を書くのも初めての挑戦でしたが、ぼちぼち問い合わせが来たりして嬉しく思ってます。

一年前にも[100日チャレンジ](https://qiita.com/yuikoito/items/0b0796b2632ede3194c9)をしてましたが、何かしらの縛りを自分につけるとしんどいですが生きてる感じがして最高に楽しいですね。


それではまた来週もなにか作って出そうと思います！
最後までお読み頂きありがとうございました！