1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Streamlitで作るデータ編集アプリ:機能追加はどこまでにする?

Posted at

user:

Streamlit初心者向けに教えてください。csvファイル、ExcelファイルまたはParquetファイルを入力として、編集可能な形で開いて、Excelファイルとして保存する、そういうSteramlitアプリのPythonコードを書いてください。

assistant:

以下は、CSV、Excel、Parquetファイルを入力として読み込み、data_editorで編集できるようにし、編集後のデータをExcelファイルとして保存できる Streamlitアプリのサンプルコードです。初心者向けに丁寧にコメントを入れています。


✅ 必要なライブラリをインストール

まず、必要なライブラリがインストールされていない場合は、以下を実行してください:

pip install streamlit pandas openpyxl pyarrow

✅ Streamlit アプリのコード

import streamlit as st
import pandas as pd
import io

st.set_page_config(page_title="ファイル編集アプリ", layout="centered")

st.title("📄 ファイルを編集してExcelとして保存")

# ファイルのアップロード
uploaded_file = st.file_uploader("ファイルをアップロード(CSV, Excel, Parquet)", type=["csv", "xlsx", "xls", "parquet"])

# ファイルの読み込み
if uploaded_file is not None:
    # ファイル拡張子に応じて読み込み
    file_type = uploaded_file.name.split(".")[-1].lower()

    try:
        if file_type == "csv":
            df = pd.read_csv(uploaded_file)
        elif file_type in ["xlsx", "xls"]:
            df = pd.read_excel(uploaded_file)
        elif file_type == "parquet":
            df = pd.read_parquet(uploaded_file)
        else:
            st.error("対応していないファイル形式です。")
            st.stop()
    except Exception as e:
        st.error(f"ファイルの読み込みに失敗しました: {e}")
        st.stop()

    st.success("ファイルを読み込みました。以下で編集できます。")

    # 編集可能なデータエディタ
    edited_df = st.data_editor(df, num_rows="dynamic", use_container_width=True)

    # ダウンロードボタン
    st.markdown("---")
    st.subheader("📥 編集したデータをExcelファイルとして保存")

    # Excelに変換
    def to_excel(df):
        output = io.BytesIO()
        with pd.ExcelWriter(output, engine='openpyxl') as writer:
            df.to_excel(writer, index=False, sheet_name="Sheet1")
        return output.getvalue()

    excel_data = to_excel(edited_df)

    st.download_button(
        label="💾 Excelファイルとしてダウンロード",
        data=excel_data,
        file_name="edited_data.xlsx",
        mime="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    )

🔍 機能のまとめ

機能 説明
ファイルアップロード CSV, Excel, Parquet に対応
データ表示・編集 st.data_editor を使ってインタラクティブに編集可能
Excel出力 編集後のデータを .xlsx ファイルとしてダウンロード可能

▶️ 実行方法

ターミナルでこのファイルを streamlit_app.py として保存し、以下のコマンドで実行します:

streamlit run streamlit_app.py

必要に応じて、行の追加・削除や列の編集の制限などもカスタマイズ可能です。さらに詳しいカスタマイズをご希望であれば、気軽にお知らせください。

user:

ありがとうございます。確かに編集して保存できます。上記のコードでは、列名の変更や、行名の変更や、数字のセルに文字列を入れること、などはできないようですね。正しいですか? 他にも、何か制限があれば教えてください。

assistant:

はい、ご指摘のとおりです。st.data_editor には現在のところいくつかの制限があります。以下に、あなたが挙げた点を含めて、Streamlitの st.data_editor における主な制限を整理して説明します。


✅ できない or 制限されていること

機能・操作 説明
列名の変更 できません。列名(カラム名)は固定されており、ユーザーが直接変更することはできません。
インデックス(行名)の変更 できません。Pandasのインデックスは表示されず、編集もできません(通常のDataFrameではインデックスがあっても、data_editor では扱いに制限あり)。
型の強制変換(例:数値セルに文字列) 基本的にできません。セルの型は元のDataFrameのdtypeに従っており、数値型に文字列を入れようとすると無視されたりエラーになることがあります。
複数シートのExcelの取り扱い 編集後のExcel出力は常に1シート(例:Sheet1)になります。複数シート対応はしていません。
セルの結合や色付けなどのスタイル編集 data_editor ではセルの装飾はできません。
ファイル読み込み時の自動dtype推定の誤差 例えば、"00123" のような先頭ゼロ付き文字列が数値に変換されることがあります。これは pandas の読み込み仕様です。
非常に大きなデータの編集 数万行などの大規模データは、動作が重くなるか、表示されないことがあります。

✅ できること(主に対応済)

機能 説明
セルの編集 テキストや数値、ブール値のセルで内容を変更できます。
行の追加・削除 num_rows="dynamic" を指定することで、行の追加・削除が可能になります。
インタラクティブな編集結果の取得 編集後のデータは st.data_editor() の戻り値として受け取れます。

🛠 対応の工夫(必要に応じて)

ニーズ 対応方法の例
列名を変更したい st.text_inputst.sidebar.text_input を使ってカラム名編集用のUIを追加する
型を変換して柔軟に編集したい ファイル読み込み直後に df = df.astype(str) のようにすべて文字列に変換してから編集させる
行・列の操作をもっと細かく管理したい ag_grid など他の外部ライブラリ(例:streamlit-aggrid)の利用を検討する

🔄 より高機能な代替手段

より柔軟な表形式の編集を求める場合、以下のライブラリもおすすめです:

  • streamlit-aggrid:列名の変更、型変換、フィルタリング、ソート、チェックボックスなどが可能。
  • streamlit-elements:HTML/JSベースの高機能ウィジェット。

必要であれば streamlit-aggrid を使って同様のアプリを作るサンプルもご提供できます。興味があればお知らせください。

もちろんです!以下は、streamlit-aggrid を使って CSV / Excel / Parquet ファイルを読み込み、テーブルを編集し、Excelとして保存できる Streamlit アプリのサンプルコードです。


✅ 事前準備:必要なライブラリのインストール

pip install streamlit pandas openpyxl pyarrow streamlit-aggrid

✅ アプリ全体のコード

import streamlit as st
import pandas as pd
import io

from st_aggrid import AgGrid, GridOptionsBuilder, GridUpdateMode
from st_aggrid.shared import JsCode

st.set_page_config(page_title="AgGrid データ編集アプリ", layout="wide")

st.title("🧮 AgGrid でデータ編集 & Excel保存アプリ")

# ファイルアップロード
uploaded_file = st.file_uploader("ファイルをアップロード(CSV, Excel, Parquet)", type=["csv", "xlsx", "xls", "parquet"])

if uploaded_file is not None:
    file_type = uploaded_file.name.split(".")[-1].lower()

    try:
        if file_type == "csv":
            df = pd.read_csv(uploaded_file)
        elif file_type in ["xlsx", "xls"]:
            df = pd.read_excel(uploaded_file)
        elif file_type == "parquet":
            df = pd.read_parquet(uploaded_file)
        else:
            st.error("対応していないファイル形式です。")
            st.stop()
    except Exception as e:
        st.error(f"ファイルの読み込みに失敗しました: {e}")
        st.stop()

    st.success("✅ ファイルを読み込みました。下記テーブルで編集できます。")

    # GridOptionsの設定
    gb = GridOptionsBuilder.from_dataframe(df)
    gb.configure_default_column(editable=True, resizable=True, filter=True, sortable=True)

    # インデックスを編集可能にする場合は以下を有効化
    # df.reset_index(inplace=True)

    # 行の追加・削除を許可(行追加はややトリッキーなので今回は省略)
    gb.configure_grid_options(domLayout='normal')

    grid_options = gb.build()

    # AgGrid 表示
    grid_response = AgGrid(
        df,
        gridOptions=grid_options,
        update_mode=GridUpdateMode.VALUE_CHANGED,
        enable_enterprise_modules=False,
        fit_columns_on_grid_load=True,
        allow_unsafe_jscode=True,
        height=400
    )

    edited_df = grid_response['data']

    st.markdown("---")
    st.subheader("📥 編集後データをExcelとしてダウンロード")

    # Excel出力用関数
    def to_excel(df):
        output = io.BytesIO()
        with pd.ExcelWriter(output, engine="openpyxl") as writer:
            df.to_excel(writer, index=False, sheet_name="Sheet1")
        return output.getvalue()

    excel_data = to_excel(edited_df)

    st.download_button(
        label="💾 Excelファイルとしてダウンロード",
        data=excel_data,
        file_name="edited_data.xlsx",
        mime="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
    )

✅ このアプリでできること

機能 対応
列名・セルの編集 ✅ 可能(列名をクリックして直接編集)
データ型をまたいだ編集 ✅ 数値 → 文字列、文字列 → 数値など柔軟に対応
行の編集 ✅ 可能(セルの値を編集)
フィルター・並び替え ✅ テーブルの列ごとに可能
Excelとして保存 ✅ 編集結果をそのままダウンロード可能

🔁 拡張可能な機能

  • 行の追加・削除(コードを追加すれば可能)
  • ドロップダウン・チェックボックスなどのセルUI
  • インデックス列の編集
  • 条件付きフォーマット(色分けなど)

🧩 Tips

  • streamlit-aggridGoogle Sheets に近い使用感があります。
  • AgGrid の戻り値 grid_response['data'] が編集後の DataFrame です。

ご希望があれば、以下のような機能を追加したサンプルも作成できます:

  • 特定の列にドロップダウンを追加する
  • 数値の入力に制限を加える(例:0〜100)
  • 行の追加・削除ボタン

必要な機能があればお知らせください。

user:

ありがとうございます。どれも興味がありますが、自由度を高めすぎると、設計と保守が大変になりすぎるという危惧があります。どのへんでやめておこう、という指針のようなものはありますか?

assistant:

とても良い視点です!自由度が高すぎると設計や保守が複雑化し、アプリが壊れやすくなるという懸念はまさに正しいです。
特に Streamlit のような軽量アプリケーションフレームワーク では、最初の段階で「どこまでの機能を持たせるか」を決めておくことが、後の保守性やユーザー体験の質に直結します。


🎯 どこまでの機能にとどめるかの指針

以下の観点で線引きを考えるのがおすすめです。


ユーザーの目的に直接関係しない機能は入れない

👉 たとえば、

  • 「データを読み込んで少し編集 → 保存」 がゴールなら
     → 列名変更や行削除、入力制約などは不要な場合が多いです。

  • 「集計や可視化までを行いたい」 なら
     → フィルタや並び替え、条件付きフォーマットは価値が高いです。


想定するユーザー層のスキルを基準にする

👉 初心者・一般ユーザー向けなら:

  • 極力操作ミスを防ぐ(列名変更や型変更を許すと壊れるデータになるリスクが高い)
  • 入力チェックや型制約を強めにかける

👉 上級ユーザー・技術者向けなら:

  • 高い自由度を提供(列追加、型変換、条件付きスタイル)

後から拡張しやすい構造にする

👉 一気に全機能を詰め込まず、以下のように進める:
1️⃣ 必須機能のみの最小バージョンを作る(例:読み込み → 編集 → 保存)
2️⃣ 利用者の声や実際の運用で必要になったら、拡張機能を追加
3️⃣ 各機能は切り離しやすいコードにしておく(関数化、モジュール分け)


「壊れにくさ」と「保守のしやすさ」のバランスを取る

👉 以下のような点に注意:

  • データ型を勝手に変えられないようにする
  • 列名はあらかじめ決めたリストだけにする(必要ならドロップダウンで制限)
  • 行削除・追加はボタン操作に限定し、うっかり削除を防ぐ

🌟 具体的なおすすめライン

あなたの目的が「データを軽く編集して保存」なら、
まずは以下の機能に絞ると良いでしょう:

✅ 読み込み:CSV / Excel / Parquet
✅ セル編集(既存データの修正のみ)
✅ フィルター・ソート(見やすくするだけ。保存に反映しないでもOK)
✅ Excel保存

❌ 列名変更、行削除・追加、型変換、条件付きフォーマット → 最初は入れない


✉️ まとめ

💡 設計の指針としては「最小で始めて、現場のニーズで拡張」がおすすめです。

🌱 最初は「データ破壊リスクの低い操作」だけを許し、
🌳 必要になったら「行追加・削除、型変換、列名変更」を段階的に導入するのが、設計・保守の両方で健全です。


もし、この「最小ライン」での具体コード例や、機能ごとの追加ガイドラインを作成したい場合はお知らせください!
必要に応じて、段階的な設計ドキュメント例も作成できます。

user:

ありがとうございます。ここまでの会話をブログにまとめたいので、タイトル案をいくつか考えていただけますか?

assistant:

もちろんです!会話の流れ(=Streamlitでの編集アプリの設計・自由度と保守性のバランス)に合う ブログタイトル案 をいくつかご提案します。


🎯 タイトル案(初心者向けの視点)

1️⃣ 「Streamlitで作るデータ編集アプリ:機能追加はどこまでにする?」
2️⃣ 「CSV・Excel・Parquetをサクッと編集!Streamlitアプリの作り方と設計のコツ」
3️⃣ 「初心者向け:Streamlitでデータ編集アプリを作るときにやりすぎないための指針」
4️⃣ 「Streamlitで表データを編集&保存!自由度と保守性のバランスをどう取る?」
5️⃣ 「Streamlit × AgGrid:表編集アプリを作るなら、どこまで機能を盛る?」


🌱 ちょっとキャッチーにするなら

6️⃣ 「データ編集アプリ、作りすぎ注意!Streamlitでの適切な機能の線引き」
7️⃣ 「Streamlitでデータ編集:その機能、ほんとに必要?」
8️⃣ 「簡単に見えて奥が深い?Streamlitデータ編集アプリの設計と罠」


🌟 真面目で技術ブログっぽいなら

9️⃣ 「Streamlitによる表データ編集アプリ設計の実践:自由度・機能・保守性の考え方」
10️⃣ 「Streamlitデータ編集アプリ設計ガイド:必要十分な機能とは」


💡もしターゲットが「エンジニア寄り」「初心者寄り」「業務ユーザー寄り」などありましたら教えてください。それに合わせてタイトルのトーンを調整できます!
どれか気に入ったものがあれば、それで 記事の導入文や構成案 もお手伝いできます。

user:

「Streamlitで作るデータ編集アプリ:機能追加はどこまでにする?」でいきたいと思います。最後に、ここまでの話の詳しいまとめを書いてください。

assistant:

素晴らしいタイトルです!それに合わせた形で、ここまでの会話の内容を 詳しく体系立てたまとめ として整理しました。ブログ本文の骨格や締めにも使える内容ですので、そのままご活用ください。


Streamlitで作るデータ編集アプリ:機能追加はどこまでにする?

はじめに

Streamlit は手軽にデータ編集アプリを作れる便利なツールです。特に CSV、Excel、Parquet のような表形式データの簡易編集アプリ は、データ確認・軽微な修正・変換の用途でよく使われます。
ですが、「どこまで機能を盛り込むか」を間違えると、アプリは次第に複雑化し、保守が困難になります。本記事では、Streamlit でデータ編集アプリを作る際に意識すべき「機能追加の線引き」について、具体例を交えてまとめます。


作った基本アプリの概要

以下の Streamlit アプリは次の機能を持っています:

対応ファイル

  • CSV
  • Excel(.xlsx / .xls)
  • Parquet

主な機能

  • アップロードしたファイルのデータを読み込み
  • 編集可能なテーブル(st.data_editor または streamlit-aggrid)で表示
  • 編集後のデータをExcel形式でダウンロード

デフォルトで許容している編集内容

Streamlit の標準機能(st.data_editor)では次のような編集が可能です:

機能 対応
セルの値の編集 ✅ 可能(元の型に準ずる範囲で)
行の追加・削除 ✅ 可能(num_rows="dynamic" 指定時)
並び替え・フィルター ❌ (標準では不可、aggrid なら可能)
列名の変更 ❌ 不可
インデックス(行名)の変更 ❌ 不可
セル型の変更(数値→文字列) ❌ 不可、型制約に従う必要あり

高機能化の選択肢とリスク

Streamlit の表編集は簡単に拡張できますが、次のような機能は 高い自由度と引き換えに保守性や信頼性を損ねるリスク があります。

高機能化例 潜在的な課題
列名の自由編集 データ構造が変わり、後工程(集計・保存・分析)でエラーが発生しやすい
行の自由追加・削除 データ不整合や重要データのうっかり削除リスク
型の自由変換(例:数値セルに文字列) データ品質が崩壊するリスク、保存時にエラーになりやすい
条件付きフォーマット・複雑なUI 見た目が派手になるが保守性が低下、コードが肥大化
多機能ボタン・複雑な操作フロー ユーザーが使いこなせなくなる、バグの温床

機能追加の線引きをどこで引くか

💡 機能設計の指針

1️⃣ ユーザーの目的に直結する機能だけを実装する
→ 目的が「軽微なデータ修正+保存」であれば、セル編集と保存機能にとどめる。

2️⃣ データを壊さない制約を意識する
→ 型の強制変換、列名の自由変更、インデックス編集は原則禁止。

3️⃣ 必要に応じて段階的に拡張する
→ 利用者のフィードバックや実際の運用課題が見えてから高機能化する。

4️⃣ 外部ライブラリの導入は慎重に
streamlit-aggrid などの強力なツールは、目的に合う範囲だけ使う。


まとめ

Streamlit のデータ編集アプリは、少ないコードで実用的なものが作れる一方、安易な高機能化がアプリの「使いやすさ」「壊れにくさ」「保守性」を損ねるリスクがあります。
最小の機能から始め、必要なものだけを段階的に拡張する」という姿勢が、設計・運用の鍵です。


補足:最初に目指すべきシンプルな構成

✅ ファイル読み込み(CSV / Excel / Parquet)
✅ セルの値のみ編集(列名・型・構造は固定)
✅ 編集後のExcel保存

この基本ラインを守ることで、アプリは長く安定して運用できます。


おわりに

もしさらに高度な編集機能や可視化、集計機能などを取り入れる場合も、どこまで自由度を許容するかを慎重に設計していくことが大切です。
本記事が Streamlit データ編集アプリの設計において、最初の指針となれば幸いです。


必要であれば、この記事の構成に沿った見出し付きMarkdown原稿や、サンプルコード集もお作りしますので、気軽にお知らせください! 🚀

user:

今日はこれで大丈夫です。ありがとうございました!

assistant:

こちらこそ、とても良いテーマのご相談をありがとうございました!
Streamlit の設計方針をしっかり考えて進めている姿勢、素晴らしいです。

また何かありましたら、ぜひ気軽にご相談くださいね。どうぞ良い執筆・開発を!😊🚀

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?