【話題のPyScript！】HTMLファイルにPythonが書ける？！Webブラウザで動くPythonを解説！〜プログラム初心者用〜
Ғылым және технология
📘 サプーの書籍が絶賛発売中 📘
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サプー
Пікірлер: 107
とても興味深い内容、とても分かりやすい解説で感謝！
@pythonvtuber9917
2 жыл бұрын
そういってもらえて嬉しいです😊
客の環境にプラグインとか、アプリケーションを入れられないから、共有サーバー上で動かせるこういう知識すごい助かる
@pythonvtuber9917
2 жыл бұрын
なるほど！お仕事での環境制約上、PyScirptが便利であるケースとかもあるのかもですね😊
すごく興味深い動画でした！ありがとうございます！
@pythonvtuber9917
2 жыл бұрын
ご視聴いただきありがとうございます！ 少しでもお役に立ったら嬉しいです😊
HTMLにPythonを書けるのは魅力的ですね。 javascriptの様な感覚で書けるのが覚え易くて、試したいと思いました！
@pythonvtuber9917
2 жыл бұрын
ご視聴いただきありがとうございます😊 Pythonの方が慣れている人にとっては便利に感じるシーンもあるかもしれないですね！ぜひ、試してみてください！
ご説明感謝です！ これは使いますねえ。特にグラフとかすぐ使う感じ😁
@pythonvtuber9917
2 жыл бұрын
分かります！私も使うとしたら圧倒的にグラフ・データ可視化関連だと思います😊
タイムリーな情報で助かります！
@pythonvtuber9917
2 жыл бұрын
発表から数日で動画を出せて、私も自分で嬉しいです😊
いつも為になる動画投稿ありがとうございます！ 標準Pythonより高速に実行できる環境、PyPyがあると聞きましたが その使い方とか特徴についての解説動画観たいです！ よろしくお願いします🙇♂️
@pythonvtuber9917
2 жыл бұрын
コメントありがとうございます！ PyPyの解説動画のご要望ですね！検討してみます😉
これ、とても気になってました！ レビューのお願いをコメントしようと思っていたところですｗ ありがとうございました！
@pythonvtuber9917
2 жыл бұрын
コメントありがとうございます😊 最近、話題になっているトピックなので気になる方が多いんじゃないかと思い、作ってみて良かったです！！
すごい。すぐやってみます
@pythonvtuber9917
2 жыл бұрын
簡単に動かせるので、ぜひ触ってみてください😊
勉強になりました、ありがとうございます。 HTMLでPythonが書けるのは面白いですね。 早速試してみています。seabornはないけど、bokehは入っていたり、いろいろ試せそうですね。
@pythonvtuber9917
2 жыл бұрын
ご視聴いただきありがとうございます！ 気軽に使えるので、ぜひ試してみてください😉
いやー面白いですね。早速使ってみたいと思います。
@pythonvtuber9917
2 жыл бұрын
ぜひ、気軽に試せるので使ってみてください😉
これは、すごく便利なものが！✨
@pythonvtuber9917
2 жыл бұрын
うまく使えるとPythonユーザにとっては便利ですね😊
一昨日，pyscriptの記事を見つけて，面白そうだなと思っていたらもう動画が上がってるｗ すごいｗ
@pythonvtuber9917
2 жыл бұрын
今話題になっているので、いち早く取り扱ってみました😊 参考にしてもらえたら嬉しいです！
npm にアップロードされてlocalのnode_moduleとかにvenv とかが入るようになると今までPythonでバックグラウンド処理をしていたのがまとめられていい感じになりそう
@pythonvtuber9917
2 жыл бұрын
なるほど！WASMはJavaScriptじゃないからnpmにバンドル出来ないのかと思ってたら、できるんですね😳 Zennの記事を見つけました！
これは良いですね。WEBページ開発する時にpythonで実行させた内容表示したい〜〜ってずっと思ってたので開発の幅が広がりそうです。 気になった部分だとJSとかだとonloadやonclickといった実行タイミングを指定出来ますがpyscriptだとどうなんでしょう？ アルファ版だからその辺も今後に期待ですかね？ いずれにしても素晴らしい情報共有ありがとうございます！！🙇♂️🙇♂️🙇♂️
@pythonvtuber9917
2 жыл бұрын
コメントありがとうございます😊 onloadやonclickといったイベント発火のものはPyScriptでは現状、なさそうですね... そうですね、今後に期待！といった感じですかね😉
すげぇ、仕事が早すぎる
@pythonvtuber9917
2 жыл бұрын
ありがとうございます😊早く出せて私も嬉しいです！
PHPなどでサーバー側でデータベースから読み込んだデータをPyScritpでグラフ表示とかできそうですね。試してみたいと思います。有難うございます！
@pythonvtuber9917
2 жыл бұрын
ご視聴いただきありがとうございます！ 手軽に動くので、ぜひ試しに触ってみてください😊
授業で先生が言ってました。知れてよかったです！
@pythonvtuber9917
2 жыл бұрын
すごい！学生さんですかね😊 授業の補足として参考にしてもらえたら嬉しいです✨
@user-ss8tt3ne9i
2 жыл бұрын
@@pythonvtuber9917 就活中ですが、プログラミング全然出来なくて勉強中です。
これは勉強になった、、、早速ウェブブログでmatplotlib使ってグラフ描写してみます笑
@pythonvtuber9917
Жыл бұрын
ご視聴ありがとうございます！
いつも楽しく見ています。質問です。py-envについてですが、pyファイルを外部読み込みする際もpy-script上でpyファイルを使用するのであればpy-scriptで使用するモジュールをpy-envで用意しておく必要があるのでしょうか？
@pythonvtuber9917
2 жыл бұрын
ご質問ありがとうございます！ おっしゃる通り、例えばPandasを使用した自作のPythonモジュールをimportして利用する場合、HTMLのpy-envタグのところに「- pandas」と記載しておく必要があります！
環境構築とか、互換性などに悩まされることがなくなりそうなので、興味を持ちました。ちょっと勉強してみようかな。
@pythonvtuber9917
2 жыл бұрын
PyScriptは気軽に試せるので、ぜひ触ってみてください😊
分かりやすくていつも助かってます！ Pythonからシェルコマンドや外部ファイルを実行するのに subprocessという標準モジュールが利用できるらしいのですが いまいち理解できていないので解説動画希望です！ よろしくお願いします🙇♂🙇♂
@pythonvtuber9917
2 жыл бұрын
コメントありがとうございます！ subprocessの動画のご要望ですね！ 検討してみますね😉
今日知ったばかりだったのでとても勉強になりました！！！ ありがとうございました(*^_^*)
@pythonvtuber9917
2 жыл бұрын
タイムリーですね！！ ご視聴いただきありがとうございます😊
ありがとうございま！
@pythonvtuber9917
2 жыл бұрын
この動画がお役に立ったら嬉しいです✨
はやー！
@pythonvtuber9917
2 жыл бұрын
ありがとうございます😊
クライアント側でPython使えるようになるとは驚きです。 JavaScriptだけの時代が終わるのか興味深いです。
@pythonvtuber9917
2 жыл бұрын
Pythonユーザにとっては、クライアント側でPythonが使えるのが嬉しいですよね！ まだJavaScripの補完的な立ち位置ですが、今後どうなるのか気になりますね😊
やりましたが簡単ですね。 ウェブアプリをhtmlで公開したかったから便利です。
@pythonvtuber9917
Жыл бұрын
手軽にさくっと試せるのが良いですよね！
凄い！matplotlibが表示できるだけでかなり使えそう。
@pythonvtuber9917
2 жыл бұрын
ですよね！Pythonユーザならグラフ系はJavaScriptじゃなくてPyScriptが便利だと思いました😊
py-replについても質問があるのですが、html上でpython を実行とサプーさんは説明されてましたが、python のコードが書かれていた時のみに実行されるのですか？書かれているファンクションのコードをパッケージ化したファイルでも同様にpy-replでhtml上で実行出来るのでしょうか？py-replの説明の時階層追ってなかったので気になりました。
@pythonvtuber9917
2 жыл бұрын
自作のPythonモジュールをpy-repl側から呼び出したいということですかね？ それも可能です！HTML側のpy-envタグに自作モジュールを追加しておいて(- paths:をつけて)、py-replの中でimportしてあげれば使えますよ😉 動画内では、直接HTMLのpy-scriptタグのなかにfunc1を書いていました！
pyscript を実際にどんな風に書くのか気になっていたのでいち早い解説動画参考になります！！ デモページでも感じてましたが、やはり表示速度はネックですよね… 一点よくわかっていないのですが、 Python やライブラリのバージョンは pyodide 依存で、それはブラウザのバージョンに依存するということになるのでしょうか？
@pythonvtuber9917
2 жыл бұрын
コメントありがとうございます😊 PythonライブラリはPyodide依存であり、PyScirptがPyodideを呼び出しているので、表面的にはPyScirpt依存だと思います！
@kurukuruteh
2 жыл бұрын
@@pythonvtuber9917 ありがとうございます！ てっきり pyodide はブラウザに紐づいているのかと勘違いしてました😇
すごすぎそんなの出来るんだ、、ブラウザでtkinterできるってことなのかな、、、、今HTMLとかジャバスクリプトとかいろいろ勉強してるからめっちゃためになる最高大好き。
@pythonvtuber9917
2 жыл бұрын
コメントありがとうございます！ Tkinterはimportエラーになったので、入ってないみたいです😵 フロント側を勉強中なんですね✨ 機会があればぜひPyScriptも試してみてください😉
@arashi9517
2 жыл бұрын
初めましてtkinterよく使ってます。でもHTMLが使えるならtkinter使わなくてもいいような気がしますね。UIはHTMLでやればいいですし。tkinterよりもっとおしゃれな見た目で処理はPythonって感じで期待が持てます。
情報が早くてすごいww
@pythonvtuber9917
2 жыл бұрын
ありがとうございます😊
動画を見ながら写経してみましたが、確かに表示は遅いですね。 特にグラフ表示の部分はページを更新しても何も映らないので、自分の書いたコードに何かエラーがあったのかと思って焦りましたが、私の環境では10秒くらい経過した後に表示されました。 初級者の私にとって、自分で情報を集めて新しいトピックについていくのはしんどいので、こういった動画はありがたいです。 最近はJavaScripを少し触っているので、良い刺激になりました😊
@pythonvtuber9917
2 жыл бұрын
ご視聴いただきありがとうございます！ そうなんです...表示が遅いのでそこは弱点だな、と思います😵 今後も新しい技術が出たら、できる限りこのチャンネルで扱っていきたいです✨
仕事早い！ インタープリターも使えるなら色々使えそう。 後は速度が・・・
@pythonvtuber9917
2 жыл бұрын
ありがとうございます！！ そうですね、表示速度がネックですね😵
今までも brython とかがありましたがどれくらい変わっているのか(良くなっているのか使えるのか等)知りたいですね
@pythonvtuber9917
2 жыл бұрын
brythonというのもあるのですね！初めて知りました！ ぜひPyScriptも試しに使ってみてください😉
はっや
@pythonvtuber9917
2 жыл бұрын
そう思ってもらえて嬉しいです😊
丁度調べていたので助かります！ この動画のエディタって何ですか？ HTMLファイルを編集してると右上にブラウザボタンがでますが、ってサラッと言ってますけどこれはエディタ独自の挙動ですよね？
@pythonvtuber9917
2 жыл бұрын
エディターはPyCharmですね！PyCharmの動画も出しているので、良ければ見てみてください😉 PyCharm動画 ▶︎ kzread.info/dash/bejne/eJV9mtmcc5S2iKw.html
@medicineJP
2 жыл бұрын
@@pythonvtuber9917 ありがとうございます！ 是非参考にさせて戴きます！ pycharm触ったことが無かったんですけど 見てたら便利そうだなと気になったので見よう見まねで試してみます(๑>◡
最近、Pythonの勉強を始めたものです。 javascript的な使い方をPythonでやろうとしているイメージに思いました＾＾ 簡単なプログラミングであれば、良いかもしれませんね＾＾
@pythonvtuber9917
2 жыл бұрын
ご視聴ありがとうございます！そうですね、簡単なケースでなら使えるかなって感じですね！
PHPとどっちが良いんでしょう？
@pythonvtuber9917
2 жыл бұрын
PHPはバックエンド側でPyScriptはフロント側の処理なので、対立するものではないですね！なので役割ごとに選んだら良いと思います！
いつもありがとうございます！1点質問させてください。ほぼ講座の通りに動作したのですが、自作モジュールを読み込む所のみLoading runtime...Runtime created...Initializing components...という表示のまま30秒ほど待っても全く表示されません。環境はMacのVScodeで書いたものをchromeで出力しています。もし何か分かれば教えていただけると大変助かります。
@pythonvtuber9917
2 жыл бұрын
ご質問ありがとうございます😊 作モジュールを読み込む場合に表示されないとの事ですが、動画内で説明しているものと全く同じコードでしょうか？一度、動画内で説明しているのと全く同じコード・ファイル名・フォルダ構成にして、表示されるかどうかご確認いただけますでしょうか？PyScriptの場合、コードが間違っていてもエラーを吐かないので、一度、全く問題がないコード(動画内のコード)で試していただきたいです😉
@yusukey22
2 жыл бұрын
@@pythonvtuber9917 ありがとうございます！同じコード、ファイル名、フォルダ構成にしても同様の状況になってしまいます。。。インデントの所が全く同じかは見た目でしか分からないですが。もしサンプルコードも共有いただけると大変助かります！
@pythonvtuber9917
2 жыл бұрын
撮影時の使用ファイルは毎回、取っておいてないんですよね😵 HTMLに直接書くと問題ないのでしょうか?HTMLに直接書けば表示されて、モジュールにすると表示されないのであれば、の書き方との中のimport文、呼び出し方、ファイルパスの指定に問題があると思います！ そこも問題がないとすると、正直私の方ではなぜそうなるのかは分からないですね...
@yusukey22
2 жыл бұрын
@@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を読みに行け、無事自作モジュールを使用できました。ちょっとこのやり方は使い所が難しいですが。。。
@pythonvtuber9917
2 жыл бұрын
無事、動かせてよかったです！！ なるほど、pathの指定とローカルサーバですか。PyCharmだと勝手にローカルサーバを立ててくれるので、エラーにならなかったのかもしれないです🤔 貴重な情報ありがとうございます！
ん？ 素朴な質問ですフラスクの 機能の一部と何が違うのですか？ あれは「python」のなかに「html」を使えるって事なのかな？
@pythonvtuber9917
2 жыл бұрын
PyScriptはクライアントサイドで動いていて、Flaskはサーバサイドで動いています！ Flask + テンプレートエンジンはPythonのインタープリタが必要で実行環境を作ってWebサーバを起動しないとそもそも動かないんですよね😵 これだとHTMLのheadに2行足すだけでクライアント側でPythonかけて手軽だよね！って感じですね😊
@user-dc1yt2fn8s
2 жыл бұрын
@@pythonvtuber9917 ありがとうございます("｀д´)ゞ 素人的な解釈で申し訳ないのですが つまり「サイトを利用している側から動かせる」って解釈であってます？
@pythonvtuber9917
2 жыл бұрын
そうですね、Webサイトを表示している側（ブラウザ上）で動く、って感じですね！
正直そこまでしてPythonで書きたいか？というのがPyscriptに関する印象でした。 ちょっと触った感じ、Pythonゴリゴリやってる人がパパっと業務ツール作るにはちょうどいいなぁって感じですね。
@pythonvtuber9917
2 жыл бұрын
そうですね！Pythonが書けるけどJavaScriptが書けなくて、簡単なブラウザ側の処理をしたい時とかは便利かな〜って思いました😊 現在のJavaScriptのフレームワークに取って変わるほどではない認識ですね！
最近はJavaScriptのライブラリがすごすぎて、Pythonが使えると新たに何が出来るようになるのかいまいちわかりません。
@pythonvtuber9917
2 жыл бұрын
JavaScriptがガリガリ書ける人はJavaScriptで問題ないかな！って思います😉 Pythonは書けるけどJavaScriptは全然書けない人には場合によっては便利かな、って思います！
直接DOM触れたらいいのにね 独自タグの中を読んでjsに通訳する方式は面白いと思った
@pythonvtuber9917
2 жыл бұрын
コメントありがとうございます！ まだalpha版ということで、今後に期待ですかね！
これは、成熟して正式に出回わる様になったらJavaScriptを食ってしまう機能なのでは… （フロントエンドの動的処理もPythonで書けるので、学習コストが下がるのではと予測しています。）
@pythonvtuber9917
2 жыл бұрын
WASMは今はまだJavaSriptの補完的な立ち位置ですが、今後どうなるのかな？って感じですね！ 慣れてる言語でフロント処理を書けるのは嬉しいですね😊
@bokujyushinshi
2 жыл бұрын
@@pythonvtuber9917 恥ずかしながら知らない技術だったので、発信して頂いて大変助かりました。自学で確認してみます。
opencvは使えなかった...ブラウザで画像処理とかできたらなimgに加工した画像とか出せたのに。加工してからHTMLで画像出力する手間がなくなっていいなと思いました。今後に期待
@pythonvtuber9917
2 жыл бұрын
コメントありがとうございます！ まだ使えないライブラリもあるので、今後に期待ですね😉
オォ〜、コレ凄く便利で使い勝手が良さそうだけど.....アレコレ抜け道に利用されそうで情シスは嫌がりそうw 客先常駐者とか、セキュリティガチガチで開発環境インストール出来ずで、止むを得ずexcelや.NETだけで業務アプリ作ってる奴とか涙流して喜ぶと思う。
@pythonvtuber9917
2 жыл бұрын
コメントありがとうございます！ そうですね、お仕事の環境制約がある方とかは、役立つケースがあるかもですね😉
JsからPythonの関数呼べたら夢が広がるな
@pythonvtuber9917
2 жыл бұрын
Pythonユーザにとっては場合によっては便利だし面白い技術ですね！