【Python】データファイルを読み込めるWebアプリ作成【データ解析】

Google ChromeやSafariといったブラウザ上で、手持ちのデータからグラフを表示したり、データの解析を行ってみたいと思いませんか？
streamlitというpythonのライブラリを用いると、ブラウザ上でデータ解析ができるWebアプリを簡単に作れるようになるんです。
今回は、データファイル（csv）を読み込んで、データの内容をブラウザに表示するところまでを扱います。
データ解析の基本である、データファイルの読み込みができるようになります。一つずつできることを増やしていきましょう！

動作検証済み環境

macOS Monterey(12.4), python3.7.10

Streamlitで作るデータ解析Webアプリの技術書を販売中

¥2,000 → ¥1,000 今なら50%OFF!!

データ解析をアプリで行う！
データ解析とグラフ描画を自動でしてくれるアプリが作れます！

技術書ページへ

データファイル（csv）を読み込んで、データの内容をブラウザに表示するWebアプリとは？

完成物

上のように、ドラッグ＆ドロップでCSVファイルをアップロードできるようなアプリを作ります。
「Browse files」ボタンを押せば、自身のPC内からアップロードするファイルを指定することもできます。

以下は avrage_temp_kyoto_2018.csvというCSVファイルをアップロードした結果、データが表示された様子です。

上記のようなことができるWebアプリがたった数行で実装できちゃうんです！

※ローカル環境ですので、Web上にデータが公開されている訳ではありません。

アプリの作成方法

ソースコード

以下のように、streamlitとpandasのライブラリを使って実装するだけです。
コメント行を除くと、たった7行ですね。

以下のコードをweb_input_file.py という名前で Desktop/labcode/python/web-data-analysis/Input_file ディレクトリに保存します。

import streamlit as st
import pandas as pd

# ページのタイトル（なくてもいい）
st.title('My first Streamlit app')

# ファイルアップローダーの準備
uploaded_file = st.file_uploader("CSVファイルのアップロード", type="csv")

# uploadファイルが存在するときだけ、csvファイルの読み込みがされる。
if uploaded_file is not None:
	# コメント行をスキップして読み込んでくれる
    dataframe = pd.read_csv(uploaded_file, comment="#")
    # 表として書き出される
    st.write(dataframe)

プログラムを実行する

ターミナルを開き、

$ cd Desktop/labcode/python/web-data-analysis/Input_file

と入力し、ディレクトリを移動します。あとは以下のコマンドでstreamlitを起動させるだけです。（ $マークは無視してください）

$ streamlit run web_input_file.py

少しすると自動的にブラウザで http://localhost:8501/ のページが開かれて、上でお見せしたページが表示されると思います。これだけです！

アップロードするCSVファイル

アップロードするCSVファイルはなんでもよいのですが、こちらのファイルを使ってみると同じ結果が得られるかと思います。

avrage_temp_kyoto_2018.csvという名前でファイルをご自身のPCのDesktop/labcode/python/web-data-analysis/Input_fileフォルダに保存してから、アップロードを試みてください。

# averaged temperature in 2018 @ Kyoto city
month, averaged temperature in daytime
1,3.9
2,4.4
3,10.9
4,16.4
5,20.0
6,23.4
7,29.8
8,29.5
9,23.6
10,18.7
11,13.5
12,8.2

streamlitのインストール方法

ライブラリをインターネット上から自身のPCにダウンロードしていないと、たとえ import streamlit as st と記述しても使えません。
streamlitがないよ！という旨のエラーが出た場合は、pip installを使ってダウンロードしましょう。実行するディレクトリはどこでもOKです。

$ pip install streamlit

しばらくして、Successfullyという文言が出て来れば完了です。

コードの解説

上に書いたソースコードの解説をしていきます。

import streamlit as st

st.title('My first Streamlit app')
uploaded_file = st.file_uploader("CSVファイルのアップロード", type="csv")

ここの部分がstreamlitでファイルのアップローダーを実装している部分です。
1行目でstreamlitのライブラリをインポートし、ファイル内でstreamlitを使えるようにします。
次に2行目でアプリのタイトルを追加しています。正直なくてもいいですが、あった方がかっこいいので。。

3行目の右辺のst.file_uploader("CSVファイルのアップロード", type="csv") がアップローダーの表示する実装になります。
左辺のuploaded_file には、アップロードしたファイルが入ります。
今回は CSVだけ読み込めるようにしたため、タイプは “csv”としています。
CSVの他には画像ファイルのpngやjpgに対応しています。

import pandas as pd

if uploaded_file is not None:
    dataframe = pd.read_csv(uploaded_file, comment="#")
    st.write(dataframe)

こちらは、読み込んだファイルの内容を表示する実装部です。
2行目ではif文を用いて、ファイルがちゃんと読み込まれていたら、以降のプログラムを実行するようにしています。

pandasというライブラリの read_csvメソッドを用いて、csvファイルを読み込んでいます。
コメント行を飛ばすために、 comment="#" と記述しています。
読み込んだファイルデータは st.write(dataframe) で簡単に表として、ブラウザ上に表示されます。

最後に

streamlitというpythonのライブラリを用いてWebアプリを簡単に作る方法をご紹介しました。
今回は、データファイル（csv）を読み込んで、データの内容をブラウザに表示するところまでを扱いましたが、streamlitに習熟するともっとリッチな機能のアプリを作ることができるようになります。
どんどんできることを増やして、自分専用のデータ解析アプリを作れるようにしていきましょう！

Streamlitで作るデータ解析Webアプリの技術書を販売中

¥2,000 → ¥1,000 今なら50%OFF!!

データ解析をアプリで行う！
データ解析とグラフ描画を自動でしてくれるアプリが作れます！

技術書ページへ