otak-lab - I am developing an app.

【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

【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 アドネットワーク単価

続・Windows 10で突然SSDにアクセスできなくなる症状の対処方法

約3ヵ月前の「Windows 10で突然SSDにアクセスできなくなる症状の対処方法」の続き。

結論が出た。
BIOSのメモリのタイミング設定を「おまかせ」にすると、フリーズすることがわかった。
私が所有するメモリは、GeILというメーカーのGD316GB1600C11DC(8GBx2)で、BIOSのメモリのタイミング設定は9-9-9-24となっていたが、下図の赤丸11-11-11-28の設定値に従ってBIOSを設定し直したところ、フリーズしなくなった。

もし、LPM(Link Power Management)の対処方法で改善できなかった場合、メモリを疑った方がいい。
使用しているメモリが2枚または4枚の構成で、メーカーや型番の違うメモリを使用している場合、同じ型番のメモリに差し替えることをオススメする。
１．メモリのメーカーや型番を調べて、メモリのタイミング設定の仕様を確認する。
２．BIOSのメモリのタイミング設定を確認し、差異がある場合は仕様の設定値に変更し直す。
３．memtest86+でエラーが発生しないことを確認する。

Crucial MX100 MX200 SSD Windows 10 フリーズメモリ

シンプル体重管理 Ver.1.2.2をリリースしました！

シンプル体重管理 Ver.1.2.2をリリースしました。
Playストアよりダウンロードできます。

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

Android BMI ウエストシンプル体重管理バストヒップ体年齢体脂肪率体重健康管理内臓脂肪レベル基礎代謝皮下脂肪率筋肉量

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

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

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

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

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であることを確認する。