質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.35%

  • Monaca

    1176questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • Firebase

    1061questions

    Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

  • Cordova

    499questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。

Monacaでloader.jsを読み込むとFirestoreのデータが取得できない。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 761

ujiro99

score 9

 前提・実現したいこと

Monaca, Vue, Vuex を使ったモバイルアプリを作っています。
このアプリで、FirebaseのCloud Firestoreからデータを取得しようとしています。
Monaca IDE でiOSのデバッグビルドで動かしたところ、下記の状態に陥っています。

  • www/index.html でloader.jsを読み込んだ場合、Firestoreからデータが取得出来ない。
  • www/index.html でloader.jsを読まない場合、Firestoreからデータが取得出来る。

Push通知などのPluginを使用するため、loader.jsはどうしても外すことが出来ません。
どなたか、情報があれば教えて頂けないでしょうか?

 発生している問題・エラーメッセージ

Firestoreからの情報が取得出来ない場合には、Webインスペクタのコンソールに下記のエラーが出ます。

[Error] [2018-10-18T07:01:04.315Z]  @firebase/firestore:
[Error] Firestore (5.5.0): Could not reach Cloud Firestore backend. Backend didn't respond within 10 seconds.
This typically indicates that your device does not have a healthy Internet connection at the moment. The client will operate in offline mode until it is able to successfully connect to the backend.

 該当のソースコード

Firestoreの初期化、データ取得を行っている箇所のソースコードです。

〜〜 省略 〜〜

init({ commit }) {
  const db = firebase.firestore()
  db.settings({ timestampsInSnapshots: true })
  commit('setDatabase', db)
},

connect({ commit, state }) {
  const msg = state.database.collection('messages')

  // 更新時コールバックの登録
  let unsubscribe = msg.orderBy('_createdAt').onSnapshot(
    function(snapshot) {
      snapshot.docChanges().forEach(function(change) {
        if (change.type === 'added') {
          commit('addMessage', change.doc.data())
        }
        if (change.type === 'removed') {
          commit('removeMessage', change.doc.get('id'))
        }
      })
    },
    function(err) {
      Log.error(err)
    }
  )

  commit('setConnection', {
    ref: msg,
    unsub: unsubscribe
  })
},
〜〜 省略 〜〜

 試したこと

  • index.htmlから、Pluginやライブラリを読み込む components/loader.js を外すと、Firestoreのデータが取得できる。
  • index.htmlの components/loader.js を読み込む位置を変える → 取得出来ない
  • index.htmlの components/loader.js を cordova.js へ変える → 取得出来ない
  • index.htmlの Content-Security-Policy へ connect-src * blob: を追加 → 取得出来ない
<meta http-equiv=Content-Security-Policy content="default-src * data: gap: https://ssl.gstatic.com; connect-src * blob:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

 補足情報(FW/ツールのバージョンなど)

動作確認端末

  • iPhoneX 11.4.1
  • iPhone6s Plus 11.4.1

ビルド環境

  • cordova: 7.1.0
  • cordova-ios: 4.5.4

依存パッケージ(package.jsonより抜粋)

"dependencies": {
    "axios": "^0.18.0",
    "cordova-custom-config": "5.0.2",
    "cordova-plugin-app-version": "",
    "cordova-plugin-inappbrowser": "2.0.1",
    "cordova-plugin-splashscreen": "5.0.1",
    "cordova-plugin-whitelist": "1.3.3",
    "cordova-plugin-wkwebview-file-xhr": "",
    "cordova-plugin-wkwebview-inputfocusfix": "",
    "date-fns": "^1.29.0",
    "firebase": "^5.5.2",
    "monaca-plugin-monaca-core": "3.2.0",
    "onsenui": "^2.10.3",
    "phonegap-plugin-push": "",
    "vue": "^2.5.16",
    "vue-analytics": "^5.16.0",
    "vue-axios": "^2.1.3",
    "vue-onsenui": "^2.6.1",
    "vuejs-logger": "^1.5.3",
    "vuex": "^3.0.1"
}

 追記(2018/10/19)

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: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <meta name=format-detection content="telephone=no">

    <!-- 元の位置
    <script type=text/javascript src=components/loader.js></script>
    -->

    <link rel=stylesheet type=text/css href=components/loader.css>
    <link href=app.css rel=stylesheet>
  </head>
  <body>
    <div id=app></div>

    <script type=text/javascript src=runtime~app.bundle.js></script>
    <script type=text/javascript src=vendors~app.bundle.js></script>
    <script type=text/javascript src=app.bundle.js></script>

    <!-- 移動後 -->
    <script type=text/javascript src=components/loader.js></script>

  </body>
</html> 
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

index.htmlで読み込んでいるスクリプトの順番はどのようになっていますか? 
loader.jsを読み込む順番を一番最後にしてみても、変わらないでしょうか?

2018/10/22 追記

config.xmlに

    <preference name="InterceptRemoteRequests" value="none" />

を追加すると、httpsプロトコルに対してcordova-plugin-wkwebview-file-xhr プラグインが動作しなくなる(fileプロトコルのみに対して動作する)ようなので、解決出来るようです。お試しいただけますでしょうか?

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/22 14:57

    上記内容を、回答に追記しました。

    キャンセル

  • 2018/10/23 11:43 編集

    ご記載頂いた方法で解決することが出来ました!
    プラグインの調査までして頂き、誠にありがとうございます。
    プラグインを使うときには影響範囲を見極める必要があると、改めて認識致しました。。

    キャンセル

  • 2018/10/23 12:10

    うまく動作したようでよかったです!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.35%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Monaca

    1176questions

    「Monaca」はiOS、Android、Windows向けのアプリ開発に対応した、Cordovaベースのモバイルアプリ開発プラットフォームです。HTML5、JavaScriptといったWeb標準技術を用いてモバイルアプリ開発を行うことができます。

  • Firebase

    1061questions

    Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

  • Cordova

    499questions

    Cordovaは様々なデバイスで使うことができるオープンソースなモバイル用開発プラットフォームです。開発者に各デバイスの元のプラットフォームで開発する必要をなくし、HTML・JavaScript・CSSなどの一般的なウェブのテクノロジーを使ってすべてのデバイスで展開することができるモバイルのアプリケーションを生成することを可能にします。