クイズが簡単に作れる！クイズCMS【Qukker】
今回のテックブログは「クイズやアハ動画の自動作成/配信」ができるシステムの開発について解説します。
東京国立博物館で開催される特別展「空也上人と六波羅蜜寺」ファンサイトにて、実際にそのシステムに触れることもできますので、ぜひそちらのサイトも訪れてみてください。
はじめに
こんにちは。メディア研究開発センター所属の村瀬です。この記事では我々のチームが開発したクイズCMS【Qukker】についてご紹介させていただきます。
CMSって何？
まず、そもそもCMSって何？？？という方向けに軽くCMSについて触れておきます。CMSとは"C"ontents "M"anagement "S"ystemの略称でWEBコンテンツを一括で管理/配信（WEBでの公開）をするシステムの総称です。
一般的にはWordPress等のホームページ生成システムのことを指します。
クイズ × CMS = Qukker
Qukkerは管理/配信するコンテンツをクイズに特化させたCMSです。簡単にクイズの作成/配信をすることができるシステムを目指して開発をしています。クイズを作成して公開する機能の他、複数のクイズを束ねてひとつのクイズコンテンツとして公開することができます。
アハ動画クイズ
また、Qukkerはクイズの自動生成にも取り組んでいます。みなさん突然ですがアハ動画クイズを解いたことはありますか？このような感じのクイズで画像のどこが消えたか（変化したか）を当てるクイズです。
一昔前のテレビ番組でよく観ましたね。Qukkerではこの動画を、一枚の画像から消したい部分を選ぶだけで自動で簡単に作成できる機能を開発しました。
Qukkerのシステム構成
Qukkerは以下のAWSサービスを活用して開発しました。
以下でシステム構成について簡単にご紹介します。
・React(Typescript)
フロントエンドはReact(Typescript)を採用したSPAアプリケーションで構
築しています。
・Route53 + CloudFront + S3
フロントエンドアプリケーションのホスティングはS3を採用しており、
DNSとしてRoute53を採用しています。また、ページのキャッシュや
ユーザーからのリクエストの振り分けのためにCloudFrontを採用してお
り、一部リクエストをLambda@Edgeに振っています。
・Lambda@Edge + Python
CloudFrontが振り分けた一部リクエストのレスポンスをLambda@Edgeが
レスポンスをしています。QukkerはSPAで実装されておりogp画像の
動的生成ができないため、Lambda@Edgeがogp用のレスポンスを担って
います。
・Step Functions + API Gateway + Lambda + Python
上記でご紹介した、アハ動画生成の機能が稼働しています。
・AppSync + DynamoDB
データベースとしてDynamoDBを採用しており、AppSyncを介してデータ
ベースへのアクセスを実現しています。
・Cognito
クイズ作成者のユーザーログインをCognitoにより実現しています。
Qukkerのシステム構成の特徴としてサーバーレスということが挙げられます。サーバーレスなのでサーバーの管理の必要なく日々運用されています。
Qukker活躍しています
2022年3月から開催される特別展「空也上人と六波羅蜜寺」の空也上人ファンクラブ内で六波羅蜜寺検定と題したクイズコンテンツが公開されており、こちらのクイズの作成にQukkerが活用されています。入門編なのですが、とても難しく私の正解率は50%でした……。是非みなさんもチャレンジしてみてください！
問題を解いて空也上人立像に興味が湧いた方は、特別展「空也上人と六波羅蜜寺」にも足を運んで、実際の空也上人立像をご覧になってみてください！
まとめ
今回は、メディア研究開発センター内で開発したクイズCMS【Qukker】についてご紹介しました。皆さんが毎日のようにQukkerで作成されたクイズに触れる日も、そう遠くないかもしれません。（野望）
（メディア研究開発センター・村瀬友広）