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

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

新規登録して質問してみよう
ただいま回答率
85.51%
Firebase

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

692閲覧

Firebaseのimport エラーについて

CCHH

総合スコア11

Firebase

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/11/04 04:26

編集2019/11/04 12:07

###firebase import エラーについて

firebaseを用いて、google認証機能をつけたチャットアプリを作成中です。
そのアプリ内にルート検索機能もつけていて、APIはmicrosoftの Bing mapsを使用しています。
チャットメッセージ送信時に、現在地を取得し、チャットのメッセージ、送信者、現在地をfirebaseに保存するよう設定しました。

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

上記、firebaseへの保存は全く問題なく実行されていますが、firebaseへの保存が出来るようになると、Bing mapsが表示されなくなり、ルート検索も出来なくなったので困っています。

エラーメッセージ
It looks like you're using the development build of the Firebase JS SDK.
When deploying Firebase apps to production, it is advisable to only import
the individual SDK components you intend to use.

For the CDN builds, these are available in the following manner
(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):

https://www.gstatic.com/firebasejs/5.0.0/firebase-<PACKAGE>.js

試したこと

Quiitaなどで調べた所、importの部分を書き換えれば良いと記載されていますが、そもそもどこにimportがあるか探せず・・・
コードを何回も見返しているのですが、どこを訂正すれば良いかわからず困っています。
初歩的な質問で申し訳ございませんが、教えて頂ければ幸いです。よろしくお願いします。

###正しい場所かどうかわかりませんが、以下問題がある可能性があるコードです。

<!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries -->

firebase.initializeApp(firebaseConfig);
const newPostRef=firebase.database().ref();

// 送信アクション
function GetMap(){
const map = new Bmap("#myMap");
map.geolocation(function(data) {
//location
const lat = data.coords.latitude;
const lon = data.coords.longitude;
console.log(lat);
console.log(lon);
})};
$("#send").on("click",function(){
GetMap()
const map = new Bmap("#myMap");map.geolocation(function(data) {
const lat = data.coords.latitude;
const lon = data.coords.longitude;
console.log(lat);
console.log(lon);
newPostRef.push({
username:$("#name option:selected").text(),
text:$("#text").val(),
text:$("#text").val()+"<br>"+ (today_time+"に送信"),
place:(lat,lon),
})
});
});
// 受信
newPostRef.on("child_added",function(data){
// データ取得
const d=data.val();
// key名
const k=data.key;
// 表示
if(d.username=="Aさん"){
let str="<div id=asan>"+"<h2>"+d.username+"</h2>"+d.text+"</div>";
$("#output").append(str);
送信者の名前をセレクターで選べるようにして、送信者ごとに背景などを変えたいのでif分で表示のアクションも分けています。

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

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

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

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

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

YukiSaegusa

2019/11/04 08:55

コードもつけていただきたいです
CCHH

2019/11/04 10:00

ご質問ありがとうございます。どこのコードを付ければよろしいでしょうか?どこもエラーが出ていないので、どの部分を付ければ良いかもわからず・・・初心者で至らない点が多く申し訳ございません。
YukiSaegusa

2019/11/04 10:01

現在importをしているfileを見せていただきたいです
CCHH

2019/11/04 10:05

importしているファイルというのは、firebaseに保存するデータでしょうか?
YukiSaegusa

2019/11/04 10:15

上記のエラーが発生したと思われる、CCHHさんが書いたコードが見たいです。 そもそもそのエラーがでたコードというのはご自身で書かれたものでしょうか?それともライブラリか何かの中で発生しているエラーですか?
CCHH

2019/11/04 10:22

問題が発生していると思われるコードを載せてみました。場所が間違っていたらすいません。ライブラリーは使用していので、自分で書いたものです。素人のコードで本当に恐縮です。
YukiSaegusa

2019/11/04 10:38

ありがとうございます! 他に、firebaseを使っている部分はないですかね?
CCHH

2019/11/04 10:42

firebaseに保存しているのは上記 username:$("#name option:selected").text(), text:$("#text").val(), text:$("#text").val()+"<br>"+ (today_time+"に送信"), place:(lat,lon), だけです。 firebaseとは別でBing mapのルート検索もありますが、こちらのルート検索機能はfirebaseとは関係ありません。現在地の取得だけ上記のように利用しています。
YukiSaegusa

2019/11/04 10:49

そのnewPostRefはどのように定義しているのですか?
YukiSaegusa

2019/11/04 10:49

そこでfirebaseの何らかをimportしていると思うのですが
CCHH

2019/11/04 11:08

const newPostRef=firebase.database().ref(); と定義しています。 上記追加しました。
YukiSaegusa

2019/11/04 11:26

ありがとうございます。 そこのfirebaseを定義している部分が問題だと思います。 import firebase from 'firebase' または var firebase = reqire ('firebase') のような記述はありませんか? 一番上に書いてあると思います
CCHH

2019/11/04 11:52

教えて頂いたような記述は見当たりません。 firebase.initializeApp(firebaseConfig); これはまた別でしょうか? const newPostRefの上に記載があります。
CCHH

2019/11/04 11:56

firebase.initializeApp(firebaseConfig);の上には、apiKey、 authDomain、databaseURL、 projectId、 storageBucket、messagingSenderId、appIdが記載されています。
YukiSaegusa

2019/11/04 11:59

それともまた別です。 firebaseを用いている時点で、その変数はどこかで宣言しているはずです。(宣言していなかったら、firebase is undefinedのエラーが出るはず) では、firebaseで全体検索をかけて見てください。大抵のエディタには検索機能がついていると思います。
CCHH

2019/11/04 12:06

コードを記載しているファイル全体に"firebase"で検索をかけてみた結果、 上記 const newPostRef=firebase.database().ref(); firebase.initializeApp(firebaseConfig); 以外では、 <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/7.2.3/firebase.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> でした。 コードに追加します。
CCHH

2019/11/04 13:52

今変えてみましたが、エラーが3点出ました。 1. html内にある、firebase.initializeApp(firebaseConfig)が Uncaught ReferenceError: firebase is not defined
CCHH

2019/11/04 13:53

2.index.ts:55 TypeError: Cannot read property 'SDK_VERSION' of undefined 3.index.ts:55 Uncaught Error: Cannot instantiate firebase-database - be sure to load firebase-app.js first.
CCHH

2019/11/04 13:56

何度も本当に申し訳ございません。結構ご負担になってきていると思います。お手数でしたら大丈夫です・・・予想以上に大変ですね・・・
YukiSaegusa

2019/11/06 09:23

エラー内容をよく読んで、書いてあるurlには一度とんで読むことは大切です。 今回であれば <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> とあるので、このurlにとんで、読んで見ましょう。大体は解決法が書いてあります。
CCHH

2019/11/07 06:21

ご返答ありがとうございます!!承知しました。もう少し読んで探してみます! ありがとうございます!!
guest

回答1

0

自己解決

私がエラーメッセージだと思っていた上記エラーメッセージはそもそも今回の問題には関係なく、上記Getmapを2回繰り返している事が問題でした。
実際は位置情報取得及びルート検索のため、さらにこの上にもう1つGetmapを記載しています。同じファイル内でなんどもGetmapを繰り返し、Getmapがぐるぐる回っているようになっていたので、やりたい事ができなかったみたいです。
上記コードの最初のGetmapを消してみると出来ました。

親身に相談に乗って頂いた方には本当に感謝しています。
私もいつかここで困っている方を助けられるくらい、技術を身に付けたいです!!

投稿2019/11/09 22:11

CCHH

総合スコア11

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問