python の学習教材として streamlit で twitter検索アプリ を作ってみた

# ①はじめに

**python**について基礎学習を続けていたが、
一向にプロダクトを作成する**イメージが掴めず**にいたので、
一旦現状の知識で何か作成してみようと試みた。
教育サイトを使った基礎学習自体は楽だが、一方で**モチベーションが下がりやすく**、
継続することが難しいと感じる。
現在学んでいることを使ってどういった活用が出来るのかを**イメージするべく**
まずは形にしてみて、今後の**モチベーションアップを図りたい**と思う。

# ②このプロダクトの説明

**twitterAPIとStreamlitを組み合わせて、簡単なtweet検索アプリを作ってみた。**

https://twitter.com/ProtoYuta/status/1551850879430856704

ローカル起動ではあるが、検索ボックスにキーワードを入れてボタンを押すことで
tweetの**キーワード検索が出来る仕組み**となっている。
取得したtweetは本文だけを抽出して、pandasにてデータフレームを作成し、
表形式でブラウザに描画する。

<details><summary>コード</summary>

```python
import streamlit as st
import requests
import os
import urllib
import json
import pandas as pd
from st_aggrid import AgGrid

st.markdown("# ツイート検索アプリ")
st.markdown("**APIを用いてツイッターからフリーワードでツイート検索出来ます**")

text = st.text_input("検索ワード入力欄")
boo = st.button("検索")

if boo and text != '':

    try:
        tweets = []
        b_token = os.environ.get('BEARER_TOKEN')
        headers = {'Authorization': f'Bearer {b_token}'}
        q_words = urllib.parse.quote(text)
        url = f'https://api.twitter.com/2/tweets/search/recent?query={q_words} -is:retweet'
        res = requests.get(url, headers=headers)
        j_res = res.json()

        for i in range(10):
            tweets.append(j_res['data'][i]['text'])

        df = pd.DataFrame(data={'ツイート内容': tweets})
        AgGrid(df, theme='blue')
    except:
        st.warning('検索ワードが見つかりませんでした')

elif boo and text == '':
    st.warning('検索ワードを入力してください')

```

</details>

コード自体は複雑ではないので、気軽に試してみて欲しいと思う。

# ③このプロダクトの価値

客観的に見て、**残念ながら現状ではプロダクト自体に価値を持たせることは出来ていない**。
（時間の節約が出来る、売上に貢献できる、プロダクト自体が利益を生み出す等が無い為）
強いて言えば、**教材としての価値はあるのではないか**と思っている。
次項にてこのプロダクトを作成する中で**学べた内容**と参考リンクを紹介していく。

# ④このプロダクトから学べた内容

<details><summary>vscode</summary>
プログラミングをする際にコードを記述する為に使用。<br>
<strong>もっとも有名なエディターで汎用性も高い。</strong>

<strong>参考動画</strong>

<iframe width="560" height="315" src="https://www.youtube.com/embed/B8WnCAOcheM" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</details>

<details><summary>streamlit</summary>
pythonのライブラリの１つで、<strong>ブラウザ型のアプリケーションがhtml無しでも作れる。</strong><br>
（自分はローカルで動かしたが、githubと連携することで無料でも１つまで公開出来る）<br>
ユーザーインターフェースを作るために使用。

<strong>参考動画</strong>

<iframe width="560" height="315" src="https://www.youtube.com/embed/4nsTce1Oce8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</details>

<details><summary>pandas</summary>
pythonのライブラリの１つで、<strong>表形式のデータを簡単に作成することが出来る。</strong><br>
取得した情報を表形式で表現したかったので使用。

<strong>参考動画</strong>

<iframe width="560" height="315" src="https://www.youtube.com/embed/HYWQbAdsG6s" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</details>

<details><summary>twitterAPI</summary>
<strong>twitterの情報を取得することが出来るAPI。</strong><br>
今回のデータソースになるので、これが無いと始まらない。

<strong>参考動画</strong>

<iframe width="560" height="315" src="https://www.youtube.com/embed/e5gd-QqXmmY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</details>

<details><summary>Github</summary>
<strong>バージョン管理が出来るサービス？</strong>よく分かっていないが<br>
アプリを公開する為に、streamlitと連携することが必要だった為使用。

<strong>参考動画</strong>

<iframe width="560" height="315" src="https://www.youtube.com/embed/6SLMB7BPG9E" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</details>

<details><summary>仮想環境</summary>
<strong>コンピューターの領域上に切り離された作業領域を作るため使用。</strong><br>
ライブラリは凄く便利だが、組み合わせによっては不具合の原因になったりすることもある。<br>
プロダクトごとに分けるのが無難だと思う。

<strong>参考ページ</strong>
https://www.python.jp/install/windows/venv.html
</details>

<details><summary>環境変数</summary>
<strong>コンピューター内部に辞書型で重要な情報を格納する仕組み（パスワードなど）</strong><br>
プログラム上に直書きするのはセキュリティ上問題があるのでこちらが推奨される。

<strong>参考ページ</strong>
https://www.javadrive.jp/command/command/index4.html
</details>

<details><summary>cli</summary>
ディレクトリの移動、ライブラリのインストール、プログラムの起動、仮想環境の作成<br>
環境変数の設定、バージョン管理など<strong>プロダクトを作成していく上で必須の知識。</strong><br>
逆に覚えていないと差し障りのあるもの。

<strong>参考ページ</strong>
https://www.modis.co.jp/candidate/insight/column_28
</details>

参考が殆ど**Vtuberのサプーさん**です。いつも参考にさせてもらっています。

# ⑤おわりに

簡単な１つのプロダクトを作成するにあたり、**様々な異なる知識が必要**になった。
基礎学習として学習サイトでコードを書くというのは言わば「点」であり、
全体像である「線」をイメージ出来ないというのは言わば当然の結果だと思う。
**プロダクトを作成するという行為は、どんなプロセスが必要なのかを俯瞰して考える必要があるので
経験を積むうえで、定期的に行っていく必要があると感じた。**
プログラミングに限らず、業務上でも大切な考え方なので教育担当の方は取り入れてみるのも
もしかしたら良いかもしれない。