2015年2月22日日曜日

CSVファイルのアップロードとインポート(1/2)

この記事の解説動画を配信中!

みなさん!XPages開発していますか!?

去年の11月のXPages Dayでは、Excelへのエクスポートの話をさせていただきましたが、 インポートに関する質問をいくつか受けました。

イベントで紹介したツールでは、エクスポートしか対応していないので、 今回は、インポートについて書きたいと思います。

エクセルのインポートはちょっと難しいので、要件としてよくあるCSVファイルのインポートについて説明します。

サンプルプログラム

今回は、郵便局のホームページ で配布している、郵便番号のCSVファイルをインポートしてみます。

サンプルDBのファイルを、GitHubにアップロードしておきましたので、参考にしてください。
GitHub download

CSVファイルのインポートでの要点

CSVファイルのインポートをXPagesで行う時に問題になるのは、下記の2点ですよね。

  1. アップロードされたファイルの取得
  2. CSVファイルから値ごとの分解

これらについて説明します。

ファイルアップロードのコントロール

標準のコントロールにも、ファイルアップロード・コントロールがありますが、これはリッチテキストに添付するために利用しますね。なので、これからファイルを取得するのはちょっと至難の業が必要です。

そこで、このコントロールは使用せずにHTMLのinputタグを利用します。

<input type="file" name="postalCodeCsv" />
<xp:button value="import" id="button1">
    <xp:eventHandler event="onclick" submit="true"
        refreshMode="complete">
        <xp:this.action><![CDATA[#{javascript:
PostalCodeImport.csvImport();}]]></xp:this.action>
    </xp:eventHandler>
</xp:button>

標準のコントロールを使わなくても、ファイルはアップロードされます。

このようにアップロードされたファイルはDomino Server上の一時領域に保存されます。

"name"の属性値は任意の値ですが、SSJSで利用するので、わかり易い名前にします。

また、複数のfileタグを使用する場合は、"name"の値が重複しないようにしましょう。

ボタンは、ファイルのアップロードをインポートの処理を呼び出しています。

処理自体は、SSJSに記載します。

アップロードされたファイルの取得

ボタンを押した時に実行する関数を宣言しましょう。上のコードにあるように”PostalCodeImport.csvImport”という名前で作ります。

その中に、アップロードされたファイルの取得方法はこうなります。

PostalCodeImport = {};
PostalCodeImport.csvImport = function csvImport(){
    // step1 httpリクエストからパラメータを取得する
    var con = facesContext.getExternalContext();
    var request = con.getRequest(); 
    var map = request.getParameterMap(); 
    
    // step2 パラメータの中からアップロードファイルの情報を取得する
    //<input type="file" name="postalCodeCsv" />
    //の "name"に指定した値を指定する
    var fileData = map.get("postalCodeCsv"); 
    var file = fileData.getServerFile();

    // Step3 ファイルを取得し、JavaのFileReaderを生成する。
    var fileReader = new java.io.FileReader(file);

    //下記にCSVの解析と文書の登録が続きます

}

ステップは大きく3つに分かれています。

step1 では、HTTPリクエストの実態を取得しています。これは通常XPagesによってラップされていて、普段操作することはないオブジェクトです。

"request.getParameterMap"でブラウザからリクエストされた全パラメータ(入力データ)が取得できる、Mapオブジェクトを取得します。

step2 では、Step1で取得したパラメータの中から input type="file" タグの値、つまりアップロードファイルの情報”fileData"を取得します。

"fileData"の中には、上で説明した一時領域に保存された、ファイルのパス情報が入っています。それを"getServerFile()"メソッドで取得できます。

step3 では、そのファイルパスから、JavaのFileReaderクラスを利用して内容を取得します。

今回はここまで

次回は、CSVのの解析を説明します!

0 件のコメント:

コメントを投稿