Claris Engage Japan 2023 を支えたカスタム App - 抽選アプリ

目次

1. 背景
2. 抽選カスタム App 第 1 弾
3. 抽選カスタム App 第 2 弾
4. FileMaker 標準機能で作る
5. 当たり目の考え方
6. ブラッシュアップ
7. 運用しての感想
8. 本カスタム App の紹介動画のご案内

2023 年 11 月 8 日から 3 日間にわたり虎ノ門ヒルズフォーラムにて開催された Claris Engage Japan 2023 （以後 CEJ2023）は無事に幕を下ろしました。コロナ禍の影響により実に 4 年ぶりとなるオンサイトとオンラインのハイブリッドでたくさんの方にご来場いただきました。

今回のブログでは CEJ2023 を裏で支えていた Claris オリジナルのスロットマシン風抽選カスタム App についてご紹介します。

1. 背景

CEJ2023 は日本で開催される最大規模の Claris 主催イベントです。そこに欠かせないのが日々 FileMaker の効果的な活用を提案し、Claris を支えてくれているスポンサー企業の皆さんです。各社様の多種多様な製品・サービスは Claris FileMaker の可能性を広げるもの、伴走支援で開発をサポートするもの、トレーニングの提供など多岐に渡ります。スポンサー企業によるセッションも数多くあり、イベントを大きく盛り上げていただきました。

我々運営側としても、多くのお客様にスポンサー各社の製品・サービスを知っていただくために「いかにお客様を展示会場に誘導できるか」ということは重要な課題です。そこで企画したのがスタンプラリー。さまざまなイベントで見かけるスタンプラリーですが、ただスタンプ台のところに行ってスタンプを押すだけではスポンサー企業とお客様との接点を作りにくい。ということで、スタンプは各展示ブースで押してもらえることにし、お客様にスポンサー企業担当者とコミュニケーションを取っていただけるようにしました。

次に、肝心の「抽選方法はどうするのか？」についての議論がありました。商店街などのイベントでよく見かける手回しのくじ抽選機も味があっていいのですが、「Claris のイベントだし、ここはデジタルで！」ということに。実は、過去の Claris Engage Japan や Claris パートナーとのミーティングなどでも、FileMaker を活用した早押しクイズ、ビンゴなどのゲームアプリを作成してきた過去がありました。また、「FileMaker 選手権 2021」(*)などでも FileMaker でゲームアプリを作っている方は数多く存在します。このあたりはさすが FileMaker。ゲームアプリも作れるような自由度の高さは、業務アプリを作成する場合でも高いユーザビリティを実現するのに役立ちます。

(*) 今年は「Claris FileMaker 2023 アプリ開発選手権」 という名前で開催しています。皆さんのご応募をお待ちしています。

参加者側についても、ご自身の iPhone、iPad、Android を使っていただきデジタルの中で完結させることもできましたが、過去の経験から「あえて紙を利用する」ことで会社のポリシーやセキュリティの都合で参加できない方を極力減らそう、ということになりました。

2. 抽選カスタム App 第 1 弾

最初に「本当に当たり入ってるの？」という気持ちを払拭できるカスタム App にしたいという思いがありました。そこで、たくさんのトランプを表向きに並べて、当たりが何枚入っているのかが見えるようにした上でシャッフルし、1 枚選択してもらうというのはどうだろうかと考え、Claris FileMaker Pro を使って作成してみました。3 時間程度の作業で試作できましたが、マウスを使った操作が煩雑ということでボツとなりました。

3. 抽選カスタム App 第 2 弾

ネット検索してくじ引きのアプリを探すと、参考になる情報が出てきました。円盤が回転するルーレットタイプやカジノのスロットマシンのようなものなど、 HTML、CSS、JavaScript のスクリプトも一緒に公開されているものもあります。FileMaker でも [Web ビューアで JavaScript を実行] スクリプトステップが Ver 19.0 で追加になりましたので JavaScript を組み込むこともできますが、まずは「FileMaker の標準機能の中でチャレンジする！」ということで JavaScript に頼らない方法を模索していきました。

4. FileMaker 標準機能で作る

円盤が回転するルーレットタイプを検討しましたが、FileMaker Pro のスクリプトステップを使ってレイアウトに配置した円形のオブジェクトを動的に回転させるということはできません。ということでこれは却下に。

次に考えたのがスロットマシンタイプで、複数のロールの絵柄が回転し、止まったときにそろっていれば「当たり」となるものです。「ロールが回転しているように見せられるか？」という課題があるものの、まずは試作アプリの作成に着手しました。

とある JavaScript のサンプルで、横 1 列に枠が並びその中で絵柄が入れ替わって、ボタンを押したら止まるというものがありました。これを参考に 0.5 秒や 0.1 秒という短い間隔で [Loop] スクリプトステップを実行し、ランダムに絵柄を置き換えたところ似た動作はできました。

横 1 列だけでは物足りないということで縦横 3 列に変更し、絵柄をランダムに置き換えることで動きを表現することはできました。ただ、これだとまだ「回っている」ようには見えません。そこで縦に 3 つ並んだオブジェクトフィールドを、同じ絵柄が上から下へと順番に移動するようにスクリプトを書き換えると、ロールが回っているように表示させることができました。

見た目だけでなく、「なんか回っている感」が出る効果音を一緒に流すことでさらなる向上を目指し BGM を追加しました。しかし FileMaker Pro では、オブジェクトフィールドに入っている mp3 形式のファイルをクリックして再生することはできますが、スクリプトでの制御ができません。 Claris FileMaker Go ではレイアウト上でオーディオやビデオを再生できる [AVPlayer 再生] スクリプトステップが用意されていますが、まずは FileMaker Pro で動作させたかったため、Web ビューアと JavaScript を使う方法を取り入れました。

BGM などの音声ファイルを扱うときに参考になるブログをご紹介します。
FileMaker で音を鳴らす① | ブログ｜FileMaker にまつわるあれこれ情報発信｜株式会社ジェネコム
FileMaker で音を鳴らす② | ブログ｜FileMaker にまつわるあれこれ情報発信｜株式会社ジェネコム

5. 当たり目の考え方

スロットは 3 つの絵柄がそろったら当たりとなります。ランダムに絵柄を表示させるために [Random] 関数を使って疑似乱数を利用しました。FileMaker Pro の「Random 関数 ヘルプ」にある計算式を使うことでサイコロを振ったときと同じようなランダムな値を得ることができます。ただし、今回のアプリでは、目の数はよく見るサイコロのような 6 面ではなく抽選くじ数の総数で考える必要があります。

なお、今回は景品として SB C&S 株式会社様からご提供いただいた 1 等 3 個、2 等 12 個の豪華景品に加え、Claris が用意した 3 等、4 等がありましたが、合計当選数は用意した景品数を超えてはいけません。そこで「くじ」というテーブルを準備し、以下のようなデータを持たせました。

「くじ」テーブル
レコード数：1200・・・当たり、ハズレ含めたくじの総数と合致
フィールド：
・くじNo・・・1 から 1200 までの連番が入っており、[Random] 関数のくじ引きで利用する
・当数・・・1 等から 4 等までの景品数分だけ「1等」「2等」「3等」「4等」の値が入る
・済Flag・・・1 度出たくじNo は「1」を入力し、再度出た場合無視する
・備考・・・何かイレギュラーな場合に備えてのメモ

これで用意した景品の数を超えることなく抽選することができます。ということでお気づきの方もいらっしゃると思いますが、ルーレットの回転、実は当たりハズレとは関係ないのです。スタートボタンを押したら早々に [Random] 関数でサイコロを振って当たりかハズレか、当たりの場合はどの当数かが決まります。その結果に応じてルーレットに表示する絵柄をコントロールしている、ということです。なので、内部的にはスタートボタンを押した瞬間に結果は出ている、ということになります。

スロットは斜めの当たりなどもありますが、上段と下段のオブジェクトフィールドを半分隠し、シンプルに真ん中一列だけの判定として、最初の試作アプリが約 5 時間ほどで出来上がりました。

6. ブラッシュアップ

実際の運用には展示会用に準備してある iMac が利用できることになりました。FileMaker Pro をフルスクリーンで表示させたときのバランスを考えてレイアウトの調整、そしてスロットマシンのように見えるようにグラデーションを駆使して画面を修正しました。

7. 運用しての感想

Claris Engage Japan でのスタンプラリー自体が初めての試みだったため、「どれだけの方が参加されるのか？」ということは全く予想がついていませんでした。また、台紙 1 枚あたり最大 4 回まで回すことができるので CEJ2023 の参加人数は把握できていても、そのうち「どれぐらいの方が何回抽選するのか？」は手探りでした。

結果的にくじ全体のハズレの数を減らして調整しながら、より多くの景品を皆さんに持ち帰っていただけるようにしました。

来年の Claris Engage Japan でも同じようなイベントは考えていますので、今回の反省を生かして皆さんが楽しんでいただけるように改善していきます。

CEJ2023 は FileMaker の開発者に向けたイベントという側面もあるため、FileMaker Pro で動いていることに気がついたお客様や Claris パートナーの方々は「どんな仕組みになっているのか？」ということに興味津々でしたので、今回のアプリをサンプルとして公開することにしました。公開前提に作成したものではありませんので、無駄な部分や洗練されていないところもありますが、ぜひブラッシュアップしてご利用ください。

サンプルファイルはこちらからダウンロードいただけます。（2023/12/06 サンプルファイル更新）
※ [Web ビューアで JavaScript を実行] スクリプトステップを利用しているため Ver19.0 以上の制限が入っています。

もしこのカスタム App を使用して社内イベント等で活用されることがありましたら、ぜひその様子を Claris までお知らせください！

8. 本カスタム App の紹介動画のご案内

このカスタム App について 2023 年 12 月 11 日（月）12:30 〜 13:00 の Claris のライブ Web セミナーにて、デモを交えてご紹介いたしました。

「Claris Engage Japan 2023 を支えたカスタム App 抽選アプリの裏側紹介」

前項でご紹介したサンプルファイルを参照しながらご視聴いただくと、理解が深まること間違いなしです。ぜひご自身でも、抽選 App を作ってみてくださいね。