レッスン:HTMLファイルを作成していこう.1(投稿日:2021年10月5日)
Bootstrapを利用して、HTMLファイルを作成していこう
ソースコードの内容
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を使ってチャットアプリを作成しよう
Firebaseを利用して、簡易的なSNSアプリの作成しよう
WebアプリをFirebaseに紐づけしよう
WebアプリでFirebaseのデータベースに追加と削除機能をつけよう
Webアプリでデータ削除前のダイアログを作成しよう
Bootstrapを使ってWebアプリの外観を整えよう
作成したwebアプリをFirebaseにデプロイしよう