みやざダニエルズのIT備忘録

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

By miyazaDaniels on Nov 25, 2022
microCMSとVue.jsで子供の作品を展示する

こんにちは。みやです。

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

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

日向美術館 日向美術館へ

アーキテクチャ

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

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

Lens

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

microCMS

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

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

AWS Amplify

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

ソースコード

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


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

Recent Posts
日向美術館とVuetify

【Vuetify】v-cardの中にv-cardを入れたときに意図したmarginにならなかったのでdivでレイアウト調整した話

Nov 29, 2022
v-cardの中にv-cardを入れたらmarginがはみ出てる?暫定的にdivで調整しました..
日向美術館とmicroCMS

【microCMS】日向美術館で使用しているAPIスキーマ設定方法

Nov 27, 2022
日向美術館で作成したmicroCMSのAPIスキーマの設定方法と設定した内容をご紹介します。
microCMSとVue.jsで子供の作品を展示する

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

Nov 25, 2022
子供の作品を箱にしまい込むだけにせずにウェブに載せてみました。Headless CMSであるmicroCMSを使ってみたら使いやすかったです。
Webで縦書きコンテンツ〜Safariには気を付けろ!〜に助けられた話

Webで縦書きコンテンツ〜Safariには気を付けろ!〜に助けられた話

Nov 5, 2022
縦書き文字をflexboxを使って並べたときのレイアウト崩れが直りました。
OpenBD coverage

OpenBDに登録されているISBNの数の調査をしてみた

Oct 31, 2022
本の情報をオープンにしてくれているOpenBDのAPIを使ってISBNの登録数を見てみました
Lighthouseのユーザー補助を100点にする

Lighthouseのユーザー補助を100点にしたい

Oct 25, 2022
Lighthouseのユーザー補助を100点にするためにコントラストの警告を解消しました
世界の片隅で愛を叫ぶLINE Bot

世界の片隅で愛を叫ぶLINE Bot

Oct 15, 2022
AWS Lambda、API Gatewayを使ってLINE Botで愛を伝えてみました
Google Apps Scriptで勤怠管理システム風なものを作る

Google Apps Scriptで勤怠管理システム風なものを作る

Oct 14, 2022
Google Apps Scriptで勤怠管理システム風なものを作ってみました。
AstroにGoogleアナリティクス4を導入する

Googleアナリティクス4の導入

Oct 13, 2022
AstroにGoogleアナリティクス4を入れてみました。
© Copyright 2022 by みやざダニエルズのIT備忘録. Built with ♥ by CreativeDesignsGuru.