JavaScript/Wijmo

［Wijmo入門］FlexGridの使い方 – 活用編（4） –

by MESCIUS-dev

業務アプリケーションの様々な要件に対応できるUI部品を備えたJavaScriptライブラリ「Wijmo（ウィジモ）」には、高速・軽量かつ多機能なデータグリッドコントロール「FlexGrid（フレックスグリッド）」コントロールが含まれています。今回はFlexGridでCSVファイルをインポートおよびエクスポートする方法について詳しく解説します。

FlexGridでCSVインポート／エクスポート

開発環境の準備

この記事では以下の開発環境を使用します。

今回作成するファイルは次の3つです。

index.htmlページ本体。要素としてFlexGridコントロールを配置します
app.jsFlexGridコントロールを作成するコードを記載します
styles.css各種ページ要素のスタイルを設定するコードを記載します

Wijmoの参照設定

WijmoのFlexGridコントロールを使用するには、専用のモジュールを環境にインストールする必要があります。CDNを参照したり、npmなどから入手したりする方法もありますが、今回は環境に直接モジュールを配置していきます。あらかじめWijmoの製品版かトライアル版をご用意ください。トライアル版は以下より無償で入手可能です。

製品版、またはトライアル版をダウンロードしたら、ZIPファイルを解凍し、以下のファイルを環境にコピーします。

  • scripts/wijmo.grid.min.js
  • scripts/wijmo.input.min.js
  • scripts/wijmo.min.js
  • scripts/cultures/wijmo.culture.ja.min.js
  • css/wijmo.min.css

なお、npmを使ってWijmoの参照を行う場合は、ヘルプの「特定のパッケージをインストールする」に記載しているように、次のコマンドを実行するだけでwijmo.gridが依存する以下のパッケージも自動的にインストールされます。

npm install @mescius/wijmo.grid
  • @mescius/wijmo
  • @mescius/wijmo.input
  • @mescius/wijmo.styles

FlexGridにデータを表示する

それでは、最初にベースとなる画面を作成していきます。前述のWijmoモジュールと「app.js」、および「styles.css」への参照設定をHTMLファイルに追加します。
※ CDNから参照する場合はコメントアウトされている部分とライブラリの参照先を入れ替えてください。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>FlexGridコントロール活用編（4）</title>

    <!-- ローカルのライブラリを参照する場合 -->
    <link rel="stylesheet" href="css/wijmo.min.css" />
    <script src="scripts/wijmo.min.js"></script>
    <script src="scripts/wijmo.grid.min.js"></script>
    <script src="scripts/wijmo.input.min.js"></script>
    <script src="scripts/cultures/wijmo.culture.ja.min.js"></script>

    <!-- CDNからライブラリを参照する場合 -->
    <!-- <link rel="stylesheet" href="https://cdn.mescius.com/wijmo/5.20251.34/styles/wijmo.min.css" />
    <script src="https://cdn.mescius.com/wijmo/5.20251.34/controls/wijmo.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20251.34/controls/wijmo.grid.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20251.34/controls/wijmo.input.min.js"></script>
    <script src="https://cdn.mescius.com/wijmo/5.20251.34/controls/cultures/wijmo.culture.ja.min.js"></script> -->

    <link rel="stylesheet" href="css/styles.css">
    <script src="scripts/app.js"></script>
</head>
<body>
    <div>
        <fieldset>
            <legend>CSVファイルの保存</legend>
            <button id="btn-csv-grid">グリッド全体をエクスポート</button>
            <button id="btn-csv-sel">選択範囲をエクスポート</button>
        </fieldset>
        <fieldset>
            <legend>CSVファイルの読込</legend>
            <input type="file" id="importFile" accept=".csv">
            <button id="btn-csv-load">インポート</button>
        </fieldset>
    </div>
    <div id="theGrid"></div>
</body>
</html>

続いて「app.js」を次のように作成します。

FlexGridクラスのコンストラクタ内のitemsSourceプロパティには、表示するデータとしてgetData関数の戻り値を設定し、selectionModeプロパティはセル範囲を選択できるように「MultiRange」に設定しています。それ以外のプロパティはFlexGridコントロールのレイアウトや選択時のスタイルを指定するもので、CSVファイルのインポート／エクスポートには直接関係ありません。これらの機能の詳細については、APIリファレンスをご参照ください。
※ ライセンスキーを設定しない場合トライアル版を示すメッセージが表示されます。ライセンスキーの入手や設定方法についてはこちらをご覧ください。

wijmo.setLicenseKey('ここにWijmoのライセンスキーを設定します');

document.readyState === 'complete' ? init() : window.onload = () => {
    // データの作成
    const getData = () => {
        const data = [];
        const countries =
            'オーストリア,ベルギー,チリ,デンマーク,フィンランド,日本,イギリス'.split(',');
        for (let i = 0; i < 300; i++) {
            data.push({
                id: i,
                from: countries[i % countries.length],
                to: countries[(i + 1) % countries.length],
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000,
                amount: Math.random() * 10000,
                extra: Math.random() * 10000,
            });
        }
        return data;
    }

    // FlexGridコントロールの生成
    const theGrid = new wijmo.grid.FlexGrid('#theGrid', {
        autoGenerateColumns: false,
        columns: [
            { binding: 'id', header: 'ID', width: 80 },
            { binding: 'from', header: '送付元' },
            { binding: 'to', header: '送付先' },
            { binding: 'sales', header: '売上', width: 90 },
            { binding: 'expenses', header: '費用', width: 90 },
            { binding: 'amount', header: '金額', width: 90 },
            { binding: 'extra', header: '追加費用', width: 90 },
        ],
        alternatingRowStep: 0,
        showMarquee: true,
        showSelectedHeaders: 'All',
        anchorCursor: true,
        selectionMode: wijmo.grid.SelectionMode.MultiRange,
        itemsSource: getData(),
    });
}

「styles.css」では、各種要素のスタイルを次のように定義します。

/* FlexGridのスタイル */
#theGrid {
    border: 1px solid gray;
    height: 350px;
    width: 760px;
}

/* その他の要素のスタイル */
html {
    font-family: Meiryo;
}

fieldset {
    border: 1px solid gray;
    border-radius: 8px;
    margin-bottom: 15px;
    width: 733px;
}

button {
    font-family: Meiryo;
    margin-left: 15px;
    margin-right: 15px;
}

input {
    font-family: Meiryo;
    margin-left: 15px;
}

#importFile::file-selector-button {
    font-family: Meiryo;
    margin-right: 15px;
}

上記を設定した後にサンプルを起動すると、次のようになります。次の章で各種ボタンの処理を実装していきます。

FlexGridの表示

グリッド全体をCSVファイルにエクスポートする

まずは［グリッド全体をエクスポート］ボタンが押下されたときの処理を以下のように実装します。FlexGridコントロールに設定されているすべてのデータが「FlexGrid.csv」という名前のCSVファイルに保存されます。

document.readyState === 'complete' ? init() : window.onload = () => {
・・・（中略）・・・
    // グリッド全体をCSVファイルにエクスポート
    document.getElementById('btn-csv-grid').addEventListener('click', () => {
        const lastRow = theGrid.rows.length - 1;
        const lastCol = theGrid.columns.length - 1;
        const rng = new wijmo.grid.CellRange(0, 0, lastRow, lastCol);
        const csv = theGrid.getClipString(rng, true, true);
        wijmo.saveFile(csv, 'FlexGrid.csv');
    });
}

上のコードでは、最初にFlexGridクラスのgetClipStringメソッドでFlexGridコントロールのすべてのセルを含んだセル範囲をCSV文字列に変換しています。getClipStringメソッドで設定する引数は次のとおりです。ここでは、第1引数にグリッド全体のセル範囲を指定しています。

第1引数（rng）セル範囲（CellRange）を指定
第2引数（options）CSV文字列を取得するときはtrueを指定
第3引数（colHeaders）列ヘッダーを含めるときはtrueを指定

次に、WijmoモジュールのsaveFileメソッドを使って、取得したCSV文字列をファイルに保存します。saveFileメソッドの引数には次のような値を設定します。

第1引数（content）ファイルに保存する文字列
第2引数（fileName）拡張子を含むファイル名（FlexGrid.csv）

サンプルを起動して［グリッド全体をエクスポート］ボタンを押下したときの画像を以下に示します。

グリッド全体をエクスポート

作成されたCSVファイルをメモ帳で開くと次のようになっています。

出力されたCSVファイル

選択範囲をCSVファイルにエクスポートする

次に［選択範囲をエクスポート］ボタンが押下されたときの処理を以下のように実装します。FlexGridコントロール上で選択されているセル範囲のデータが「FlexGridSelection.csv」という名前のCSVファイルに保存されます。

document.readyState === 'complete' ? init() : window.onload = () => {
・・・（中略）・・・
    // 選択範囲をCSVファイルにエクスポート
    document.getElementById('btn-csv-sel').addEventListener('click', () => {
        const csv = theGrid.getClipString(null, true, true);
        wijmo.saveFile(csv, 'FlexGridSelection.csv');
    });
}

選択されたセル範囲をCSV文字列として取得するには、getClipStringメソッドの第1引数をnullに設定します。この点だけが「グリッド全体をCSVファイルにエクスポートする」ときと異なりますが、その他はsaveFileメソッドの使い方も含めて同じです。

サンプルを起動してセル範囲を選択し、［選択範囲をエクスポート］ボタンを押下すると次のようになります。

選択範囲をエクスポート

作成したCSVファイルの内容は次のようになっています。

出力されたCSVファイル

CSVファイルをインポートする

WijmoモジュールやFlexGridクラスには、CSVファイルをインポートする専用の機能がないため、独自にCSVファイルを読み込み、さらにそれをデータソースオブジェクトの形に変換する必要があります。

［インポート］ボタンが押下されたときには、type="file"を指定したInput要素でCSVファイルのBlobオブジェクトを取得し、独自のloadCSV関数を使って適切なデータソースオブジェクトに変換します。最後にFlexGridクラスのitemsSourceプロパティにそのデータを設定することでインポート処理が完了します。

CSVファイルのインポートを実行するためのコードは次のとおりです。

document.readyState === 'complete' ? init() : window.onload = () => {
・・・（中略）・・・
    // 指定したCSVファイルをインポート
    document.getElementById('btn-csv-load').addEventListener('click', () => {
        const fileInput = document.getElementById('importFile');
        if (fileInput.files[0]) {
            if (fileInput.files[0].type == 'text/csv') {
                loadCSV(fileInput.files[0]);
            }
        }
    });

    // CSVファイルのインポート
    const loadCSV = async (file) => {
        if (file) {
            // CSVファイルの文字列の取得
            let rawData = await file.text();

            // セル内の「,」の削除（数値の桁区切り文字の削除）
            rawData = rawData.replace(/"([^"]*)"/g, (match) => {
                return match.replace(/,/g, '');
            });

            // セル内の「"」の削除（桁区切り文字を含んだ数値を囲んでいた「"」の削除）
            const newData = rawData.replaceAll('\r\n', '\n').replaceAll('"', '');

            // CSV文字列を配列に変換
            const dataArr = newData.split('\n').map((r) => r.split(/,(?!\s)/));

            // 配列をオブジェクトに変換
            const source = dataArr.slice(1).map((rowData) => {
                // データ行オブジェクトの生成
                const dataItem = {};

                // データ行の各項目の値設定
                rowData.forEach((val, i) => {
                    // 項目名（フィールド名）の取得
                    let _key = dataArr[0][i];

                    // 数値を数値型として設定
                    const val1 =  Number.parseFloat(val);
                    if (!Number.isNaN(val1)) {
                        dataItem[_key] = val1;
                    } else {
                        dataItem[_key] = val;
                    }
                });

                // 作成したデータ行を戻り値として設定
                return dataItem;
            });

            // 取得したデータの設定
            theGrid.columns.clear();
            theGrid.autoGenerateColumns = true;
            theGrid.itemsSource = source;
        }
    }
}

上記のloadCSV関数では、引数として渡されたBlobオブジェクト（file）からFlexGridクラスのitemsSourceプロパティに設定可能なデータソースオブジェクトに変換します。具体的な手順は次のようになります。

  1. CSVファイルに保存されている文字列を取得
  2. 文字列に含まれている数値桁区切り文字「,」と「”」を削除
  3. CSV文字列を配列に変換
  4. 配列をデータソース用オブジェクトに変換
  5. 作成したデータソースをFlexGridコントロールのitemsSourceプロパティに設定

CSVファイルから文字列を取得する方法として、上記のコードではBlobインスタンスのTextメソッドを使っています。

また、数値桁区切り文字「,」と「”」を削除する必要があるのは、数値として保持されたデータが「”2,646.26″」のように変換されているためです。CSVの項目区切り文字と混同されないように桁区切り文字を削除し、不要な「”」を削除することで適切な数値への変換を可能にしています。

さらに、配列をデータソース用オブジェクトに変換する際には、Number.parseFloatメソッドを使って数値データを文字列から数値へ変換しています。

それでは、サンプルを起動して動作を確認しましょう。インポートされたことがわかりやすいように、itemsSourceプロパティの設定をコメントアウトし、FlexGridの初期表示状態を空にします。

・・・（中略）・・・
    const theGrid = new wijmo.grid.FlexGrid('#theGrid', {
・・・（中略）・・・
        //itemsSource: getData(),
    });
・・・（中略）・・・

次に［ファイルを選択］ボタンを押下して先ほど保存した「FlexGrid.csv」ファイルを指定し、［インポート］ボタンをクリックすると、FlexGridコントロールが次のように更新されます。

続けて「FlexGridSelection.csv」ファイルをインポートした場合は、次のようになります。

さいごに

今回はWijmoに含まれているFlexGridコントロールでCSVファイルをインポート／エクスポートする方法について解説しました。

今回ご紹介した内容については以下のデモアプリケーションで確認できます（“Run Project”をクリックするとデモが起動します）。

また、製品サイトで公開しているデモアプリケーションでは、Wijmoでよく問い合わせのある使い方をTipsとして公開しており、今回ご紹介したCSVファイルのインポートとエクスポートの方法も公開しています。

今回の記事で紹介した内容も、基本的な実装方法はデモと同等のものですが、本記事では、

といった実装を行っています。

この他にも様々なTipsをご紹介していますので、是非デモをチェックしてみてください。

Tipsデモ

Wijmoの各種コントロールの基本的な使い方や応用的な使い方の解説を連載記事として公開しています。こちらも是非ご覧ください。

製品サイトでは、Wijmoの機能を手軽に体験できるトライアル版も公開しておりますので、こちらもご確認ください。

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

＼  この記事をシェアする  ／