4

MonacaでWeb SQLを使用したアプリを開発しましたが、Androidにおいて次の現象が解決できません。
※Cordova InAppBrowserプラグイン有効。
※Monacaデバッガー、リリースビルドで現象を確認。

下記の例を起動すると、page1で10件分のリストが表示されます。
page2に切り替え、「stackoverflow」ボタンをタップするとWebViewが表示されます。
「×」ボタンまたは「戻る」ボタンをタップして閉じ、page1に切り替えると、エラーコード:5 メッセージ:"no such table: t_test"が発生します。

実際は、Dropbox datastore APIの認証でWebViewを使用しています。
ログイン画面で「×」ボタンまたは「戻る」ボタンをタップして閉じ、一覧などの表示画面に切り替えると上記エラーが発生します。
※API内のwindow.openで"_blank"以外は認証に失敗します。
また、appC cloudプラグインでもカットイン広告の画面遷移にWebViewを使用しており、「戻る」ボタンで戻ると同様のエラーが発生するため、導入を断念しました。

作りが悪いのか、諦めるしかないのか、ご教示のほどよろしくお願いします。

関連した内容と思われるリンク
1.inAppbrowser and webSql failure
2.Apache Cordova

<!DOCTYPE HTML>
<html la="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <script>
var app = ons.bootstrap("myApp", ["onsen"]);
// DB初期化
initData();
// page1
app.controller("page1Controller", ["$scope", function($scope) {
    ons.ready(function() {
        $scope.listTable = [];
        getData($scope);
    });
}]);
// page2
app.controller("page2Controller", ["$scope", function($scope) {
    $scope.goUrl = function() {
        window.open("http://ja.stackoverflow.com/", "_blank", "location=yes");
    };
}]);
// DB初期化
function initData() {
    var sql = null;
    var db = window.openDatabase("testdb", "1.0", "testdb", 1024 * 1024);
    db.transaction(function(t) {
        sql  = "CREATE TABLE IF NOT EXISTS t_test (";
        sql += " id INTEGER,";
        sql += " name TEXT)";
        t.executeSql(sql, [], function(t) {
            sql = "DELETE FROM t_test";
            t.executeSql(sql, []);
            sql = "INSERT INTO t_test (id, name) VALUES(?, ?)";
            t.executeSql(sql, [1, "佐藤"]);
            t.executeSql(sql, [2, "鈴木"]);
            t.executeSql(sql, [3, "高橋"]);
            t.executeSql(sql, [4, "田中"]);
            t.executeSql(sql, [5, "伊藤"]);
            t.executeSql(sql, [6, "山本"]);
            t.executeSql(sql, [7, "渡辺"]);
            t.executeSql(sql, [8, "中村"]);
            t.executeSql(sql, [9, "小林"]);
            t.executeSql(sql, [10, "加藤"]);
        });
    });
}
// 名簿データ取得
function getData($scope) {
    var sql = null;
    var list = [];
    var db = window.openDatabase("testdb", "1.0", "testdb", 1024 * 1024);
    db.transaction(function(t) {
        sql  = "SELECT *";
        sql += " FROM t_test";
        sql += " ORDER BY id";
        t.executeSql(sql, [], function(t, r) {
            for (i = 0; i < r.rows.length; i++) {
                list.push({
                    id:     r.rows.item(i).id,
                    name:   r.rows.item(i).name
                });
            }
            $scope.listTable = list;
            $scope.$apply();
        },
        function(t, err) {
            console.log(err.code + " " + err.message);
        });
    });
}
    </script>
</head>
<body>
    <ons-template id="page1.html">
        <ons-page ng-controller="page1Controller">
            <ons-toolbar fixed-style>
                <div class="center">Page1</div>
            </ons-toolbar>
            <ons-list>
                <ons-list-header>
                    名簿
                </ons-list-header>
                <ons-list-item ng-repeat="item in listTable">
                    <ons-row>
                        <ons-col width="20%">
                            {{item.id}}
                        </ons-col>
                        <ons-col width="80%">
                            {{item.name}}
                        </ons-col>
                    </ons-row>
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-template>

    <ons-template id="page2.html">
        <ons-page ng-controller="page2Controller">
            <ons-toolbar fixed-style>
                <div class="center">Page2</div>
            </ons-toolbar>
            <br>
            <div style="text-align: center;">
                <ons-button ng-click="goUrl()">stackoverflow</ons-button>
            </div>
        </ons-page>
    </ons-template>

    <ons-tabbar>
        <ons-tab page="page1.html" label="Page1" icon="ion-home" active="true"></ons-tab>
        <ons-tab page="page2.html" label="Page2" icon="ion-earth"></ons-tab>
    </ons-tabbar>
</body>
</html>

1 件の回答 1

1

自己回答です。
InAppBrowserプラグインを使用してブラウザを表示すると、DB参照先が

/data/data/パッケージ名/app_database

から

/data/data/パッケージ名/app_inAppBrowserDB

に変わってしまうため、"no such table"が発生するようです。

table not found when coming back from in app browser link: Phonegap

カスタマイズしたCordovaプラグインを導入すれば解決しそうですが、BASICプランなのでそれ以外の方法を考えました。

起動時にhidden=yesでブラウザを表示させ、数秒待ってブラウザを閉じた後にテーブルを作成します。
DB参照先がapp_inAppBrowserDBに切り替わった後にテーブルを作成するため、以降は"no such table"が発生せずに動作するようです。

書き直したコードを載せておきます。

<!DOCTYPE HTML>
<html la="ja">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    <script>
var app = ons.bootstrap("myApp", ["onsen"]);
// index
app.controller("indexController", ["$scope", function($scope) {
    $scope.ready = false;
    ons.ready(function() {
        var w = window.open("", "_blank", "location=no,hidden=yes");
console.log("open browser");
        setTimeout(function() {
            w.close();
console.log("close browser");
            initData($scope);
        }, 500);
    });
    $scope.$on("initData", function(e) {
        $scope.ready = true;
        $scope.$apply();
console.log("ready");
    });
}]);
// page1
app.controller("page1Controller", ["$scope", function($scope) {
    $scope.listTable = [];
    // indexControllerのreadyを監視
    $scope.$watch("ready", function(newVal, oldVal) {
        if (newVal == true) {
            getData($scope);
        }
    });
    $scope.$on("getData", function(e, list) {
        $scope.listTable = list;
        $scope.$apply();
console.log("get data");
    });
}]);
// page2
app.controller("page2Controller", ["$scope", function($scope) {
    $scope.goUrl = function() {
        window.open("http://ja.stackoverflow.com/", "_blank", "location=yes");
    };
}]);
// DB初期化
function initData($scope) {
    var sql = null;
    var db = window.openDatabase("testdb", "1.0", "testdb", 1024 * 1024);
    db.transaction(function(t) {
        sql  = "CREATE TABLE IF NOT EXISTS t_test (";
        sql += " id INTEGER,";
        sql += " name TEXT)";
        t.executeSql(sql, [], function(t) {
            sql  = "SELECT COUNT(*) AS rowcount";
            sql += " FROM t_test";
            t.executeSql(sql, [], function(t, r) {
console.log("reccount = " + r.rows.item(0).rowcount);
                if (r.rows.item(0).rowcount == 0) {
                    sql = "INSERT INTO t_test (id, name) VALUES(?, ?)";
                    t.executeSql(sql, [1, "佐藤"]);
                    t.executeSql(sql, [2, "鈴木"]);
                    t.executeSql(sql, [3, "高橋"]);
                    t.executeSql(sql, [4, "田中"]);
                    t.executeSql(sql, [5, "伊藤"]);
                    t.executeSql(sql, [6, "山本"]);
                    t.executeSql(sql, [7, "渡辺"]);
                    t.executeSql(sql, [8, "中村"]);
                    t.executeSql(sql, [9, "小林"]);
                    t.executeSql(sql, [10, "加藤"]);
console.log("insert data");
                }
            });
        });
    },
    function(err) {
        console.log(err.code + " " + err.message);
    },
    function() {
        $scope.$emit("initData");
    });
}
// 名簿データ取得
function getData($scope) {
    var sql = null;
    var list = [];
    var db = window.openDatabase("testdb", "1.0", "testdb", 1024 * 1024);
    db.transaction(function(t) {
        sql  = "SELECT *";
        sql += " FROM t_test";
        sql += " ORDER BY id";
        t.executeSql(sql, [], function(t, r) {
            for (i = 0; i < r.rows.length; i++) {
                list.push({
                    id:     r.rows.item(i).id,
                    name:   r.rows.item(i).name
                });
            }
        },
        function(t, err) {
            console.log(err.code + " " + err.message);
        });
    },
    function(err) {
        console.log(err.code + " " + err.message);
    },
    function() {
        $scope.$emit("getData", list);
    });
}
    </script>
</head>
<body ng-controller="indexController">
    <ons-template id="page1.html">
        <ons-page ng-controller="page1Controller">
            <ons-toolbar fixed-style>
                <div class="center">Page1</div>
            </ons-toolbar>
            <ons-list>
                <ons-list-header>
                    名簿
                </ons-list-header>
                <ons-list-item ng-repeat="item in listTable">
                    <ons-row>
                        <ons-col width="20%">
                            {{item.id}}
                        </ons-col>
                        <ons-col width="80%">
                            {{item.name}}
                        </ons-col>
                    </ons-row>
                </ons-list-item>
            </ons-list>
        </ons-page>
    </ons-template>

    <ons-template id="page2.html">
        <ons-page ng-controller="page2Controller">
            <ons-toolbar fixed-style>
                <div class="center">Page2</div>
            </ons-toolbar>
            <br>
            <div style="text-align: center;">
                <ons-button ng-click="goUrl()">stackoverflow</ons-button>
            </div>
        </ons-page>
    </ons-template>

    <ons-tabbar>
        <ons-tab page="page1.html" label="Page1" icon="ion-home" active="true"></ons-tab>
        <ons-tab page="page2.html" label="Page2" icon="ion-earth"></ons-tab>
    </ons-tabbar>
</body>
</html>
2
  • 上記のように回答しましたが、この方法が最善とは思えないので、Web SQLとInAppBrowserの組み合わせは諦めるか、ブラウザ表示後に再起動させた方が無難かもしれません。
    – otak-lab
    Commented 2015年9月28日 11:35
  • MonacaがCordova 5.2にアップデートしましたが、その際にInAppBrowserもアップデートされ、WebView表示から戻るとアプリを再起動?する動きになるようです。
    – otak-lab
    Commented 2015年12月9日 8:53

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。