最近、見た目が好きで
WEBアプリ開発の方はOnsenUIをよく使っています。
OnsenUIでnend広告を表示させた時、
ちょっと苦戦したので参考までにまとめてみました。
ちなみにmonacaのドキュメントにやり方が載っています。
ドキュメントTOP » サンプル＆Tips » 開発Tips » nend ( ネンド広告 )

広告コードの用意

nend のサイトから、サイト / アプリを登録申請します。
管理画面から、「広告枠の管理」→「広告枠」で「サイト/アプリ名」の下にある「広告コード」をクリックすると、広告掲載用のコードが表示されます。
※「ヘルプ」→「広告表示テスト用広告コード」にテスト用のコードもあります。

index.html

広告コードを用意が出来たら、さっそくindex.htmlに表示させるスクリプトを書きます。

<!DOCTYPE HTML>
<html>
<head>
    ・
    ・
    <script src=”js/nend.js”></script>
    ・
    ・
</head>
<body>
    ・
    ・
    </ons-tabbar>
 
    <div class=”nend_wrapper”>
        <script src=”http://js1.nend.net/js/nendAdLoader.js”></script>
    </div>
 
</body>
</html>

JavaScriptは[ js ]フォルダ内の[ nend.js ]に書くことにしました。

実際に表示させたいページ

実際表示させたいページには以下のように書きました。

    ・
    ・
  <ons-bottom-toolbar modifier=”nend”>
    <div class=”new_nend_wrapper”></div>
  </ons-bottom-toolbar>
</ons-page>

「ons-bottom-toolbar」で「modifier=”nend”」を指定して、
CSSに以下の内容を記述しています。

.bottom-bar–nend {
    margin: auto;
    background-color: white;
    width: 320px;
    height: 100px;
}

nend.js

そして[ nend.js ]の中身

var nend_params = {”media”:**,”site”:*****,”spot”:******,”type”:*,”oriented”:*};
// 用意した広告コードを記述する
$nend = null;
arrNendLinks = [];
function setNend() {
    setTimeout(function () {
 
        //広告のリンクを退避する
        if(!$nend) {
            $nend = $(‘#nend_adspace_’ + nend_params.site + ‘_’ + nend_params.spot);
            var arrNendAnchors = $nend.find(‘a’);
            for(var i = 0; i < arrNendAnchors.length; i++) {
                arrNendLinks.push($(arrNendAnchors[i]).attr('href'));
            }
        }
            $('.new_nend_wrapper').append($nend);
            var nend_links = document.querySelectorAll('.new_nend_wrapper a');
            for(var i = 0; i < nend_links.length; i++) {
                var href = $(nend_links[i]).attr("href");
                var href = String(arrNendLinks[i]);
                $(nend_links[i]).attr("href", "javascript:void(0);").on("touchstart", function(){
                    var ref = window.open(href, '_system', 'location=yes');
                    ref.show();
                });
            }
    }, 1000); //タイムラグ？があるためTimeoutで読み込む
}
$(function() {
    $(document.body).on("pageinit", "#*****,#*****,#*****",function() {
    //第2引数には広告を表示したいページのIDを指定する
        setNend();
    });
});

monacaでiOSとAndroid両方に対応させる場合はこんな感じ

var nend_params;
if( monaca.isIOS ){
    nend_params = {/* 自分のiOSアプリ用の広告コード */};
} else if( monaca.isAndroid ){
    nend_params = {/* 自分のAndroidアプリ用の広告コード */};
}

あと、monacaの場合は「ビルド設定」→「Cordocaプラグイン」から[InAppBrowser]を「有効」にします。

で、こんな感じで表示されます。

広告が表示されなかったり、うまく開かなかったりとかなり試行錯誤しましたが、
色んなサイトを参考にさせて頂き表示出来るようになりました。
まぁ、広告はあくまで広告！アプリそのものの良し悪しの方が重要ですよね？
と思いつつ、広告を入れ無いといけない状況もあったりするので
同じような状況の方の少しでも参考になれば(^ ^)

自己紹介

松田大と申しますm(_ _)m
インディーズでミュージシャンをやっていたのですがいつのまにか…

とある企業でショップのアルバイトスタッフから正社員、支店長を経てシステム部門に異動するという、開発担当としては変わった経緯を持っている方だと思います。

「Excel VBA」からスタートして、Yamaha RTX シリーズで VPN環境構築、Hyper-V環境構築、Windowsアプリ開発などを経験した後、「 WordPress 」に出会い、どっぷりハマっています。

現在勤めているETBS合同会社では、「 WordPress 」を活用したWEBサイト、業務用WEBアプリケーション開発を中心に、記事の執筆代行や掲載に必要な情報のリサーチ、映像のテロップ入れや切りはりなどの簡単な動画編集なども、まとめて行なっています。

現在、代表兼二児のパパ。子育てを通じて、こどもたちにもプログラミングの楽しさに触れてほしいと思うようになり、「こどもICTかつしか教室」を開講中。最近は童心に帰り、簡単なゲーム制作なんかも楽しんでいます(^_^)。

お問い合わせ