公開日: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アプリの設定も見直して、確認して、・・・の繰り返しで作成しております。
なのでアクション番号がばらばらですが、アクション番号は小さい順ではなく、あくまでもアクションのつなぎ順に動きますので、あまり気にする必要はありません。(つまりカスタマイズ例のアクション番号は気にしないでね!)
一覧画面のカスタマイズ

詳細画面のカスタマイズ

お題を投稿する追加画面

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

ネタを思いついて作ってみての感想を最後に。
これをやるためのボタンがほしいなって思ったらすぐ追加できるし、この処理とこの処理の間に、さらにこの処理がいるなって思ったらすぐアクション追加して挟めるし、動かして違うなと思ってもまたすぐやり直して、確認して、もすぐできるし、トライ&エラーして行く過程がとってもとっても楽しかったです!!
ぜひぜひ、みなさんも、楽しいカスタマインライフをお過ごしください(*´∀`*)
投稿者プロフィール

-
kintoneが好き過ぎる、自称帳票まにあ。
テクニカルサポートチーム所属。
「仕事をITでたのしく」をモットーに岡山県倉敷市から完全リモートワークしております!
最新の投稿
gusuku2025年1月20日帳票のチェックボックスについて一言物申したい!
kintone2024年12月8日そうだ、ゴミの分別と回収日をAIに教えてもらおう!
community2024年9月12日CHALLenGERs in 大阪 参加レポ
gusuku2023年12月7日カスタマインで「何の絵か当てましょう!」ゲームを作ってみた