ねこびんご導入手順 – COLE！COLE！｜気になる最新IT NEWSサイト

利用規約の内容に同意頂いた上でのご利用をお願いします。
利用規約はこちら＞＞

１．既存サイトへの設置
既存サイトに、ビンゴマシーン（親画面）を設置してご利用していただけます。

１−１．既存サイトの任意の場所に、２種類のhtmlファイルを設置する
１）ビンゴマシーンhtmlファイル（例：https://testhost.jp/testsite/bingomachine.html）
２）ビンゴカードhtmlファイル（例：https://testhost.jp/testsite/bingocard.html）

１−２．設置した２種類のファイル内にタグを埋め込む

１）ビンゴマシーンhtmlファイル

<body>
<script type=”text/javascript” src=”https://cnsrd.jp/necobingo/js/bingo_machine.js”></script>
<div id=”bingoMachine”></div>
<script>
// 表示タイプ
// fiexed : サイズ固定(720×560)
// scaling : ブラウザのウインドウサイズいっぱいに拡大縮小する
BingoMachine.setDisplayType(“scaling”);// ビンゴカードURL
BingoMachine.setBingoCard(“https://testhost.jp/testsite/bingocard.html”);
</script>
</body>

タグ内の下記の項目について、設定してください。

setDisplayType()	ビンゴマシーンの表示タイプを指定ブラウザ表示時の表示タイプを固定・自動伸縮から選択して指定してください。・fiexed : サイズ固定(720×560) ・scaling : ブラウザのウインドウ幅に合わせて自動で伸縮 ※未指定の場合は、fiexedが適用されます。
setBingoCard()	ビンゴカードURLを指定設置するビンゴカードhtmlファイルのURLを指定してください。

２）ビンゴカードhtmlファイル

<body>
<script type=”text/javascript” src=”https://cnsrd.jp/necobingo/js/bingo_card.js”></script>
<div id=”bingoCard”></div>
<script>
// ビンゴ達成時の報酬URL
BingoCard.setRewardURL(“http://www.cnsinc.jp”);
</script>
</body>

タグ内の下記の項目について、設定してください。

setRewardURL()

ビンゴ達成時のリンク先URLを指定
ビンゴ達成時に表示する「報酬ゲットボタン」クリック→リンク先のURLを指定してください。

２．カスタマイズ

ねこびんごは、カスタマイズによる着せ替えが可能です。
下記インターフェースをオリジナルの画像に差し替えて、あなただけの「〇〇びんご」を設定してください。
・背景画像
・ビンゴアイテム
・GETスタンプ
・ビンゴ時ディスプレイ

カスタマイズ手順もカンタン。
１）下記項目の中から、差し替える項目を選んで、htmlファイルのscriptタグ内に記述する。（※）
２）それぞれの項目内容について設定する。
※記述されなかった項目については、ねこびんごの設定が適用されます。

２−１. ビンゴマシーンのカスタマイズ
下記の記述から、差し替える項目に関する記述を選んで、ビンゴマシーンhtmlファイルの<script>タグ内に設置してください。設置されなかった項目については、ねこびんごの設定がそのまま適用されます。

// ビンゴカードURL
BingoMachine.setBingoCard(“https://testhost.jp/testsite/bingocard.html”);

// 使用する絵柄の数
BingoMachine.setPictureNum(“8”);

// 絵柄
BingoMachine.addPicture(“./img/picture01.png”);
BingoMachine.addPicture(“./img/picture02.png”);
BingoMachine.addPicture(“./img/picture03.png”);
BingoMachine.addPicture(“./img/picture04.png”);
BingoMachine.addPicture(“./img/picture05.png”);
BingoMachine.addPicture(“./img/picture06.png”);
BingoMachine.addPicture(“./img/picture07.png”);
BingoMachine.addPicture(“./img/picture08.png”);

// 背景
BingoMachine.setBackground(“./img/background.jpg”);

// タイトル
BingoMachine.setTitle(“./img/title.png”);

// スタートボタン
BingoMachine.setStartButton(“./img/start.png”);

// リセットボタン
BingoMachine.setResetButton(“./img/reset.png”);

// 排出した絵柄エリア
BingoMachine.setDischargeList(“./img/discharge.png”);

// 受付中
BingoMachine.setAccept(“./img/accept.png”);

// 抽選中
BingoMachine.setSelect(“./img/select.png”);

// 抽選終了
BingoMachine.setEnd(“./img/end.png”);

// ステータス
BingoMachine.setStatus(“./img/status.png”);

// 結果
BingoMachine.setResult(“./img/result.png”);

// 左右の余白の色
BingoMachine.setMarginColor(“#ff0000”);

// ビンゴアニメーション
BingoMachine.setAnimationStopURL(“./test/animationStop.png”);
BingoMachine.setAnimation1URL(“./test/animation1.gif”);
BingoMachine.setAnimation2URL(“./test/animation2.gif”);
</script>

タグ内の下記の項目について、設定してください。

setPictureNum()	ビンゴで使用する画像数を指定 addPicture()に指定された画像の中から、実際にビンゴで使用する画像数を指定します。数量を24以下に指定した場合は、１枚のビンゴカード上で同じ絵柄が重複表示されます。 addPicture()に指定された画像数より小さい数量を指定した場合は、ファイル名の若い画像から指定数の画像を自動的に選択してビンゴを実施します。指定可能ば数値：2～75
addPicture()	ビンゴで使用する画像を指定実際にビンゴで使用する画像（絵柄）を複数指定します。指定可能な画像数：2～75 画像サイズ：256×256 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setBackground()	最背面の画像を指定ビンゴマシーン画面の最背面画像を指定します。 QRコードは自動で表示されますので、該当部分は空白にしてください。画像サイズ：1440×1120 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setTitle()	タイトル画像を指定ビンゴマシーンの上部に表示するタイトル画像を指定します。画像サイズ：632×264px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setStartButton()	スタートボタン画像を指定ビンゴマシーンの下部に表示するスタートボタンの画像を指定します。画像サイズ：300×120 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setResetButton()	リセットボタン画像を指定ビンゴマシーンの下部に表示するリセットボタンの画像を指定します。画像サイズ：300×120 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setDischargeList()	アタリ履歴の背景画像を指定中央下部に表示するアタリ履歴の背景画像を指定します。画像サイズ：640×272 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setAccept()	「参加受付中」画像を指定右側上部に表示される「参加受付中」の画像を指定します。画像サイズ：364×164 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setSelect()	「抽選中」画像を指定右側上部に表示される「抽選中」の画像を指定します。画像サイズ：364×164 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setEnd()	「抽選終了」画像を指定右側上部に表示される「抽選終了」の画像を指定します。画像サイズ：364×164 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setStatus()	「現在の状況」画像を指定右側中央に表示される「現在の状況」の画像を指定します。数値は自動で表示されますので、該当部分は空白にしてください。画像サイズ：360×224 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setResult()	「ビンゴ結果」画像を指定右側下部に表示される「ビンゴ結果」の画像を指定します。結果のカードNo.は自動で表示されますので、該当部分は空白にしてください。画像サイズ：360×572 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setMarginColor()	ブラウザ余白の色を指定ブラウザの左右に余白が表示される場合に表示する色を指定します。
setAnimationStopURL()	ビンゴマシーン画像を指定（参加受付中）参加受付中に、中央のビンゴマシーン表示エリア内に表示される画像を指定します。画像サイズ：320×240 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setAnimation1URL()	ビンゴマシーン画像を指定①（抽選中）抽選中に、中央のビンゴマシーン表示エリア内に表示されるGIF画像を指定します。画像サイズ：320×240 px（72 dpi）　ファイル形式：GIF
setAnimation2URL()	ビンゴマシーン画像を指定②（抽選中）抽選中に、ビンゴマシーン画像①に続いてGIF画像を表示する場合に指定します。画像サイズ：320×240 px（72 dpi）　ファイル形式：GIF

２−２. ビンゴカードのカスタマイズ
下記の記述から、差し替える項目に関する記述を選んで、ビンゴカードhtmlファイルの<script>タグ内に設置してください。設置されなかった項目については、ねこびんごの設定がそのまま適用されます。

// 背景画像
BingoCard.setBingoCard(“./img/cardBackground.png”);

// スタンプ画像
BingoCard.setBingoStamp(“./img/stamp.png”);

// ビンゴ達成報酬ボタン画像
BingoCard.setBingoAchieve(“./img/achieveButton.png”);

// ビンゴ達成背景画像１
BingoCard.setBingoAchieveBG1(“./img/achieveBG1.png”);

// ビンゴ達成背景画像２
BingoCard.setBingoAchieveBG2(“./img/achieveBG2.png”);

// ビンゴ達成背景画像３
BingoCard.setBingoAchieveBG3(“./img/achiveBG3.png”);

タグ内の下記の項目について、設定してください。

setBingoCard()	最背面の画像を指定ビンゴカードの最背面画像を指定します。画像サイズ：640×1120 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setBingoStamp()	アタリスタンプの画像を設定抽選後、アタリ部分の上に貼付されるスタンプの画像を指定します。画像サイズ：120×120 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setBingoAchieve()	報酬ゲットボタンの画像を設定ビンゴ達成時に表示される報酬ゲットボタンの画像を指定します。画像サイズ：416×144 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setBingoAchieveBG1()	ビンゴ達成時のオーバーラップ画像①を指定ビンゴ達成時にビンゴカード上を覆う画像（背景）を指定します。画像サイズ：640×1120 px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setBingoAchieveBG2()	ビンゴ達成時のオーバーラップ画像②を指定ビンゴ達成時にビンゴカード上に表示する画像（上側）を指定します。画像サイズ：400×380px（72 dpi）　ファイル形式：PNG/JPEG/GIF
setBingoAchieveBG3()	ビンゴ達成時のオーバーラップ画像③を指定ビンゴ達成時にビンゴカード上に表示する画像（下側）を指定します。画像サイズ：496× 184px（72 dpi）　ファイル形式：PNG/JPEG/GIF
addPicture()	ビンゴで使用する画像を指定ビンゴマシーンhtmlで指定した画像（絵柄）と同じものを指定します。指定可能数：2～75 画像サイズ：256×256 px（72 dpi）　ファイル形式：PNG/JPEG/GIF