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

こんにちは。みやです。

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

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

日向美術館へ

アーキテクチャ

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

Lens

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

microCMS

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

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

AWS Amplify

GitHub連携による継続的デプロイ、やアーキテクチャには書いていませんがRoute53で登録したドメインの使いやすさが半端ないです。

ソースコード

ソースコードはGitHubに置いています。

• https://github.com/miyazaDaniels/hinata-museum

今後、アーキテクチャのそれぞれの設定方法などの詳細を記載予定です。 子供に負けじといろんなサービスや物を使って何か作って楽しむぞ!!