ゲームをシェアしてもらえるように専用ページの作成と埋め込みコードの表示

私は2年ほどゲームを作ってサイトで公開してきたわけですがまったくアクセスが伸びません(-_-)

正直言うと日に20人も来ないです。ずっとそんなしょっぼいアクセス数で心が折れまくりです(;_:)

とはいえ、これまで頑張ってきたものをこのまま諦めてしまうのは嫌なのでどうにか悪あがきできないだろうか、といろいろ考えた中で浮かんだのがこのiframeでの埋め込みを使って拡散する方法です。

正直、最初はやりたくなかった

もともとブラウザゲームをiframeで埋め込めることは知っていたけど、無料ゲーム紹介サイトに載せたくはなかったです。

本当に正直に言うと、せっかく一生懸命作ったゲームをそんなサイトの小遣い稼ぎに使われるのはすごく嫌でした。本当にそう思ってました。しかし、背に腹は代えられない。

結論から先に言うと、ゲームサイトに紹介してもらってアクセスはものすごくアップしました。もちろん埋め込みなので私のサイトに直接来ているわけではないですが、それでも結構な人数の方がゲームをやってくれている、という実感を得られるようになりました。これはとても大きい。

そしてようやく「無料ゲーム紹介サイト」のようなサイトの必要性を理解しました。それらのサイトは営業をしてくれているんですよ。彼らが得る収入はその営業の見返り。

ゲーム紹介サイトでは海外のゲームがほとんどな感じだけど、きっと海外はそういうところを理解して埋め込みしてもらうことを前提にしてるんだろうと思いました。こういうサイトにたくさん掲載される方が自社で営業するより遥かに効果があることを知ってるんでしょうね。たぶん日本人は考えがせこいんでしょう(^-^;

ただ埋め込めるだけだともったいない

とはいえ、ただ自分の作ったゲームをiframeで埋め込めるようにするだけでは得がない。どうにか収益に結び付けなければいけない。

ただ、一つとても残念なのがiframe内に広告を貼り付けることはgoogleアドセンスでは規約違反になるようです。辛いですが諦めるしかありません。一応ゲームに埋め込めるタイプのアドセンスも用意されているようですが、それを利用できる条件の一つに「100万pv/月」というスーパーハードな条件があります。これはあきらめざるを得ません(´;ω;`)

残された方法としてはiframeで埋め込んだゲームから自分のサイトにリンクで来させること。ただし、通常のリンクだとiframe内で処理されてしまうので、リンクは必ず新しいタブで開くように「target=”_blank”」をつけておく必要があります。また、ゲームファイル内に書き加えたくはないのでこのリンクは別に作る必要があります。

埋め込み専用ページを作る

ゲームの上にリンクボタンを表示するには専用のページを用意する必要があります。それをゲーム毎に用意するのは面倒なのでwordpressのカスタム投稿を埋め込み用に一つ新たに作成しました。そしてこれを埋め込み用のデザインに新しく作ります(ヘッダーやフッターなど不要なものを削る)。

ゲームは通常のゲーム紹介ページに使ってるゲームファイルを共有して使います。カスタムフィールドかパーマリンクをゲームデータの保存先フォルダ名を入れておくと取り出しやすいです。

cssもenchant.jsとiframeの画面がマッチするように作っておく必要があります。これがけっこう面倒くさいですね(;^ω^)

リンクボタンを作る

リンクボタンをゲームの上に表示させる必要があります。position:absoluteでゲームの上に配置してz-indexで上に表示されるようにします。

また、ゲーム中邪魔になる場合はドラッグで移動できるようにする必要があるので、単純にクリックだけの操作ではないのでjavascriptでうまく作ってやる必要があります。

ただ今回作ってみて、androidのときだけドラッグの操作がうまく動かなかったんですよね(-_-;)これは今後の課題。

完成はこんな感じ

こんな感じで埋め込めます。

ソースコードのサンプル

wordpressのページ。single-●●.php(●●は自分でつけてね)

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<?php wp_head(); ?>
</head>
<body>
<main id="embed-wrap">
<?php if(have_posts()):
    the_post();?>
    <div id="eb-game">
        <iframe id="eb-iframe" name="ifr" src="<?php echo home_url(); ?>/games/<?php echo $post->post_name; ?>/game.html" width="<?php if(post_custom('screen_type') == "A"){echo "94%";}else if(post_custom('screen_type') == "B"){echo "100%";} ?>" height="100%" scrolling="no" marginheight="0" marginwidth="0" frameborder="0" onload="this.contentWindow.focus();"></iframe>
        <div id="eb-link" ontouchstart="mDown();" ontouchend="mUp();" ontouchmove="mMove(event);" onmousedown="mDown();" onmouseup="mUp();" onmousemove="mMove(event);"></div>
    </div>
<?php endif; ?>
</main>
</body>

css

#embed-wrap { 
    font-size: 16px;
    margin: 0 auto;
    padding: 0;
    background-color: #000000;
    width: 100vw;
    height: 140vw;
}
#eb-game {
    position: relative;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    height: 140vw;
}
#eb-link {
    position: absolute;
    width: 48px;
    height: 48px;
    top: 0;
    background-image: url("https://○○/○○.png");
    background-size: cover;
    z-index: 10;
}
@media screen and ( max-device-width: 767px ) {/*767px以下の場合(タブレット)*/
    #eb-link {
        margin: 0 auto;
    }
}
#eb-iframe {
    margin: 0 auto;
    border: none;
    z-index: 0;
}

javascript

var isDivTouched = false;
var mDownTime;
    
function mMove(e){
    if(!isDivTouched)return;
    var id = document.getElementById("eb-link");
    id.style.left = e.pageX-24 + "px";//画像の中心になるようにした
    id.style.top = e.pageY-24 + "px";
    e.preventDefault();
}
function mDown(){
    mDownTime = new Date().getTime();
    isDivTouched = true;
    e.preventDefault();
}
function mUp(){
    var mUpTime = new Date().getTime();
    if (mUpTime - mDownTime < 200) {//200ms以下はクリックト判断
		window.open("https://wgc-cosmo.com/", "_blank");//リンク
	}
    isDivTouched = false;
}

埋め込み用コードを表示する

次は埋め込み用コードを表示してゲームを埋め込みたい方に簡単にコードをコピーできるようにしておきます。

ここは全部書くの面倒なのでサラッと説明します(^^;)

私の場合はゲームページのfacebook等のシェアボタンの列に専用のボタン(</>)を用意し、これをクリックした場合にポップアップが表示され、そこにコードが表示されます。このポップアップは単純にクリックするとstyleをhiddenとblockを切り替えるようにしているだけです。

表示されている文字列をコピーボタンでコピーできるようにするのはこちらの記事をそのままコピペして使いました。

JavaScriptで画面上の文字列をクリップボードにコピーする方法

まとめ

たぶんHTML5のゲームは自分のサイトだけでなく他のサイトでも埋め込んでもらって拡散してもらうことが必要なんだと思います。他のサイトに表示されるのはけっこう嬉しいもんです(´艸`*)

ただ、一つ予想外だったのは、ほとんどのゲーム紹介サイトはPC向けに作ってるんですよね。だからスマホ向けに作っているゲーム、特に私のゲームのような画面内に大きくキーパッドが表示されるゲームは歓迎されないようです。ここはちょっと考える必要がありますね(;´Д`)

っていうか自分でスマホ用ブラウザゲーム紹介サイト作ろうかな。。(いや、それは面倒か。。)

当サイトのオリジナルゲーム(ランダム表示)

スマホ専用対戦ゲーム。3つの数字を順番にどちらが速く押せるかを競うミニゲーム。
爆弾を設置して爆発で敵を倒す懐かしいレトロゲーム。敵をすべて倒すとステージクリアです。...
同色4つ以上つなげると消えます。一度の操作だけで全部が消えるようにするパズルゲーム。
最初にカードの配置を覚えてする神経衰弱。瞬間の記憶力が試されるゲームです。

記事の感想・コメント

※コメントはまだありません※

コメントを残す

メールアドレスが公開されることはありません。

おすすめメニュー

ゲーム一覧ページへのリンク画像
ゲーム開発技術ブログへのリンク画像
pixi.jsでのゲーム開発へのリンク画像
enchant.jsでのゲーム開発へのリンク画像
グッズページへのリンク画像

ゲームタグ一覧