python 上で HTML を動かし、HTMLで作ったボタンにより関数を実行したいです。

Question

状況

押すことができるボタンはできたものの、そのさきがわからないです。

該当のソースコード

import IPython
from IPython.display import display, HTML
htm = HTML('''
        <button onClick="OnButtonClick()">Click</button>
         #ここにソースコードを書いて、pythonの関数を実行できるようにしたいです。
   ''' )
display(htm)

バージョン情報

Python 3.7.13

実行環境

google colaboratory 2022/8/6　現在
chrome book

中学２年生です。
方法がわかる方、ご回答お願いいたします。

Comments

[m.ts10806]

PythonならWebフレームワークがあったと思いますが、
そのフレームワークの話ではないですか？
いずれにしてもHTMLから直接実行という話にはなり得ません

[meg_]

PyScriptのことですか？だとしても書き方違う？？

[OrigaDai]

ご回答ありがとうございます。
以前に、Flaskを試したことがありますが、うまくいきませんでした。
他のWebフレームワークも試してみます。
google colabの環境で、でできるかわからないですが、がんばります。

[m.ts10806]

onClick属性で書かれている関数はあくまでJavaScriptの関数呼び出すためのものです。
押したときにPython実行したければWebサーバにリクエストを送信して受け取る必要があります（GET/POSTなど聞いたことはあるかもしれません）
なので、直接実行はどうあがいても出来ません。
サーバーサイドとクライアントサイド、そしてリクエストとレスポンス（Webの）について学ぶ必要があります。

上記が分かっていれば「自身の理解とFlaskの使い方が間違っていた」ことが分かるのではないでしょうか。
それも基礎にあたるので、やはり作りたいモノを作るためには基礎が必要不可欠です。

[OrigaDai]

onclick属性はJavaScriptのみということが、調べ方が悪かったのかもしれませんが、検索で出てこず、知りませんでした。これから努力して基礎を固めていきたいと思います。
本当にありがとうございました。
教えていただかなければ、ずっとできないことで悩んでいたと思います。

[OrigaDai]

@m.ts10806さん
もしよろしければ、回答欄にご記入いただければ、ベストアンサーとさせていただきます。
ご検討のほど、よろしくお願いいたします。

[m.ts10806]

ご自身で理解された内容を自身で回答とされたほうが同じような問題抱えた方には伝わるのではと思います。

>onclick属性はJavaScriptのみということ

いえ、ご自身が書かれているのが「Javascriptの関数を呼び出している」だけで、onclick内に「クライアント側の」処理を直接記述することもできるので、正しくないです。
あくまで「クライアント側（ブラウザ上の話）」というのが今理解しなければならないことです。

[OrigaDai]

ご回答ありがとうございます。m.st10806さんが仰った通りにPOSTを使ってみましたが、localhostにアクセスできないと表示され、できませんでした。
onclickのPOSTやlocalhostはgoogle colab での良い使い方が見つからなかったので、htmlを使わないbuttonの作り方を見つけました。解決方法のところに書かせていただきました。お陰様で解決しました。この度は最後までありがとうございます。

[m.ts10806]

そもそもWebじゃなくてよかったという話なんですかね（Pythonは詳しくないので）

[OrigaDai]

はい、そうです。紛らわしい表現ですいませんでした。
htmlのbutton配置の仕方の便利さに魅力を感じていました。

[m.ts10806]

PythonのGUIは詳しくないですが、
その手のGUI画面を作るためのGUIツールもありそうに思います。
基本メニューから貼っていくだけで裏では定義がなされたりするようなもの。
https://niyanmemo.com/664/
調べたら↑が出てきました。

[m.ts10806]

結局はイベント定義してそのコードを書く過程は変わりませんし、
多くがコードをがりがり書く必要のあるWebアプリケーションの方が面倒に思います（HPビルダーとかのGUIツールで多少は軽減されますが、サーバーサイドの言語で動作させる動的Webアプリケーションは難しいと思う）

[OrigaDai]

有難うございます。私には難しいかもしれませんが、やってみます。

Answer 1

google colab でlocalhostに繋ぐ良い方法が見つからなかったので、別のやり方を記入します。

import ipywidgets as widgets
from ipywidgets import Layout
from IPython.display import display

button1 = widgets.Button(description="1",orientation='horizontal',
layout=Layout(width='50px', height='50px'))

def on_button_clicked(d):
  print("button_clicked")


button1.on_click(on_button_clicked)

display(button1)

最後に、m.ts10806さん、meg_さん、有難うございました。

Answer 2

google colab でlocalhostに繋ぐ良い方法が見つからなかったので、別のやり方を記入します。

import ipywidgets as widgets
from ipywidgets import Layout
from IPython.display import display

button1 = widgets.Button(description="1",orientation='horizontal',
layout=Layout(width='50px', height='50px'))

def on_button_clicked(d):
  print("button_clicked")


button1.on_click(on_button_clicked)

display(button1)

最後に、m.ts10806さん、meg_さん、有難うございました。