KARTEでおみくじクーポンをつくってみた！(忘れないように記録しておく)

はじめに

KARTEのシナリオストアに、ラッキーくじの仕組みが掲載されていたので、これを使っておみくじ風にすれば自分できるぞ！と思い作ってみた。

つくるにあたり、どんな条件にするか考える

1. 大吉・中吉のどちらかのクーポンが表示される
2. おみくじを引けるのは、1日1回まで
3. おみくじ結果はおみくじを引いた日までは表示される。翌日になるとまたおみくじが引ける
4. おみくじを引けるのは、特設ページのみ

実装するポイント

1. 大吉・中吉の振り分けは、アクションではできない

シナリオストアに掲載のサンプルはアクションであたりとはずれの振り分けを表示率設定する事で実現しているのだが、このやり方だと、実施日毎にサービス(接客)を作る必要がある。 長期で実施する場合は、設定が大変になるので向いてない。

KARTEの仕様として、同接客サービスであれば、一度表示されたアクションが表示され続けます。
1日ごとに結果を変えたい場合は、サービスを1日ごと設定する必要がある

結果、今回のおみくじは、JavaScriptにて振り分けをおこない、大吉・中吉のステート(画面)を表示する。
※振り分け時の勝率は、変数にて設定できるようにした。

widget.onChangeVal('state', function(x){
    if(x.newVal === 3){
        widget.setVal('lotteryImage', '#{state3.lottery_image}?' + (new Date()).getTime());
        setTimeout(function(){
            // 0以上、100未満の少数で判定
            var rand = Math.random() * 100;
            switch (true) {
                // 当たりの場合
                case rand <= #{grade_a_par}:
                    // イベント発火（中吉）
                    tracker.track("#{lot_event_name}", {
                        campaign_id: "#{campaign_id}",
                        shorten_id: "#{shorten_id}",
                        lot_result: "#{state4.lot_results}"
                    });
                    // ステート切り替え（中吉の時）
                    widget.setState(4);
                    break;
                // はずれの場合
                default:
                    // イベント発火（大吉の時）
                    tracker.track("#{lot_event_name}", {
                        campaign_id: "#{campaign_id}",
                        shorten_id: "#{shorten_id}",
                        lot_result: "#{state5.lot_results}"
                    });                    // ステート切り替え（大吉の時）
                    widget.setState(5);
                    break;
            }
        }, 5000);
    }
});

2. 接客を閉じた後のおみくじ結果

おみくじを引いた後、結果を閉じてしまった。。。 結果表示は、別のサービスを作って結果のみの表示を作成。

おみくじを引く接客で、おみくじ結果を表示する際に、おみくじ結果のイベントを発火させておく。これにより、大吉が出たのか、中吉が出たのか判定可能となる。

ページのリロードをしないでおみくじ結果アイコンを表示するために、閉じるボタンをクリックした時にイベントを発火させ、イベント発火時もおみくじ結果接客の表示条件にしておく

また、おみくじを引く接客を閉じた時に、閉じたイベントも発火させておく。

widget.method('omikuji_close', function() {
    tracker.track('omikuji_close', {
        campaign_id: '#{campaign_id}'
    });    
});

実装してみた結果

ひとりでできるもん!!と思ってたけど、なんだかんだと技術者の方にアドバイスをもらった。
知見ある人がいるのであれば、アドバイスはもらうべきだと痛感した。

まあ、これであっしも少しだけ進歩したという事でよかったと思う。