天界の様子が見れる秘密のサイトつくった。

秘密だから特定の人しか見れないようにしてます

サイト:www.tenkai.ml
[Emall:[e-mail] Pass:demo00 でログインできます。(怖くないよ)]

ログインすると...

天界の様子(大阪エリア）が確認できます。
えぇ...。天界とは、天気です。

天界(大阪エリア)の窓をスクロールすると...

猫。
(天気によって、出てくる猫が変わります。ぜひ、晴れの日にサイトを覗きにきてください。)

サイトの仕組み

1.最初のログイン画面は Firebase Authentication 使ってます。
参考にさせていただいた記事->https://qiita.com/shima-07/items/2c344b0ad306b201a065

2.天界(大阪エリア)の情報は OpenWeatherMap の API を取得しています。
参考にさせていただいた記事->https://www.tam-tam.co.jp/tipsnote/html_css/post16405.html

3.天界(大阪エリア)の小窓は、html を、もう一つデプロイして、それを埋め込んでいます。
参考にさせていただいた記事->https://gray-code.com/html_css/view-another-html-on-current-html/

4.サイトのデプロイは Netlify というサービスを使いました。
参考にさせていただいた記事->https://qiita.com/oganyanATF/items/7fb681e863d8681c9039
(Netlify で html をデプロイする時は、index.html の名称でないと、うまくデプロイできないので気をつけてください。)

おまけ

今回のサイトの GitHub を公開します。
・メインサイト(ログイン機能含む)のリポジトリ->https://github.com/cazmura/ten-kai-login
・埋め込みサイトのリポジトリ->https://github.com/cazmura/ten-kai

最後まで読んでいただきありがとうございました。