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を使うと，簡単に面白いサービスが作れそうですね．少しずつ勉強していきたいところです．
この記事は以上です．ご覧いただきありがとうございました．