今回のテックブログは「クイズやアハ動画の自動作成/配信」ができるシステムの開発について解説します。
東京国立博物館で開催される特別展「空也上人と六波羅蜜寺」ファンサイトにて、実際にそのシステムに触れることもできますので、ぜひそちらのサイトも訪れてみてください。

はじめに

こんにちは。メディア研究開発センター所属の村瀬です。この記事では我々のチームが開発したクイズ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で作成されたクイズに触れる日も、そう遠くないかもしれません。（野望）

（メディア研究開発センター・村瀬友広）