【超簡単Webアプリ】streamlitでWebアプリを最速で作ってネット公開！〜 プログラミング初心者向け 〜
HTML-код
- Опубликовано: 16 июл 2024
- 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サプー 
Наука
![[Introduction to Pandas] Tabular data and data analysis](http://i.ytimg.com/vi/HYWQbAdsG6s/mqdefault.jpg)
超～わかりやすい！！はじめて自分で考えたWebサービスを作れました！ありがとうございます！！！
今までDjangoやFlaskにチャレンジしたのですがアプリそのものは写経してできても、最後のデプロイで謎のエラーが発生し何が悪いのか分からず挫折してましたがこの動画通りにやってみたら初めてWebアプリ作成できました。丸写しですが自分の作ったアプリがインターネット上に公開できて感激でした。Ｇｉｔの説明がわかりやすくて大変助かりました。ありがとうございました。
実際にWebアプリがデプロイできると嬉しいですよね！
ぜひ、streamlitをきっかけに色々Webアプリ作成を試みていただけたらと思います😊
最近snowflakeとかでも流行ってますよねー
自宅鯖の分析ダッシュボード用のアプリに何を使おうか迷っててredashを立ててみたんですが
この動画を見てそういやstreamlitを使う手もあったか！と思い始めました！
webアプリ作成毎回挫折してたけどこんなに簡単に作れるんだ....
「簡易なWebアプリ用」という感じですが、起動までが簡単なのでぜひ試してみてください😊
いつも分かりやすい動画ありがとうございます！この動画を見て、初めてアプリ作って動かすことが出来ました！やり始めるとやりたいことが増えて、streamlit_cookies_managerなども使ってみたのですが、iphoneのSafariからアプリ動かすと上手くいかないです😢Windows PCでは動くのですが…開発への道は長いですね…
Flaskよりも手軽に作れるのは良いですね！
質問になりますが、
ログイン機能などは実装可能でしょうか？
また、httpsみたいなSSL化は可能ですか？
ログイン機能ですが、2022年7月現在、streamlit公式では用意されていないようですが非公式のログイン実装ライブラリがあるみたいですね↓
github.com/mkhorasani/Streamlit-Authenticator
streamlit cloudで公開するアプリは漏れなくHTTPSですね😉
セキュリティについては以下の公式サイトをご参照ください！
docs.streamlit.io/streamlit-cloud/trust-and-security#encryption
windows で Rust が入っていない環境で pip install streamlit すると requires Rust and Cargo 等々エラーが出るようです
そうなんですね！情報ありがとうございます😊
withについての質問です。ファイル操作の時は自動でクローズしてくれるみたいな理解だったのですが、今回の場合、withはst.formとコンビでリロードを制御していると理解していいのでしょうか。
そうですね、with st.formを使うことでその中に記載したインプット関連ウィジェットが自動でリロードされるのを防ぐことができますね！
毎度毎度めちゃくちゃわかりやすい・・・
htmlだとかcssだとか挫折したから助かる
ちなみになんですが音声メディアとかってやる予定ありますか？
通学中とかも聞けるものあるとめっちゃいいかも
ご視聴いただきありがとうございます😊
音声メディアですが、今は本職のお仕事とRUclips動画作成で手一杯なので、今のところやる予定は無いです😵
質問です。社内ネットワークの別のPCからもWEBブラウザで閲覧することは可能ですが?
大変、参考になります。
外部リンクurlの表示方法を教えてください？
ご質問ありがとうございます！
streamlit公式ではリンクWidgetが無さそうなんですが、マークダウンも書けるので以下のような形でリンクを表示させるのはいかがでしょうか？
st.markdown('[サプーのRUclipsチャンネル](ruclips.net/channel/UC5Kgc_HNzx4GJ-w4QMeeKiQ)')
忙しいところ ありがとうございました。
33:35
streamlit cloudで作成したページはデフォルトだと、右上のShareボタンを押してMake this app publicがONじゃないと他ブラウザから見れませんでした。
情報ありがとうございます！助かります😊
いつもとっても分かり易い動画をありがとうございます。
streamlitの機能について教えてください。
streamlit上で作成したデータフレームやグラフをフォルダを指定してダウンロード(出力)したいのですが、機能として可能なものなのでしょうか？
ご教示いただければ幸いに存じます。
やったことはないですが、できるみたいですね！
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
streamlitは簡単過ぎて感動しました。企業分析用にPySimpleGUIで画面を作ろうと考えていましたが、streamlitの方が簡単ですね。ちなみにDB（PosgreSQL）使ったアプリをクラウドにデプロイすることは可能でしょうか。またクラウドを利用する場合は別途料金がかかるのでしょうか。
streamlitのアプリでもDBを使うことは出来ます！
公式サイトに手順があるので以下をご参照ください😉
docs.streamlit.io/knowledge-base/tutorials/databases
クラウドというのはstreamlit cloudのことでしょうかね？こちらは無料ですね！
@@pythonvtuber9917
料金が無料なんてアンビリーバボー〜。
ご回答ありがとうございました。
いつも、とてもわかりやすくて感動しております。こちら、無料版だと使用人数が3人までに制限されているようですね。私は問題なく支えているのですが、リンクを友人に送ったら開けないとのことでした😅
そうなんですね、情報ありがとうございます！
streamlitはクラウドサービス含めていい機能だしサービスですよね。始めてみたとき少し感動しました。
ただ仕事で使うかと言われると、んー、っという感じです。
実際に何に使われてるんですかねー？
おっしゃる通り、実際の業務で扱うような本格的なWebアプリでは使うイメージはないですね！
仕事で使うとしたらKPI等をまとめたダッシュボードみたいなものとかかなぁ...と思います😉
@@pythonvtuber9917 なかなか企業では機密問題もありクラウドにアップは難しい気がしますがどうなんでしょうか？
扱うデータによってクラウド利用の可不可は企業ごとにルールが違うと思いますが、クラウド利用が躊躇われる場合は、streamlit runで表示される「Local URL」の下の「Network URL」はイントラネットアクセス用なので、そちらを使うとかですかね😉
コンテンツ内容ではなく、streamlit自体のセキュリティについては以下に記載されていますね！
docs.streamlit.io/streamlit-cloud/trust-and-security#product-security
@@pythonvtuber9917 解答ありがとうございます。
Network URL知りませんでした。スケーラビリティは置いといて、一応オンプレでも簡単に使えるんですね。
どのクラウドのプロバイダーさんもしっかり運用されていると思いますが、使う企業側は企業データーが散在してしまうのは避けたいですよね。
久しぶりにstreamlit使ってみようかと思いました。
OpenCV を試そうとして import cv2 をしてみましたが localhost だと動くのですが deploy すると動かないようです(requirements.txt も描いています)バージョンの制限とかあるのでしょうか？(numpy の ndarray は OK でした)
requirements.txt を opencv-python-headless にしたら動きました
うまくいって良かったです😊
素人の質問です。
flaskと併用して扱う事は無理ですか？
1部のメソッドだけ使うみたいな
ご質問ありがとうございます！
Flaskで作ったサイトの1ページだけをstreamlitで作ったページに遷移させるとか、逆にstreamlitで作ったサイトの1ページだけFlaskで作ったページに遷移させるとか、そういう感じであれば無理矢理やることもできるかな🤔とは思いますが、どちらかに寄せた方が開発しやすいと思います！
@@pythonvtuber9917 なるほど🤔現状あまりメリットが無いのですね。
今回のモデルで「分析した結果」を渡して学習させるなら全てflask内で構築した方がエラーもおきにくいのかな？
全体像のイメージが分かりかねますが、フロント部分は全てstrealitで作って、受け取ったデータをAPIサーバとして立てたFlaskに渡すとか、そういうフロント/バックエンドとしての切り分けならアリですね😉
すいません質問なのですがhtmlが不要ということはjavascript のような動的なものもstreamlitには含まれているのでしょうか？
ご質問ありがとうございます！
質問の意図がちょっと分かりかねたのですが、streamlitで用意されているウィジェット内でJavaScriptが動いています。
例えばテンプレートエンジンでは jinja2 という python 用パッケージが一緒に入るみたいです。streamlit 以外のツールでも似たような感じですね (flask とか django とか)
初めてコメントします、初心者です。後半の部分なのですが、ローカルではちゃんと各ページが表示されるのですが、クラウドでは外部ファイルを読むページ(main_app, page3)でFileNotFoundError が出ます。Linux 上で行っているのですが関係ありますでしようか？
ご質問ありがとうございます😊
外部ファイルのパスの指定がうまくいっていないということでしょうか？動画のようにプロジェクトフォルダ直下にdataというフォルダを作ってそこに外部ファイルを入れた場合、ファイルパスを「./data/」と指定すればstream cloud上で問題なく表示されるかと思います！
ファイルパスの指定の仕方に間違えがないか、今一度ご確認ください。
ご返信ありがとうございました😊
原因はgithubとstreamlit cloudの連携ミスでした。
新しい質問なのですが、pages directly内からdata directory 内のcsvを読みに行く際 ./data/csv file( .1つ)で表記しています。pages directryの中にいるので../data/csv file ( .が２つ)のようにも思うのですが、どのように考えれば良いのでしょか(1つが正解ですね)。ご教示お願いします。
動画内の 25:56 あたりでも説明しているのですが、streamlit runを実行するmain_app.pyのあるディレクトリがこのアプリのrootディレクトリになるので、そこからの相対パスを指定する必要がありますね😉
ご丁寧に回答有難うございました。これからも楽しみにしています。
いつもわかりやすい動画作成いただきありがとうございます。
ご質問させていただきたいのですが、動画の通り実施していますが、グラフ作成のところで下記のようなエラーがでてきてしまいます。
TypeError: data type 'complex256' not understood
Traceback:
下記のdataframeまでは出力されるのですが、
その下の部分でエラーがでてきているようなのですが何か原因ありますでしょうか。。??
df=pd.read_csv("平均気温.csv",index_col="月")
st.dataframe(df)
st.line_chart(df)
この動画からちょっと声質がかわった
初期の方が明るかったですね！長尺動画は疲れてダメです…
すいません、１つ質問なのですが、最後のようにWebアプリをネット上に公開すると、世界中からフォームに入力したデータが自分のPCに飛んでくるようになるのでしょうか！？(ちなみにGitHubのことはあまり知りません！！)
ご質問ありがとうございます！
動画のようにstreamlit cloudを使うと、クラウド上のサーバにデータが飛んでくるので、自分のPCにはデータは飛んできませんね😉
@@pythonvtuber9917
なるほど！じゃあデータを使いたい時に、入力されたデータを自分のpcにファイルとして保存したりすることはできますか？
@@user-nd6gl7ku3v データーベースに保存して自分のパソコンからそのデータベースに接続すると取得できますね
@@user-gn6so8bs3g なるほど、ありがとうございます！
Streamlitがローカル環境で表示されない、調べてみるとPythonをアップグレードする必要があるとあったんですが、本当ですか
st.number_InputのウィジェットをWEB上で開いた際、どうしても初期値が入力されてしまいます。
初期値をなしにして、未入力の場合は空欄にすることは可能でしょうか？
初歩的な質問で恐縮なのですが、お手隙の際にご教示頂けますと幸いです。
とても分かりやすい動画をありがとうございます。Colab上でさっそく実行してみました。Network URL：172.28.0.2:8501 と表示されうまくいったと思ったのですが、URLをクリックすると「このサイトにアクセスできません」と表示されました。ファイアウォールの設定を変えてもダメだったので、セキュリティソフトを無効にしてみましたが、やはりだめでした。どんな原因が考えられるでしょうか。実行環境はWindows10です。アドバイスを頂けるとありがたいです。
Colabで動かすとクラウド環境上でWebアプリが起動してしまいます。NetworkURLはイントラネット用なのでご自宅のPCからColabのWebアプリにはアクセスできないですね😵
動画のようにローカル環境(ご自身のPCの中)でPythonファイルを作ってローカル環境でstreamlit runを実施してlocalhostのURLで見てみてください😉
@@pythonvtuber9917返信ありがとうございます。「NetworkURLはイントラネット用」・・・なるほど、厳しい現実ですね。では、今からローカル環境でチャレンジしてみます！
@@pythonvtuber9917できました！感動ですね。プログラミング初心者がまた新たなステージに進んだ感じです。ありがとうございました
うまくいって良かったです😊
作ったものが動くとプログラミングが楽しくなりますよね！