それじゃあここからは「Streamlit」を使ったWebサイト作成をやってみよう!
今回はどんなWebサイトにするの??
今回は、「ポケモン図鑑」を作ろうと思うよ!
え!?ポケモンって「ポケットモンスター」のこと!?
そうだね!せっかく練習するなら、皆がよく知っていて情報量が多いテーマが良いかと思ったからね
でも、ポケモンって1000種類以上いるから表示するためのデータを整理するのは大変じゃない??
そこで非公式ではあるんだけど、ポケモンの色んな情報をJSONデータで返してくれるWebAPI「PokeAPI」っていうのがあるから、それを利用しようと思うよ
そんなのがあるんだ!JSONは一度学習してるし、ちょうど復習にもなって良さそうだね!
「PokeAPI」の使い方や注意点については、実際に使う時に改めて説明するね
ということで、まずはいつも通り「Streamlit」をインストールしよう!
Windowsの場合
pip install streamlit
Macの場合
pip3 install streamlit
インストール完了!
じゃあ、最初はどんなふうに作れるのか確認するために次のプログラムを「app.py」ってファイルにコピーしよう!
import streamlit as st
st.title("ポケモン図鑑")
st.write("これから段階的に機能を増やしていこう!")
user_input = st.text_input("ポケモンの名前またはIDを入力してください")
search_btn = st.button("検索")
if search_btn:
st.write(f"あなたが入力したのは: {user_input}")
コピーしたよ!じゃあ早速動かして...
ちょっと待って!!Streamlitはちょっと今までとは動かし方が違うんだよね
今回はこうやって動かしてみて!
streamlit run app.py
あ、なんか勝手にwebブラウザが動いてページが出てきた!!
ちゃんと動いたみたいだね!
プログラムと見比べた感じだと、「st.〇〇()」を上から順番にサイトに追加していってるんだね
そうだね!
「st.〇〇()」がすでにオブジェクトになっていて、勝手に良い感じのデザイン・配置をしてくれるんだ
「st.text_input()」は文字を入力するオブジェクトで、「()」の中に文字を入れると、その入力欄の説明を付けられるんだね
それに「st.button()」は、その後のifを使っている感じだとボタンを押さない間は「False」で、押すと「True」に変わるって感じかな??
おお!よく分析できてるね!!
結構シンプルで、分かりやすいでしょ?
今のところは分かりやすい!スクレイピングの時にHTMLを見るよりかは圧倒的に簡単だよ
それならよかった!そしたら最後に、プログラムと実際の画面を並べて関係性を分かりやすくしておくね!
うん!イメージ通り!!
じゃあこの調子で少しずつ機能を増やしていこう!!
ちなみに、Streamlitを終了したい場合は、Windowsの場合は「Ctrl+C」、Macの場合は「control+C」で良いよ!そのあとはブラウザで開いていたページも閉じようね
