CSV インポート

CSV インポート

{success} CSV インポートの基本設計及び、画面設計を明記します。

CSV概要

CSVインポート

概要

技能実習生 実習実施先 送出機関

の一括登録・一括更新機能となります。

機能としては 既存情報のエクスポート アップロード スプレッド編集 一時保存・破棄 インポート(一括作成・更新) 履歴の確認 が行えます。

またエクスポート・インポートができる種類は 技能実習生:基本情報 実習実施先:基本情報 送出機関 のみとします。

旧 ver とは違ってブラウザ上で完結できるようにするとともに、エラー内容をリアルタイムで示すことで、

本機能の利用をより簡易的にします。

またスプレッド編集機能とはアップロードした CSV の中身を操作するアップロード用スプレッドと

それを操作して作成する、インポートするためのKIZUNA用スプレッド

の 2 つを合わせた内容です。

基本情報

名称	概要
route	/csv

INDEX

{primary} 初回アクセス時に表示される内容です。

画面レイアウト

ユースケース


flowchart LR

    user1("fas:fa-user-tie 監理団体")
    user2("fas:fa-user-tie 実習実施先")
    user3("fas:fa-user-tie 送出機関")

    user1 -.-> csv --> アップロード:::index --> スプレッド編集:::index --> 一括作成:::index

    スプレッド編集:::index --> 一時保存:::index --> スプレッド編集

    csv:::index --> エクスポート:::index --> アップロード:::index

    一時保存 --> 破棄:::index

    csv --> 履歴の確認:::index

    classDef index fill:#f96;

画面項目

項目・論理名	タイプ	桁数	必須	備考
切替	RADIO	-	-	対応する内容のコンテンツを表示する`インポート/エクスポート`
エクスポート:技能実習生	button	-	-	技能実習生基本情報の登録された内容を CSV でまとめてダウンロードします
エクスポート:実習実施先	button	-	-	実習実施先基本情報の登録された内容を CSV でまとめてダウンロードします
エクスポート:送出機関	button	-	-	送出機関の登録された内容を CSV でまとめてダウンロードします
インポート:[step1]対象	RADIO	-	○	インポートを行うインポートの対象を選択します `実習実施先/技能実習生/送出機関`
インポート:[step2]アップロード	FILE	-	○	スプレッド編集を行う対象の CSV をアップロードします
インポート:[step3]スプレッド編集	CONTENTS	-	○	スプレッド編集を行うコンテンツです `詳細は[スプレッド編集]を参照`
インポート:[step3]まとめて移動	button	-	○	アップロードした CSV の内容を KIZUNA 用スプレッドにまとめて移動します `スプレッド編集を行っている場合のみ表示`
インポート:[step3]一時保存	button	-	-	スプレッド編集の内容を一時保存します `スプレッド編集を行っている場合のみ表示`
インポート:[step3]破棄	button	-	-	スプレッド編集の内容を破棄します `スプレッド編集を行っている場合のみ表示`
インポート:[step4]インポート	button	-	-	スプレッド編集の内容で一括作成・更新します
インポート:履歴	button	-	-	過去更新した内容を履歴で確認し CSV ダウンロードできるようにします。

基本事項

項目	概要
エクスポート	CSV の中身は登録値のままで可。尚 HEADER は画面表示の内容と合わせること
対象	対象は`入力条件の取得`や`スプレッド編集` `インポート`のために選択します
アップロード	ファイル容量は`10MB`まで `.csv` のみ
一時保存	対象を選択してその対象の`アップロード用スプレッド`と `KIZUNA用スプレッド`の内容がすでに一時保存されている場合は、そのスプレッド内容を最初から表示する
	そのため、同じ対象でスプレッド編集を重複して作成することは不可となる
破棄	一時保存内容を破棄するだけ。
履歴	過去の履歴を一覧で表示し、押下したらＣＳＶダウンロードする。文字コードは `UTF-8`。尚 HEADER は画面表示の内容と合わせること
step	必ず順番通りに行わせる。でないと機能しないため。
まとめて移動	KIZUNA でエクスポートした CSV のみ利用できる機能とします。その参照条件は`ヘッダーの完全一致`とします

処理

開発	発火	処理名称	処理内容
B	対象押下時	入力項目・条件の取得	選択した対象の必要カラムと、そのカラムの入力条件と項目名を取得して`スプレッド編集`で利用します。
B	対象押下時	一時保存内容の取得	選択した対象の一時保存内容がある場合は、`スプレッド編集`を表示して、途中から行えるようにします。尚アップロードした CSV の内容も再表示します。
B	対象押下時	履歴一覧の取得	選択した対象の過去インポートした内容の一覧を取得します
F	アップロード時	スプレッド編集表示	アップロードした内容が表示される`アップロード用スプレッド`と選択した対象の`KIZUNA用スプレッド`を表示して`スプレッド編集機能を利用`できるようにします
F	まとめて移動押下時	スプレッド内容の自動挿入	`アップロード用スプレッド`と`KIZUNA用スプレッド`のヘッダーが完全一致していたら、利用でき、押下することでその内容をまとめて`KIZUNA用スプレッド`に入力します。
F	一時保存押下時	スプレッド編集内容の一時保存	`アップロード用スプレッド`と `KIZUNA用スプレッド`をその時の入力値のまま保存します。
F	破棄押下時	一時保存されたスプレッド編集内容の破棄	一時保存していた`アップロード用スプレッド`と `KIZUNA用スプレッド`を削除します
F	インポート押下時	スプレッド編集内容のインポート	作成した `KIZUNA 用スプレッド`で選択した対象へインポートします。尚一度インポートしたら同じ内容を再度行うことはできないようにします。
F	履歴押下時	過去のスプレッド編集内容をＣＳＶ出力	履歴一覧から押下したその履歴の内容を CSV でダウンロードします

実装 API

API 名称	処理内容

スプレッド編集

{primary} CSV アップロードをした後に利用できるアップロード用スプレッドとKIZUNA用スプレッド機能に関しての設計書です。説明が難しいため、大体テキストで説明を行います。

-

アップロードした内容が表示されているアップロード用スプレッドを対象を選択時に入手した入力項目で生成されたKIZUNA用スプレッドにドラッグ&ドロップで移動することで簡単に一括作成・更新用ファイルが作れる機能です。入力条件もこの場で確認できるため、操作が分かりやすくインポートできます。

-

尚、このスプレッドの中身は配列のJSONとし、簡単に保存や復元が行えるようなデータの保持を行います。

-

基本的な処理は[index]で記載しています。

画面レイアウト

ユースケース


flowchart LR

    user1("fas:fa-user-tie 監理団体")
    user2("fas:fa-user-tie 実習実施先")
    user3("fas:fa-user-tie 送出機関")

    user1 -.-> csv --> アップロード --> スプレッド編集:::index --> 一括作成

    スプレッド編集 --> 一時保存 --> スプレッド編集

    csv --> エクスポート --> アップロード

    一時保存 --> 破棄

    csv --> 履歴の確認

    classDef index fill:#f96;

アップロード用スプレッドの画面項目

アップロードした CSV の中身をそのまま、スプレッド化して表示するため、決まった項目はありません。

その CSV のヘッダーを 1 行目に表示し、内容をそのまま CSV のような形で表示します。

またこの内容は、行ごとにKIZUNA用スプレッドへドラッグ&ドロップができるようにします。

このスプレッドの内容の編集はできません。

アップロードしたCSVのイメージ配列例を記載します。
CSVをアップロード時にJSで配列に変換します。
https://pisuke-code.com/js-convert-csv-to-array-or-object/

例：）
[
  {
    "name" : "Red"
    "hex"  : "/docs/1.2/screen_design/csv/import#FF0000"
    "rgb"  : "255,0,0"
  },
  {
    "name" : "Orange"
    "hex"  : "/docs/1.2/screen_design/csv/import#FFA500"
    "rgb"  : "255,165,0"
  },
]
keyがヘッダーとなり、valueが内容となる
この内容をスプレッド化

KIZUNA 用スプレッドの画面項目

INDEX に記載のある対象を選択時に入手した、入力項目の内容と条件から KIZUNA 用のスプレッドを表示します。

選択した対象に応じて表示する入力項目が異なります。

入手した項目名をヘッダーに表示し、内容を空で初期表示します。

尚、最後尾に列の追加が行えるようにして、柔軟性を持たせます（難しければ相談ください）

基本的にはアップロード用スプレッドからドラッグ&ドロップされたら、指定の行にその行の内容をまとめて入力します。

表示上、エラー原因を分かりやすくするため、入手した入力項目の条件値を HOVER で表示するとともに、

その条件に一致していない項目は（エラー対象の項目-空など）背景を付けるなどして分かりやすく表示します。

また内容は INPUT などで編集できるようにすること。

下記、サーバーから受け取った入力項目の内容と条件の配列例

[
  {
    'physical_name'       : 'name',                             // このカラムの物理名(リクエスト時にこれを利用する)
    'logical_name'        : '名前',                             // このカラムの論理名
    'maxlength'           : 255,                                // 最大文字数
    'nullable'            : false,                              // 必須かどうか
    'type'                : 'text',                             // html仕様に準拠
    'description'         : '技能実習生の名前を入力してください', // 項目の説明
  },
  {
    'physical_name'       : 'sending_agency',
    'logical_name'        : '送出機関',
    'maxlength'           : null,
    'nullable'            : false,
    'type'                : 'select',
    'description'         : '登録している送出機関を選択してください'
    'list'                : [ //送出機関の一覧情報
      [
        'id'   : 1,
        'name' : 'test送出'
      ],
    ],
  },
  {
    'physical_name'       : 'sex',
    'logical_name'        : '性別',
    'maxlength'           : null,
    'nullable'            : false,
    'type'                : 'select',
    'description'         : '性別を選択してください'
    'list'                : [ //性別の選択肢
      [
        'id'   : 1,
        'name' : '男性'
      ],
    ],
  },
]

下記、上記で説明した入力項目から生成され、最終的にインポートするKIZUNA用スプレッドのイメージ配列例

[
  //技能実習生1人目(新規作成時)
  {
    "id"              : null
    "name"            : "テスト技能実習生"
    "sending_agency"  : 1
    "sex"             : 1
    "tel1"            : null
  },
  //技能実習生2人目(編集時)
  {
    "id"              : 10
    "name"            : "テスト技能実習生"
    "sending_agency"  : 1
    "sex"             : 1
    "tel1"            : '070'
  },
]
keyがヘッダーとなり、valueが内容となる
この内容をスプレッド化
idがあるかないかで編集か新規追加かを選択させる
この配列をAPIでPOSTして、配列分更新を行う

{success} アップロード用スプレッドのスプレッドの行を、ドラッグして、KIZUNA 用スプレッドの希望する行へドロップすることで作成できるようにする

-

この時 JS で希望した行の番号(何番目か)を検知し、KIZUNA 用スプレッドの配列のその番号のカラムの内容を更新することで実現できるはず

【フロント機能構築参考】
https://demo.grapecity.com/spreadjs/demos/quickstart/quickstart-vue
https://devlog.grapecity.co.jp/spreadjs-vue-quickstart/
https://tech.andpad.co.jp/entry/2020/04/28/172129
https://www.componentsource.co.jp/search/products/crystal%20reports?f%5B0%5D=ft%3A710890&f%5B1%5D=bt%3A913764&f%5B2%5D=at%3A913828&f%5B3%5D=ft%3A710891&f%5B4%5D=ft%3A710962&f%5B5%5D=ft%3A710966&f%5B6%5D=at%3A925961&sort=downloads

{danger} 一時保存していて && 項目追加や削除したときにユーザーに示す必要がある。またこの際 KIZUNA 用スプレッドとしては、一時保存されたスプレッド内容と取得した入力条件のカラム数不一致や内容の齟齬を判定し一致していたら中身を書き換える必要がある

概要

機能設計

[KIZUNA] 基本設計

[KIZUNA] 帳票設計

[KIZUNA] API 設計書

バッチ仕様書

サーバー設定

CSV インポート

概要

基本情報

INDEX

スプレッド編集