【連載】EducAItion Times

AIで本格的な仕組みも作れる!Create.xyzでモノづくりの可能性を広げよう

―Create.xyz Dojo 上級編

EducAItion Timesは、「大人のきぼう こどもの未来」をテーマに、生成AIの活用情報をお届けします。本連載は、生成AIコミュニティ「IKIGAI lab.」のメンバー8名が運営するもので、子供たちの好奇心を刺激する、新たな学びの提供をめざしています。

AIコード生成プラットフォーム「Create.xyz」を活用し、誰でも簡単にWebサイトを作成できる方法を、これまで 初級編 中級編 の2回にわたり「Create.xyz Dojo(クリエイトドウジョウ)」でご紹介してきました。

中級編までで学んだ機能を使えば、誰でも見られるWebサイトを作ることができます。しかし、データを保存したり、誰かがデータを入力したことを知らせたり、限られた人だけに見せたりすることはできません。

そこで、これらの課題を解決するために上級編では「データベース」「ファンクション」「ユーザー認証」という機能について説明していきます。

上級編で紹介する機能

難しそうに聞こえますが、これらの機能を活用すると子供と一緒に作る場合はゲームのスコアランキングなどに活用したりすることができます。今回ご紹介する機能を活用し、中学生の娘が 連打ゲーム を作りました。

上級編の機能を使って中学生の娘が作ったゲーム

※ 各種機能の説明でプロンプトが出てきますが、同じプロンプトでもAIの性質上、生成物は異なることをご了承ください。何度か実行すると、本記事と同じようなものになったりさらに良いものができたりもします。いろいろ試してみてください。

1. データを効率良く管理!データベースを使ってみよう

データベースとは、データを整理して保存し、必要なときに簡単に取り出せるようにした仕組みのことです。プログラミングでプログラムからアクセスするのに多少手間がかかりますがCreate.xyzを使えば、プログラミングの知識がなくても、自然な言葉で指示するだけでデータベースを簡単に扱うことができます。

活用例:
・イベント参加者リストの管理
・学校の課題や成績の記録
・ゲームのスコアランキングの管理

それでは、実際に使ってみましょう。下記のプロンプトを入れて実行してみます。

イベント管理ぺージを作成します。
AI関連のイベントをイメージしたデザインにして下さい。
イベントの作成・編集・削除機能を準備して下さい。
イベントの管理項目はデータベースで管理し「イベント名」「開催日」「概要」「リンク」を準備して下さい。
データベースを用いたイベント管理システムの作成を指示する

Webサイトが生成されたら、実際にイベントを登録してみます。

完成したイベント管理システムに登録する

イベントの登録が完了したら、一覧画面に移動します。下記のような感じになっているでしょうか?イベントリンクをクリックすると新しいタブでリンクが表示されます。

登録したイベントを確認する

この段階でデータベースが裏で生成されています。それでは中身を見てみましょう。

この画面では、直接データベースを触ることができます。「Add record」を押して新しいデータを追加したり、各行の左側のチェックを選択して1行ずつ削除したり、編集もできます。

データベース管理画面

2. データのやり取りを自動化!Webhookの基本を知ろう

Webhookなどのファンクション機能は、外部システムとアプリケーションを連携させる仕組みです。特定のイベント発生時(登録・編集・削除など)に自動的に外部URLへデータを送信したりすることができます。

活用シーンとしては、Slack等による自動通知システムの構築、データ変換・加工処理などがあります。また、AIモデルとの連携やサードパーティAPIを活用した機能拡張も可能です。

下記のプロンプトを入れて実行してみます。

イベントの作成・編集・削除したタイミングで詳細をSlackに通知する機能を追加して下さい。
Slack通知機能追加を指示する

プロンプトが実行されると、SLACK_WEBHOOKの設定が求められます。SLACK_WEBHOOKのキーは、下記の公式Slack APIのドキュメントを参考にして下さい。
https://api.slack.com/messaging/webhooks

https://hooks.slack.com/services/T00000000/B00000000/XXXXXXXXXXXXXXXXXXXXXXXX
SlackAPIキーを入力する

入力を間違えたりしても、後からでも編集は可能です。

SlackAPIキーを編集する

この設定をした後に、イベント管理ページに戻り、登録や編集などをしてみて動作確認をして下さい。

成功すると下記のようにSlackに通知が届きます。うまくいかない場合は、何度か「うまく通知が届かないので改善して」など指示をすると修正してくれたりもします。

Slack通知を確認する

3. ログイン機能を作る!ユーザー認証機能の有効化

ユーザー認証機能は、パスワード認証などによるログインを提供する安全なアクセス管理システムです。この機能はコンテンツ保護、作品の選択的公開などに活用できます。単なるセキュリティだけでなく、個人化された創作環境を実現するための重要な基盤となっています。

プロジェクトページで「Enable User Accounts」をクリックします。

ユーザー認証を有効にする

流れに沿って有効化します。

ユーザー認証ページ作成

これだけでユーザー認証機能が有効化されます。ただ、下図の設定のようにユーザー認証していないと表示したくないページは1つずつ設定が必要になります。

ページ毎に認証が必要か設定する

ユーザー認証が適用されると、設定したページにアクセスしようとすると下図のような画面に遷移し認証を求められるようになります。

自作アプリのログインページ

パスワード認証だけでなく、メール認証やGoogle認証など他の認証方法もあるので、ぜひ試してみて下さい。

認証種別を設定する

4. みんなでつくる、未来への挑戦

今回ご紹介した上級編の機能を使えば、ゲームのスコアランキングやログインページなど、本格的な仕組みも子供自身の手で作れるようになります。大切なのは、“見て終わり”ではなく、“自分で作ってみる”こと。

Create.xyzは、AIの力を借りながら、親子で楽しく学べる新しい「ものづくりの場」です。少し難しく感じることも、親子で一緒に取り組めばきっと乗り越えられます。そしてその体験が、子供たちに「自分にもできた!」という自信を育て、未来への一歩になります。

ぜひ保護者の皆さんも、地域や学校、身近な場所でワークショップやハッカソンを企画・開催してみてください。「みんなで一緒に作る場」を大人がつくることで、子供たちはもっと自由に、もっと楽しく、学びを深めていけます。

未来を切り拓くのは、子供と大人が一緒になって“つくる”この瞬間です。

親子向けワークショップ(小学生)
名古屋大学の学生さんとのハッカソンイベント(中学生〜大学生)
IKIGAI lab./近藤 憲治

EdFusion CTO。愛知教育大学附属名古屋中学校 起業部 責任者(非教員)。医療系システムエンジニア。親子で「AI時代の教育を創る」をテーマに活動中。IKIGAI lab.:140名のメンバーが所属する生成AIコミュニティ。監修:髙橋和馬・田中悠介。編集:新谷信敬。