管理人 - otak-lab

ギャンブル収支管理 Ver.1.2.5をリリースしました！

ギャンブル収支管理 Ver.1.2.5をリリースしました。
Playストアよりダウンロードできます。

変更点は下記のとおりです。
Continue reading

Android オートレースギャンブルギャンブル収支管理パチスロパチンコ競艇競輪競馬

【Monaca】Onsen UIでnend広告が表示されない

最新記事はこちら。

otak-lab

~~https://otak-lab.com/archives/1367~~

I am developing an app.

Onsen UIを使用してnend広告を表示させようと、下記コードを設置しても表示されない。(※テスト用コード)
どうして？と悩む方も多いと思う。
2016-06-08-10-00-22

<script type="text/javascript">
var nend_params = {"media":82,"site":58536,"spot":127513,"type":1,"oriented":1};
</script>
<script type="text/javascript" src="https://js1.nend.net/js/nendAdLoader.js"></script>

1

2

3

4

var nend_params = {"media":82,"site":58536,"spot":127513,"type":1,"oriented":1};

</script>

答えは簡単。
実際は広告が表示されているが、Onsen UIはCSSでz-indexを使用しているため、Onsen UIが表示した画面の裏に隠れてしまう。
広告用のコードをdivタグで囲い、z-index: 99でOnsen UIが表示した画面の上に表示させる。
既存のブラウザで表示させたい場合は、【Monaca】nend広告を既存ブラウザで表示するを参照。
2016-06-08-10-03-43

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <link rel="stylesheet" href="css/style.css">
    <script>
        var nend_params = { "media":82,"site":58536,"spot":127513,"type":1,"oriented":1 };
        ons.bootstrap();
    </script>
    <style>
        #div_nend {
            position: absolute;
            bottom: 0px;
            width: 100%;
            height: 50px;
            z-index: 99;
        }
    </style>
</head>
<body>
    <ons-page>
        <ons-toolbar fixed-style>
            <div class="center">nend広告テスト</div>
        </ons-toolbar>
    </ons-page>
    <div id="div_nend">
        <script type="text/javascript" src="http://js1.nend.net/js/nendAdLoader.js"></script>
    </div>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<!DOCTYPE HTML>

<html>

<head>

var nend_params = { "media":82,"site":58536,"spot":127513,"type":1,"oriented":1 };

ons.bootstrap();

</script>

<style>

#div_nend {

position: absolute;

bottom: 0px;

width: 100%;

height: 50px;

z-index: 99;

}

</style>

</head>

<body>

<ons-page>

<ons-toolbar fixed-style>

<div class="center">nend広告テスト</div>

</ons-toolbar>

</ons-page>

</div>

</body>

</html>

CSS JavaScript Monaca nend Onsen UI z-index 広告表示

【Monaca】Onsen UI ons-list のズレをなくす

Onsen UIはすばらしいフレームワークだが、MonacaのAndroid用アプリで使用すると難点もある。
例えば、ons-list。
iPhoneの設定画面のようなイメージの画面が再現できる。

しかし、使い方によっては問題が発生する。
例えば、左はons-listを5回使用した場合、右はons-list-itemを5回使用した場合。
ご覧のとおり、同じ並びを期待するもズレが発生してしまう。

Continue reading

border-bottom border-top CSS Monaca Onsen UI

【Monaca】Nifty mBaaSのプッシュ通知を実装する

Onsen UI + AngularJS
Cordovaプラグイン：ncmb-push-monaca-plugin v2.0.1（※バージョン要注意）

Niftyのサンプルでは、document.addEventListener(“deviceready”, …..となっているが、ons.ready()はイベントの最後に実行されるので、その中にプッシュ通知の処理を記述しても問題ない。
プッシュ通知によって受け取ったJSONデータをons.notification.alert()を使ってダイアログ表示する。
JSONデータはダイアログ表示に必要な形式で作成し、新しいプッシュ通知画面のJSONの項目に設定して送信する。

type: 将来に使用
title: ダイアログのタイトル
message: ダイアログのメッセージ(HTML形式)
button1: ダイアログのボタン
button2: 将来に使用
button3: 将来に使用

JSONデータ

{"type":"1","title":"Monacaで作ったアプリ","message":"今日も暑いですね。<br>水分を補給しましょう。","button1":"OK"}

1	{"type":"1","title":"Monacaで作ったアプリ","message":"今日も暑いですね。<br>水分を補給しましょう。","button1":"OK"}

ons.ready(function() {
    var appKey    = "アプリケーションキー";
    var clientKey = "クライアントキー";
    var senderId  = "12桁のプロジェクト番号";
    window.NCMB.monaca.setHandler(showPushNotification);
    function showPushNotification(jsonData) {
        // JSON.parse()は不要
        var data = angular.copy(jsonData);
        data.func = function(){};
        // プッシュ通知ダイアログ表示
        ons.notification.alert({
            messageHTML:    data.message,
            title:          data.title,
            buttonLabel:    data.button1,
            animation:      "default",
            callback:       data.func
        });
    }
    window.NCMB.monaca.setDeviceToken(appKey, clientKey, senderId);
    window.NCMB.monaca.setReceiptStatus(true);
    // ID取得
    var installationId = "";
    var count = 0;
    var result = setInterval(function() {
        window.NCMB.monaca.getInstallationId(function(id) {
            if (id) {
                clearInterval(result);
                installationId = id;
            }
        });
        count++;
        if (count > 9) {
            clearInterval(result);
        }
    }, 5000);
}

1

2

3

4

5

6

7

8

9

10

11

12