ローカルでは反映できるが、firebaseでログインした後だと反応しない

＜流れ＞
１．表をクリックする（時間割）
２．モーダルで講義名を打ち込み、セレクトボックスから教室番号を選択する
３．例えば月曜日1限ならそこに反映される

※イメージ

	月曜日	火曜日
1限
2限
3限
4限
5限
6限

これが月曜日～土曜日まであって、それぞれクリックすると反映されるものです。

ここまではログイン機能なし(firebaseなし）でやった時は異常なく
反映されました。
ただ、ログインをした後、表をクリックしてみても何も起こらなくなりました。

コードが長いのですが、全部貼り付けます。

Firebaseのソースコードはsectionが終わった後にあります。

html,css,JavaScript,jQuery
1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <script src = "jquery-3.6.0.min.js"></script>
6  <title>Firebase Auth for Google</title>
7  <style type = "text/css">
8    a.allLink{
9      display:block;
10      text-decoration:none;
11    }
12    img{
13      max-width:100%;
14      height:auto;
15    }
16    table{
17      margin:0 auto;
18    }
19    .subTitle{
20      text-decoration:underline;
21    }
22    /*モーダルを開くボタン*/
23    .modal-open{
24      cursor: pointer;
25    }
26    /*モーダル本体の指定 + モーダル外側の背景の指定*/
27    .modal-container{
28      position: fixed;
29      top: 0;
30      left: 0;
31      width: 100%;
32      height: 100%;
33      text-align: center;
34      background: rgba(0,0,0,50%);
35      padding: 40px 20px;
36      overflow: auto;
37      opacity: 0;
38      visibility: hidden;
39      transition: .3s;
40      box-sizing: border-box;
41    }
42    /*モーダル本体の擬似要素の指定*/
43    .modal-container:before{
44      content: "";
45      display: inline-block;
46      vertical-align: middle;
47      height: 100%;
48    }
49    /*モーダル本体に「active」クラス付与した時のスタイル*/
50    .modal-container.active{
51      opacity: 1;
52      visibility: visible;
53    }
54    /*モーダル枠の指定*/
55    .modal-body{
56      position: relative;
57      display: inline-block;
58      vertical-align: middle;
59      max-width: 500px;
60      width: 90%;
61    }
62    /*モーダルを閉じるボタンの指定*/
63    .modal-close{
64      position: absolute;
65      display: flex;
66      align-items: center;
67      justify-content: center;
68      top: -40px;
69      right: -40px;
70      width: 40px;
71      height: 40px;
72      font-size: 40px;
73      color: #fff;
74      cursor: pointer;
75    }
76    /*モーダル内のコンテンツの指定*/
77    .modal-content{
78      background: #fff;
79      text-align: left;
80      padding: 30px;
81    }
82    
83  </style>
84</head>
85<body>
86  <section>
87    <h1></h1>
88    <div id="info"></div>
89    <h1 class = "subTitle">時間割</h1>
90
91    <!--モーダル-->
92    <div class="modal-container">
93      <div class="modal-body">
94        <div class="modal-close">×</div>
95        <div class="modal-content">
96          <input id = "kougi1-1" type = "text" placeholder = "講義名を入力">
97          <select id = "selectRoom">
98            <option value = "">部屋番号を選択してください</option>
99            <option class = "1-101" value = "1-101">1-101</option>
100            <option value = "1-102">1-102</option>
101            <option value = "1-105">1-105</option>
102            <option value = "2-101">2-101</option>
103            <option value = "2-102">2-102</option>
104            <option value = "2-103">2-103</option>
105            <option value = "2-104">2-104</option>
106            <option value = "2-105">2-105</option>
107          </select>
108          <input id = "kakutei1-1" type = "submit" value = "確定">
109        </div>
110      </div>
111    </div>
112
113     
114
115    <table border = "1" style = "border-collapse: collapse;">
116      
117      <!--時間割-->
118      <tr>
119       <th></th>
120       <th>月</th>
121       <th>火</th>
122       <th>水</th>
123       <th>木</th>
124       <th>金</th>
125       <th>土</th>
126      </tr>
127      <!--1限-->
128      <tr>
129        <th>　1限　</th>
130        <th><a  class = "allLink modal-open MonOne">　　　　<br>　　　　</a></th>
131        <th><a  class = "allLink modal-open TuesOne">　　　　<br>　　　　</a></th>
132        <th><a  class = "allLink modal-open WednesOne">　　　　<br>　　　　</a></th>
133        <th><a  class = "allLink modal-open ThursOne">　　　　<br>　　　　</a></th>
134        <th><a  class = "allLink modal-open FriOne">　　　　<br>　　　　</a></th>
135        <th><a  class = "allLink modal-open SaturOne">　　　　<br>　　　　</a></th>
136      </tr>
137      <!--2限-->
138      <tr>
139        <th>　2限　</th>
140        <th><a  class = "allLink modal-open MonSec">　　　　<br>　　　　</a></th>
141        <th><a class = "allLink modal-open TuesSec">　　　　<br>　　　　</a></th>
142        <th><a  class = "allLink modal-open WednesSec">　　　　<br>　　　　</a></th>
143        <th><a  class = "allLink modal-open ThursSec">　　　　<br>　　　　</a></th>
144        <th><a  class = "allLink modal-open FriSec">　　　　<br>　　　　</a></th>
145        <th><a  class = "allLink modal-open SaturSec">　　　　<br>　　　　</a></th>
146      </tr>
147      <!--3限-->
148      <tr>
149        <th>　3限　</th>
150        <th><a  class = "allLink modal-open MonThr">　　　　<br>　　　　</a></th>
151        <th><a  class = "allLink modal-open TuesThr">　　　　<br>　　　　</a></th>
152        <th><a  class = "allLink modal-open WednesThr">　　　　<br>　　　　</a></th>
153        <th><a  class = "allLink modal-open ThursThr">　　　　<br>　　　　</a></th>
154        <th><a  class = "allLink modal-open FriThr">　　　　<br>　　　　</a></th>
155        <th><a  class = "allLink modal-open SaturThr">　　　　<br>　　　　</a></th>
156      </tr>
157      <!--4限-->
158      <tr>
159        <th>　4限　</th>
160        <th><a  class = "allLink modal-open MonFour">　　　　<br>　　　　</a></th>
161        <th><a  class = "allLink modal-open TuesFour">　　　　<br>　　　　</a></th>
162        <th><a  class = "allLink modal-open WednesFour">　　　　<br>　　　　</a></th>
163        <th><a  class = "allLink modal-open ThursFour">　　　　<br>　　　　</a></th>
164        <th><a  class = "allLink modal-open FriFour">　　　　<br>　　　　</a></th>
165        <th><a  class = "allLink modal-open SaturFour">　　　　<br>　　　　</a></th>
166      </tr>
167      <!--5限-->
168      <tr>
169        <th>　5限　</th>
170        <th><a  class = "allLink modal-open MonFive">　　　　<br>　　　　</a></th>
171        <th><a  class = "allLink modal-open TuesFive">　　　　<br>　　　　</a></th>
172        <th><a  class = "allLink modal-open WednesFive">　　　　<br>　　　　</a></th>
173        <th><a  class = "allLink modal-open ThursFive">　　　　<br>　　　　</a></th>
174        <th><a  class = "allLink modal-open FriFive">　　　　<br>　　　　</a></th>
175        <th><a  class = "allLink modal-open SaturFive">　　　　<br>　　　　</a></th>
176      </tr>
177      <!--6限-->
178      <tr>
179        <th>　6限　</th>
180        <th><a  class = "allLink modal-open MonSix">　　　　<br>　　　　</a></th>
181        <th><a  class = "allLink modal-open TuesSix">　　　　<br>　　　　</a></th>
182        <th><a  class = "allLink modal-open WednesSix">　　　　<br>　　　　</a></th>
183        <th><a  class = "allLink modal-open ThursSix">　　　　<br>　　　　</a></th>
184        <th><a  class = "allLink modal-open FriSix">　　　　<br>　　　　</a></th>
185        <th><a  class = "allLink modal-open SaturSix">　　　　<br>　　　　</a></th>
186      </tr>
187    </table>
188
189    <h1 class = "subTitle">学内マップ　　　　</h1>
190    <img src = "image/NaganoMap.JPG">
191    <h1 class = "subTitle">もっと詳しいマップ　　</h2>
192    <img src = "image/NaganoUNIVAll.JPG">
193
194    
195  </section>
196
197  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script>
198  <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script>
199  <script src="config.js"></script>
200  <script>
201    let targetSlot = null;
202    firebase.auth().onAuthStateChanged( (user) => {
203      let h1   = document.querySelector('h1');
204      let info = document.querySelector('#info');
205
206      if(user) {
207        info.innerHTML = `${user.displayName}さんようこそ<br>`;
208      }
209      else {
210        h1.innerText = 'ログインされていないので情報は残りません';
211      }
212    });
213    //月曜1限
214    document.getElementById('kakutei1-1').onclick = function(){
215      targetSlot.innerHTML = "「"+document.getElementById("kougi1-1").value+"」"+"   "+document.getElementById('selectRoom').value;
216    };
217    
218
219    //モーダルの動き
220    
221    $(function(){
222      // 変数に要素を入れる
223      var open = $('.modal-open'),
224      close = $('.modal-close'),
225      container = $('.modal-container');
226
227      //開くボタンをクリックしたらモーダルを表示する
228      open.on('click',function(){ 
229        targetSlot = this;
230        container.addClass('active');
231        return false;
232      });
233
234      //閉じるボタンをクリックしたらモーダルを閉じる
235      close.on('click',function(){  
236        container.removeClass('active');
237      });
238
239      //モーダルの外側をクリックしたらモーダルを閉じる
240      $(document).on('click',function(e) {
241        if(!$(e.target).closest('.modal-body').length) {
242          container.removeClass('active');
243        }
244      });
245    });
246  </script>
247</body>
248</html>
249コード

non_cal

2022/01/25 10:07

コンソールにエラーなどは表示されていないでしょうか？もしあれば質問に追記していただけると回答の助けになります。

行動規範の内容に同意します

回答2件

自己解決

すみませんサーバにjqueryのファイルを上げ忘れていただけのようです。
CDNを使えばこういうミスが減るので反省してます

投稿2022/01/27 23:49

Fujice

総合スコア28

Firebaseが初期化されていません。
Firebase UIはそれを使う前に、まずFirebase自身の初期化が必要です。

JavaScript
1  <script>
2    let targetSlot = null;
3// ↓ここから
4    var firebaseConfig = {
5	apiKey: 'Firebaseのコンソールから取得したAPIキー',
6	authDomain: 'このHTMLのドメイン',
7    };
8    firebase.initializeApp(firebaseConfig);
9// ↑ここまで
10    firebase.auth().onAuthStateChanged( (user) => {
11    ...

Googleのサイトだと、下記のページにFirebase UIの説明があります。
https://firebase.google.com/docs/auth/web/firebaseui?hl=ja#before_you_begin

「FirebaseUI でウェブアプリに簡単にログイン機能を追加する」
...
始める前に

ウェブアプリケーションに Firebase Authentication を追加します。

　　↑このリンク先に、Firebaseの説明が...

...あったのですが、すでにv9の説明しかなくなっていますね。
お使いのバージョンはかなり古い(5.8.1)ですが、v8までは上記のコードのように初期化できました。
v9でもやることは同じですが、"firebase"が登場しなくなるので見た目は違って見えます。

また初期化を追加したところで、ローカルで実行するとエラーになったと記憶しています。
ネットのどこかに置かないと動作しないと思います。

投稿2022/01/25 14:12

yossie

総合スコア106

Fujice

2022/01/27 00:38 編集

　ご指摘の通り、ソースコードを追加した後サーバに上げてみると、 Unable to process request due to missing initial state. This may happen if browser sessionStorage is inaccessible or accidentally cleared. が表示されてしまいました。まだ何かが足りないんでしょうか？一応、トップページはこれではなく、下にあるコードがトップページになっています。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Firebase Auth for Google</title> <link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" /> <style>h1{text-align: center;}</style> </head> <body> <h1>Firebase Auth for Google</h1> <div id="firebaseui-auth-container"></div> <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-app.js"></script> <script src="https://www.gstatic.com/firebasejs/5.8.1/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script> <script src="config.js"></script> <script> //---------------------------------------------- // Firebase UIの設定 //---------------------------------------------- var uiConfig = { // ログイン完了時のリダイレクト先 signInSuccessUrl: 'home.html', // 利用する認証機能 signInOptions: [ firebase.auth.GoogleAuthProvider.PROVIDER_ID ], // 利用規約のURL(任意で設定) tosUrl: 'http://example.com/kiyaku/', // プライバシーポリシーのURL(任意で設定) privacyPolicyUrl: 'https://miku3.net/privacy.html' }; var ui = new firebaseui.auth.AuthUI(firebase.auth()); ui.start('#firebaseui-auth-container', uiConfig); </script> </body> </html>

yossie

2022/01/27 15:33

> Unable to process request due to missing initial state. This may happen if browser sessionStorage is inaccessible or accidentally cleared. このようなメッセージは見た記憶がないのですが、メッセージをそのまま解釈すると、ブラウザの「セッションストレージが無効または消去された」ですね。ブラウザの設定の確認と、アンチウィルスソフトの影響を確認するくらいでしょうか。それと、firebaseの初期化は、ユーザ認証したいすべてのページで必要です。ページ遷移すると忘れてしまうので。なのでトップページにも追加してください。セッションストレージにはログイン情報が残っていると思うのですが、それを直接使う手段は用意されていないようです。 (むしろ意図的に直接セッションストレージを触らせないようにしている感じがします)

行動規範の内容に同意します

あなたの回答