Kon's DX Lab - Case Study

Day3|列並び替えUIに思わぬ落とし穴。AgGrid×Streamlit初挑戦の日|CSV整形アプリ

Published on 2025-04-04

🔬 Case Study Summary
Problem

(ここに課題を記述)

Result

(ここに具体的な成果を記述)


Tech & Process

(ここに採用技術とプロセスを記述) コードを詳しく見る »

こんにちは、こんです🦊
今日は#100日チャレンジのDay3!

これまでAppSheetを使って業務アプリを作ってきましたが、
ついにStreamlitを使ったミニアプリ開発にも挑戦し始めました。


📦 今日つくったアプリ:CSV整形アプリ

社内で毎日行っている「CSVデータの整形作業(列の削除・並び替え・名称変更など)」を、Python×StreamlitでGUI操作できるようにしたミニアプリです。
これまでExcelマクロや「桐」というむか~しながらのシステムでやっていた作業を、もっとスマートに&ミスなくできるようにしたい…!ということで、作ってみました。

✅ Day3でできたこと

  • ✅ CSVのアップロード(Shift-JIS / UTF-8 自動判別)

  • ✅ カラムの一覧表示

  • ✅ チェックボックスで不要な列を削除

  • ✅ CSVのエクスポート(UTF-8 / ANSI選択可)

  • ✅ AgGridを使って「列の並び順を行ドラッグで変更」できるUIを導入


😅 そして地味にハマったこと…

今回の最大のつまずきポイントがこちら:

AgGridで行を並び替えても、その並び順が出力データに反映されない!

CSVファイルの「列名リスト」をAgGridの行データとして表示し、
それをドラッグして並べ替え=出力時の列順に反映する設計にしていたのですが…
AgGridの行ドラッグは見た目だけで、データの順番は実際には変わってないという事実に気づくまでにけっこう時間がかかりました。


💡 解決のヒントはStreamlit Discussから

ちょうど同じような悩みを持っていた方の投稿を見つけて救われました…!

💬 drag and drop rows in a dataframe - Streamlit Discuss

この投稿をヒントに、なんとか並び順の反映には成功しました🎉

ただし、Updateボタンの見た目がダサいのが現在の課題です(笑)
次回はこのボタン周りのUIをもっとスマートに整えたいと思います。


🧠 こんさんの気づき

  • Streamlit × AgGrid は想像以上に柔軟性が高くて便利

  • でもドラッグ並び替えを正確に拾うにはJSでの工夫が必要

  • こういう地味な部分がうまくいくと、日々の業務がグッと楽になる!


🔧 本アプリ更新の予定

  • ✅ カラム名の変更機能の追加

  • ✅ 並び替え・削除設定をJSONでテンプレ保存

  • ✅ テンプレ呼び出しでワンクリック加工


📌 使用技術・構成

  • 使用技術:Python(pandas, Streamlit, st_aggrid)

  • 目的:EC業務のCSV整形作業をGUIで高速化

  • 保存形式:ローカルCSV/JSON、将来的にはGoogle Drive API連携も予定


🦊 まとめ

「列順を変えるだけ」って、やってることはシンプルなのに
UIやデータ更新の流れを考えると、地味に複雑で奥が深い…。

でも、こういう小さなツールでも「業務が楽になる感覚」が得られると、
DXの面白さをリアルに感じます。

次回もまた、実務に根ざしたちいさなアプリを作っていきます!
読んでくださってありがとうございました!


📌 #100日チャレンジ #DX実験室 #Streamlit #AgGrid #Python #CSV整形アプリ