質問編集履歴
6
実現したい具体的な説明
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | 
            File without changes
         | 
5
現在のコード実行時の画像の添付と具体的に改善したい点
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | @@ -8,73 +8,11 @@ | |
| 8 8 | 
             
            Web上の更新ボタンを押すと全てのメッセージの日時が更新されてしまう。
         | 
| 9 9 |  | 
| 10 10 | 
             
            ### 該当のソースコード
         | 
| 11 | 
            -
            html
         | 
| 12 | 
            -
            <div>
         | 
| 13 | 
            -
                <div class="header"><p>CHAT</p></div>  
         | 
| 14 | 
            -
                </div> 
         | 
| 15 | 
            -
                <div class="chat-area">
         | 
| 16 | 
            -
                <div class="kakomi-maru">
         | 
| 17 | 
            -
                <div>名前: <input type="text" id="uname">
         | 
| 18 | 
            -
                </div>
         | 
| 19 | 
            -
                <div>
         | 
| 20 | 
            -
                    <textarea id="text" cols="80%" rows="5"></textarea>
         | 
| 21 | 
            -
                    <button id="send">投稿する</button>
         | 
| 22 | 
            -
                </div>
         | 
| 23 | 
            -
                    <div class id="chat-hukidashi">  
         | 
| 24 | 
            -
                    <div id="output">
         | 
| 25 | 
            -
                    </div>
         | 
| 26 | 
            -
                </div>
         | 
| 27 | 
            -
                    </div>  
         | 
| 28 | 
            -
                </div>
         | 
| 29 | 
            -
            </div>
         | 
| 30 11 |  | 
| 12 | 
            +
             | 
| 31 13 | 
             
            javascript
         | 
| 32 | 
            -
            <script>
         | 
| 33 | 
            -
              // Your web app's Firebase configuration
         | 
| 34 | 
            -
              var firebaseConfig = {
         | 
| 35 | 
            -
                apiKey: "AIzaSyA5FeZ5n53RhH029rB4oG7lXpGDkFKzuYg",
         | 
| 36 | 
            -
                authDomain: "gsdemo-22f2a.firebaseapp.com",
         | 
| 37 | 
            -
                databaseURL: "https://gsdemo-22f2a.firebaseio.com",
         | 
| 38 | 
            -
                projectId: "gsdemo-22f2a",
         | 
| 39 | 
            -
                storageBucket: "gsdemo-22f2a.appspot.com",
         | 
| 40 | 
            -
                messagingSenderId: "830068457806",
         | 
| 41 | 
            -
                appId: "1:830068457806:web:7860391950f4b1bec7de1f"
         | 
| 42 | 
            -
              };
         | 
| 43 | 
            -
              // Initialize Firebase
         | 
| 44 | 
            -
              firebase.initializeApp(firebaseConfig);
         | 
| 45 14 |  | 
| 46 | 
            -
            const ref = firebase.database().ref();
         | 
| 47 15 |  | 
| 48 | 
            -
             | 
| 49 | 
            -
            //送信
         | 
| 50 | 
            -
            $("#send").on("click", function(){
         | 
| 51 | 
            -
                const uname = $("#uname").val();
         | 
| 52 | 
            -
                const text  = $("#text").val();
         | 
| 53 | 
            -
                var now = new Date().getTime();
         | 
| 54 | 
            -
             | 
| 55 | 
            -
                const msg   = {
         | 
| 56 | 
            -
                    uname: uname,
         | 
| 57 | 
            -
                    text: text,
         | 
| 58 | 
            -
                    timestamp: now
         | 
| 59 | 
            -
                };
         | 
| 60 | 
            -
                ref.push(msg); 
         | 
| 61 | 
            -
            });
         | 
| 62 | 
            -
             | 
| 63 | 
            -
            $("#text").on("keydown", function(e){
         | 
| 64 | 
            -
                if(e.keyCode==13){
         | 
| 65 | 
            -
                    const uname = $("#uname").val();
         | 
| 66 | 
            -
                    const text  = $("#text").val();
         | 
| 67 | 
            -
                    var now = new Date().getTime();
         | 
| 68 | 
            -
             | 
| 69 | 
            -
                    const msg   = {
         | 
| 70 | 
            -
                        uname: uname,
         | 
| 71 | 
            -
                        text:  text,
         | 
| 72 | 
            -
                        timestamp: now
         | 
| 73 | 
            -
                    };
         | 
| 74 | 
            -
                    ref.push(msg); 
         | 
| 75 | 
            -
                }
         | 
| 76 | 
            -
            });
         | 
| 77 | 
            -
             | 
| 78 16 | 
             
            //受信
         | 
| 79 17 | 
             
            ref.on("child_added",function(data){
         | 
| 80 18 | 
             
                const v = data.val();
         | 
4
実現したい具体的な説明
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | @@ -8,26 +8,95 @@ | |
| 8 8 | 
             
            Web上の更新ボタンを押すと全てのメッセージの日時が更新されてしまう。
         | 
| 9 9 |  | 
| 10 10 | 
             
            ### 該当のソースコード
         | 
| 11 | 
            +
            html
         | 
| 12 | 
            +
            <div>
         | 
| 13 | 
            +
                <div class="header"><p>CHAT</p></div>  
         | 
| 14 | 
            +
                </div> 
         | 
| 15 | 
            +
                <div class="chat-area">
         | 
| 16 | 
            +
                <div class="kakomi-maru">
         | 
| 17 | 
            +
                <div>名前: <input type="text" id="uname">
         | 
| 18 | 
            +
                </div>
         | 
| 19 | 
            +
                <div>
         | 
| 20 | 
            +
                    <textarea id="text" cols="80%" rows="5"></textarea>
         | 
| 21 | 
            +
                    <button id="send">投稿する</button>
         | 
| 22 | 
            +
                </div>
         | 
| 23 | 
            +
                    <div class id="chat-hukidashi">  
         | 
| 24 | 
            +
                    <div id="output">
         | 
| 25 | 
            +
                    </div>
         | 
| 26 | 
            +
                </div>
         | 
| 27 | 
            +
                    </div>  
         | 
| 28 | 
            +
                </div>
         | 
| 29 | 
            +
            </div>
         | 
| 30 | 
            +
             | 
| 11 31 | 
             
            javascript
         | 
| 32 | 
            +
            <script>
         | 
| 33 | 
            +
              // Your web app's Firebase configuration
         | 
| 34 | 
            +
              var firebaseConfig = {
         | 
| 35 | 
            +
                apiKey: "AIzaSyA5FeZ5n53RhH029rB4oG7lXpGDkFKzuYg",
         | 
| 36 | 
            +
                authDomain: "gsdemo-22f2a.firebaseapp.com",
         | 
| 37 | 
            +
                databaseURL: "https://gsdemo-22f2a.firebaseio.com",
         | 
| 38 | 
            +
                projectId: "gsdemo-22f2a",
         | 
| 39 | 
            +
                storageBucket: "gsdemo-22f2a.appspot.com",
         | 
| 40 | 
            +
                messagingSenderId: "830068457806",
         | 
| 41 | 
            +
                appId: "1:830068457806:web:7860391950f4b1bec7de1f"
         | 
| 42 | 
            +
              };
         | 
| 43 | 
            +
              // Initialize Firebase
         | 
| 44 | 
            +
              firebase.initializeApp(firebaseConfig);
         | 
| 12 45 |  | 
| 46 | 
            +
            const ref = firebase.database().ref();
         | 
| 47 | 
            +
             | 
| 48 | 
            +
             | 
| 49 | 
            +
            //送信
         | 
| 50 | 
            +
            $("#send").on("click", function(){
         | 
| 51 | 
            +
                const uname = $("#uname").val();
         | 
| 52 | 
            +
                const text  = $("#text").val();
         | 
| 53 | 
            +
                var now = new Date().getTime();
         | 
| 54 | 
            +
             | 
| 55 | 
            +
                const msg   = {
         | 
| 56 | 
            +
                    uname: uname,
         | 
| 57 | 
            +
                    text: text,
         | 
| 58 | 
            +
                    timestamp: now
         | 
| 59 | 
            +
                };
         | 
| 60 | 
            +
                ref.push(msg); 
         | 
| 61 | 
            +
            });
         | 
| 62 | 
            +
             | 
| 63 | 
            +
            $("#text").on("keydown", function(e){
         | 
| 64 | 
            +
                if(e.keyCode==13){
         | 
| 65 | 
            +
                    const uname = $("#uname").val();
         | 
| 66 | 
            +
                    const text  = $("#text").val();
         | 
| 67 | 
            +
                    var now = new Date().getTime();
         | 
| 68 | 
            +
             | 
| 69 | 
            +
                    const msg   = {
         | 
| 70 | 
            +
                        uname: uname,
         | 
| 71 | 
            +
                        text:  text,
         | 
| 72 | 
            +
                        timestamp: now
         | 
| 73 | 
            +
                    };
         | 
| 74 | 
            +
                    ref.push(msg); 
         | 
| 75 | 
            +
                }
         | 
| 76 | 
            +
            });
         | 
| 77 | 
            +
             | 
| 13 | 
            -
            //受信 | 
| 78 | 
            +
            //受信
         | 
| 14 79 | 
             
            ref.on("child_added",function(data){
         | 
| 15 80 | 
             
                const v = data.val();
         | 
| 16 | 
            -
                const k = data.key;
         | 
| 81 | 
            +
                const k = data.key; 
         | 
| 17 82 |  | 
| 18 83 | 
             
                var date = new Date();
         | 
| 84 | 
            +
                date.setTime(v.timestamp); 
         | 
| 19 85 | 
             
                var month = date.getMonth() + 1;
         | 
| 20 86 | 
             
                var day = date.getDate();
         | 
| 21 87 | 
             
                var hours = date.getHours();
         | 
| 22 88 | 
             
                var minutes = date.getMinutes();    
         | 
| 23 | 
            -
                var time = (time = month + "/" + day + " " + hours + ":" + minutes);
         | 
| 89 | 
            +
                var time = (time = month + "/" + day + " " + hours + ":" + minutes);   
         | 
| 24 | 
            -
             | 
| 90 | 
            +
             | 
| 25 | 
            -
                const h = '<p>'+v.uname+'<br>'+v.text+'<br>'+time+'</p>';
         | 
| 91 | 
            +
                const h = '<p>'+"名前: "+v.uname+'<br>'+v.text+'<br>'+"投稿時刻:"+time+'</p>';
         | 
| 26 92 | 
             
                $("#output").prepend(h);
         | 
| 27 93 | 
             
            });
         | 
| 28 94 |  | 
| 29 95 |  | 
| 96 | 
            +
            </script>
         | 
| 30 97 |  | 
| 98 | 
            +
             | 
| 99 | 
            +
             | 
| 31 100 | 
             
            ### 試したこと
         | 
| 32 101 |  | 
| 33 102 | 
             
            日時を設定するidを作成したりしましたが、エラーになり混乱しています。
         | 
3
現在のコード実行時の画像の添付と具体的に改善したい点
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | @@ -1,5 +1,5 @@ | |
| 1 | 
            -
            ![イメージ説明]
         | 
| 2 | 
            -
            
         | 
| 2 | 
            +
            ### 前提・実現したいこと
         | 
| 3 3 | 
             
            javascript(html.css)でチャットアプリを作っています。
         | 
| 4 4 | 
             
            メッセージの送信日時表示する機能を実装中なのですが、更新ボタンを押すと全てのメッセージの送信日時が更新されてしまいます。
         | 
| 5 5 | 
             
            (画像では青い枠と書いてありますが画像編集の過程でグレーになってしまいました。)
         | 
2
実現したい具体的な説明(画像)
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | @@ -1,7 +1,8 @@ | |
| 1 | 
            +
            ![イメージ説明]
         | 
| 1 | 
            -
            説明](d33831a5e6867f3ca38a2fccf327ae7f.jpeg)](56b2f90734721031216ebf97779bd2e4.jpeg)### 前提・実現したいこと
         | 
| 2 3 | 
             
            javascript(html.css)でチャットアプリを作っています。
         | 
| 3 4 | 
             
            メッセージの送信日時表示する機能を実装中なのですが、更新ボタンを押すと全てのメッセージの送信日時が更新されてしまいます。
         | 
| 4 | 
            -
             | 
| 5 | 
            +
            (画像では青い枠と書いてありますが画像編集の過程でグレーになってしまいました。)
         | 
| 5 6 | 
             
            ### 発生している問題・エラーメッセージ
         | 
| 6 7 |  | 
| 7 8 | 
             
            Web上の更新ボタンを押すと全てのメッセージの日時が更新されてしまう。
         | 
1
現在のコード実行時の画像の添付と具体的に改善したい点
    
        title	
    CHANGED
    
    | 
            File without changes
         | 
    
        body	
    CHANGED
    
    | @@ -1,4 +1,4 @@ | |
| 1 | 
            -
            ### 前提・実現したいこと
         | 
| 1 | 
            +
            ### 前提・実現したいこと
         | 
| 2 2 | 
             
            javascript(html.css)でチャットアプリを作っています。
         | 
| 3 3 | 
             
            メッセージの送信日時表示する機能を実装中なのですが、更新ボタンを押すと全てのメッセージの送信日時が更新されてしまいます。
         | 
| 4 4 |  | 
