Streamlitでスプレッドシートにログを出力する

# 目次
1. Streamlitについて
1. 目的
1. 方法
1. おまけ
1. おわりに

# Streamlitについて
Streamlitは、Pythonだけで簡単にWebアプリケーションを作成できる強者です。
遊び心もあって素敵です。
公式ドキュメントは[こちら](https://streamlit.io/)


# 目的
Streamlit, 実はデフォルトでLoggerが用意されています。

でも、これは管理者画面のコンソールにつらつら吐き出されるだけなので少しみづらいです。(自分が良い方法を知らないだけかもしれないけど...)

必要な情報のみ、スプレッドシートに出力できたらいいのに...
と思っていたら、とうとうできました！
いろんなサイトを見ながらやったので、備忘録的にまとめておきたいと思います。
(間違いがあれば指摘していただけると嬉しいです)

# 用意するもの
- アカウント
    - Github: Streamlitアプリをデプロイするため
    - Streamlit:Streamlitアプリをデプロイするため
    - Google: GCSとスプレッドシートを利用するため 
- 環境
    - streamlit(今回は、1.12.0を使用, まだ入っていない場合は ```pip3 install streamlit``` でインストール)

今回は、スプレッドシートに書き出す部分のみ扱います。

# 方法
## 参考サイト
↓大きく参考にしたサイト
[ベースとなるアプリ](https://github.com/streamlit/example-app-bug-report)
[StreamlitとGCSの接続](https://docs.streamlit.io/knowledge-base/tutorials/databases/gcs)

このBug Reportというアプリを見た時に、スプシに書き出せるのか！！という衝撃が走りました笑

## Google Cloud Storage の設定
[こちらの公式ドキュメント](https://docs.streamlit.io/knowledge-base/tutorials/databases/gcs)を参考に、GCSとStreamlitのアプリを紐付ける。

画像がとても小さいですが、ズームすれば意外と見えます

## スプレッドシートの作成
データベースとして使用したいスプレッドシートを作成します。

この時、スプレッドシートの設定は **「リンクを知っている人は誰でも編集可能」** にするのがおすすめです。
全て試したわけではないですが、閲覧権限のみではエラーとなりました。

シート名も後でプログラムで指定するので変更しましょう。
**日本語よりも英語が良い**です。

シート名がリクエストに入るので、日本語だとうまくいかない時があります(たぶん)

## Streamlitアプリのコードを作成

main.pyという名前のファイルを作成。以下のコードを写す。
(ただし、SHEET_IDとSHEET_NAMEは自分のものを指定)

```python:main.py
import google_auth_httplib2
import httplib2
import streamlit as st
from google.oauth2 import service_account
from googleapiclient.discovery import build
from googleapiclient.http import HttpRequest

SCOPE = "https://www.googleapis.com/auth/spreadsheets"
SHEET_ID = "自分のスプレッドシートID"
SHEET_NAME = "自分のスプレッドシートの シート名"

@st.experimental_singleton()
def connect_to_gsheet():
    # Create a connection object
    credentials = service_account.Credentials.from_service_account_info(
        st.secrets["gcp_service_account"], scopes=[SCOPE]
    )

    # Create a new Http() object for every request
    def build_request(http, *args, **kwargs):
        new_http = google_auth_httplib2.AuthorizedHttp(
            credentials, http=httplib2.Http()
        )

        return HttpRequest(new_http, *args, **kwargs)

    authorized_http = google_auth_httplib2.AuthorizedHttp(
        credentials, http=httplib2.Http()
    )

    service = build("sheets", "v4", requestBuilder=build_request, http=authorized_http)
    gsheet_connector = service.spreadsheets()

    return gsheet_connector


def add_row_to_gsheet(gsheet_connector, row):
    gsheet_connector.values().append(
        spreadsheetId=SHEET_ID,
        range=f"{SHEET_NAME}!A:C",
        body=dict(values=row),
        valueInputOption="USER_ENTERED",
    ).execute()

#### main contents
st.title("Hello")

gsheet_connector = connect_to_gsheet()

form = st.form(key="test")
with form:
    text1 = st.text_input("first")
    text2 = st.text_input("second")
    submitted = st.form_submit_button(label="Submit")

if submitted:
    add_row_to_gsheet(gsheet_connector, [[text1, text2]])
    st.success("OK!")


```

## ローカルでの動きを確認
ターミナルで下記コマンドを実行してみてください！
```
streamlit run main.py
```
※ファイル名をmain.py以外にした人は、上のコマンドもそのファイル名に差し替えます

最初は時間かかりますが、うまくいけば勝手にブラウザが起動するはず！

アプリを動かしたあと、スプレッドシートをみてみてください。記録されていますか？

# おまけ
スプレッドシートに出力することで、ログの分析もお手軽です！

スプレッドシートのCOUNTIF関数等やグラフ描画を駆使すれば、可視化ダッシュボードも瞬殺です！！

![スクリーンショット 2022-08-16 0.45.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1475470/7c6b84a5-821e-6dbe-931b-ebed7c8a6330.png)

リアルタイムで分析できる別のStreamlitアプリを作成するのもいいですね！
その際は[こちら](https://docs.streamlit.io/knowledge-base/tutorials/databases/public-gsheet)が参考になります！データの読み取りは、書き出しよりも単純です。

また、Streamlitでやりたいことが増えそうです。

# おわりに
だいぶ簡単にでしたが、スプレッドシートへのログの出力について紹介しました！
あとは、```add_row_to_gsheet(gsheet_connector, [[text1, text2]])```
この一行を、自分のアプリの中に出力したいタイミングで入れればOKです！


これから注意点はまとめていきます！

まずは、簡単な初投稿でした！終わり！