レッスン：簡易的なSNSアプリの作成しよう.1(投稿日：2021年10月5日)

＜＜前へ
次へ＞＞

Firebaseを利用して、簡易的なSNSアプリの作成しよう

ソースコードの内容

firebase_demo.py

※「config」のところは、自分の物に置き換えてください。 

 <!doctype html>
<html lang="jp">
  <head>
        <title>MySNSアプリ</title>
        <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-app.js"></script>
        <script src="https://www.gstatic.com/firebasejs/5.0.1/firebase-database.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

  </head>
  <body>
    <div class="container m-3">
        <div class="row">
            <div class="col-12">
                <div class="h3">Firebase SNSアプリ</div>
            </div>

            <div class="col-12">
                <input id="name" placeholder="NAME">
                <input id="message" placeholder="MESSAGE">
                <button id="send">投稿</button>
            </div>
            
            <div class="col-5">
                <div id="messages" class="container"></ul>
            </div>
        </div>
    </div>

    <script>
        // Set the configuration for your app
        // TODO: Replace with your project's config object
        var config = {
            //自分の情報を入力
            apiKey: "",
            authDomain: "f",
            databaseURL: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: ""
        };
        firebase.initializeApp(config);

        // Get a reference to the database service
        var database = firebase.database();
    </script>

    <script>
        // データベースの参照を準備
        var Ref = database.ref().child('message')
    
        // 既存メッセージを表示
        Ref.on('child_added', function(obj) {
            var msg = obj.val();
            var $div = $('<div></div>',{"class":"my-2 h3 row"}).prependTo('#messages');
            $('<div>',{"class":"col-3 border bg-primary rounded text-white"}).text(msg.name).appendTo($div);
            $('<div>',{"class":"col-7"}).text(": " + msg.message).appendTo($div);
            $('<div>',{"class":"delete col-2 button bg-danger rounded text-center", id:obj.key}).text("x").appendTo($div);
        });
    
        $('#send').click(function() {
            if($("#name").val() != "" && $("#message").val() != ""){
                // 新規メッセージを投稿
                Ref.push({
                    name: $('#name').val(),
                    message: $('#message').val()
                });

                $("#name").val('');
                $("#message").val('');
            }
        });
        
        $(document).on('click',".delete",function(){
            var result = window.confirm('このメッセージを削除しますか？');
            if(result){
                var value = $(this).attr('id');
                Ref.child(value).remove();
                $(this).parent().remove();
            }
        });
    </script>

  </body>
</html>

使用した電子部品

質問はログインをするとできるようになります。

回路図

【Firebase-Webアプリ】Firebaseを使ってチャットアプリを作成しよう

現在の動画

#0 簡易的なSNSアプリの作成しよう.1

Firebaseを利用して、簡易的なSNSアプリの作成しよう

#1 Firebaseとの紐づけを行おう.1

WebアプリをFirebaseに紐づけしよう

#2 HTMLファイルを作成していこう.1

Bootstrapを利用して、HTMLファイルを作成していこう

#3 WebアプリでFirebaseのデータベースに追加と削除機能をつけよう.1

WebアプリでFirebaseのデータベースに追加と削除機能をつけよう

#4 Webアプリでデータ削除前のダイアログを作成しよう.1

Webアプリでデータ削除前のダイアログを作成しよう

#5 Bootstrapを使ってWebアプリの外観を整えよう.1

Bootstrapを使ってWebアプリの外観を整えよう

#6 作成したwebアプリをFirebaseにデプロイしよう.1

作成したwebアプリをFirebaseにデプロイしよう