こんにちは、ecbeingの野畑です。
前回記事でマインド的な話をしたので、今回はエンジニアっぽいテーマで書かせていただければと思います。
おそらく擦られまくっているテーマかと思いますが、「クラウドを使ったお手軽webアプリ開発」についてです。
業務の中でそれなりにサーバーレスのクラウドサービスに携わっているので、
クラウドを使ってどれだけ楽して労力とコストをかけずにアプリを作れるか試してみました。
作ったもの
今回作ったwebアプリはずばり「カレンダーアプリ」です。
普段普通のスマホアプリでカレンダーを使っているので、触りながら操作感のFBをしやすそうだったことと、地味にちゃんと作らないとすぐバグりそうだなと思ったことが理由です。
最近実装することがめっきりなくなったのでリハビリがてら（？）の開発となります。
実際にできたもののイメージは以下の通りです。
▶▶
なんてシンプル、、ｗ
アーキテクチャ
アーキテクチャは以下の通りです。
基本的には無料枠をうまく活用するために、サーバーレスのサービスで構成しています。
S3にベースとなるHTMLを配置し、ログイン判定やデータの保存などサーバーサイドで行う処理は全てAPI Gateway - Lambda構成のAPIを呼び出して行っています。
データの保存はDBを使わずにS3へテキストファイルとして保存しています。
ベースとなるHTMLではメインのフレームワークとしてvue.jsを利用していますが、完全なSPAという訳ではなくページごとにHTMLを分けています。
vue.jsを使った意図としては、双方向バインドがフロントの動きとして都合がよかったことと、最近触ってなかったので思い出しがてら使ってみたというところになります。
実際に作ってみた感想
結構すぐできるかなと思ったが、意外と時間がかかった
割と単純な構成なので楽にできるかな、と舐めていましたが
実際やってみると意外とつまるというか考えなきゃいけないポイントがありました。
祝日取得
祝日が表示されないカレンダーは使い物にならない訳でありますが、この祝日取得をどうしようかな、というのが最初の考えるポイントでした。 結局Google Calenderを利用しましたが、やり方の調査やキーの発行など思ったより時間がかかりました。
カレンダーの計算
今回月ごとの日付取得や表示などをフロントエンドだけで行ったのですが、やはりそれなりに複雑でした。 特に月またぎで前月、翌月をグレーアウト表示するのが骨が折れました。 結局ある月のカレンダーを表示するのに前後含めた3か月分を計算してから、余計な部分を削って表示するようなロジックにしています。
ログイン処理
今回フロントからAPIでサーバーサイドの処理を呼び出すためログインAPIも毎回呼び出しているのですが、 結局セキュリティを考えると各APIのバリデーション処理としてログイン判定をする必要がありました。 今回はなかなかいけてないと思いつつ各Lambdaにコピペで判定処理を入れましたが、本当はLambda Layersなどで共通化したかったですね、、、 これは今後の改善ポイントです。
本当に無料で運用できる
個人のクレジットカードでAWSアカウントを作成したのでコストがかからないように気を付けた構成にしましたが、 本当に請求が0ドルで少し感動しました。 大した量も使ってないので仮に原価がかかったとしても微量だとは思いますが、無料でwebアプリが作れたと考えるとなかなかクラウドはすごいなあ、と改めて思いました。
小さいものでも1から作ってみると楽しい
やはり大したものじゃなくても作ってみると色々試行錯誤が生まれて、エンジニア的楽しみ方ができるなと思いました。 ただ前述したように、無計画で作りすぎたので発生ベースであれこれ考えるという非常に野蛮な開発の仕方になってしまいました。
とはいえ普段仕事で頭を使ってる分、脳死で開発する楽しみ方もたまにはいいかなと思いますｗ
みなさんもぜひ、よき脳死開発ライフを。
