Python アプリの UI を作成する方法

Python は、SEO プロセスを自動化するための一般的なプログラミング言語の 1 つです。

HTML や CSS の知識がなくても、JavaScript を利用したフレームワークでコーディングを行っていなくても、アプリのフロントエンドを作成するための優れたライブラリの 1 つは、Streamlit パッケージです。

この Streamlit チュートリアルでは、Streamlit アプリをデプロイするための Python と Dockerfile を使用して美しいアプリを作成する方法について詳しく説明します。

ストリームリットとは?

Streamlit はオープンソースのアプリ フレームワーク (Python パッケージ) であり、フロントエンドの開発に関する知識がなくても見栄えの良いアプリを作成できます。

これにより、フロントエンド フレームワークや HTML、CSS、JavaScript でのコーディングに関与する必要がなくなります。

純粋な Python を使用してフロントエンドを開発します。

Streamlit ライブラリが役立つのはいつですか?

まず第一に、cron などのジョブ スケジューラを備えたマシンで定期的に実行される Python スクリプトをコーディングしている場合、Streamlit は役に立ちません。

ただし、キーワード調査アプリなど、チーム メンバーと共有したいツールを開発している場合は、Streamlit を使用できます。

また、ユーザー認証方法が必要な場合は、Streamlit コミュニティがそれを処理できるパッケージを開発しました。

Streamlit アプリの作成: はじめに

Google パブリック API からシード キーワードのオートコンプリート クエリを取得する簡単なアプリを作成してみましょう。

開始する前に、マシンにフォルダーを作成し、好きな名前を付けます。

また、Python を以前にインストールしたことがあり、Python プログラミングの基本を理解していることを前提としています。

プロセス全体で、次の Python ライブラリを使用する必要があります。

  • リクエスト。
  • ストリームリット。
  • Streamlit オーセンティケーター。
  • PyYAML.

また、Python 標準ライブラリをインポートします。

チュートリアル コードは、Github の Streamlit スターター テンプレート リポジトリにあります。

Streamlit パッケージのインストール

まず、python3 -m venv .env を実行して仮想環境を作成し、pip3 install streamlit を実行して Streamlit パッケージをインストールします。

ここで、Python スクリプトを作成します。 これを streamlit_app.py としましょう。

関数が多すぎる複雑なプロジェクトでは、関数ごとに個別の Python スクリプト ファイルを用意してから、それらを streamlit_app.py にインポートするか、Flask または FastAPI を使用して別のアプリを作成することを好みます。

たとえば、キーワード調査アプリでは、Semrush からデータを取得するさまざまな関数の Python スクリプト、Google から上位 10 または 20 の結果を取得するスクリプト、Google オートコンプリートおよび Google 関連検索を取得するスクリプトなどがあります。 .

Google オートコンプリート クエリを取得する

リクエストを作成するには、Requests パッケージを使用する必要があります。 このパッケージを取得するには、pip3 インストール リクエストを実行する必要があります。

また、オートコンプリート API 応答を解析するには、Python 標準 JSON ライブラリをインポートする必要があります。

まず、JSON 標準ライブラリ、リクエストを作成するための Requests パッケージ、アプリを作成するための Streamlit をインポートします。

次に、Google オートコンプリート クエリを文字列のリストとして取得する関数を定義しました。

すべてをシンプルにするためにreplace関数を2回使用しましたが、reライブラリを使用して正規表現を使用できます。

"""A Streamlit app for getting the Google autocomplete queries
"""
import json

import requests
import streamlit as st

def google_autocomplete(keyword: str) -> list[str]:
    """Get Google autocomplete queries for a seed keyword

    Args:
        keyword (str): The seed keyword

    Returns:
        list[str]: A list of the autocomplete queries
    """
    google_autocomplete_api: str = "https://www.google.com/complete/search"
    google_autocomplete_params: dict = {
        "q": keyword,
        "cp": 8,
        "client": "gws-wiz",
        "xssi": "t",
        "hl": "en-US"
    }

    response = requests.get(google_autocomplete_api, params=google_autocomplete_params)

    list_google_autocomplete_uncleaned: list[list] = json.loads((response.content).decode("UTF-8")[5:])[0]
    list_google_autocomplete_cleaned: list[str] = [
        element[0].replace('', '').replace('', '')
        for element in list_google_autocomplete_uncleaned
        ]

    return list_google_autocomplete_cleaned

ストリームリット アプリ

これまで、Streamlit パッケージをインストールし、Google オートコンプリート クエリを取得する関数を定義しました。 では、実際のアプリを作成してみましょう。

Streamlit アプリを表示するには、端末で run streamlit_app.py コマンドを使用して Streamlit を実行し、アプリをローカルで実行する必要があります。 このコマンドを実行した後、http://localhost:8501/ URL に移動すると、アプリを表示できます。

はい、見出しなどをつけていないので空欄です。

著者からのスクリーンショット、2022 年 10 月

Streamlit アプリに見出しを追加する

アプリに見出しを追加しましょう。 上記のように、Streamlit を st としてインポートしました。

st.title() 関数を呼び出すことで、タイトル スタイルを使用してページに見出しを追加できます。 st.title(「これは次のレベルの SEO アプリです」) としましょう。

streamlit_app.py ファイルを編集して保存すると、ページの右上隅にアイコンが表示されます。 いつも戻る ページを更新せずにアプリの変更を表示します。

Streamlit アプリの常に戻るボタン著者からのスクリーンショット、2022 年 10 月

これで、アプリは下の画像のようになります。 システム テーマがダークの場合、アプリはダーク テーマです。

見出し付きの Streamlit アプリの外観著者からのスクリーンショット、2022 年 10 月

Streamlit アプリにテキストを追加する

アプリにテキスト パラグラフを追加するには、st.write() 関数を使用する必要があります。 たとえば、st.write(「あなたのアイデアを実現する」) です。

Steamlit アプリ著者からのスクリーンショット、2022 年 10 月

Streamlit アプリにテキスト入力を追加する

Google のオートコンプリート機能で見たように、「keyword」という引数がありました。

この引数は、ユーザー入力から取得する必要があります。

ユーザー入力を取得するには、Streamlit でテキスト入力フィールドを使用できます。 st.text_input() を使用すると、テキスト入力を追加できます。 たとえば、st.text_input(「シード キーワードは何ですか?」) です。

また、後で input キーワードを使用して関数に渡すために、それを変数に割り当てる必要があります。

input_google_autocomplete_keyword: str = st.text_input(
    "What is your seed keyword?")

ここで、入力キーワードがあるときにアプリを実行したいと考えています。 ここでは、if ステートメントを使用して、変数が空かどうかを確認します。

if input_google_autocomplete_keyword:
    output_list_google_autocomplete: list[str] = google_autocomplete(
        input_google_autocomplete_keyword)
見出し、テキスト、およびテキスト入力を備えた Streamlit アプリの外観著者からのスクリーンショット、2022 年 10 月

Streamlit アプリからダウンロード

そのため、見出し、テキスト行、入力テキスト フィールドを追加して、ユーザー シード キーワードを取得しました。

ここで、記述した関数を実行し、ユーザーがテキスト ファイルで結果を取得するためのダウンロード ボタンを作成する必要があります。

if output_list_google_autocomplete:
        st.download_button("Download the output",
                           ("n").join(output_list_google_autocomplete))
見出し、テキスト、テキスト入力、ダウンロード ボタンを備えた Streamlit アプリの外観著者からのスクリーンショット、2022 年 10 月

シンプルなアプリを作成しました! アプリのタイトルとファビコンを変更してみましょう。

その前に、これまでの Streamlit アプリ セクションのコードを見てみましょう。

Streamlit アプリ セクションのコード著者からのスクリーンショット、2022 年 10 月

アプリのタイトルとファビコンを変更する

アプリのデフォルトのタイトルは streamlit_app Streamlit で、アプリのファビコンは Streamlit アイコンです。

タイトルとファビコンを変更するには、st.set_page_config() を使用する必要があります。

また、アプリのレイアウトを広くすることを好みます (テストできます)。

st.set_page_config(
    page_title="Oh My App!",
    page_icon="😎",
    layout="wide"
)
ブラウザの Stream lit アプリ著者からのスクリーンショット、2022 年 10 月

アプリのデフォルト テーマを設定する

アプリのテーマはユーザーのシステム設定に基づいていますが、個人的には、ほとんどの場合、明るいテーマの方がコントラストが優れていることがわかりました。また、アプリのテーマを変更する方法を見つけるためにチームに時間を費やしたくありません.

Streamlit アプリの既定のテーマを設定するには、まずフォルダーを作成し、.streamlit という名前を付ける必要があります。 このフォルダー内にファイルを作成し、config.toml という名前を付けます。

config.toml 内に以下の行を挿入して、アプリのデフォルト テーマを設定する必要があります。

[theme]
base = "light"
Streamlit アプリのテーマをカスタマイズするための confing.toml ファイル コード著者からのスクリーンショット、2022 年 10 月

Streamlit でのユーザー認証

アプリをデプロイした後、誰かがアプリの URL を見つけてアクセスしたとします。

アプリを保護するには、ユーザーがアプリを使用できるようにする前に、ユーザーを承認する必要があります。これは、私たちが毎日使用するほとんどの SASS と同様です。

Streamlit アプリの場合、Streamlit-Authenticator パッケージを使用できます。 これをインストールするには、アプリ フォルダーにあるターミナルで pip3 install streamlit-authenticator コマンドを入力し、パッケージをアプリにインポートします。

何が起こっているのかをよりよく理解するために、Streamlit オーセンティケーター パッケージのドキュメントを読むことをお勧めします。

streamlit_authenticator を stauth としてインポート

ここで、ユーザーの資格情報を挿入するための config.yaml ファイルを作成します。

credentials:
  usernames:
    firstUser:
      email: firstuser@gmail.com
      name: The first username
      password: 12345 # Must be replaced with the hashed password
    secondUser:
      email: seconduser@gmail.com
      name: The second username
      password: 111213 # Must be replaced with the hashed password
cookie:
  expiry_days: 30
  key: some_signature_key
  name: some_cookie_name
preauthorized:
  emails:
    - my@gmail.com

ご覧のパッケージ ドキュメントのように、Hasher モジュールを使用してパスワードをハッシュする必要があります。 IPython を開いて、以下のコード行を実行することを好みます。

hashed_pa​​sswords = stauth.Hasher([‘12345’, ‘111213’])。生成()

ログインウィジェットの作成

ここで、ユーザーがユーザー名とパスワードを入力してアプリにログインできるログイン ウィジェットを作成する必要があります。

まず、pip3 install pyyaml コマンドで PyYAML パッケージをインストールし、import yaml でインポートする必要があります。

次に、オーセンティケーター オブジェクトを作成し、ログイン モジュールをレンダリングします。

with open("./config.yaml") as file:
    config = yaml.load(file, Loader=yaml.SafeLoader)

authenticator = stauth.Authenticate(
    config["credentials"],
    config["cookie"]["name"],
    config["cookie"]["key"],
    config["cookie"]["expiry_days"],
    config["preauthorized"]
)

name, authentication_status, username = authenticator.login("Login", "main")
Streamlit ログイン ウィジェット著者からのスクリーンショット、2022 年 10 月

ログインに成功したユーザーにアプリを表示する

これで、authentication_status 変数を使用して、正常にログインしたユーザーのアプリを確認できます。

if authentication_status:
    authenticator.logout('Logout', 'main')
    # OUR APP CODE COMES HERE
elif authentication_status == False:
    st.error('Username/password is incorrect')
elif authentication_status == None:
    st.warning('Please enter your username and password')

Docker を使用して Streamlit アプリをデプロイする

これで、アプリ開発の最終段階に入りました。

AWS、Google Cloud、Azure、Heroku、DigitalOcean など、さまざまなサービスを使用してアプリをデプロイできます。

Dockerfile の前に、requirements.txt ファイルを作成しましょう。 これを行うには、pip3 freeze > requirements.txt コマンドを使用できます。

Streamlit Dockerfile

アプリをデプロイするために、Python 3.9.10 を使用します。

FROM python:3.9.10
WORKDIR /app
COPY . .
RUN pip3 install -r requirements.txt
CMD ["streamlit", "run", "streamlit_app.py"]
EXPOSE 8501

要約

このチュートリアルでは、純粋な Python で見事な UI を作成し、それを Docker でデプロイする方法を説明しました。

さまざまな Streamlit ウィジェットの詳細については、十分に文書化された API リファレンスを参照してください。

その他のリソース:


主な画像: Yaran/Shutterstock

Leave a Comment

Your email address will not be published. Required fields are marked *