カテゴリー内の他の記事

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

フォローする

(著者:サイボウズ 三宅 智子)

Index

 

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

完成イメージ

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

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

_______.gif

手順

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

kintoneのアプリ作成

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

  1. 以下のフィールドがある「抽選」アプリを作成してください。アプリの作成方法はこちらのヘルプをご参照ください。
    1.png
     フィールドタイプ  フィールド名  フィールドコード
    文字列(1行) 名前 name
    文字列(1行) コメント comment
  2. サンプルのデータを数件登録しておきましょう。
    2.png

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は後ほど設置します)

3.png

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

Step1. SweetAlertでポップアップ

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

4.png

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

random_lottery.js

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

random_lottery.css

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

 

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

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

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

5.png

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

random_lottery.js

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

random_lottery.css

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

 

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

サンプルコード解説

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

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

kintone REST APIにおけるGETメソッドの一括取得は、500件までという制限があるので、レコード全件取得できるように処理を回す必要があります。ここではこちらの記事を参考に、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で確認したものになります。

デモ環境

https://dev-demo.cybozu.com/k/297/

※デモ環境についての説明はこちら

記事に関するフィードバック

直接的に記事と関連がないご質問はcybozu developer コミュニティをご活用ください。

ログインしてコメントを残してください。