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

2019年7月30日

私は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;
}