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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

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

Cordova

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

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

Q&A

解決済

1回答

2013閲覧

MonacaでWKWebViewを使って、firebase(Firestore)を利用するとデータが取得できない。

3helmet

総合スコア8

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

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

Cordova

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Monaca

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

0グッド

0クリップ

投稿2020/06/14 16:14

前提・実現したいこと

Monacaでfirebaseを使ってアプリを開発しています。
少し前にWKWebViewに変更し移行が完了したと思っていましたが、firebaseのcloudFirestoreとの通信ができていないようです。
作っていたアプリはそのfirebaseとの通信以外は正常に動いています。ちなみにauthenticationとcloudFirestoreを利用していますが、cloudFirestoreのデータが取れません。ログインはできるので、Authenticationは通信できているようです。

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

Monacaの開発環境でのデバッガー?プレビュー?上では正しくデータを取得してくれるが、ビルドをして動かすと「まだ記録がありません。」という表示になってしまう。おそらくカスタムビルドデバッガーや、プレビュー上ではUIWebViewでやっていて、ビルドしたものはWKWebViewになっていて、その辺りが原因ではないかと考えています。

エラーメッセージについてですが、エラーメッセージを実機上またはシミュレータ上で確認する方法がわからないので載せることができません。これについてもやり方が分かる方は教えていただきたいです。

該当のソースコード

HTML

1<!DOCTYPE HTML> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 6 <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> 7 <script src="components/loader.js"></script> 8 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> 9 <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 10 <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script> 11 <link rel="stylesheet" href="components/loader.css"> 12 <link rel="stylesheet" href="css/style.css"> 13 <!-- The core Firebase JS SDK is always required and must be listed first --> 14 <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script> 15 16 <!-- TODO: Add SDKs for Firebase products that you want to use 17 https://firebase.google.com/docs/web/setup#available-libraries --> 18 <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js"></script> 19 <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script> 20 <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-firestore.js"></script> 21 <!-- Vue.js--> 22 <script src="https://cdn.jsdelivr.net/npm/vue"></script> 23 <script src="js/app.js"></script> 24</head> 25<body> 26 <ons-navigator swapable id="myNavigator" page="index.html"></ons-navigator> 27</body> 28</html> 29 30<template id="index.html"> 31 <ons-page id="index"> 32 <div class="background" style="background-color: #FFFFFF;"></div> 33 <div class="content" v-cloak> 34 <div v-if="!tutorialFinish"> 35 <a @click="goTutorial"><img class="logo" src="images/ダウンロード後_シンボル_顔なし.png"></a> 36 </div> 37 <div v-else> 38 <header v-show="currentUser != null"> 39 <div :class="{ menu_btn: true, open_: menuFlag }" @click="naviOpen"> 40 <span class="menu_trigger"> 41 <span></span><span></span><span></span> 42 </span> 43 </div> 44 </header> 45 <transition> 46 <div class="nav" v-show="menuFlag"> 47 <input type="checkbox" id="acd-check1" class="acd-check"> 48 <label for="acd-check1" class="acd-label">OPTIONS </label> 49 <div class="acd-content"> 50 <a @click="urlClick">利用規約</a> 51 <a @click="urlClick">プライバシー<br>ポリシー</a> 52 <a @click="goFeedback">フィードバック</a> 53 <a @click="goTutorial">チュートリアル</a> 54 </div> 55 <a @click="logoutButtonClick" class="signout">SIGN OUT</a> 56 </div> 57 </transition> 58 59 <div v-show="loading"> 60 <div id="notSignIn" v-if="currentUser == null"> 61 <p><img class="logo" src="./images/サインイン前_シンボル.png" alt="ロゴ"></p> 62 <a @click="loginButtonClick"><img class="img-button" src="images/各種ボタン/signin_ボタン.png"></a><br> 63 <a @click="signUpButtonClick"><img class="img-button" src="images/各種ボタン/register_ボタン.png"></a> 64 </div> 65 <div id="isSignIn" v-else> 66 <a @click="goAnalyze"><img class="logo" src="./images/home_シンボル.png" alt="ロゴ"></a> 67 <p style="color: #7B7B7B; margin: 0;">Recents</p> 68 <div class="recode" v-if="recent.length!=0"> 69 <a v-for="data in recent" class="data" @click="onDataButton(data)"> 70 <span>{{ data.timestamp.getFullYear() }}/{{ ('0'+(data.timestamp.getMonth()+1)).slice(-2) }}/{{ data.timestamp.getDate() }}</span> 71 <p>{{ data.answers[0] }}</p> 72 <hr> 73 </a> 74 </div> 75 <div v-else> 76 <p style="padding: 80px 0;">まだ記録がありません。</p> 77 </div> 78 </div> 79 </div> 80 <my-toolbar v-show="currentUser != null"></my-toolbar> 81 </div> 82 </div> 83 84 <script> 85 ons.getScriptPage().onInit = function() { 86 sBanner(); 87 var vm_i = new Vue({ 88 el: '#index', 89 data: { 90 currentUser: null, 91 recent: [], 92 menuFlag: false, 93 tutorialFinish: localStorage.getItem('tutorial_finished'), 94 loading: false, 95 }, 96 created: function() { 97 98 }, 99 methods: { 100 loginButtonClick: function () { 101 hBanner(); 102 document.getElementById("myNavigator").pushPage('account.html', {data: {title: 'アカウント'}}); 103 }, 104 signUpButtonClick: function () { 105 hBanner(); 106 document.getElementById("myNavigator").pushPage('register.html', {data: {title: 'アカウント'}}); 107 }, 108 logoutButtonClick: function () { 109 firebase.auth().signOut(); 110 this.menuFlag = false; 111 }, 112 naviOpen: function() { 113 this.menuFlag = !this.menuFlag; 114 }, 115 onDataButton: function(data) { 116 hBanner(); 117 if (data.complete) { 118 document.getElementById("myNavigator").pushPage('result.html', { 119 data: { 120 qAndA: data, 121 recode: true, 122 } 123 }); 124 } else { 125 document.getElementById("myNavigator").pushPage('question.html', { 126 data: { 127 qAndA: data, 128 } 129 }); 130 } 131 }, 132 goTutorial: function() { 133 hBanner(); 134 document.getElementById("myNavigator").pushPage('explain.html'); 135 }, 136 goAnalyze: function() { 137 document.getElementById("myNavigator").resetToPage('analyze.html'); 138 }, 139 goFeedback: function() { 140 hBanner(); 141 document.getElementById("myNavigator").pushPage('feedback.html'); 142 }, 143 urlClick: function() { 144 window.open("https://...", "_system", "location=no,usewkwebview=yes"); 145 } 146 }, 147 }); 148 firebase.auth().onAuthStateChanged(function(user) { 149 if (user) { 150 console.log(user.uid); 151 vue.recent = getQuestionAndAnswer(2); 152 ons.notification.toast(vue.recent, {timeout: 2000, animation: "fall"}); 153 } else { 154 console.log("not LogedIn"); 155 } 156 vue.currentUser = user; 157 vue.loading = true; 158 }); 159 } 160 </script> 161 </ons-page> 162</template>

試したこと

Monacaで様々なビルドでの実行を行ってみました。それぞれのビルドでのバグの状態は以下の通りです。
カスタムビルドデバッガー:正しくデータが表示される。
デバッグビルド:表示されない。
シミュレータービルド:表示されない。

https://strobolight-developers-blog.hatenablog.com/
上記サイトの

config.xmlへ下記を入れることで、取得出来るようになりました。

<preference name=“InterceptRemoteRequests” value=“none” />

という部分をやってみようとしたのですが、InterceptRemoteRequestsがないみたいなエラーが発生しました。

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

  • 開発環境

Macbook Air 2020
Visual Studio Code
Monaca localkit 3.4.3 または Monaca Cloud IDE

  • Monacaプラグイン

cordova-plugin-admob-free:v0.27.0
Cordova WKWebView File XHR Plugin:v2.1.4
cordova-custom-config:v5.1.0
monaca-plugin-monaca-core:v3.3.0
cordova-plugin-x-socialsharing:v5.6.5
cordova-plugin-splashscreen:v5.0.3
cordova-plugin-whitelist:v1.3.3
cordova-plugin-wkwebview-engine:v1.2.1

  • シミュレーター

実機:iPhone Xs(13.4.1)
シミュレータ:iPhone SE(2nd Generation)

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

Monaca上では解決しませんでした。
システムをただのCordovaに変更したことで、アクセスが可能となりました。

投稿2020/07/29 06:10

3helmet

総合スコア8

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問