Pythonフレームワーク「Flask」を利用したWebアプリケーションでCSVファイルを取り込みJSON形式に変換してみた

Pythonのcsvパッケージやjsonパッケージを利用すると、CSVファイルのデータをJSON形式に簡単に変換することができる。

今回は、Pythonフレームワーク「Flask」を利用したWebアプリケーションでCSVファイルを取り込みJSON形式に変換してみたので、そのサンプルプログラムを共有する。

前提条件

下記記事のFlaskによる環境構築と実装が完了していること。

Pythonフレームワーク「Flask」を利用したWebアプリケーションを作成してみたFlaskは、Pythonで開発する際のWebフレームワークの1つで、マイクロフレームワーク(軽量で必要最低限の機能が搭載されているフレ...

また、以下のPyCharmのインストールが完了していること。

PythonのGUI開発を行うためのPyCharmをインストールしてみたPythonの開発を便利に行える統合開発環境(IDE)として、「PyCharm」というツールがあることが分かったので、今回、そのインスト...

chardetパッケージのインストール

今回作成するプログラムでは、文字コードを判定するchardetパッケージを利用するため、これをインストールする。その手順は、以下の通り。

1) コマンドプロンプトで「pip install chardet」コマンドを実行し、最新バージョンのchardetをインストールする。

2)「pip list | find “chardet”」コマンドを実行すると、以下のように、chardetがインストールされたことが確認できる。

ウズウズカレッジJavaコースはわかりやすい動画教材と充実した就業サポートで優良企業を目指せるプログラミングスクールだったJavaは、世界中で広く使われていて、現在の需要が高く将来性もある開発言語になります。 https://www.acrovision....

サンプルプログラムの構成

作成したサンプルプログラムの構成は、以下の通り。

なお、上記の赤枠は、前提条件のプログラムから追加・変更したプログラムである。

index.htmlの内容は以下の通りで、CSVファイルを取り込む部分と、CSVファイルのデータをJSON形式で表示するテキストエリアを追加している。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <script src="../static/demo.js"></script>
  <title>CSVファイル取込</title>
</head>
<body>
  取り込んだCSVファイルのデータを、JSON形式で出力します。
  <br/><br/>
  <form enctype="multipart/form-data">
    <input type="file" id="csv_file" name="csv_file" />　
    <input type="button" value="CSV取込" onclick="import_csv()" />
    <br/><br/>
    <textarea rows="35" cols="50"
      placeholder="ここにJSON形式のCSVデータが表示されます">{{ json_txt }}</textarea>
  </form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>CSVファイル取込</title>

</head>

<body>

取り込んだCSVファイルのデータを、JSON形式で出力します。

<textarea rows="35" cols="50"

placeholder="ここにJSON形式のCSVデータが表示されます">{{ json_txt }}</textarea>

</form>

</body>

</html>

また、demo.jsの内容は以下の通りで、チェック処理と、views.pyのパス/import-csvを呼び出す処理を実装している。

'use strict';

// CSV取込ボタン押下処理
function import_csv(){
  let form = document.getElementsByTagName("form")[0];
  let csv_file = document.getElementById("csv_file").value
  if(!csv_file){
    alert("取り込むCSVファイルを選択してください");
    return;
  }
  if(csv_file.substr(-4).toLowerCase() != ".csv"){
    alert("ファイルの拡張子がCSVファイルでありません");
    return;
  }
  let csv_file_obj = document.getElementById("csv_file").files[0];
  if(csv_file_obj.size == 0){
    alert("CSVファイルが空になっています");
    return;
  }
  form.action="/import-csv";
  form.method="post";
  form.submit();
}

'use strict';

// CSV取込ボタン押下処理

function import_csv(){

let form = document.getElementsByTagName("form")[0];

let csv_file = document.getElementById("csv_file").value

if(!csv_file){

alert("取り込むCSVファイルを選択してください");

return;

}

if(csv_file.substr(-4).toLowerCase() != ".csv"){

alert("ファイルの拡張子がCSVファイルでありません");

return;

}

let csv_file_obj = document.getElementById("csv_file").files[0];

if(csv_file_obj.size == 0){

alert("CSVファイルが空になっています");

return;

}

form.action="/import-csv";

form.method="post";

form.submit();

}

さらに、views.pyの内容は以下の通りで、CSV取込ボタン押下処理を追加している。

from demo import app
from flask import render_template, request
from .csv_json import CsvToJson


# 初期表示処理
@app.route("/")
def index():
  return render_template("index.html", json_txt="")


# CSV取込ボタン押下処理
@app.route('/import-csv', methods=['POST'])
def import_csv():
  # アップロードしたCSVファイルを保存し、CSVファイルのデータをJSONに変換する
  csv_json = CsvToJson(request.files.get("csv_file"))
  json_txt = csv_json.upload_csv_to_json()

  # JSONに変換したCSVデータを設定し、画面遷移する
  return render_template("index.html", json_txt=json_txt)

from demo import app

from flask import render_template, request

from .csv_json import CsvToJson

# 初期表示処理

@app.route("/")

def index():

return render_template("index.html", json_txt="")

# CSV取込ボタン押下処理

@app.route('/import-csv', methods=['POST'])

def import_csv():

# アップロードしたCSVファイルを保存し、CSVファイルのデータをJSONに変換する

csv_json = CsvToJson(request.files.get("csv_file"))

json_txt = csv_json.upload_csv_to_json()

# JSONに変換したCSVデータを設定し、画面遷移する

return render_template("index.html", json_txt=json_txt)

また、csv_json.pyの内容は以下の通りで、views.pyから呼ばれる、取り込んだCSVファイルの保存と、CSVファイルのデータをJSON形式に変換する処理を実装している。

import json
import csv
from chardet import detect


# CSVファイルのデータをチェックし、JSONに変換するクラス
class CsvToJson:

  # 引数にCSVファイルを渡してインスタンスを生成
  def __init__(self, req_file):
    self.req_file = req_file

  # アップロードしたCSVファイルを保存し、
  # CSVファイルのデータをJSONに変換して返す
  def upload_csv_to_json(self):
    # アップロードしたCSVファイルを保存
    req_file_path = "./demo/upload/" + self.req_file.filename
    self.req_file.save(req_file_path)

    # CSVファイルの文字コードを判定
    # 判定した文字コードがSHIFT_JISの場合は、CP932に変換する
    f = open(req_file_path, 'rb')
    rawdata = f.read()
    f.close()
    encoding = detect(rawdata)['encoding']
    if "SHIFT_JIS" == encoding:
      encoding = "CP932"

    # アップロードしたCSVファイルを読み込み、json_listに追加する
    json_list = []
    f = open(req_file_path, 'r', encoding=encoding)
    csv_reader = csv.DictReader(f)
    for row in csv_reader:
      json_list.append(row)
    f.close()

    # json_listをJSON形式に変換した値を返す
    # ensure_ascii=Falseを指定することで、日本語のままJSON文字列を出力する
    # indent=2を指定することで、読みやすく改行したJSON文字列になる
    return json.dumps(json_list, ensure_ascii=False, indent=2)