PythonAnywhereで時計アプリをbottleとJavascriptで作る

4093 ワード
Python JavaScript Tkinter PythonAnywhere bottle Python テキストリンク

クラウド上のサーバーで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の概念・使い方など、見よう見まねでやっていますが、なんとなくできてしまっています。何かいい方法や、質問などありましたら、コメントお願いします。

参考にしたサイト：
https://kuratsuki.net/2018/05/bottle-python-%E3%81%AE-web-%E3%83%95%E3%83%AC%E3%83%BC%E3%83%A0%E3%83%AF%E3%83%BC%E3%82%AF%E3%82%92%E4%BD%BF%E3%81%86/