【超簡単Webアプリ】streamlitでWebアプリを最速で作ってネット公開！〜 プログラミング初心者向け 〜
Рет қаралды 66,427
Күн бұрынPythonプログラミングに関する情報を発信しているサプーです！
この動画はWebアプリが簡単に作れて、簡単にWeb公開できるstreamlitを解説している動画です！
・streamlitとは？
・画面の作り方、フォームの作り方
・マルチページの作り方
・ネットに公開してデプロイする方法
これらについて説明しています💙
実際にPythonコードを動かして実演しているので、最後まで見てもらえたら嬉しいです😊
💙 メンバーシップ 💙
説明動画 ▶︎ • 【ご報告】本日からメンバーシップ開始します！...
登録 ▶︎ / @pythonvtuber9917
iPhoneの方はこらから ▶︎ PythonSuppl/statu...
💻 動作環境 💻
Windows 10
Python 3.9.0
⭐️ チャプター ⭐️
0:00 今日のテーマ「Pythonのstreamlit」
0:33 streamlitとは？
2:38 画面の作り方
5:20 テキスト・インプットウィジェット
18:28 データ分析関連のウィジェット
22:25 レイアウト変更
24:21 マルチページアプリ2
6:57 ネットへの公開方法
33:48 エンディング
🎥 関連動画 🎥
Flask ▶︎ • 【PythonでWebアプリ作成】Flask...
OpenCV ▶︎ • 【Pythonで画像加工】OpenCVの基本...
Pandas ▶︎ • 【Pythonプログラミング】Pandasの...
matplotlib ▶︎ • 【Pythonでグラフ描画】matplotl...
requirements.txt ▶︎ • 【Pythonプログラミング入門】ライブラリ...
Git ▶︎ • 【わかりやすい！Git操作】初心者向けのGi...
🌎 参考URL 🌎
Streamlit inputウィジェット ▶︎ docs.streamlit.io/library/api...
Streamlit グラフウィジェット ▶︎ docs.streamlit.io/library/api...
GitHub ▶︎ github.co.jp/
Streamlit Cloud ▶︎ streamlit.io/cloud
💜 チャンネル説明 💜
Pythonプログラミングについて解説するVtuber サプーです✨
初心者でも分かりやすく、Pythonを体系的に学習できるような動画をアップロードしていきます！
みんなが少しでもPythonが好きになってくれたら嬉しいな💕
Twitterもやってるので、フォローお願いします！
Twitter ▶︎ / pythonsuppl
メール ▶︎ python.supu.vtuber@gmail.com
#Python
#Webアプリ
#streamlit
#Webサイト
#パイソン
#PythonVTuberサプー
@tt-et8bs Жыл бұрын
超～わかりやすい！！はじめて自分で考えたWebサービスを作れました！ありがとうございます！！！
@user-ho5ys6dw7w Жыл бұрын
今までDjangoやFlaskにチャレンジしたのですがアプリそのものは写経してできても、最後のデプロイで謎のエラーが発生し何が悪いのか分からず挫折してましたがこの動画通りにやってみたら初めてWebアプリ作成できました。丸写しですが自分の作ったアプリがインターネット上に公開できて感激でした。Ｇｉｔの説明がわかりやすくて大変助かりました。ありがとうございました。
@pythonvtuber9917 Жыл бұрын
実際にWebアプリがデプロイできると嬉しいですよね！ ぜひ、streamlitをきっかけに色々Webアプリ作成を試みていただけたらと思います😊
@user-md3ip9tq6q 10 ай бұрын
最近snowflakeとかでも流行ってますよねー 自宅鯖の分析ダッシュボード用のアプリに何を使おうか迷っててredashを立ててみたんですが この動画を見てそういやstreamlitを使う手もあったか！と思い始めました！
@niku__29 2 жыл бұрын
webアプリ作成毎回挫折してたけどこんなに簡単に作れるんだ....
@pythonvtuber9917 2 жыл бұрын
「簡易なWebアプリ用」という感じですが、起動までが簡単なのでぜひ試してみてください😊
@user-bh3gr2mv5b 14 күн бұрын
いつも分かりやすい動画ありがとうございます！この動画を見て、初めてアプリ作って動かすことが出来ました！やり始めるとやりたいことが増えて、streamlit_cookies_managerなども使ってみたのですが、iphoneのSafariからアプリ動かすと上手くいかないです😢Windows PCでは動くのですが…開発への道は長いですね…
@ropiropiropi 2 жыл бұрын
Flaskよりも手軽に作れるのは良いですね！ 質問になりますが、 ログイン機能などは実装可能でしょうか？ また、httpsみたいなSSL化は可能ですか？
@pythonvtuber9917 2 жыл бұрын
ログイン機能ですが、2022年7月現在、streamlit公式では用意されていないようですが非公式のログイン実装ライブラリがあるみたいですね↓ github.com/mkhorasani/Streamlit-Authenticator streamlit cloudで公開するアプリは漏れなくHTTPSですね😉 セキュリティについては以下の公式サイトをご参照ください！ docs.streamlit.io/streamlit-cloud/trust-and-security#encryption
@MikuHatsune-np4dj 2 жыл бұрын
windows で Rust が入っていない環境で pip install streamlit すると requires Rust and Cargo 等々エラーが出るようです
@pythonvtuber9917 2 жыл бұрын
そうなんですね！情報ありがとうございます😊
@caffeine_321 2 жыл бұрын
毎度毎度めちゃくちゃわかりやすい・・・ htmlだとかcssだとか挫折したから助かる ちなみになんですが音声メディアとかってやる予定ありますか？ 通学中とかも聞けるものあるとめっちゃいいかも
@pythonvtuber9917 2 жыл бұрын
ご視聴いただきありがとうございます😊 音声メディアですが、今は本職のお仕事とKZfaq動画作成で手一杯なので、今のところやる予定は無いです😵
@user-nx8zk1ou8d Жыл бұрын
withについての質問です。ファイル操作の時は自動でクローズしてくれるみたいな理解だったのですが、今回の場合、withはst.formとコンビでリロードを制御していると理解していいのでしょうか。
@pythonvtuber9917 Жыл бұрын
そうですね、with st.formを使うことでその中に記載したインプット関連ウィジェットが自動でリロードされるのを防ぐことができますね！
@hassy3001 Жыл бұрын
いつも、とてもわかりやすくて感動しております。こちら、無料版だと使用人数が3人までに制限されているようですね。私は問題なく支えているのですが、リンクを友人に送ったら開けないとのことでした😅
@pythonvtuber9917 Жыл бұрын
そうなんですね、情報ありがとうございます！
@user-bj1qi7cx9u 2 жыл бұрын
大変、参考になります。 外部リンクurlの表示方法を教えてください？
@pythonvtuber9917 2 жыл бұрын
ご質問ありがとうございます！ streamlit公式ではリンクWidgetが無さそうなんですが、マークダウンも書けるので以下のような形でリンクを表示させるのはいかがでしょうか？ st.markdown('[サプーのKZfaqチャンネル](kzfaq.info/love/5Kgc_HNzx4GJ-w4QMeeKiQ)')
@user-bj1qi7cx9u 2 жыл бұрын
忙しいところ ありがとうございました。
@SASUKE-vs3wl 2 жыл бұрын
streamlitは簡単過ぎて感動しました。企業分析用にPySimpleGUIで画面を作ろうと考えていましたが、streamlitの方が簡単ですね。ちなみにDB（PosgreSQL）使ったアプリをクラウドにデプロイすることは可能でしょうか。またクラウドを利用する場合は別途料金がかかるのでしょうか。
@pythonvtuber9917 2 жыл бұрын
streamlitのアプリでもDBを使うことは出来ます！ 公式サイトに手順があるので以下をご参照ください😉 docs.streamlit.io/knowledge-base/tutorials/databases クラウドというのはstreamlit cloudのことでしょうかね？こちらは無料ですね！
@SASUKE-vs3wl 2 жыл бұрын
@@pythonvtuber9917 料金が無料なんてアンビリーバボー〜。 ご回答ありがとうございました。
@juk215 Жыл бұрын
33:35 streamlit cloudで作成したページはデフォルトだと、右上のShareボタンを押してMake this app publicがONじゃないと他ブラウザから見れませんでした。
@pythonvtuber9917 Жыл бұрын
情報ありがとうございます！助かります😊
@user-hi4hl4im2r Жыл бұрын
いつもとっても分かり易い動画をありがとうございます。 streamlitの機能について教えてください。 streamlit上で作成したデータフレームやグラフをフォルダを指定してダウンロード(出力)したいのですが、機能として可能なものなのでしょうか？ ご教示いただければ幸いに存じます。
@pythonvtuber9917 Жыл бұрын
やったことはないですが、できるみたいですね！ zenn.dev/ohtaman/articles/streamlit_tips#%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89%E3%81%99%E3%82%8B
@okamotor77 Жыл бұрын
質問です。社内ネットワークの別のPCからもWEBブラウザで閲覧することは可能ですが?
@due1967 2 жыл бұрын
streamlitはクラウドサービス含めていい機能だしサービスですよね。始めてみたとき少し感動しました。 ただ仕事で使うかと言われると、んー、っという感じです。 実際に何に使われてるんですかねー？
@pythonvtuber9917 2 жыл бұрын
おっしゃる通り、実際の業務で扱うような本格的なWebアプリでは使うイメージはないですね！ 仕事で使うとしたらKPI等をまとめたダッシュボードみたいなものとかかなぁ...と思います😉
@due1967 2 жыл бұрын
@@pythonvtuber9917 なかなか企業では機密問題もありクラウドにアップは難しい気がしますがどうなんでしょうか？
@pythonvtuber9917 2 жыл бұрын
扱うデータによってクラウド利用の可不可は企業ごとにルールが違うと思いますが、クラウド利用が躊躇われる場合は、streamlit runで表示される「Local URL」の下の「Network URL」はイントラネットアクセス用なので、そちらを使うとかですかね😉 コンテンツ内容ではなく、streamlit自体のセキュリティについては以下に記載されていますね！ docs.streamlit.io/streamlit-cloud/trust-and-security#product-security
@due1967 2 жыл бұрын
@@pythonvtuber9917 解答ありがとうございます。 Network URL知りませんでした。スケーラビリティは置いといて、一応オンプレでも簡単に使えるんですね。 どのクラウドのプロバイダーさんもしっかり運用されていると思いますが、使う企業側は企業データーが散在してしまうのは避けたいですよね。 久しぶりにstreamlit使ってみようかと思いました。
@MikuHatsune-np4dj 2 жыл бұрын
OpenCV を試そうとして import cv2 をしてみましたが localhost だと動くのですが deploy すると動かないようです(requirements.txt も描いています)バージョンの制限とかあるのでしょうか？(numpy の ndarray は OK でした)
@MikuHatsune-np4dj 2 жыл бұрын
requirements.txt を opencv-python-headless にしたら動きました
@pythonvtuber9917 2 жыл бұрын
うまくいって良かったです😊
@user-zb9oq9oh3c 2 жыл бұрын
すいません質問なのですがhtmlが不要ということはjavascript のような動的なものもstreamlitには含まれているのでしょうか？
@pythonvtuber9917 2 жыл бұрын
ご質問ありがとうございます！ 質問の意図がちょっと分かりかねたのですが、streamlitで用意されているウィジェット内でJavaScriptが動いています。
@MikuHatsune-np4dj 2 жыл бұрын
例えばテンプレートエンジンでは jinja2 という python 用パッケージが一緒に入るみたいです。streamlit 以外のツールでも似たような感じですね (flask とか django とか)
@user-dc1yt2fn8s 2 жыл бұрын
素人の質問です。 flaskと併用して扱う事は無理ですか？ 1部のメソッドだけ使うみたいな
@pythonvtuber9917 2 жыл бұрын
ご質問ありがとうございます！ Flaskで作ったサイトの1ページだけをstreamlitで作ったページに遷移させるとか、逆にstreamlitで作ったサイトの1ページだけFlaskで作ったページに遷移させるとか、そういう感じであれば無理矢理やることもできるかな🤔とは思いますが、どちらかに寄せた方が開発しやすいと思います！
@user-dc1yt2fn8s 2 жыл бұрын
@@pythonvtuber9917 なるほど🤔現状あまりメリットが無いのですね。 今回のモデルで「分析した結果」を渡して学習させるなら全てflask内で構築した方がエラーもおきにくいのかな？
@pythonvtuber9917 2 жыл бұрын
全体像のイメージが分かりかねますが、フロント部分は全てstrealitで作って、受け取ったデータをAPIサーバとして立てたFlaskに渡すとか、そういうフロント/バックエンドとしての切り分けならアリですね😉
@take4ochia1 2 жыл бұрын
初めてコメントします、初心者です。後半の部分なのですが、ローカルではちゃんと各ページが表示されるのですが、クラウドでは外部ファイルを読むページ(main_app, page3)でFileNotFoundError が出ます。Linux 上で行っているのですが関係ありますでしようか？
@pythonvtuber9917 2 жыл бұрын
ご質問ありがとうございます😊 外部ファイルのパスの指定がうまくいっていないということでしょうか？動画のようにプロジェクトフォルダ直下にdataというフォルダを作ってそこに外部ファイルを入れた場合、ファイルパスを「./data/」と指定すればstream cloud上で問題なく表示されるかと思います！ ファイルパスの指定の仕方に間違えがないか、今一度ご確認ください。
@take4ochia1 2 жыл бұрын
ご返信ありがとうございました😊 原因はgithubとstreamlit cloudの連携ミスでした。 新しい質問なのですが、pages directly内からdata directory 内のcsvを読みに行く際 ./data/csv file( .1つ)で表記しています。pages directryの中にいるので../data/csv file ( .が２つ)のようにも思うのですが、どのように考えれば良いのでしょか(1つが正解ですね)。ご教示お願いします。
@pythonvtuber9917 2 жыл бұрын
動画内の 25:56 あたりでも説明しているのですが、streamlit runを実行するmain_app.pyのあるディレクトリがこのアプリのrootディレクトリになるので、そこからの相対パスを指定する必要がありますね😉
@take4ochia1 2 жыл бұрын
ご丁寧に回答有難うございました。これからも楽しみにしています。
@user-lr2dt7je9n Жыл бұрын
いつもわかりやすい動画作成いただきありがとうございます。 ご質問させていただきたいのですが、動画の通り実施していますが、グラフ作成のところで下記のようなエラーがでてきてしまいます。 TypeError: data type 'complex256' not understood Traceback: 下記のdataframeまでは出力されるのですが、 その下の部分でエラーがでてきているようなのですが何か原因ありますでしょうか。。?? df=pd.read_csv("平均気温.csv",index_col="月") st.dataframe(df) st.line_chart(df)
@user-cy8wp4ut6p 2 жыл бұрын
この動画からちょっと声質がかわった
@pythonvtuber9917 2 жыл бұрын
初期の方が明るかったですね！長尺動画は疲れてダメです…
@user-nd6gl7ku3v 2 жыл бұрын
すいません、１つ質問なのですが、最後のようにWebアプリをネット上に公開すると、世界中からフォームに入力したデータが自分のPCに飛んでくるようになるのでしょうか！？(ちなみにGitHubのことはあまり知りません！！)
@pythonvtuber9917 2 жыл бұрын
ご質問ありがとうございます！ 動画のようにstreamlit cloudを使うと、クラウド上のサーバにデータが飛んでくるので、自分のPCにはデータは飛んできませんね😉
@user-nd6gl7ku3v 2 жыл бұрын
@@pythonvtuber9917 なるほど！じゃあデータを使いたい時に、入力されたデータを自分のpcにファイルとして保存したりすることはできますか？
@user-gn6so8bs3g 2 жыл бұрын
@@user-nd6gl7ku3v データーベースに保存して自分のパソコンからそのデータベースに接続すると取得できますね
@user-nd6gl7ku3v 2 жыл бұрын
@@user-gn6so8bs3g なるほど、ありがとうございます！
@ninja215daisuki Жыл бұрын
Streamlitがローカル環境で表示されない、調べてみるとPythonをアップグレードする必要があるとあったんですが、本当ですか
@kanunununununu111 10 ай бұрын
st.number_InputのウィジェットをWEB上で開いた際、どうしても初期値が入力されてしまいます。 初期値をなしにして、未入力の場合は空欄にすることは可能でしょうか？ 初歩的な質問で恐縮なのですが、お手隙の際にご教示頂けますと幸いです。
@tkossk253 2 жыл бұрын
とても分かりやすい動画をありがとうございます。Colab上でさっそく実行してみました。Network URL：172.28.0.2:8501 と表示されうまくいったと思ったのですが、URLをクリックすると「このサイトにアクセスできません」と表示されました。ファイアウォールの設定を変えてもダメだったので、セキュリティソフトを無効にしてみましたが、やはりだめでした。どんな原因が考えられるでしょうか。実行環境はWindows10です。アドバイスを頂けるとありがたいです。
@pythonvtuber9917 2 жыл бұрын
Colabで動かすとクラウド環境上でWebアプリが起動してしまいます。NetworkURLはイントラネット用なのでご自宅のPCからColabのWebアプリにはアクセスできないですね😵 動画のようにローカル環境(ご自身のPCの中)でPythonファイルを作ってローカル環境でstreamlit runを実施してlocalhostのURLで見てみてください😉
@tkossk253 2 жыл бұрын
@@pythonvtuber9917返信ありがとうございます。「NetworkURLはイントラネット用」・・・なるほど、厳しい現実ですね。では、今からローカル環境でチャレンジしてみます！
@tkossk253 2 жыл бұрын
@@pythonvtuber9917できました！感動ですね。プログラミング初心者がまた新たなステージに進んだ感じです。ありがとうございました
@pythonvtuber9917 2 жыл бұрын
うまくいって良かったです😊 作ったものが動くとプログラミングが楽しくなりますよね！
Pythonプログラミング VTuber サプー
Рет қаралды 23 М.
Pythonプログラミング VTuber サプー
Рет қаралды 75 М.
Kirill Multitool
Рет қаралды 57 МЛН
Pythonプログラミング VTuber サプー
Рет қаралды 34 М.
Мозголом
Рет қаралды 667 М.
Electronics_latvia
Рет қаралды 1,1 МЛН
Клуб DNS
Рет қаралды 468 М.
Special Effects Funny 44
Рет қаралды 2,7 МЛН