フロント技術に強い友人の助けを借りて、色々と試しつつサーバレスWebアプリを作ってみたので、技術要素とか工夫した点を書きたいと思います。
作ったサーバレスWebアプリ
「おさらいクラブ」
子供の学習サポートで「やらせたい算数ドリル」を何度も印刷できるようにするのが目的で、コンテンツの追加にあたっては現時点では私の子供の学習状況が基準となっています。
作った経緯はこちらをご参照ください。（スキしてくれたら嬉しいです）
↓↓↓↓↓
環境サマリ
言語とか
- Node.js
- Vue.js
- Vuex
- Nuxt.js（SSG, nuxt/content）
- Bulma（css framework）
- KaTeX（計算式のレンダリング用）
ローカル環境
- VSCode
- Discord（チームコミュニケーション）
サーバ環境
- Netlify（静的サイト構築、問い合わせフォーム）
- Github
- Cloudinary（画像用CDN）
その他
- お名前ドットコム
- Google Analytics
- Search Console
- Data portal（レポーティング）
開発前のディスカッション
作り始める前にMiroを使って簡単にサービスデザインを行いました。ざっくり以下のようなことを設定しています。
- どういったサービスにしたいか？
- 誰のために何をしたいのか？（課題、ペルソナ、バリュー）
- 競合サービス分析と差別化のポイント
- 前提や制約の整理
- 大まかな技術構成
- 大まかなゴールイメージ
その後、基本設計として以下を作成しながらイメージを具体化させました。
- 画面遷移図（利用導線の仮決め）
- ワイヤーフレーム
- デザイン方針
↓ディスカッション時のスクリーンショットです。
プライベートでモノづくりする場合も資料で計画を言語化することで、
- ゴールが解らず作ってる途中で飽きる
- 共同作業者との認識齟齬が出る
- 技術選定がマッチしているのかわからない
- 将来的な拡張性を踏まえて設計・実装できない
- 次に何をすれば良いか迷う
- 同じことを二人でやってしまう（分担できてない）
こういった事が起こらないのが良いですね。
目標や計画を立てるのは仕事で何度も行ってきた経験が活かされました。意思疎通しながら組み立てていくのは楽しいです。
環境構築のコンセプト
- 費用はなるべくかけたくない
- vue.js関連のフロント技術の勉強も兼ねて作りたい
- 片手間でも拡充できるようコンテンツ追加をしやすくしたい
なるべく費用と手間をかけたくない
どのように作っていくか考えるにあたって、AWSやGCPでサーバを立てるか？と考えもしましたが、サービスの検討をした結果、当面はDBを持つ必要が無いという結論に至りました。
また、クラウド環境でホスティング出来れば十分な機能だったので、無料で利用出来て丁度良いプランのホスティングサービスを探しました。
今回は無料プランで以下が可能なNetlifyにしました。
- 設定が簡単ぽい
- Githubのプライベートリポジトリからデプロイできる
- フォームを使える
- ABテストとかしやすそう（まだ使ってない）
- ホスティングサーバでジェネレートできる
- 容量を気にしなくてよい
- カスタムドメインを設定可能
- SSL対応
Vercel、Firebase hosting、Cloudflare pagesなど、大体どこを使っても似たようなことが出来ますが、設定が簡単そうだったこともあり総合的に判断して決めています。
無料で出来ちゃうのは助かるー。
ドメインはお名前ドットコムにて、安くて丁度良いものを選びました。
ということで、かかった費用は以下の通りです。
| 科目 | 費用 |
|---|---|
| Netlify | 0円 |
| ドメイン | 60円 |
| その他 | 0円 |
| 合計 | 60円 |
とってもお安いです。
加えてGithubリポジトリへのマージを検知してデプロイしてくれるので楽ちんです。
なお、フォームに関しては、Googleフォームも考えましたが、せっかくなのでNetlifyのフォームを利用しています。
コンテンツ拡張をしやすくする（nuxt/contentの活用）
以下のコンテンツはnuxt/contentを使うことで、更新作業を楽にしています。
- 開発者ブログ（/content）
- 算数ドリルの解説ページ（/commentary）
- その他アップデート情報などのページ（/update など）
それぞれのページ用途によってデザインを調整できるよう、pagesを分けて作成しています。
例えば、開発者ブログはタグ設定やヘッダ画像を設定できるようにすることで、一覧での表示やカテゴライズを管理できるようにしたり、解説ページは余計な情報を排除して解説内容のみのシンプルな構成にしたりという感じです。
開発者ブログの更新に関しては、contentページを新規追加していくだけなので、featureを作る必要もなく手数が減らせて良いです。
コンテンツ拡張をしやすくする（ロジックの工夫）
オブジェクトの責務を考えつつ、最小工数で追加していけることと、追加時に影響が出ないような構造にしました。
これが良い感じにハマッて追加作業の工数は極めて小さくなっています。
また、作り始めの状態から既に何度かのリファクタリングをかけましたが、規模が小さい状態からリファクタリングを行ったことで、技術負債を溜め込まないようにしています。これも結果的に工数の削減に大きく貢献しています。
Qtta的にはここの内容をより具体的に書いた方が良いのかなと思いますが、ここを書き出すとキリが無いので割愛します。
月次レポーティングの自動化
敢えて書くほど大層なことはしていませんが、、、
GAとSearch ConsoleはData Portalでレポーティングして、月次レポートが配信されるように設定しました。
が、GAの仕様が変わってて思ったようにレポート取れてないので、この辺はこれから調整していかないといけないですね。
今のところ注視するほどデータが取れていないので、追って対応していくつもりです。
数式の表現
これはかなり苦戦しました。始めは自力で数式を表現させていましたが、筆算系はCSSで表現するには複雑過ぎました。
そして、色々とネットを探し回って辿り着いたのがKaTeXです。
そもそもTex記法というのも初めて見たので最初は全く理解できませんでしたが、Tex記法にさえ慣れてしまえば非常に使いやすいライブラリです。
ネットでLaTeXの資料は見かけますが、KaTeXに関連する資料は少ないので苦労しました。
全く予定はありませんが、高校生以上の数学を扱う場合にこのライブラリが更に活かされそうです。
コンテンツで使う画像
コンテンツ内で利用する画像は、当初Githubで管理しようとしていましたが、リポジトリを軽くしておきたかったのと、変更しやすさを重視して外部のCDNを使うようにしました。
CDNサービスも当然ながら無料で使えるものをベースに、画像のアップロードのしやすさや、画像編集など付加機能を考慮しCloudinaryを利用するようにしています。
Cloudinaryのメリットは、
- アップロードが簡単
- CLIもある（ほとんど使ってない）
- APIとして画像を取得できる（使ってない）
- 無料で使える範囲が広い
- クレジットという独自単位で利用料を計算
- 無料だと25クレジット使える
- ストレージ容量やアクセス数でクレジットを消費
- クレジットは過去30日分で計算されるため、毎日減ったり増えたりする
- 今のところクレジットは１％しか使われていない
- URL画像をカスタマイズできる（超便利！）
- 画像サイズを変えたりトリミングできる
- 文字を入れたりできる
- フィルタとか入れられる
- カスタマイズをセットにして名前付きで定義できる
CloudinaryはブラウザでTransformationを設定できるので、非エンジニアでもカスタマイズもしやすくて良いんじゃないでしょうか。
さいごに
大体こんな感じです。
サーバレス環境の開発というのは初めてやってみましたが、思ったよりしっかりとしたものを作れて良いですね。
今後は算数ドリルのコンテンツを追加しつつ、虫食い算など問題の出し方を拡張していくのと、既存のアプリなどのようにブラウザ上やモバイルアプリで解いたり出来るようにしていく予定です。
あと広告も入れます。
「マネジメント＋開発」「チームの成長」「ビジネスと開発を繋ぐ」
南原 錦善
note：https://note.com/kinzen
Twitter：https://twitter.com/kinzenmirrorro1
Facebook：https://www.facebook.com/100011962923868
是非フォロー、友達登録をお願いします！
色々な話をするのが好きなので、ちょっとだけビジネスの相談をしてみたいとか、カジュアルディスカッションしてみたいとか大歓迎です！