【話題のPyScript！】HTMLファイルにPythonが書ける？！Webブラウザで動くPythonを解説！〜プログラム初心者用〜
HTML-код
- Опубликовано: 4 авг 2024
- 📘 サプーの書籍が絶賛発売中 📘
Amazon ▶︎ www.amazon.co.jp/dp/4297142856
「VTuberサプーが教える！ Python 初心者のコード／プロのコード」
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Pythonプログラミングに関する情報を発信しているサプーです！
この動画はHTMLにPythonを書いて実行できるPyScriptを紹介した動画です 😊
・PyScriptって何か？
・どうやって使うのか？
・外部ライブラリは使えるのか？
こういったPyScriptに関わることを分かりやすく解説しています！
💙 メンバーシップ 💙
説明動画 ▶︎ • 【ご報告】本日からメンバーシップ開始します！...
登録 ▶︎ / @pythonvtuber9917
iPhoneの方はこらから ▶︎ PythonSuppl/statu...
🌎 参考URL 🌎
PyScript.net(CSS, JS) ▶︎ pyscript.net/
Pyodide(外部ライブラリ一覧) ▶︎ pyodide.org/en/stable/usage/p...
⭐️ チャプター ⭐️
0:00 今日のテーマ「PyScript」
0:28 PyScriptとは？
2:46 PyScriptの使い方
6:32 HTMLタグのなかに出力
8:01 外部ライブラリの使用
10:25 自作モジュールの使用
12:08 py-replの使用
13:28 PyScriptの欠点
14:16 エンディング
🎥 関連動画 🎥
HTML ▶︎ • 【HTML入門】21個のタグを紹介！わかりや...
💜 チャンネル説明 💜
Pythonプログラミングについて解説するVtuber サプーです✨
初心者でも分かりやすく、Pythonを体系的に学習できるような動画をアップロードしていきます！
みんなが少しでもPythonが好きになってくれたら嬉しいな💕
Twitterもやってるので、フォローお願いします！
Twitter ▶︎ / pythonsuppl
メール ▶︎ python.supu.vtuber@gmail.com
#Python
#PyScript
#HTML
#WebAssembly
#初心者
#パイソン
#PythonVTuberサプー 
Наука
![NoCap - Maliboo [Official Music Video]](http://i.ytimg.com/vi/FUV7E0QyniU/mqdefault.jpg)
とても興味深い内容、とても分かりやすい解説で感謝！
そういってもらえて嬉しいです😊
HTMLにPythonを書けるのは魅力的ですね。
javascriptの様な感覚で書けるのが覚え易くて、試したいと思いました！
ご視聴いただきありがとうございます😊
Pythonの方が慣れている人にとっては便利に感じるシーンもあるかもしれないですね！ぜひ、試してみてください！
すごく興味深い動画でした！ありがとうございます！
ご視聴いただきありがとうございます！
少しでもお役に立ったら嬉しいです😊
ご説明感謝です！
これは使いますねえ。特にグラフとかすぐ使う感じ😁
分かります！私も使うとしたら圧倒的にグラフ・データ可視化関連だと思います😊
いつも為になる動画投稿ありがとうございます！
標準Pythonより高速に実行できる環境、PyPyがあると聞きましたが
その使い方とか特徴についての解説動画観たいです！
よろしくお願いします🙇♂️
コメントありがとうございます！
PyPyの解説動画のご要望ですね！検討してみます😉
タイムリーな情報で助かります！
発表から数日で動画を出せて、私も自分で嬉しいです😊
これ、とても気になってました！
レビューのお願いをコメントしようと思っていたところですｗ
ありがとうございました！
コメントありがとうございます😊
最近、話題になっているトピックなので気になる方が多いんじゃないかと思い、作ってみて良かったです！！
客の環境にプラグインとか、アプリケーションを入れられないから、共有サーバー上で動かせるこういう知識すごい助かる
なるほど！お仕事での環境制約上、PyScirptが便利であるケースとかもあるのかもですね😊
すごい。すぐやってみます
簡単に動かせるので、ぜひ触ってみてください😊
勉強になりました、ありがとうございます。
HTMLでPythonが書けるのは面白いですね。
早速試してみています。seabornはないけど、bokehは入っていたり、いろいろ試せそうですね。
ご視聴いただきありがとうございます！
気軽に使えるので、ぜひ試してみてください😉
一昨日，pyscriptの記事を見つけて，面白そうだなと思っていたらもう動画が上がってるｗ
すごいｗ
今話題になっているので、いち早く取り扱ってみました😊
参考にしてもらえたら嬉しいです！
これは良いですね。WEBページ開発する時にpythonで実行させた内容表示したい〜〜ってずっと思ってたので開発の幅が広がりそうです。
気になった部分だとJSとかだとonloadやonclickといった実行タイミングを指定出来ますがpyscriptだとどうなんでしょう？
アルファ版だからその辺も今後に期待ですかね？
いずれにしても素晴らしい情報共有ありがとうございます！！🙇♂️🙇♂️🙇♂️
コメントありがとうございます😊
onloadやonclickといったイベント発火のものはPyScriptでは現状、なさそうですね...
そうですね、今後に期待！といった感じですかね😉
いやー面白いですね。早速使ってみたいと思います。
ぜひ、気軽に試せるので使ってみてください😉
PHPなどでサーバー側でデータベースから読み込んだデータをPyScritpでグラフ表示とかできそうですね。試してみたいと思います。有難うございます！
ご視聴いただきありがとうございます！
手軽に動くので、ぜひ試しに触ってみてください😊
これは、すごく便利なものが！✨
うまく使えるとPythonユーザにとっては便利ですね😊
npm にアップロードされてlocalのnode_moduleとかにvenv とかが入るようになると今までPythonでバックグラウンド処理をしていたのがまとめられていい感じになりそう
なるほど！WASMはJavaScriptじゃないからnpmにバンドル出来ないのかと思ってたら、できるんですね😳 Zennの記事を見つけました！
すげぇ、仕事が早すぎる
ありがとうございます😊早く出せて私も嬉しいです！
分かりやすくていつも助かってます！
Pythonからシェルコマンドや外部ファイルを実行するのに
subprocessという標準モジュールが利用できるらしいのですが
いまいち理解できていないので解説動画希望です！
よろしくお願いします🙇♂🙇♂
コメントありがとうございます！
subprocessの動画のご要望ですね！
検討してみますね😉
これは勉強になった、、、早速ウェブブログでmatplotlib使ってグラフ描写してみます笑
ご視聴ありがとうございます！
授業で先生が言ってました。知れてよかったです！
すごい！学生さんですかね😊
授業の補足として参考にしてもらえたら嬉しいです✨
@@pythonvtuber9917
就活中ですが、プログラミング全然出来なくて勉強中です。
クライアント側でPython使えるようになるとは驚きです。
JavaScriptだけの時代が終わるのか興味深いです。
Pythonユーザにとっては、クライアント側でPythonが使えるのが嬉しいですよね！
まだJavaScripの補完的な立ち位置ですが、今後どうなるのか気になりますね😊
環境構築とか、互換性などに悩まされることがなくなりそうなので、興味を持ちました。ちょっと勉強してみようかな。
PyScriptは気軽に試せるので、ぜひ触ってみてください😊
やりましたが簡単ですね。
ウェブアプリをhtmlで公開したかったから便利です。
手軽にさくっと試せるのが良いですよね！
いつも楽しく見ています。質問です。py-envについてですが、pyファイルを外部読み込みする際もpy-script上でpyファイルを使用するのであればpy-scriptで使用するモジュールをpy-envで用意しておく必要があるのでしょうか？
ご質問ありがとうございます！
おっしゃる通り、例えばPandasを使用した自作のPythonモジュールをimportして利用する場合、HTMLのpy-envタグのところに「- pandas」と記載しておく必要があります！
今日知ったばかりだったのでとても勉強になりました！！！
ありがとうございました(*^_^*)
タイムリーですね！！
ご視聴いただきありがとうございます😊
ありがとうございま！
この動画がお役に立ったら嬉しいです✨
凄い！matplotlibが表示できるだけでかなり使えそう。
ですよね！Pythonユーザならグラフ系はJavaScriptじゃなくてPyScriptが便利だと思いました😊
pyscript を実際にどんな風に書くのか気になっていたのでいち早い解説動画参考になります！！
デモページでも感じてましたが、やはり表示速度はネックですよね…
一点よくわかっていないのですが、 Python やライブラリのバージョンは pyodide 依存で、それはブラウザのバージョンに依存するということになるのでしょうか？
コメントありがとうございます😊
PythonライブラリはPyodide依存であり、PyScirptがPyodideを呼び出しているので、表面的にはPyScirpt依存だと思います！
@@pythonvtuber9917
ありがとうございます！
てっきり pyodide はブラウザに紐づいているのかと勘違いしてました😇
はやー！
ありがとうございます😊
すごすぎそんなの出来るんだ、、ブラウザでtkinterできるってことなのかな、、、、今HTMLとかジャバスクリプトとかいろいろ勉強してるからめっちゃためになる最高大好き。
コメントありがとうございます！
Tkinterはimportエラーになったので、入ってないみたいです😵
フロント側を勉強中なんですね✨ 機会があればぜひPyScriptも試してみてください😉
初めましてtkinterよく使ってます。でもHTMLが使えるならtkinter使わなくてもいいような気がしますね。UIはHTMLでやればいいですし。tkinterよりもっとおしゃれな見た目で処理はPythonって感じで期待が持てます。
py-replについても質問があるのですが、html上でpython を実行とサプーさんは説明されてましたが、python のコードが書かれていた時のみに実行されるのですか？書かれているファンクションのコードをパッケージ化したファイルでも同様にpy-replでhtml上で実行出来るのでしょうか？py-replの説明の時階層追ってなかったので気になりました。
自作のPythonモジュールをpy-repl側から呼び出したいということですかね？
それも可能です！HTML側のpy-envタグに自作モジュールを追加しておいて(- paths:をつけて)、py-replの中でimportしてあげれば使えますよ😉
動画内では、直接HTMLのpy-scriptタグのなかにfunc1を書いていました！
仕事早い！
インタープリターも使えるなら色々使えそう。
後は速度が・・・
ありがとうございます！！
そうですね、表示速度がネックですね😵
情報が早くてすごいww
ありがとうございます😊
動画を見ながら写経してみましたが、確かに表示は遅いですね。
特にグラフ表示の部分はページを更新しても何も映らないので、自分の書いたコードに何かエラーがあったのかと思って焦りましたが、私の環境では10秒くらい経過した後に表示されました。
初級者の私にとって、自分で情報を集めて新しいトピックについていくのはしんどいので、こういった動画はありがたいです。
最近はJavaScripを少し触っているので、良い刺激になりました😊
ご視聴いただきありがとうございます！
そうなんです...表示が遅いのでそこは弱点だな、と思います😵
今後も新しい技術が出たら、できる限りこのチャンネルで扱っていきたいです✨
今までも brython とかがありましたがどれくらい変わっているのか(良くなっているのか使えるのか等)知りたいですね
brythonというのもあるのですね！初めて知りました！
ぜひPyScriptも試しに使ってみてください😉
丁度調べていたので助かります！
この動画のエディタって何ですか？
HTMLファイルを編集してると右上にブラウザボタンがでますが、ってサラッと言ってますけどこれはエディタ独自の挙動ですよね？
エディターはPyCharmですね！PyCharmの動画も出しているので、良ければ見てみてください😉
PyCharm動画 ▶︎ ruclips.net/video/FaI8wcC1PXI/видео.html
@@pythonvtuber9917
ありがとうございます！
是非参考にさせて戴きます！
pycharm触ったことが無かったんですけど
見てたら便利そうだなと気になったので見よう見まねで試してみます(๑>◡
はっや
そう思ってもらえて嬉しいです😊
最近、Pythonの勉強を始めたものです。
javascript的な使い方をPythonでやろうとしているイメージに思いました＾＾
簡単なプログラミングであれば、良いかもしれませんね＾＾
ご視聴ありがとうございます！そうですね、簡単なケースでなら使えるかなって感じですね！
いつもありがとうございます！1点質問させてください。ほぼ講座の通りに動作したのですが、自作モジュールを読み込む所のみLoading runtime...Runtime created...Initializing components...という表示のまま30秒ほど待っても全く表示されません。環境はMacのVScodeで書いたものをchromeで出力しています。もし何か分かれば教えていただけると大変助かります。
ご質問ありがとうございます😊
作モジュールを読み込む場合に表示されないとの事ですが、動画内で説明しているものと全く同じコードでしょうか？一度、動画内で説明しているのと全く同じコード・ファイル名・フォルダ構成にして、表示されるかどうかご確認いただけますでしょうか？PyScriptの場合、コードが間違っていてもエラーを吐かないので、一度、全く問題がないコード(動画内のコード)で試していただきたいです😉
@@pythonvtuber9917 ありがとうございます！同じコード、ファイル名、フォルダ構成にしても同様の状況になってしまいます。。。インデントの所が全く同じかは見た目でしか分からないですが。もしサンプルコードも共有いただけると大変助かります！
撮影時の使用ファイルは毎回、取っておいてないんですよね😵
HTMLに直接書くと問題ないのでしょうか?HTMLに直接書けば表示されて、モジュールにすると表示されないのであれば、の書き方との中のimport文、呼び出し方、ファイルパスの指定に問題があると思います！
そこも問題がないとすると、正直私の方ではなぜそうなるのかは分からないですね...
@@pythonvtuber9917 ありがとうございます！HTMLに直接書くと問題ないです。色々調べて解決しました（以下に詳細記載）。勉強になりました！:)
なぜかは分かりませんが、こちらの環境ではローカルファイルを読めないようで、PyScript: Access to local files (using "Paths:" in ) is not available when directly opening a HTML file; you must use a webserver to serve the additional files. See this reference on starting a simple webserver with Python.というエラーが出ました。
Reference (github.com/pyscript/pyscript/issues/257#issuecomment-1119595062)を参照しlocal webserverを使い、なおかつpathを- /supu_module.pyから- supu_module.pyに変更（/を抜く）ことでmoduleを読みに行け、無事自作モジュールを使用できました。ちょっとこのやり方は使い所が難しいですが。。。
無事、動かせてよかったです！！
なるほど、pathの指定とローカルサーバですか。PyCharmだと勝手にローカルサーバを立ててくれるので、エラーにならなかったのかもしれないです🤔 貴重な情報ありがとうございます！
PHPとどっちが良いんでしょう？
PHPはバックエンド側でPyScriptはフロント側の処理なので、対立するものではないですね！なので役割ごとに選んだら良いと思います！
正直そこまでしてPythonで書きたいか？というのがPyscriptに関する印象でした。
ちょっと触った感じ、Pythonゴリゴリやってる人がパパっと業務ツール作るにはちょうどいいなぁって感じですね。
そうですね！Pythonが書けるけどJavaScriptが書けなくて、簡単なブラウザ側の処理をしたい時とかは便利かな〜って思いました😊
現在のJavaScriptのフレームワークに取って変わるほどではない認識ですね！
最近はJavaScriptのライブラリがすごすぎて、Pythonが使えると新たに何が出来るようになるのかいまいちわかりません。
JavaScriptがガリガリ書ける人はJavaScriptで問題ないかな！って思います😉
Pythonは書けるけどJavaScriptは全然書けない人には場合によっては便利かな、って思います！
ん？
素朴な質問ですフラスクの
機能の一部と何が違うのですか？
あれは「python」のなかに「html」を使えるって事なのかな？
PyScriptはクライアントサイドで動いていて、Flaskはサーバサイドで動いています！
Flask + テンプレートエンジンはPythonのインタープリタが必要で実行環境を作ってWebサーバを起動しないとそもそも動かないんですよね😵
これだとHTMLのheadに2行足すだけでクライアント側でPythonかけて手軽だよね！って感じですね😊
@@pythonvtuber9917
ありがとうございます("｀д´)ゞ
素人的な解釈で申し訳ないのですが
つまり「サイトを利用している側から動かせる」って解釈であってます？
そうですね、Webサイトを表示している側（ブラウザ上）で動く、って感じですね！
これは、成熟して正式に出回わる様になったらJavaScriptを食ってしまう機能なのでは…
（フロントエンドの動的処理もPythonで書けるので、学習コストが下がるのではと予測しています。）
WASMは今はまだJavaSriptの補完的な立ち位置ですが、今後どうなるのかな？って感じですね！
慣れてる言語でフロント処理を書けるのは嬉しいですね😊
@@pythonvtuber9917 恥ずかしながら知らない技術だったので、発信して頂いて大変助かりました。自学で確認してみます。
直接DOM触れたらいいのにね
独自タグの中を読んでjsに通訳する方式は面白いと思った
コメントありがとうございます！
まだalpha版ということで、今後に期待ですかね！
opencvは使えなかった...ブラウザで画像処理とかできたらなimgに加工した画像とか出せたのに。加工してからHTMLで画像出力する手間がなくなっていいなと思いました。今後に期待
コメントありがとうございます！
まだ使えないライブラリもあるので、今後に期待ですね😉
オォ〜、コレ凄く便利で使い勝手が良さそうだけど.....アレコレ抜け道に利用されそうで情シスは嫌がりそうw
客先常駐者とか、セキュリティガチガチで開発環境インストール出来ずで、止むを得ずexcelや.NETだけで業務アプリ作ってる奴とか涙流して喜ぶと思う。
コメントありがとうございます！
そうですね、お仕事の環境制約がある方とかは、役立つケースがあるかもですね😉
JsからPythonの関数呼べたら夢が広がるな
Pythonユーザにとっては場合によっては便利だし面白い技術ですね！