導入方法

導入・設定代行も承っております!お申込みの際にお伝えください。

設置手順

  • 1.お送りしたデータのeasygacha-data内のファイルの位置関係を変えずにアップロードしてください。
    //お送りするデータ一式
    easygacha-data/
    	images/
    	.htaccess
    	config.json
    	easy-gacha.css
    	easy-gacha.js
    index.html //ガチャ設置したいページ
    都合上、easygacha-data/内のファイルの位置関係を変えたい場合は「easygacha-data/easy-gacha.js」内のsettings.filePathを書き換えてください。
  • 2.下記コードを表示したい位置に張り付けてください。下記コード内にガチャアプリが生成されます。
    ユーザー様が利用しやすいよう、ガチャ専用ページをご用意いただく事をお勧めします。
    <div id="easy-gacha"></div>
  • 3.下記3つのファイルを読み込んでください。
    <link rel="stylesheet" href="easygacha-data/easy-gacha.css">
    <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
    <script src="easygacha-data/easy-gacha.js"></script>
    ガチャをコンテンツページ内に設置する場合、CSSを調整していただく必要があります。
  • 以上で設置作業完了となります。

設定項目

動作設定
  • 「easygacha-data/easy-gacha.js」内の下記コードのみ設定可能です。
    var settings = {
    	maxPlayCount: 5,
    	parentEleId: 'easy-gacha',
    	sns: true,
    	facebookURL: '' || location.href,
    	twitterURL: '' || location.href,
    	lineURL: '' || location.href,
    	filePath: '',
    	gachaColor: 'red'
    }
  • maxPlayCount
    一日に利用可能回数を設定出来ます。
    「0」を設定した場合、無制限となります。
  • parentEleId
    ガチャアプリを生成する要素のIDを設定できます。
  • sns
    各SNSのシェアボタンの表示・非表示を設定出来ます。
    表示=true 非表示=false
  • fafacebookURL
    twitterURL
    lineURL

    各SNSのシェア先をURLで設定出来ます。 設定が無い場合、現在のページのURLを設定します。
  • filePath
    ファイルの位置関係を変えたい場合にパスを入力します。
    例: filePath: '../'
  • gachaColor
    ガチャ筐体のカラーを変更出来ます。
    使用できるカラーは、red,blue,green,purple,white,blackになります。
ロゴ・バナー設定
  • ご用意いただいたロゴ・バナーを「easygacha-data/images/logo.png」をに上書きをしてください。
    推奨サイズ:768px*520px
排出カプセル設定
  • 「easygacha-data/config.json」にて設定出来ます。
  • 基本設定
    【必須項目】type,pickrate,data['action'] typeがlose(ハズレカプセル)の時、data['action']は不要です。
    [
    	{
    		"type":"rainbow",
    		"pickrate": 2,
    		"data": {
    			"action": "rainbow.php",
    		}
    	},
    	{
    		"type":"gold",
    		"pickrate": 2,
    		"data": {
    			"action": "gold.php",
    		}
    	},
    	{
    		"type":"silver",
    		"pickrate": 2,
    		"data": {
    			"action": "silver.php",
    		}
    	},
    	{
    		"type":"lose",
    		"pickrate": 4
    	}
    ]
    type
    カプセルのカラーを設定出来ます。
    全てのtypeを用意する必要は無く、ご自由に設定いただけます。
    loseがハズレのカプセルとなります。
    ※rainbow, gold, silver, loseの内から選んでください。
    上記以外を設定するとエラーとなります。
  • pickrate
    各カプセル排出確率を設定出来ます。
    数値の意味は%では無く割合となります。
    下記の例だと1対1の割合となり、rainbowの確率が50%、loseの確率が50%となります。
    [
    	{
    		"type":"rainbow",
    		"pickrate": 1,
    		"data": {
    			"action": "rainbow.php",
    		}
    	},
    	{
    		"type":"lose",
    		"pickrate": 1
    	}
    ]
  • data
    該当カプセルが排出された時の動作を設定出来ます。
    [
    	{
    		"type":"rainbow",
    		"pickrate": 1,
    		"data": {
    			"action": "rainbow.php",
    			"params": [
    				{
    					"name": "name1",
    					"value": "value1"
    				},
    				{
    					"name": "name2",
    					"value": "value2"
    				},
    				{
    					"name": "name3",
    					"value": "value3"
    				}
    			]
    		}
    	}
    ]
    action
    遷移先のページを指定できます。
  • params
    POST送信でページ遷移をするので、パラメーターを遷移先に送信する事が可能です。
    name属性とvalue属性を設定出来ます。

テスト機能

各種設定後、テスト機能を利用してご確認いただけます。
各種テスト機能はjavascriptにて実行します。

  • easyGacha.pickTest();
    カプセル抽選のみを1000回行い、どのカプセルが何回当選したかコンソールに表示します。
  • easyGacha.countClearTest();
    現在の利用回数をリセットします。