今日もキュービィロックをボリボリ噛み砕いている「くぼひさ」です

あいさつ

最近、html5で

なる、あまり脳みそを使わない運ゲーな脳力パズルゲームを作っているのですが

調べ物をしている時にParcelでPWA化する最速の方法を見つけたので、使ってみたら、html5のゲームがPWA対応して、しかも、pixi.jsの画像データまでキャッシュしているので、突然、html5のゲームを作っているつもりが、いつの間にかPWAのゲームを作っていた…　もしかして、スタンド！？（To be continued...）

で、PWAはアプリ的な使い方も出来るので広告バーナーを貼ろうと思ったけど、現在、PWA広告配信サービスがほとんど無いので、普通のバーナーを貼るため、TypeScriptでプログラムしてみました

実装

簡単にCSSでボックスを作って、JavaScriptから表示、非表示を操作しています

index.htmlのBODYへ、

index.html

<div id="ads"></div>

を足し、index.htmlのCSSで、

index.html

#ads {
    margin:0 auto; padding:0; background-color: rgba(0, 0, 0, 0); position: absolute;
    width:100%; height:60px; bottom:0px; left:0px; z-index: 100;
    visibility: hidden;
}

と、表示場所を移動させ、優先順位を全面へ移動させます

そして、それを操作するのは、

adsLib.ts

export namespace adsLib {
    export function visible() :void {
        // モバイルでなければ実行するな
        var ua = navigator.userAgent;
        var flag = 0;
        if (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
            flag = 1;
        } else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
            flag = 1;
        }
        if (flag == 0) {
            return;
        }

        document.getElementById('ads').innerHTML = '（バーナーのhtml）';
        document.getElementById("ads").style.visibility="visible";
    }

    export function hidden() :void {
        document.getElementById('ads').innerHTML = '';
        document.getElementById("ads").style.visibility="hidden";
    }
}

と、個人的趣味でNameSpaceを使ったデータ指向プログラミングでゲームを作っているので、そうライブラリを作ってますが、普通にJavaScriptを使って、divでDOM操作をしているプログラムになるので、JavaScriptへ移植する等は簡単だと思います。index.htmlのadsボックスの大きさはバーナーへ合わせます

使い方は、

import {adsLib} from './adsLib';

でインポートして、adsLib.visible()でDOMへバーナーのHTMLを流し込み、CSSを表示。adsLib.hidden()でCSSを非表示してます

UserAgentでモバイル判定しているのは、バーナーがスマホ向けのバーナーなので、スマホとタブレットしかバーナーを表示してない為です

まとめ

PWAならずとも、HTML5のゲームでもバーナーを貼って収益化できる（かも知れない）状態にできました

これを公開すると、JavaScriptでAndroidのゲームを作ってGooglePlayストアで無料のゲームへバーナーを貼っている人や、JavaScriptでゲームを作ったけどMacを持ってないのでAppleAppストアへ出れない人がPWAのゲームを作って、５００円程度の安いさくらインターネットのサーバーでゲームを無料で公開して収益化を狙うかも知れないと公開を４分程度、躊躇（ちゅうちょ）してましたが、公開しました

HTML5やPWAは、まだまだ、ネイティブアプリには負けるし、不確定な部分も多いとは思いますが、お手軽にゲームが作れるので、そうなるかどうかは判らない変な夢を見ながらゲームを作ってみてはどうでしょう？

おまけ

広告バーナーのセンター表示

index.html

body {
  text-align: center;
}

と、htmlのbodyのCSSへ足すと、お手軽にバーナーを中央寄せできますよ

追記：nendのバーナーを取得してみた

モバイル専門広告配信サービス「nend」
https://nend.net/

のバーナーを取得して表示してみました

まず、html5やPWAのゲームの場合、「ゲームのウェブ」扱いになるので、アプリではなく、ウェブで申請すると審査が通ります

取得したバーナーはスマホとタブレット両方で表示するので、「インラインの320x50」を取得しました

nendのバーナーのhtmlはJavascriptになるので、DOM追加機能での実行はできません。なので、

index.html

<body><div id="ads">（nendのバーナーhtml）</div>

bodyタグの直後で広告表示の為のdivを追記し、ゲームのJavascriptよりも速く実行する為、ゲームのスクリプトよりも上へ置き、

adsLib.ts

//      document.getElementById('ads').innerHTML = '（バーナーのhtml）';

adsLib.ts

//      document.getElementById('ads').innerHTML = '';

DOMへの広告追加、削除する部分をコメントアウトします。あと、nendのバーナーはスマホとタブレットしか表示しませんので、機種判別の部分もコメントアウトする方が良いです

（パソコンでデバッグしていて、バーナーが表示されなくて、あわててたのは内緒…）

本当なら、JavascriptではないHTMLバーナーで、他の配信サービスとローテーション表示出来たら良かったのですけど、今回はそうはいかなかったのが残念です。でも、有名所のスマホゲームのバーナーが表示しているので、結構、上がります

追記は以上です

PWAなゲームへ広告を貼ってみた

あいさつ

実装

まとめ

おまけ

広告バーナーのセンター表示

追記：nendのバーナーを取得してみた