LoginSignup
476
431

More than 1 year has passed since last update.

「PyWebIO」があればPython 100%でWebアプリ作れるってマジ!?

Last updated at Posted at 2021-07-06

TL; NR

PyWebIOっていう、Pythonユーザ向けでけっこうイケてる(死語)Webアプリケーションフレームワークを発見した。(正確にはスタックオーバーフローのコメントで知った)
なのに日本語の記事が全然見つからないからサンプルコード組んでみた。

結論から言うとタイトルはマジ。
Python大好きだけどHTMLやJavascriptを見ると血圧が上がったりバイタルサインが著しく低下する人もこれなら楽しく遊べそう。

個人的な印象としては込み入った複雑なレイアウトを作るのは大変そうだけど、Bottleよりもスタートアップが楽。
PySimpleGUIと同レベルかそれ以上の簡単さで作れるWebアプリは貴重なので頑張って進化してもらいたいと思いました。(CSSアレルギーおじさん並みの感想)

インストール

Python 3.9 をインストール済みの Windows 10 とかで下記のとても複雑なコマンドを入力しないとインストールできない。
難しいけどここを乗り越えれば簡単にWebアプリを作ることができるから頑張って挑戦してみてね!

pip install pywebio

コーディング

ほとんど全部が本家のユーザーズガイドからのオマージュだけどそれで要件は足りる。
1時間かけてコーディングして2時間かけて記事を書いた程度だから細かいことは何一つ分からない。
この記事はあくまでもファッションコーディングだ。(今作った造語)
雰囲気だけつかんだら後は原典を読んでね。

Hello world

限りなく頭の悪いHello worldを書くと2行で書ける。
BMIを計算して絶望したい人は公式サイトのHello worldを参照。

from pywebio.output import put_text
put_text("こんにちは PyWebIO!")

ちなみにPython 3.9.0のノートパソコンではPowershellでもうまく行ったけど、おうちに帰って3.6で動かしたらasyncioの警告が出たり3.9.6にしてもPowershellコンソールからHello worldするとWeb画面にテキストが表示されなかったりした。
どちらもWindows 10でChromeを使用してるけど相性問題があるのかもしれない。

ここから下のスクリーンショットはPython 3.9.6PyWebIO.pyってPythonファイルを作ったうえで動かしてChromeに出てきた画面で統一してる。

2021-07-06.png

Input

inputなど入力コントロールを配置するとコントロールごとに入力画面が生成される。
お手軽!

put_textを複数記述すると複数行まとめて出力できる。

from pywebio.input import input, PASSWORD, FLOAT
from pywebio.output import put_text, put_table

# 数値入力
number = input("1.2 + 0.5 =", type=FLOAT, placeholder='計算結果を入力', required=True)
# パスワード入力
password = input("パスワード入れてね", type=PASSWORD, help_text='助言は役に立たない')
# 出力
put_text(f"1.2 + 0.5 = {number}")
put_text(f"パスワードは{password}")
  • 数値入力と必須エラー

2021-07-06 (1).png

  • パスワード入力とヘルプテキスト表示

2021-07-06 (3).png

  • 出力

2021-07-06 (2).png

Input GroupとかCombimed Outputとか

input_groupput_tableを使うことで複数行列のコントロール配置が可能になる。
file_uploadでファイル名やバイナリが取れる。
put_imageはURLやバイナリなどかなり柔軟にデータが取れそうでちょっと感動した。
詳しくは公式サイトのユーザーズガイドで。

ちなみにサーバを起動しないスクリプトモードだとpywebio.session.holdしておかないとスクリプトを最後まで読んだ時点でセッションが終了する。
そのためhold()しておかないとボタンクリックなどが実行できないため注意すること。

from pywebio.input import select, checkbox, radio, textarea, file_upload, input_group
from pywebio.output import put_markdown, put_table, put_buttons, put_image
from pywebio.session import hold

result = input_group("入力グループ", [
             select('どっちが好き', ['きのこ', 'たけのこ'], name="war"),
             checkbox("チェックボックス", options=['私は今Qiitaを読んでいます'], name="agree"),
             radio("1 + 1 =", options=['2', '11', '田'], name="answer"),
             textarea('Text Area', rows=3, placeholder='Some text', name="text"),
             file_upload("Select a image:", accept="image/*", name="img")
            ])

## 結果表示
put_table([
           ["1行目は", "タイトル"],
           ["好きなもの", result["war"]],
           ["あなたは", "正直者" if result["agree"] else "嘘つき"],
           ["1 + 1 =", result["answer"]],
           ["Text Area", result["text"]],
           ["画像データ", result["img"]],
           ["Image", put_image(result["img"]["content"])],
           ["コントロール", put_buttons(["置ける"], onclick=lambda _:put_markdown("残念。**はずれ**です!"))]
          ])

hold()  # これを記述しないとボタンイベント読込前にセッションが終了してしまう
  • Input Group

2021-07-06 (4).png

  • Combimed Output

2021-07-06 (5).png

Server mode

サーバを立ち上げるにはstart_serverする。
画面遷移はgo_appまたはput_linkで記述できる。

微ハマりした点はstart_serverの第一引数の配列に遷移用のメソッドを記述しないと遷移してくれなかったこと

from pywebio.output import put_text, put_buttons, put_link
from pywebio.session import hold, go_app
from pywebio.platform.tornado import start_server

def task_1():
    put_text('乳酸菌摂ってるぅ?')
    put_link('摂ってる(Endingへ行け)', app='ending')
    put_text('')  # put_link で inline=False 的に改行する方法が分からなかったので…
    put_link('摂ってない(14へ行け)', app='task_14')

def ending():
    put_text('おめでとう!\nあなたは健康になった!')
    put_buttons(['スタートに戻る'], [lambda: go_app('index', new_window=False)])
    hold()

def task_14():
    put_text('ざんねん!\nあなたのぼうけんはここでおわってしまった!')
    put_buttons(['スタートに戻る'], [lambda: go_app('index', new_window=False)])
    hold()

def index():
    put_text('まきますか?まきませんか?')
    put_link('まきます(1へ行け)', app='task_1')
    put_text('')  # put_link で inline=False 的に改行する方法が分からなかったので…
    put_link('まきません(14へ行け)', app='task_14')

# 第一引数の配列に遷移用のメソッドを記述しないと遷移してくれないので注意
start_server([index, task_1, ending, task_14], port=8080)

2021-07-06 (6).png

  • まきません

2021-07-06 (8).png

総括

冒頭に書いた通りpython以外は1行も書かない縛りでかなり楽にリッチなWebアプリケーションを作ることができるフレームワークだ。
すごく簡単なWebアプリを作りたいけど絶対にHTML書きたくないマンには良質な選択肢だと思う。
ブートストラップとかDBバインディングにはDjangoとかの方が便利かもしれないけどそれはそれ。

PyWebIOをお試しするとサクサク書けて楽しいからぜひどうぞ

P.S. 素でQiita投稿は初めてです。優しくしてくれると嬉しいです。
PS2. たくさんのLGTMありがとうございます。 とても嬉しいです。

476
431
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
476
431