クラウド上のサーバーでPythonのコードを実行できるPythonAnywhereで、現在の時刻を表示する時計アプリ（サイト）を作りましたので、備忘録として残します。ちなみに、Python自体は数年間、趣味で使っていますが、WEBフレームワークについてはほとんど初心者です。ご了承ください。
(2022.2.13) せっかくのシングルファイルのbottleなので、１つのファイルにまとめました。
まず、雑誌のI/O 2021年12月号にのっていた、Tkinterの時計を作ってみて、PCの画面上に現時刻を表示させることができました。これをWebアプリにして、PythonAnywhereで、urlでアクセスできるようにしようと思ったのですが、いろいろと苦労しました。
よく分かっていなくてお恥ずかしいのですが、TkinterもWEBフレームワークかと思ったのですが、GUIパッケージで、まったく別物でした。
WEBフレームワークはFlaskやDjangoなども検討しましたが、bottleはシンプルで１ファイルで完結するとのことで、こちらを選択しました（しかし、結局はもう１つ、テンプレートファイルが必要でした）。
PythonAnywhereでのbottleの設定は、ガイドがあり、簡単でした。
勝手にhello world!のpyファイルができます。
しかし、ここに時計を表示させるコードがどこにも見つかりません。
英語のこちらのサイトによると、サーバーから情報は最初のGET requestの時にしか送れないそうです。
the server is only going to send information to your browser once in response to the initial GET request
しかし、ここにはjavascriptを使えばいいと書いてあり、サンプルコードへのリンクも載っていたので、それを使うことにしました。
（このサイトはjavascriptがどのように表示されるか分かるのでいいと思いました）
https://www.w3schools.com/js/tryit.asp?filename=tryjs_timing_clock
具体的には、こちらのjavascriptのファイルをテンプレートを使って、bottleから参照しました。（このテンプレートという呼び名が、ちょっとしっくりきませんでした。。）
PythonAnywhereでのコードは、勝手に作られたHello Worldのファイルをちょっとづつ書き換えたので、ちょっと汚いです。少しづつ改良したいと思います。
# 東京の時刻をPythonanywhereで表示する
from bottle import default_app, route, template
@route('/')
def home():
content = """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>World Clock</title>
</head>
<body>
<div class="container">
<h1>WORLD CLOCK</h1>
</div>
<script>
//表示形式
option={day:"2-digit",month:"short",year:"numeric",hour12:false,hour:"numeric",minute:"2-digit",second:"2-digit"};
function clockMaker(){
let now=new Date();
document.body.innerHTML = '';
//ただ時間を取り出すと、サーバーがあるところの時間になるため、東京時間にする
option.timeZone="Asia/Tokyo";
let str=now.toLocaleString('en',option);
let splice=str.split(',')
let time=splice[2];
document.write("現在の東京の時刻: ", time);
}
//refresh every second
clockMaker();
setInterval(clockMaker,1000);
</script>
</body>
</html>
"""
return template(content)
application = default_app()
PythonAnywhereのWeb Appの概念・使い方など、見よう見まねでやっていますが、なんとなくできてしまっています。何かいい方法や、質問などありましたら、コメントお願いします。