microCMSとVue.jsで子供の作品を展示する

こんにちは。みやです。

子供は想像力と行動力がすごいですね。いつも絵を描いて何回もくれます。もらった絵・作品はすぐに捨てるのが忍びなくて箱にしまってましたが、とくに見返すこともなくしまい込んでいました。

すぐ見返せるように美術館のように展示しておけばいいのでは？と思い、ウェブ上に展示してみました。

作品をスキャンして、ウェブサイトに載せる行為が億劫なので、なるべく簡単にしたいと思っていました。そのため、スマホ（iPhone）でスキャンして画像をアップロードするだけの仕組みにしたら下記のようになりました。

日向美術館のアーキテクチャ

スマホでのスキャンは、microsoft lensというアプリを使っています。写真を撮るだけで簡単に補正込みでスキャンできて、写真やpdfに変換・保存してくれます。私はiPhone標準の写真アプリにスキャン後のデータを保存しています。

画像をアップロードするだけの仕組みは、ヘッドレスCMSがその解なのでは？と思い、microCMSを使わせていただきました。はじめてヘッドレスCMSを使ったのですが、とても使いやすい印象です。

Hobbyプランが0円で用意されていてものすごく気軽に試せました。
画像APIにimgixというものが搭載されていて、画像URLにクエリパラメーターを与えることで、大きなサイズの写真もAPIで小さなサイズの写真にしてくれました。
- Hobbyプランのデータ転送量20GB/月の制限の到達を遅らせてくれると思っています（未確認）
- スマホで見るのにオリジナル画像のサイズ・解像度は不要ですよね。
公式ドキュメントがわかりやすく、ドキュメントを見ながらすぐにAPIの作成をすることができました。
- 設定した時の内容は、【microCMS】日向美術館で使用しているAPIスキーマ設定方法に記載しました。
管理画面がスマホレイアウトに対応していて、スマホから簡単に入稿できました。
- 投稿しやすい管理画面は、コンテンツ更新のハードルをグッと下げてくれるので嬉しいです。