BLOG

R3 Cloud Journey

kintone

カスタマインで「何の絵か当てましょう!」ゲームを作ってみた

2023-12-07

こんにちは。ほりです。

このブログは、Customine Advent Calendar 2023の7日目の記事です。

投稿を予約したところで、どんな内容にしようかなぁと考えまして、せっかくなら普段あまり使ったことがない”やること”を使ったもの、かつ、なにかゲームっぽいものを作りたいなぁと思いました。

”やること”のページをぼんやり眺めていて、よしこれだ!と決めたやることは「手書きキャンバスをスペースに表示する」でした。

絵を描くゲーム・・・じゃあバラエティ番組でよく見る、次々絵を書いて絵の伝言ゲームみたいにして最後にお題を答えるやつにしようと決めました。

早速、出来上がったkintoneアプリについてご紹介します。

ゲームのルール

1.お題を投稿する

2.お題を見て、絵を描く

3.描かれた絵を見て、答えを予想しつつ絵を描く

4.3回、絵が描かれたら、3回目の絵を見て回答する

kintoneアプリのご紹介

一覧画面

一覧画面でできること

クイズのkintoneアプリなので、答えとか見えたら困ります。よって、一覧画面ではレコードが全く表示されないようにしました。これは一覧画面の設定で適当に条件をつけました。

代わりにボタンを4つ用意しています。

・お題を投稿するボタン

・お題から選んで絵を描くボタン

・描かれた絵を見て、更に絵を描くボタン

・最後に答えを当てるボタン

それぞれのボタンについて解説します。

お題を投稿するボタン

ボタンを押すと、レコード追加画面に遷移します。

お題を投稿したいので、自動で「お題です!」にチェックが付くようにしていています。

ここでお題を文字列1行フィールドに記入して、お題がわかりにくそうだったら回答例の画像も添付しておきます。

お題を記入したら「保存」ボタンを押して完了です。

お題から選んで絵を描くボタン

このボタンを押すと、お題の一覧がポップアップダイアログで表示されます。

ここでは、既に回答の絵が描かれているお題は除外しています。(後で回答したいレコードを選ぶ時に困るので…)

一つ選んで、「挑戦する」ボタンを押すと、お題の詳細画面に遷移します。選んで押してみましょう。

そうすると、こんな詳細画面になります。

上のボタンを押すと、レコード追加画面に遷移します。

お題が表示されているので、それを見て想像して描きます。

お題は前の画面からレコードを渡してその値を出しています。

描いたら「保存」ボタンを押して完了です。

添付ファイルフィールドに保存されました。

描かれた絵を見て、更に絵を描くボタン

誰かが描いた絵を見て、更に想像して絵を書くためのボタンです。ボタンを押すと、回答が1つか2つのレコードがポップアップで表示されるので選びます。(添付ファイルフィールドの画像も表示できたらよかったのですが…!)

選んで「これにする!」を押します。

この絵でいいな、と思ったら、上のボタンを押します。

前の人が描いた絵も表示されるので、これを見ながら絵を描いて「保存」ボタンを押したら完了です。2回目以降は、当然お題は見えないようにしています。

ちなみに、前の人が描いた絵は関連レコードで表示しています。ここは基本機能を使っています。

同じ問題であることを管理するために、見えていませんが「問題レコード番号」というものをキーとして持っていますので、それを使って関連レコードに表示しています。

最後に答えを当てるボタン

3回目の絵を見て答えを当てるボタンです。このボタンを押すと、3回目に回答されたレコードがポップアップで表示されます。回答してみたいものを選んで「これにする!」を押します。

そうすると画像が表示された詳細画面に遷移するので、これに回答したかったら、上のボタンを押します。

ボタンを押したら、ダイアログが出てくるので予想する回答を記入します。

答えを記入して「答える!」を押します!!

残念ながら、外れてしまいました…

カスタマイズを全部見せます!

さらっと説明してきましたが、実は結構いろいろなカスタマイズを仕込んでいます。細かく説明すると長くなりすぎてしまうので、よかったらカスタマイズを参考にご自身で試してみていただければと思います!

ちなみに、カスタマイズをちょっと作っては確認して、直して、確認して、kintoneアプリの設定も見直して、確認して、・・・の繰り返しで作成しております。

なのでアクション番号がばらばらですが、アクション番号は小さい順ではなく、あくまでもアクションのつなぎ順に動きますので、あまり気にする必要はありません。(つまりカスタマイズ例のアクション番号は気にしないでね!)

一覧画面のカスタマイズ

詳細画面のカスタマイズ

お題を投稿する追加画面

絵を描く追加画面のカスタマイズ

ネタを思いついて作ってみての感想を最後に。

これをやるためのボタンがほしいなって思ったらすぐ追加できるし、この処理とこの処理の間に、さらにこの処理がいるなって思ったらすぐアクション追加して挟めるし、動かして違うなと思ってもまたすぐやり直して、確認して、もすぐできるし、トライ&エラーして行く過程がとってもとっても楽しかったです!!

ぜひぜひ、みなさんも、楽しいカスタマインライフをお過ごしください(*´∀`*)

gusuku Customine

kintoneが大好きな自称帳票まにあ。

自社のシステム開発・移行などをご依頼したい方
お客様とともに
作りながら考える
新しいシステム開発
詳しく見る
kintone導入・アプリ開発・カスタマイズにお困りの方
ノーコードでらくらく
kintoneカスタマイズ
詳しく見る
kintoneアプリの
バージョン管理・バックアップ
詳しく見る
kintoneアプリの開発・運用を
強力サポート

詳しく見る
更新情報をメールでお届けします!

kintoneアプリのカスタマイズに役立つ情報や、イベントの情報をメールでお届けいたします。
ご登録をお待ちしております!

R3のご提供サービス
自社のシステム開発・移行などを
ご依頼したい方
お客様とともに作りながら考える
新しいシステム開発
詳しく見る
kintone導入・アプリ開発・
カスタマイズにお困りの方
kintoneをもっと使いやすくする
gusukuシリーズ
詳しく見る
更新情報をメールでお届けします!
kintoneアプリのカスタマイズに役立つ情報や、イベントの情報をメールでお届けいたします。
ご登録をお待ちしております!