PythonとStreamlitを使った簡易的英語フラッシュカードアプリの作成
PythonとStreamlitを使って、簡単な英語フラッシュカードアプリを作成してみました。
このアプリは、英単語とそれに対応する絵を表示し、子供たちが楽しみながら英語を学ぶのに役立ちます。以下は、アプリを作成するステップです。
**1. データの収集**:
- 最初に、フラッシュカードに表示する英単語とそれに対応する絵のデータを収集します。例えば、英単語リストと画像ファイルを用意します。
**2. データの整形**:
- 収集した英単語と絵をペアにし、Pythonの辞書に格納します。例えば、`{"apple": "apple.jpg", "cat": "cat.jpg"}`のような形です。
**3. データのCSVファイルへの保存**:
- 辞書からデータフレームを作成し、Pandasライブラリを使用してCSVファイルに保存します。
```python
import pandas as pd
# 辞書からデータフレームを作成
flashcards_df = pd.DataFrame.from_dict(flashcards_data, orient='index', columns=['image'])
# CSVファイルに保存
flashcards_df.to_csv('flashcards.csv')
```
**4. 画像の収集**:
- 保存した英単語と同じ名前で、それぞれの英単語に対応する画像ファイルを収集します。例えば、"apple.jpg"、"cat.jpg"、"dog.jpg"などです。
**5. Streamlitアプリの作成**:
- Streamlitを使って、アプリを作成します。以下のスクリプトは基本的なフラッシュカードの表示方法です。
```python
import streamlit as st
import pandas as pd
# CSVファイルからデータを読み込む
data = pd.read_csv('flashcards.csv')
# Streamlitアプリケーション
st.title("英語フラッシュカード")
if index < len(data):
# 現在のカードを取得
current_card = data.iloc[index]
# 画像と英単語を表示
st.image(current_card['image'], caption=current_card['word'], use_column_width=True)
st.write(current_card['word'])
# 'Next'ボタンを作成して、次のカードに進む処理を実行する
if st.button('Next'):
index += 1
else:
st.write("すべてのカードを表示しました。")
```
**6. 画像のフォルダを作成**:
- 保存した画像ファイルをまとめるフォルダを作成します。フォルダ名は任意ですが、アプリが簡単にアクセスできる場所に保存してください。
**7. Streamlitアプリのコードを修正**:
- Streamlitアプリのコードを修正して、新しい画像フォルダから画像を読み込むようにします。
```python
import streamlit as st
import os
# 画像フォルダのパス
image_folder = "flashcard_images"
# 画像ファイル名のリストを取得
image_files = os.listdir(image_folder)
# Streamlitアプリケーション
st.title("英語フラッシュカード")
if image_files:
# 画像を表示
image_index = 0 # 画像ファイルのリストのインデックス
st.image(os.path.join(image_folder, image_files[image_index]), caption="英単語")
st.write(image_files[image_index])
# 'Next'ボタンを作成して、次の画像に進む処理を実行する
if st.button('Next'):
image_index += 1
if image_index >= len(image_files):
image_index = 0
st.image(os.path.join(image_folder, image_files[image_index]), caption="英単語")
st.write(image_files[image_index])
else:
st.write("画像が見つかりません。")
```
**8. Streamlitアプリを起動**:
- ターミナルでStreamlitアプリを起動します。
```
streamlit run app.py
```
以上がPythonとStreamlitを使って英語フラッシュカードアプリを作成する基本的なステップです。英単語と対応する画像を楽しみながら学ぶのに最適なアプリを作成して、学習の手助けに役立ててみてください。
