言霊会話にゃお 様
専用ご提案サイト by LIXデザイン
TECHNICAL

なぜエラーが起きるのか、専門用語なしでご説明します

実際のソースコードはまだ拝見していないため、以下は募集文に記載いただいたエラー文をもとにした「よくあるパターン」としての一般的な診断です。

結論から

「読み込み順」の前に、もっと根本的な原因があります

安藤様は募集文で「Web SQLの廃止、またはdeviceready イベントの制御が原因かもしれません」と的確に推測されていました。実はその通りで、ほぼ間違いなくWeb SQLの廃止が本質的な原因です。 jQuery / Onsen UI / AngularJS の読み込み順の警告は、同時に出ている「別件の軽い注意」である可能性が高く、切り分けて対応する必要があります。

時期Android WebView / Chromewindow.openDatabase（Web SQL）
〜2022年頃旧バージョン動作していた
2023年以降最新のWebView / Chrome廃止・undefinedに

※ Web SQL（openDatabase）はブラウザの標準仕様から正式に廃止された古いAPIです。数年前に作られたMonaca/Cordovaアプリで特によく見られる症状です。

原因の仕組み

エラーが出るまでの流れ

  1. ページが読み込まれる

    アプリ起動時に、相談履歴の画面やアプリ全体のスクリプトが読み込まれます。

  2. コード内で window.openDatabase(...) が呼ばれる

    相談記録を保存するタイミングで、昔ながらのWeb SQL用の命令が実行されます。

  3. 最新のWebViewには openDatabase が存在しない

    window.openDatabase が undefined になっているため、その先の .openDatabase を読もうとして「Cannot read properties of undefined (reading 'openDatabase')」というエラーが発生します。

  4. 保存処理がそこで止まる

    データベース接続自体が失敗しているため、相談記録の保存も一覧の更新も行われません。

修正の方向性

Before / After コード比較

実際のコードを拝見していないため、あくまで典型的な修正パターンのイメージです。多くの場合、以下のように置き換えることで解決します。

修正前（Web SQL・廃止済み）
// ページ読み込み直後に実行してしまっている
var db = window.openDatabase(
  'consultations.db', '1.0',
  'Nyao DB', 2 * 1024 * 1024
);

db.transaction(function (tx) {
  tx.executeSql('INSERT INTO ...');
});
修正後（SQLiteプラグイン + deviceready）
// deviceready 発火後に実行する
document.addEventListener('deviceready', function () {
  var db = window.sqlitePlugin.openDatabase({
    name: 'consultations.db',
    location: 'default'
  });

  db.transaction(function (tx) {
    tx.executeSql('INSERT INTO ...');
  });
}, false);

ポイントは2つです。①ブラウザ標準から廃止された window.openDatabase の代わりに、Cordovaの定番プラグイン cordova-sqlite-storage（window.sqlitePlugin.openDatabase）を使う。②アプリが完全に起動し終わった合図である deviceready イベントの後にDB処理を実行する。この2点を直せば、多くの場合エラーは解消します。

もう一つの警告について

jQuery / Onsen UI / AngularJS の読み込み順

こちらはWeb SQLの件とは別に、スクリプトタグの並び順に関する注意です。Onsen UIやAngularJSは、内部でjQueryやAngularの機能を前提にしている部分があるため、読み込み順が崩れると警告や予期しない挙動が出ることがあります。

基本の正しい順序は次の通りです。

推奨の読み込み順
1. jquery.min.js
2. angular.min.js
3. angular-*（AngularJSの拡張系）
4. onsenui.js / angular-onsenui.js
5. cordova.js（Monaca/Cordovaの本体）
6. 自作の app.js（deviceready処理を含む）

ソースコード拝見後、実際の <script> タグの並びを確認し、必要であれば正しい順序に整理いたします。

🔍 上記はいずれも、いただいたエラー文からの一般的な診断です。実際にzipファイルを拝見した際に、これと異なる原因が見つかった場合も、追加費用なく無理のない範囲で調整いたします。

この診断に、心当たりはありましたか？

もしこの説明でしっくりきていただけたら、あとは実際のコードを拝見して確定させるだけです。私の対応方針と強みも、よろしければご覧ください。

対応方針・強みを見る →