PyScriptで超簡単なWebサービスを作ってみる #Python

PyScriptとは

HTMLの中でPythonを動かせる魔法みたいな技術です．
2022年の4月に出たそうで，かなり新しく日本語記事もまだ少ないです．

Python環境が無くとも，ブラウザ上でPythonコードを実行できるのは魅力的です．

詳細：WebブラウザでPythonが動作する！PyScriptの詳解

Examples：PyScript@examples...様々なデモがあり，とても面白いです．ソースコードも付いていて，実際にPythonが動いているのがわかります．

特に面白いデモがBokehです．可視化のライブラリであるBokehが使用されています．ブラウザ上でインタラクティブな操作ができることに驚きました，

PyScriptを使ってみる

Web技術に関する知識は全然ありませんが，PyScriptを使用してみたく簡単なサイトを作成してみました．

作成したサイトはこちらです．
netlifyを使用しています．index.html（を入れたフォルダ）をドロップするだけで作れました．なんて便利なんだ．

文章を打ち込むと，自動で文字数をカウントしてくれます．

同様のサービスはありますが，カウントするためにボタンを押す必要があったり，自動でカウントはしてくれるが広告でいっぱいだったりと，欲しいサイトが無かったので作成しました．

ソースコード

以下にソースコードを示します．むちゃくちゃ簡単です．

不気味な空白は，表示される数字の場所を調整するためなので無視してください．

index.html

<head>
    <title>オート文字列カウンター</title>
    <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css" />
    <script defer src="https://pyscript.net/latest/pyscript.js"></script>
    <style>
        body {
            text-align: center; /* テキストを中央揃えにする */
        }
        #text_area {
            font-size: 20px;
            width: 600px;
            height: 400px;
            padding: 10px;
            margin: 0 auto; /* 中央に配置する */
        }
        #line_count_display, #length_display, #length_display_no_spaces {
            font-size: 24px;
            margin: 10px 0;
        }
    </style>
</head>

<body>
    <!-- ここからPyScript -->
    <py-script>
        from js import document

        # 入力の度に呼び出す関数
        def update_counts():
            text_input = document.getElementById('text_area').value

            # 空白ありの文字数を取得
            length_with_spaces = len(text_input.replace("\n", ""))

            # 空白なしの文字数を取得
            length_without_spaces = len(text_input.replace(" ", "").replace("\n", ""))
            
            # 行数の取得
            lines = text_input.split("\n")
            line_count = len(lines)
            
            # 要素を取得して，内容を更新
            document.getElementById('length_display').innerText =           f"文字数（空白含む）　　： {length_with_spaces}"
            document.getElementById('length_display_no_spaces').innerText = f"文字数（空白含まない）： {length_without_spaces}"
            document.getElementById('line_count_display').innerText =       f"行数　　　　　　　　　： {line_count}"
    </py-script>

    <!-- py-inputで，入力の度に呼び出す関数を指定する． --> 
    <textarea id="text_area" py-input="update_counts()"></textarea>

    <!-- 初期値はすべて0 --> 
    <p id="length_display">文字数（空白含む）　　： 0</p>
    <p id="length_display_no_spaces">文字数（空白含まない）： 0</p>
    <p id="line_count_display">行数　　　　　　　　　：  0</p>

</body>

PyScirptを使うと，

<py-script> ここにpythonコードを書くだけで動かせる <py-script>

んです．

PyScriptを使うと，簡単に面白いサービスが作れそうですね．少しずつ勉強していきたいところです．

この記事は以上です．ご覧いただきありがとうございました．