ワークフローサンプル: 第487話：クラウド会計と連携させる（その２）

「伝票データ」は、どうやって連携させるの？

前回記事では、受注報告があった際に何枚かの「振替伝票データ」を自動生成させることに成功した。しかし、そのデータも『会計ソフト』に入力されなければ意味がない。

ん？。。。これからの時代、『会計ソフト』というより『クラウド型会計システム』（会計クラウド）というべきか？？

ただ残念ながら、「外部からの API 接続」を許可しているクラウド型会計システムは、2016年現在ほとんどないのが実情だ。そこで、どのサービスでもサポートされている「ファイルインポート」を効率よく行う事を考えてみたい。

（もっとも、あと1～2年もすれば、どのサービスも REST API over OAuth をサボートしているのだろう）

なお、業務プロセスは前回記事とほぼ同じだが、より実用に耐えるよう、「上司承認」の工程が追加されている。

[販売報告プロセス-CSVダウンロード]

[販売報告プロセス-CSVダウンロード：「3.記帳する」画面]

それほど難しい話ではない。

まず用意すべきは、それぞれの『クラウド型会計システム』がサポートしているテンプレートファイルだけだ。経理担当者は、表示されている伝票データ（TSV テキスト）を Ctrl-C などでコピーし、（B2 カラムなどに）、ペーストすることで綺麗にデータを追記することができる。そして、「日次」「週次」「10日おき」などで「インポート」すればよいのだ。

たとえば「MFクラウド会計」であれば、「取引No」だけ割り当てる手間はかかるが、全ての伝票データを一括して入力することができる。注意すべきは「複数行にわたる伝票」の場合に、「おなじ取引No」を割り当てる必要がある点くらいだ。

＜エクセルで開いた様子＞

ちなみに、基幹システムに ERP システムを活用している会社もあるだろう。その場合は、それぞれの「伝票データ」を CSV ファイルとして取得したい。

その様な場合、（JavaScript に関する知識が必要となってしまうが）、伝票データが表示されている部分に「CSV ファイル生成ボタン」を配置すれば良い。確かに古いブラウザにまで対応させようとすると複雑なスクリプト設定が必要となるが、新しいブラウザを使っている組織なら、極めて少ない行数のスクリプトでファイルを出力させることができるようになる。（HTML5 のダウンロード機能）

たかが「小さなボタン」を１つ配置するだけの話ではあるが、実は「大きな業務効率化」となるのかもしれない。

PS: エクセルで開きやすいCSVファイル

経理業務において「MS Excel」の存在はデカい。「使わない日は無い」と断言できる人も少なくないだろう。

ただ「純粋な CSV テキスト」は、エクセルで開けない／開けたとしても文字化けする／セルに配置されない、といったトラブルにつながるケースが多い。JavaScript に「Excel 向け CSV」を生成させる際は、以下の様な点に注意すべきだ。（技術詳細については他の技術書籍や技術サイトを参照されたい）

Windows ブラウザだけを想定するなら、Comma-Separated Values UTF-8 with BOM でよい
Mac ブラウザも対象にしたいなら Tab-Separated Values UTF-16(LE) with BOM とするべき
バイト順マーク(BOM)を付けるには（わずか数 Byte ながらも）バイナリ操作が必要となる
関数によって「CPU による挙動の違い」が表面化する場合がある（マルチ Byte 操作）
メモリ配置順序（エンディアン）が疑わしい場合、バイナリエディタで生成ファイルを確認したい

＜バイナリエディタで見た様子＞

＜Mac の Excel で Comma-Separated Values UTF-8 with BOM を開いた様子＞

＜Mac の Excel で Tab-Separated Values UTF-16(LE) with BOM を開いた様子＞

▼『TSV データ』の［入力ヒント］の設定サンプル（HTML/JavaScript）

<button type="button" id="myFile_6">generate UTF8-bom-CSV</button><span id="myMsg"> (URL here) </span>
<button type="button" id="myFile_6b">generate UTF16-bom-CSV</button><span id="myMsgB"> (URL here) </span>

<script type="text/javascript">
// Internet Explorer Safari 未対応版

jQuery('#myFile_6').on('click',function(){ 
  var tsvStr = jQuery('textarea[name="data\\[6\\].input"]').val(); 

  //ファイル名
  date = new Date();
  var filename = date.toISOString().replace( /-|T|:/g, "" ).substring(0, 14) + ".csv";

  //BOM (バイト順マーク) 作成
  var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);

  //ファイル作成(Comma-Separated Values UTF-8 with order mark)
  var myCsvStr = tsvStr.replace( /\t/g, ", " );
  var blob = new Blob( [ bom, myCsvStr ] , { type: "text/csv" } );

  //ダウンロード
  jQuery( '#myMsg' ).html( 
    "<a href=" + window.URL.createObjectURL(blob)
    + " target=_Blank download=\"" + filename
    + "\"> Get_CSV </a>" );
}); 

jQuery('#myFile_6b').on('click',function(){ 
  var tsvStr = jQuery('textarea[name="data\\[6\\].input"]').val(); 

  //ファイル名
  date = new Date();
  var filename = date.toISOString().replace( /-|T|:/g, "" ).substring(0, 14) + ".csv";

  //BOM (バイト順マーク) 作成
  var bom = new ArrayBuffer( 2 ); // 2 byte (16 bit) memory
  // edited via TypedArray or DataView
  var bomAccess = new DataView( bom );
  bomAccess.setUint16( 0, 0xfeff, true ); // Little Endian order

  //ファイル作成(Tab-Separated Values UTF-16 with order mark)
  var textEncoder = new TextEncoder( "utf-16" );
  var aryU16 = textEncoder.encode(tsvStr); 
  var blob = new Blob( [ bom, aryU16 ] , { type: "text/csv" } );

  //ダウンロード
  jQuery( '#myMsgB' ).html( 
    "<a href=" + window.URL.createObjectURL(blob)
    + " target=_Blank download=\"" + filename
    + "\"> Get_CSV </a>" );
}); 

// Internet Explorer 対応のためは、msSaveBlob を使う方式にする
</script>

＜データ項目一覧画面＞