エブリサイトでアドベンチャーゲームを作ってみよう - アールスリーインスティテュート

公開日：2025-12-05

注意

本記事は情報提供を目的としており、本記事の内容は無保証、サポートの対象外です。
サポート窓口、問合せ窓口にご質問をいただいても対応いたしかねますのでご了承ください。

はじめに

先月はアドベンチャーゲームを作成してました。kintoneの機能とカスタマインの機能で実現しています。未読の方はこちらからどうぞ。

アドベンチャーゲームを作ってみよう

カスタマインを使うことで、フィールド値の変更やボタン表示などかなり色々な処理が可能でした。そんなカスタマインのお試しはこちらからできます。

画面のカスタマイズ、自動処理(バッチ)、帳票出力といった「kintoneの”できない”を”できる”に」
gusuku Customineがあればkintoneらしさをそのままにkintoneをカスタマイズできます

今回はエブリサイトで作成してみましょう。全く違う環境なので、エブサイトに適した作りを目指してみます。そんな夢が溢れるエブリサイトのお試しはこちらからできます！

社外もチームだ！
エブリサイトで社外DXを！

gusuku Everysite（グスクエブリサイト）は、kintoneをはじめとした複数のサービスと連携し、そのデータを自由なレイアウト・挙動でWebサイトとして入出力できるフロントエンド開発サービスです。

果たしてどうなるのか！

画面を作る

細かなデザインは作りきれないので、エリアだけ分けてみます。画面構成としては左の画像のような感じ。場所ごとに何を表示しているのかを書いてみました。

タイルのレイアウトは右の画像のようにしました。移動先や動作を選択する部分がページで白いタイルの部分で、情報保存で一番下にタイルを追加してます。ここは基本的には非表示にする想定です。それ以外のグレーの箇所はベースページになります。ベースページではゲームタイトルやメニューなどが配置されています。

それぞれの処理はかなり前提の動きの理解が必要になってしまったので、ポイントだけの説明になる予定です。果たして、どこまで説明できるか。。乞うご期待！

設定などは横に出てくるようなレイアウトにしています。また、それらのページはベースページ側に作成しています。

また、ゲームでよくあるシーン転換をイメージして、ベースページを使用しないページも作成しました。これを使い分けるとメニューなどがない表示が可能になります。

今回は作成していませんが、ベースページは複数作成できるのでミニゲーム的なものを挟むことも可能ですね。

各シーンは取得したレコードを展開して作成

基本的な仕組みとして、kintoneのシーンマスタアプリのレコードを展開しています。アプリの1レコードが1ページになるという仕組みです。それぞれのページのURLはシーンコードを含むようにしておきます。

またそれぞれのページに固有の値は「文字列入力（１行）」に転記しておきます。この値を元に様々な処理をする想定です。

なお、エブリサイトでは表示はできるが値として参照できないタイプのアイテムがあります。今回は「リッチテキスト」でメッセージを表示していたので表示の切り替えは値の再セットではなく「アイテムを非表示にする」と「アイテムを表示する」で実現しています。そうするとリッチエディタの装飾などもそのまま表示可能なので、kintone側の入力でコントロール可能です。

展開時の画像セット方法

元になるレコードは1番で取得しています。全レコード取得なので、検索条件でそうなるようなクエリを指定してください。

その後は「レコードのリストからレコードを取り出す」でレコードを順に処理をして「kintone添付ファイルを取得する」と「添付ファイルを公開する」で画像を使用可能にします。

その結果はアイテムの「画像のURLまたはパス」にアクションの結果として指定することでページ毎に展開されるようになります。

ゲームのフラグなどはレコードで保存

フラグはセーブデータ保存用のアプリに保存します。保存する時にキーとなる値を使用するのですが、その値は「カウンターのカウント値を増減する」を使います。また、ハッシュから取り出しやすくするため、以下の式でD始まりの10桁にしています。

= right("D00000000" & $1, 10)

ゲーム中はこの値をキーにしてフラグの読み書きをします。なのでゲーム開始画面では、最初から始めるボタンを押すとカウンターを取得してゲーム開始で、ゲーム再開時はセーブデータからキーの値が最大の値を取得してからゲーム開始という流れです。

遷移は以下のような指定になります。

= "scene-探偵事務所.html#" & キー & "start"

シーンの移動はリンクボタンではなくボタンで

「リンクボタン(塗りつぶし)」などのボタンではリンクを指定することが可能ですが、ページ生成時に設定するのでリンクを可変にすることが出来ないようです。今回のページ遷移はボタン毎に遷移先を指定なので、可変のハッシュ値をセットできなかったり、押した時に条件を満たしていなければ遷移させないという動きには向きません。

なので今回は「ボタン(塗りつぶし)」にしておき、ページ内処理で「ページを遷移する」で遷移するようにしました。こうすると現場に10回以上訪問すると別のシーンに遷移ということが可能になります。10回未満だと「情報ダイアログを表示する」を表示して遷移しないという感じです。色々と判定できるので自由度が高そうですね。

なお、設定では可変のハッシュ値指定のみです。

ボタンのラベルはアイテムの設定の方で指定しておきます。遷移先のシーンコードになる「移動先1_名称」などの名称だけを固有の値として保存してのはそういった理由です。なお、選択肢の最大は３ですが移動先が3つない場合もあります。その場合は選択肢を空欄にして名称をそのシーンコードに合わせています。こうすると同一ページへの遷移になるという仕組みです。
ただ、ボタンを押した時に遷移先が同一や空欄ならそもそも遷移しないという仕組みも可能なので、この辺はお好みですね。

設定画面などの固定ページは個別に作成

画面の左にメニューがありますが、これはベースページ側の表示です。エブリサイトの仕組みではベースページからページのアイテムを操作できないので、メニューの動きはベースページ側で設定することになります。その際、ベースページとページで同じ「アイテムID」を指定しているとエラーになるので値を変更する場合はご注意ください。

ベースページとページで同じ値を扱いたい場合は「URLからハッシュを取得する」を使うことで受け渡しは可能です。ページ内処理はどちらのページでも同時に動作するので、うまく使い分けるようにしましょう。

メッセージ表示やフラグ管理はボタンで

画面の下部に行動を選択するボタンが３つあります。このボタンは文字表示とフラグセットの２つの動作タイプがあり、その動作で何をするのかはkintone側で指定されています。

設定としてはこんな感じです。

例えば、動作タイプは「文字列入力（１行）」にページ展開でセット済みなのでその値を参照します。フラグセットの場合は一旦セーブデータを取得します。kintoneの仕様として、チェック済みのフィールドに再度チェックができないのと、チェックしていたらメッセージを変えたいので「文字列が条件を満たすならば」で判定します。

チェックボックスの値を「textjoin 関数」で文字列にすることで、チェックの値が含まれるかどうかという判定が可能です。

= textjoin(",", "yes", $13[0].フラグ)

ゲームの流れ

ゲームを開始すると、以下の画面のような動きになります。

喫茶店で本棚を探すと地図を見つけますが、2回目は何もないという表示になります。

最後に

作っていて気づいたのですが、設定に必要な基本情報がかなりあり、試行錯誤が必要でした。ポイントをまとめると次のような感じです。

ベースページとページでアイテムは共用できない
ハッシュの使い方がポイント
ページ展開は便利だが値の指定に要注意
値の判定は関数をうまく使う

また、個人的な感想としては、ここがポイントのような気もします。

ページ内でアクションを増やすのではなく可能な限りページで分ける

ページを分けると接続設定を何度も設定する必要はありますが、ページ内処理のロジックはシンプルにすることが可能です。

ということで、発想次第で何でも作れそうな感じです。皆さんも色々と試してみましょう！

ここまで読んでいただいてありがとうございました！

投稿者プロフィール

沖: "サイボウズ公認kintoneエバンジェリスト
カスタマインやデプロイットでも色々とやってます"