kintoneアプリで抽選カスタマイズ

（著者：サイボウズ　三宅 智子）

Index

• 完成イメージ
• デモ環境
• 手順
• kintoneのアプリ作成
• JavaScript/CSSカスタマイズ
• サンプルコード解説
• おわりに
• 注意事項

キャンペーンなど当選者の抽選を行う時、エクセルで関数を作っていた方々に朗報です！それkintoneで楽にできるのでは？ということで、抽選カスタマイズの実装方法を紹介します。

完成イメージ

応募者データをkintoneに溜めて、抽選を行います。抽選結果は２パターンでお知らせするように工夫します！
レコードは全件取得するように実装しているので、応募者数が多くなっても大丈夫です。（一人１回応募が前提）

• SweetAlertでポップアップ
• 電光掲示板風に表示

デモ環境

こちらのデモ環境から実際に動作を確認できます。
https://dev-demo.cybozu.com/k/297/

デモ環境の利用は、事前に cybozu developer network のメンバー登録が必要です。画面右上の「サインイン」ボタンよりご登録ください。
デモ環境アカウントとパスワードは、サインイン後にこちらのページでご確認ください。

手順

1. 抽選への応募者データを集めるkintoneアプリの作成
2. SweetAlertでポップアップカスタマイズ
3. 電光掲示板風カスタマイズ

kintoneのアプリ作成

応募者データを溜めるための抽選アプリをkintoneで作成します。

1. 以下のフィールドがある「抽選」アプリを作成してください。アプリの作成方法はこちらのヘルプをご参照ください。
   
   

   フィールドタイプ	フィールド名	フィールドコード
   文字列（１行）	名前	name
   文字列（１行）	コメント	comment

2. サンプルのデータを数件登録しておきましょう。
   

JavaScript/CSSカスタマイズ 

それではここからカスタマイズをしていきます。これから実装するJavaScriptとCSSファイル以外にも、3つのライブラリ（Cybozu CDN）を使うので、まずはそれらを「アプリの設定画面 > JavaScript / CSSでカスタマイズ」に設置します。

• jQuery
  • https://js.cybozu.com/jquery/3.2.1/jquery.min.js
• SweetAlert 2
  • https://js.cybozu.com/sweetalert2/v7.3.5/sweetalert2.min.js
  • https://js.cybozu.com/sweetalert2/v7.3.5/sweetalert2.min.css
• Font Awesome
  • https://js.cybozu.com/font-awesome/v4.7.0/css/font-awesome.min.css

以下のようにJavaScriptファイルとCSSファイルを分けて設置してください。（random_lottery.jsとrandom_lottery.cssは後ほど設置します）

ここまで下準備ができたら、本題の抽選カスタマイズに移ります。今回は2ステップあるので、順に見ていきましょう！サンプルコードのポイント解説については、次の「サンプルコード解説」で記載しています。

Step1. SweetAlertでポップアップ

まず1つ目は、抽選結果をSweetAlertでポップアップ表示をします。

以下のJavaScriptとCSSファイルを「アプリの設定 > JavaScript/CSSカスタマイズ」にアップロードして保存してください。

random_lottery.js

一覧画面にある抽選ボタンをクリックした時に、作成した抽選ロジックに基づいて抽選を行い、SweetAlertでポップアップ表示するためのJavaScriptファイルです。

random_lottery.css

抽選ボタン要素用のCSSファイルです。ボタン自体は、Font Awesomeを使ってkintoneの標準的なボタンと見た目が同じになるようにしています。

ピンクの抽選ボタンをクリックしてみてください。ポップアップ表示がされたでしょうか？

Step2. 電光掲示板風カスタマイズ

2つ目は、SweetAlert表示の後に、電光掲示板も加える工夫をします。今回はCSSのアニメーションを使って実装しています。

下のファイルを、Step1で作成したJavaScriptとCSSファイルに上書きして保存してください。

random_lottery.js

SweetAlert表示の後に、電光掲示板が入り込んでくるようにするJavaScriptファイルです。

random_lottery.css

電光掲示板の要素用のCSSファイルです。

ピンクの抽選ボタンクリックでポップアップ表示の後に、電光掲示板が現れたら成功です！

サンプルコード解説

カスタマイズのポイントを解説します。

Promiseを使ってレコードの全件取得

kintone REST APIにおけるGETメソッドの一括取得は、500件までという制限があるので、レコード全件取得できるように処理を回す必要があります。
ここでは「offset の制限値を考慮したレコード一括取得について：offset を利用する方法」を参考に、Promiseを用いて全件取得できるようにします。

ランダムに抽選を行うロジックの作成

Math.random()関数とMath.floor()関数を用いて、乱数を作成して抽選を行います。

Promiseを使えるようにSweetAlert 2を利用

SweetAlert 2以前だとPromiseを上手く扱えないので、今回はPromise内でも使えるように最新のSweetAlert 2を利用します。

マーキー表示用に工夫

電光掲示板風な見た目を作る（マーキー表示）ためにCSSでアニメーションをつけます。

おわりに

イベントなどの抽選でご活用いただけると嬉しいです。ぜひCSSをいじりながら、自分好みの抽選アプリを作ってみてください！

注意事項

• 画面の更新を行うと電光掲示板表示を停止できます。更新しない限りは、常に流れている状態になります。
• 本Tipsは、2018年1月時点でGoogle Chromeでの動作を確認しています。

本Tipsは、2018年1月版 kintoneで確認したものになります。