今日もキュービィロックをボリボリ噛み砕いている「くぼひさ」です
あいさつ
最近、html5で
TRY-UN
https://pdbg.work/
なる、あまり脳みそを使わない運ゲーな脳力パズルゲームを作っているのですが
調べ物をしている時にParcelでPWA化する最速の方法を見つけたので、使ってみたら、html5のゲームがPWA対応して、しかも、pixi.jsの画像データまでキャッシュしているので、突然、html5のゲームを作っているつもりが、いつの間にかPWAのゲームを作っていた… もしかして、スタンド！？（To be continued...）
で、PWAはアプリ的な使い方も出来るので広告バーナーを貼ろうと思ったけど、現在、PWA広告配信サービスがほとんど無いので、普通のバーナーを貼るため、TypeScriptでプログラムしてみました
実装
簡単にCSSでボックスを作って、JavaScriptから表示、非表示を操作しています
index.htmlのBODYへ、
<div id="ads"></div>
を足し、index.htmlのCSSで、
# 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;
}
と、表示場所を移動させ、優先順位を全面へ移動させます
そして、それを操作するのは、
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は、まだまだ、ネイティブアプリには負けるし、不確定な部分も多いとは思いますが、お手軽にゲームが作れるので、そうなるかどうかは判らない変な夢を見ながらゲームを作ってみてはどうでしょう？
おまけ
広告バーナーのセンター表示
body {
text-align: center;
}
と、htmlのbodyのCSSへ足すと、お手軽にバーナーを中央寄せできますよ
追記：nendのバーナーを取得してみた
モバイル専門広告配信サービス「nend」
https://nend.net/
のバーナーを取得して表示してみました
まず、html5やPWAのゲームの場合、「ゲームのウェブ」扱いになるので、アプリではなく、ウェブで申請すると審査が通ります
取得したバーナーはスマホとタブレット両方で表示するので、「インラインの320x50」を取得しました
nendのバーナーのhtmlはJavascriptになるので、DOM追加機能での実行はできません。なので、
<body><div id="ads">（nendのバーナーhtml）</div>
bodyタグの直後で広告表示の為のdivを追記し、ゲームのJavascriptよりも速く実行する為、ゲームのスクリプトよりも上へ置き、
// document.getElementById('ads').innerHTML = '（バーナーのhtml）';
// document.getElementById('ads').innerHTML = '';
DOMへの広告追加、削除する部分をコメントアウトします。あと、nendのバーナーはスマホとタブレットしか表示しませんので、機種判別の部分もコメントアウトする方が良いです
（パソコンでデバッグしていて、バーナーが表示されなくて、あわててたのは内緒…）
本当なら、JavascriptではないHTMLバーナーで、他の配信サービスとローテーション表示出来たら良かったのですけど、今回はそうはいかなかったのが残念です。でも、有名所のスマホゲームのバーナーが表示しているので、結構、上がります
追記は以上です