はじめに
Webアプリの本格的な個人開発は初めてだったがようやくリリースまで漕ぎ着けたので、その内容をここにまとめる。以下より、ご利用いただけます！
https://sukauta.site
作ろうと思ったきっかけ
友人がWeb開発をしていることもあり、最近のWebアプリ事情に興味を持ち、軽い気持ちで調べたところのめり込んだのがきっかけです。学生時代にHTMLやJS、PHPを用いて簡易的な掲示板アプリを作ってみた経験はあるが、卒業以降は触れていませんでした。昨年一念発起で作ってみようと、最近のWebアプリのフレームワークやクラウドサービスをコツコツ勉強しながらのスタートでした。
どんなアプリ？
表題の通り一言でいうと「Twitterのプロフ画像からステータス値を分析するアプリ」です。以下のようにTwitterのIDを入力すると、そのIDに紐付いているプロフ画像を画像処理し、４つのステータス値（攻撃力、守備力、素早さ、運）を分析します。分析結果はTwitter上でシェアすることができます。筆者自身がゲーム好き、ドット絵好きというのもあり、レトロゲーム感のあるタッチに仕上げています。
使用したサービス、フレームワーク
-
サービス
- Neylify・・・フロントエンド用
- AWS(EC2, ACL, ELB, S3, Route53) ・・・バックエンド用
-
フレームワーク
- Nuxt.js・・・OGPの動的生成のため
- Django・・・バックエンドの学習、Pythonの使用経験があるため
システム構成
システム構成は以下のような感じ。
それぞれの処理の流れをざっくりと下記します。
- クライアントがユーザからTwitterIDの入力を受け付ける
- クライアントがサーバへ受け付けたTwitterIDで画像分析を依頼する
- サーバーがWebスクレイピングにより、TwitterIDに紐付いているプロフ画像を取得する
- サーバーがプロフ画像を分析し、ステータス値を取得する
- サーバーが分析結果画像を生成し、生成した画像をS３へ保存する
- サーバーがクライアントへ画像分析結果としてS3の保存先の結果を応答する
- クライアントが応答内容でS3サーバから画像分析結果を取得し、表示する
初の個人開発で得られた知見
まずがMVPを作るの大事
月並みなことだと思いますが、まずはMVP（Minimum Valuable Product）を作ってデプロイすることが大切だと思いました。デプロイすることで、Google Analiticsでアクセス状況をみると、「より良いものを・・・！」と開発モチベーションがグンと上がります。また、今回がWebアプリとしての初デプロイでしたので、セキュリティ関連の情報も気にするようになりました。
周囲の人に話すの大事
いわゆる宣言効果というものですが、自分自身にプレッシャーを与えることでモチベーションの維持に繋がります。また、話題の一つにもなるので、初対面の人でもより自分に興味をもってもらえるようになると思います。
実際に手を動かすことが大事
自分は勉強をする上で「アウトプットこそ最大のインプット」だと思っています。また、実際に手を動かすことで想定していたこととは別の課題が色々見えてきます。例えば、Webアプリを始めた頃、OGPについては全く知らず、Twitter側でよしなに生成してくれるものだと思っていました（笑）。
自作アプリを使ってもらえることに感動
友人が初めて使ってくれた時は何事にも代えがたいような感動を覚えました。また、やはり実際に使ってもらうことで多少なりともフィードバックや、自分なりの気づきが得られるのでより良いWebアプリを作る上での指針を立てやすいと思いました。
おわりに
ひとまずはデプロイまでできてよかった。正直まだまだなところが多いので、少しずつ機能追加していければと思います。フィードバックがありましたら、是非お願いいたします！
最後まで読んでいただきありがとうございました！