Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8697

Web開発経験がない自分が色々すっ飛ばしてサーバレスアプリをとりあえず作ってみました

$
0
0
概要 Firebaseのサーバレスアプリ(Webアプリ)をとりあえず作ってみました。 背景 地元の財団法人に在宅で勤めることになり、Web開発経験が一切ない自分(44歳)が、時空を超えてサーバレスアプリに挑戦しました。これから何かを始めるオッサン達を勇気づける話です。 コーディング規約等は一切無視しているため、ソースコードの見本としては参考にしないでください。 詳細 細かい話は抜きにして、ソースコードを貼り付けます。 [説明] HTML中にJavaScriptを埋め込み、データベース(Firebase)から読み出したデータをグラフ表示させました。 [個人的に感動したこと] ネットワークの知識が一切必要ない(サーバに接続している感じがない) JavaScriptの知識も必要ない(コピペでできる) サーバレスアプリの知識も必要ない(難しい知識はいらない) 何も必要ない(手ぶらでできる。ただし、PCは必要) <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Sample</title> <!-- The core Firebase JS SDK is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script> <!-- TODO: Add SDKs for Firebase products that you want to use https://firebase.google.com/docs/web/setup#available-libraries --> <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-analytics.js"></script> <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script> </head> <body> <h1> Sample Page</h1> <canvas id="myLineChart"></canvas> <script> // Your web app's Firebase configuration // For Firebase JS SDK v7.20.0 and later, measurementId is optional var firebaseConfig = { //Firebaseに登録して取得 }; try { fbase = firebase.initializeApp(firebaseConfig); } catch(e) { console.log(e); } console.log(fbase.name); var db = firebase.firestore(); var docRef = db.collection("WeightReports").doc("20210623"); var henDate = []; var henWei = []; docRef.get().then((doc) => { if (doc.exists) { for(var i = 0; i < doc.data().utime.length; i++) { henDate[i] = doc.data().utime[i].toDate(); henWei[i] = doc.data().weight[i]; } var ctx = document.getElementById("myLineChart"); var myLineChart = new Chart(ctx, { type: 'line', data: { labels: henDate, datasets: [ { label: '重さ', data: henWei, borderColor: "rgba(255,0,0,1)", backgroundColor: "rgba(0,0,0,0)" } ], }, options: { title: { display: true, text: '重さの遷移' }, scales: { yAxes: [{ ticks: { suggestedMax: 70, suggestedMin: 0, stepSize: 10, callback: function(value, index, values){ return value } } }] }, } }); } else { console.log("No such document!"); } }).catch((error) => { console.log("Error getting document:", error); }); </script> </body> </html> 結果

Viewing all articles
Browse latest Browse all 8697

Trending Articles