開発 - otak-lab

【Monaca】アプリリリース後の問題について

これまでMonacaの開発環境を利用して、Android版「FX収支管理」「ギャンブル収支管理」「シンプル体重管理」「ナンバーズサーチ」の計４タイトルのアプリをリリースしたが、達成感に浸っている暇はない。

例えば、アプリ内のデータをバックアップする方法として、「Dropbox Datastore API」という便利なサービスを利用し、必死に仕様を調査して実装までたどり着いた。
しかし、2016年4月に「Deprecating the Sync and Datastore APIs」サービスを終了するお知らせが・・・
この機能を実装するまで、当時のMonacaのInAppBrowserプラグインの問題なども含めて１ヵ月近くの時間を要したわけだが、半年後には使えなくなるという自体に。
対応策を考え、Google Driveにバックアップする方法を選択し、必死に仕様を調査して実装までたどり着いた。

しかし、2017年4月に「ネイティブアプリのOAuthインタラクションを最新にしてユーザビリティとセキュリティを向上する」WebViewでのGoogleへのOAuthリクエストのサポート終了するお知らせが・・・

一難去ってまた一難である。
Google Driveにアクセスする前にInAppBrowserを介してオーソライズを行っているが、それができなくなるということだ。
まだ４ヵ月あるとはいえ、早々に対応しておかないと身動きが取れなくなる。

アプリをリリースしても、不具合やユーザーの要望に加え、こうしたサービス終了に伴う問題など、なかなか放置できないのが現状である。

【Monaca】Ionic Color Pickerっぽい機能を実現する

※Onsen UI + AngularJSを使用。
アプリにカラーピッカーのような機能を実現したいと思っていたところ、
Ionic Color Picker – Ionic Marketplace
というページを見つけ、早速それっぽい機能を実現してみた。

新規プロジェクトから「Onsen UI V2 Angular 1 Minimum」を作成。
$watchCollection()でcolorオブジェクトの変更を検知し、RGBのHEXコードを生成している。

AngularJS Color Picker Monaca Onsen UI

【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える・その２

Onsen UI V2対応はこちらから。

otak-lab

2018.09.20

【Monaca】Onsen UI V2 ons-list-itemをドラッグ＆ドロップで並び替える

https://otak-lab.com/archives/1675

2年前の記事、「【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える」および「【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える・その２」で紹介した方法は、Onsen UI V1とjQueryを使用したが、今回はjQueryを使用せず、Onsen UI V2と「Sortable」を一部改造して実現してみた。MonacaクラウドIDEで、新しいプロジェクト「Onsen UI V2 Angular 1 Minimum」を作成し、各コードを準備する。SortableはY軸のほかにX軸の移動もできてしまうため、ons-list-itemのドラッグ＆ドロップには都合が悪い。そこで、オプションにver...

※11/22再編集
前回の「【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える」で記載したコードにはいくつか問題点があった。
ons-list-itemの背景色でわかりにくかったが、helper(移動中のons-list-item)のborder-topが消えたり、一番下のons-list-itemを移動させると、下から二番目のons-list-itemが下がるが、ons-listのborder-bottomとons-list-item)のborder-bottomが重なって線が太くなるなど。

二日間もいろいろと試した結果、下記のコードになった。
「【Monaca】Onsen UI ons-list のズレをなくす」で紹介したCSSを適用することで面倒なborder-top、border-bottomの処理を軽減することができた。
また、「三」のアイコンをドラッグすることで入れ替えが行われるように変更した。
それから、style.cssでは、CSSによる変化が確認できるようにあえて色を変えているので、コードを流用する場合は注意していただきたい。
Continue reading

jQuery Monaca ons-list-item Onsen UI sortable 並べ替え

【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える

Onsen UI V2対応はこちらから。

otak-lab

2018.09.20

【Monaca】Onsen UI V2 ons-list-itemをドラッグ＆ドロップで並び替える

https://otak-lab.com/archives/1675

2年前の記事、「【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える」および「【Monaca】ons-list-itemをドラッグ＆ドロップで並び替える・その２」で紹介した方法は、Onsen UI V1とjQueryを使用したが、今回はjQueryを使用せず、Onsen UI V2と「Sortable」を一部改造して実現してみた。MonacaクラウドIDEで、新しいプロジェクト「Onsen UI V2 Angular 1 Minimum」を作成し、各コードを準備する。SortableはY軸のほかにX軸の移動もできてしまうため、ons-list-itemのドラッグ＆ドロップには都合が悪い。そこで、オプションにver...

※Onsen UI + AngularJSを使用。
以下のファイルを準備する。
①jquery-3.1.1.min.js
②jquery-ui.min.js
③jquery.ui.touch-punch.min.js
④jquery-ui.min.css(②zipに同梱)
jsフォルダに上記①～③ファイルとapp.jsを配置する。
cssフォルダに上記④ファイルとstyle.cssを配置する。

$scope.tableに初期データを設定し、ons-listで一覧を表示する。
ons-list-itemをドラッグ＆ドロップし、[Check Table]ボタンを押下すると、コンソールに並び替えた$scope.tableの内容が表示される。
———-
ルメール
戸崎
川田
デムーロ
福永

index.html

<!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">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/jquery.ui.touch-punch.min.js"></script>
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <script src="js/app.js"></script>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <ons-sliding-menu main-page="page1.html" swipeable="false"></ons-sliding-menu>
    <ons-template id="page1.html">
        <ons-page ng-controller="page1Controller">
            <ons-toolbar fixed-style>
                <div class="center">Sortable Test</div>
            </ons-toolbar>
            <ons-list id="sort-list" model="table">
                <ons-list-item id="{{item.id}}" style="background-color: {{item.color}}" ng-repeat="item in table">
                    {{item.name}}
                </ons-list-item>
            </ons-list>
            <ons-button ng-click="checkTable()">Check Table</ons-button>
        </ons-page>
    </ons-template>
</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

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<ons-sliding-menu main-page="page1.html" swipeable="false"></ons-sliding-menu>

<ons-template id="page1.html">

<ons-page ng-controller="page1Controller">

<ons-toolbar fixed-style>

<div class="center">Sortable Test</div>

</ons-toolbar>

<ons-list id="sort-list" model="table">

<ons-list-item id="{{item.id}}" style="background-color: {{item.color}}" ng-repeat="item in table">

</ons-list-item>

</ons-list>

<ons-button ng-click="checkTable()">Check Table</ons-button>

</ons-page>

</ons-template>

</body>

</html>

app.js

"use strict";
var app = ons.bootstrap("myApp", ["onsen"]);
app.controller("page1Controller", ["$scope", function($scope) {
    $scope.table = [
        { id: "1", name: "戸崎",     color: "#8888ff" },
        { id: "2", name: "ルメール", color: "#88ff88" },
        { id: "3", name: "デムーロ", color: "#ff8888" },
        { id: "4", name: "川田",     color: "#ffff88" },
        { id: "5", name: "福永",     color: "#ff88ff" }
    ];
    ons.ready(function() {
        $("#sort-list").sortable({
            axis:       "y",
            tolerance:  "pointer",
            update: function(e, ui) {
                var arrayId = $("#sort-list").sortable("toArray");
                var table = [];
                for (var i = 0; i < arrayId.length; i++) {
                    for (var j = 0; j < arrayId.length; j++) {
                        if (arrayId[i] == $scope.table[j].id) {
                            table.push($scope.table[j]);
                            break;
                        }
                    }
                }
                $scope.table = angular.copy(table);
            }
        });
        $("#sort-list").disableSelection();
    });
    $scope.$on("$destroy", function(e) {
        $scope.table = [];
    });
    $scope.checkTable = function() {
console.log("----------");
        for (var i = 0; i < $scope.table.length; i++) {
console.log($scope.table[i].name);
        }
    };
}]);

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

35

36

37

38

39

40

"use strict";

var app = ons.bootstrap("myApp", ["onsen"]);

app.controller("page1Controller", ["$scope", function($scope) {

$scope.table = [

{ id: "1", name: "戸崎", color: "#8888ff" },

{ id: "2", name: "ルメール", color: "#88ff88" },

{ id: "3", name: "デムーロ", color: "#ff8888" },

{ id: "4", name: "川田", color: "#ffff88" },

{ id: "5", name: "福永", color: "#ff88ff" }

];

ons.ready(function() {

$("#sort-list").sortable({

axis: "y",

tolerance: "pointer",

update: function(e, ui) {

var arrayId = $("#sort-list").sortable("toArray");

var table = [];

for (var i = 0; i < arrayId.length; i++) {

for (var j = 0; j < arrayId.length; j++) {

if (arrayId[i] == $scope.table[j].id) {

table.push($scope.table[j]);

break;

}

$scope.table = angular.copy(table);

}

});

$("#sort-list").disableSelection();

});

$scope.$on("$destroy", function(e) {

$scope.table = [];

});

$scope.checkTable = function() {

console.log("----------");

for (var i = 0; i < $scope.table.length; i++) {

console.log($scope.table[i].name);

}

};

}]);

※ons-list-itemの高さが45px(奇数)だと、ドラッグ＆ドロップの際に毎回ズレが生じるため、44pxに変更している。
(jquery-ui.min.jsの処理で高さの1/2を算出する処理があるため。)

style.css

#sort-list ons-list-item {
    max-height: 44px;
}
#sort-list ons-list-item:hover {
    cursor: move;
}

1

2

3

4

5

6

#sort-list ons-list-item {

max-height: 44px;

}

#sort-list ons-list-item:hover {

cursor: move;

}

Monaca ons-list-item Onsen UI sortable 並べ替え

nend絶好調！！アドネットワーク比較 2016年10月

10月1日～31日までのインプレッション数(上段)、クリック数(中段)、報酬額(下段)。

まずi-mobile。
バナー広告は全面撤退する方向で進めている。

次にAd Generation。
平均クリック数13と好調だが、平均単価7円と先月より-1.6円下がった。
アフィリエイト用のバナー広告の配信が影響していると思われるため、すべてはずす方向で進めている。

最後にnend。
平均クリック数13と先月より倍増、平均単価11円で変わらず。
ユーザー数が増え続けている影響が大きい。

３社トータルの収益が7,000円を突破した。
シンプル体重管理は、MonacaからVisual StudioのCordovaに移行させ、課金とAdMobのプラグインの使用するためのテストを行っている。

Ad Generation i-mobile nend アドネットワーク単価

nend単価上昇！？アドネットワーク比較 2016年9月

先月に引き続き、9月1日～30日までのインプレッション数(上段)、クリック数(中段)、報酬額(下段)を比較してみた。

まずはi-mobile。
先月同様、残念ながらクリック数に見合った報酬額ではない。
自社広告の表示がかなり目立つようになった。
平均クリック数6.9、平均単価3.6円と先月より-0.6円下がった。

次にAd Generation。
相変わらず報酬額0円の日が発生する。
平均クリック数8.6と先月より倍に急増も、平均単価8.6円と先月より-0.4円下がった。

最後にnend。
以前はバナー広告の低単価で苦しめられたが、ギャンブル収支管理・FX収支管理・シンプル体重管理に導入したネイティブアド広告が好調のようで、平均クリック数6.9、平均単価11円と+2.2円上がった。
ギャンブル収支管理の単価が最大15円前後なのが大きい。
9月末にユーザー数が多いシンプル体重管理にネイティブアド広告を導入したので、10月の収支が楽しみになりそう。

３社トータルの収益がやっと5,000円を突破したが、i-mobileの収益はこれ以上見込めないと判断。
9月末に行ったアプリの更新でi-mobileの広告を表示しないように変更した。
i-mobileの低単価の原因は、おそらく東証マザーズへの上場審査をクリアするために中抜きして報酬額を減らした可能性が高いだろう。
Ad Generationの配信設定において、アドネットワーク一覧にi-mobileがあるので、現在はそちらを有効にしている。

Ad Generation i-mobile nend アドネットワーク単価

【Monaca】ベーシックプランでInAppBrowserのバージョンを変更する方法

前回、「【Monaca】Cordova 6.2対応で問題発生！」において、InAppBrowserプラグインがv1.4.0のため、Android 4.0.4上で動作しない件を掲載した。

ベーシックプランでは、プラグインのバージョンを変更することができない。

しかし、ある方法でベーシックプランでもプラグインのバージョンを変更することができる。
今回は、InAppBrowserプラグインをv1.4.0からv1.5.0に変更する方法を説明する。
※この記事を掲載後にMonaca側が何らかの対策を行った場合、変更できない可能性があるのでご注意いただきたい。

①「ファイル」→「Cordovaプラグインの管理」と選択し、Cordovaバージョン：CLIバージョンを「6.2.0」を選択する。
②6.2.0に変更後、「ファイル」→「プロジェクトをエクスポート」と選択し、エクスポートを実行する。
③エクスポートしたzipファイルを解凍し、「.monaca」フォルダにある「project_info.json」をメモ帳などで開く。

{
    "plugins": [
        "mobi.monaca.plugins.Monaca@3.0.0",
        "mobi.monaca.plugins.datepicker@1.0.1"
    ],
    "framework_version": "3.5",
    "xcode_version": "7",
    "cordova_version": "6.2",
    "plugin_settings": {
        "cordova-plugin-crosswalk-webview": {
            "variables": [
                "XWALK_VERSION=18.48.477.13"
            ]
        }
    },
    "external_plugins": [
        "cordova-plugin-splashscreen@3.2.2",
        "cordova-plugin-inappbrowser@1.4.0",
        "cordova-plugin-file@4.2.0",
        "cordova-plugin-whitelist@1.2.2",
        "cordova-plugin-globalization@1.0.3",
        "cordova-custom-config@2.0.3"
    ],
    "title-ja": "",
    "title-en": "",
    "description-ja": "",
    "description-en": "",
    "category": "User Template",
    "platform": [],
    "name": "generated-1475382335-57df4100fd1734cf2ab0b508"
}

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

{

"plugins": [

"mobi.monaca.plugins.Monaca@3.0.0",

"mobi.monaca.plugins.datepicker@1.0.1"

],

"framework_version": "3.5",

"xcode_version": "7",

"cordova_version": "6.2",

"plugin_settings": {

"cordova-plugin-crosswalk-webview": {

"variables": [

"XWALK_VERSION=18.48.477.13"

]

}

},

"external_plugins": [

"cordova-plugin-splashscreen@3.2.2",

"cordova-plugin-inappbrowser@1.4.0",

"cordova-plugin-file@4.2.0",

"cordova-plugin-whitelist@1.2.2",

"cordova-plugin-globalization@1.0.3",

"cordova-custom-config@2.0.3"

],

"title-ja": "",

"title-en": "",

"description-ja": "",

"description-en": "",

"category": "User Template",

"platform": [],

"name": "generated-1475382335-57df4100fd1734cf2ab0b508"

}

④18行目の“cordova-plugin-inappbrowser@1.4.0”,を“cordova-plugin-inappbrowser@1.5.0”,に変更して保存する。
⑤解凍して作成されたフォルダやファイルを圧縮する。
⑥Monacaの「Import Project」を選択し、「プロジェクトのパッケージをアップロード」で圧縮したファイルを選択し、インポートを行う。
⑦InAppBrowserプラグインがv1.5.0であることを確認する。

Android 4.0.4の端末で動作確認済み。
おそらくこの方法で問題ないと思われる。

InAppBrowser Monaca ベーシックプラン

【Monaca】Cordova 6.2対応で問題発生！

MonacaがCordova 6.2に正式に対応し、シンプル体重管理の最新版をCordova 6.2でリリースする予定だったが、思わぬところで問題が発生した。

アプリをリリースする場合、Android 4.0.4・4.4.4・5.1.1上で必ず動作チェックを行っているが、Android 4.0.4だけGoogle Driveのバックアップ・リカバリー機能が動作しない。
処理を一つ一つ検証したところ、オーソライズを行うためにwindow.open(authUrl, “_blank”, features)を実行している箇所が動作しない。

Cordova 6.2対応でアップデートしたInAppBrowserプラグイン v1.4.0の問題と思い、「InAppBrowser Android 4.0.4」で検索したところ、やはり思ったとおりだった。

InAppBrowser doesn’t open on Android 4.0.4 (regression)

最近リリースされたv1.5.0でfixされたようだが、問題はMonaca側がこの件に対応するかどうか。
この件についてMonacaのお問い合わせから送信したが、不具合等の報告、技術的な質問はStackOverflowに誘導しているため、相手にされない可能性もある。

現状では月額5,000円のゴールドプランに入り、技術サポートチケットを使って対応してもらうか、独自でv1.5.0のブラグインを組み込むしか方法はなさそうだ。
※9/20追記
技術的な問題のため、Monaca側の回答を引用させていただく。

貴重な情報、ありがとうございます。
弊社でも検証させていただき、対応を検討させていただきます。
InAppBrowserプラグイン1.5.0をMonacaでご利用になる場合は、
InAppBrowserプラグインの設定にある「プライグインのバージョン」で「1.5.0」を選択し、
ご利用ください。

現状では月額5,000円のゴールドプランに入り、プラグインのバージョンを変更するしか方法はないようだ。
万が一、ほかのプラグインも不具合が発生した場合に対応できないとなれば、安定して動作しているCordova 5.2でリリースするしかない。

今、楽天モバイルでASUS ZenFone 2 Laser 16GBモデルが税別7,800円で購入できます。

Cordova 6.2 InAppBrowser Monaca

一長一短！アドネットワーク比較 2016年8月

先月に引き続き、8月1日～31日までのインプレッション数、クリック数、報酬額を比較してみた。

まずはi-mobile。
相変わらずクリック数は高いが、それに見合った報酬額ではないような気がする。
理由はおそらく単価にバラツキがありすぎるため。
平均クリック数6.0、平均単価4.2円と先月より+0.6円上がった。

次にAd Generation。
i-mobileよりインプレッション数が少ない理由は、カスタムタグとしてアフィリエイト広告を挿入しているため。
平均クリック数3.9、平均単価9円と先月より+1.3円上がったが、クリック数、報酬額がゼロの日が3日もある。
在庫切れにより同じ広告ばかり表示される傾向があるようだ。

最後にnend。

バナー広告からネイティブアド広告に切り替えて大正解だった。
平均クリック数5.6、平均単価8.8円と+1.3円上がった。

以前はnendの広告だけで3,000円を超える収益があったが、低単価問題で1/3以下まで激減。
試行錯誤した結果、やっと３社トータルで3,000円を超える収益となった。
7～8月とアプリのインストール数が激増した影響がここで出始めたようだ。
Ad Generationのカスタムタグの機能を使ってアフィリエイト広告を表示させてみたが、こちらは何度かクリックされるも商品購入まで至らず、結果が出ていない。

Ad Generation i-mobile nend アドネットワーク単価

リリースしたアプリのインストール数について

昨夏、立て続けにAndroid版「FX収支管理」「ギャンブル収支管理」「シンプル体重管理」をリリースし、１年が経過した。
各アプリのインストール数は下記のとおりである。
monacaを利用したアプリとしては、インストール数は多い方か・・・
ただし、思った以上に少なすぎたというのが正直な感想だ。

FX収支管理
2015/08/04 – 2016/08/20

ホームページの検索キーワードで「FX 収支」は一番だが、インストール数はそれほど伸びていない。
おそらくiOS版のアプリを探してたどり着いたのではないだろうか。
機能としては、FX業者のCSVデータの取り込みに対応していない点が痛い。
これには理由があって、アプリのデータベース容量が小さいので、スキャルピングや複数業者利用など取引回数が多くなると、データが収まらなくなる恐れがあるため。
FX収支管理の理想的な形は、PCのソフトウェアまたはWebサイトから取引履歴を登録し、スマートフォンのアプリで参照する・・・ではないだろうか。

ギャンブル収支管理
2015/08/17 – 2016/08/20

FX収支管理をチョロチョロっと改造して作ったのがギャンブル収支管理。
アプリ紹介サイトに掲載されてインストール数が増え始め、１年かかって2000インストール達成。
パチンコやスロットをやっている人から見ると、貯玉などの機能がないため、物足りないアプリかもしれない。

シンプル体重管理
2015/09/11 – 2016/08/20

「Google AdWordsでユーザー数は増えるか？」で記載のとおり、広告でインストール数を増やそうとしたが、評価★1★2を食らって数ヵ月も低迷を続ける。
しかし、６月あたりから突然インストール数が増え始め、ついに４倍増になってしまった。
原因はこれ。
「体重管理」で検索すると、企業相手に個人で開発したアプリが４番目に食い込むのだから、４倍増も当然か？
しかし、上位アプリが50万や100万以上のインストール数に対して、シンプル体重管理は1771しかない。
現在、シンプル体重管理 Ver.2を開発中なので、インストール数1万を目指そうかと思う。

Android FX収支管理インストール数ギャンブル収支管理シンプル体重管理

2024年4月
月	火	水	木	金	土	日
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

カテゴリー: 開発