見出し画像

webixライブラリを使った実用的な業務アプリ実装例です。アマゾン領収書(PDF)を一括で電子帳簿に登録する機能です。No.32

以前、webixライブラリを利用して電子帳簿管理アプリの実装を紹介しています。

しかし、領収書(PDFファイル)を整理して格納する作業は、思っている以上に時間のかかる作業で、同時に複数の領収書を格納するときは、
大変です。何かいい方法はないかと、ネットを検索したら、アマゾンの領収書は、条件を指定して一括でダウンロードしてPDFファイルに格納したり、対象領収書の明細情報をCSVファイルでダウンロードする機能がパソコン用のブラウザ(Chomeに限って)に拡張機能で存在することを発見しました。

アマゾン注文履歴フィルタ機能を使えば、1つのPDFファイルにまとめてダウンロードできます。しかし、電子帳簿に保存するときは、伝票単位に保存する必要があり、まとまったPDFを分割する操作が必要です。
パソコンには、いきなりPDF COMPLETE版がインストールされていたので、使いました。ページの分割は、STANDARD版でも可能です。他のアプリでもPDFを1ページづつ分割するアプリがあると思います。

いきなりPDF COMPLETE版で、複数伝票のPDFを1枚づつ分割保存はできるのですが、分割したときのファイル名は、元のファイル名に番号を追記したファイル名となり、本来の注文番号で、分割したファイルに自動で名前を付与することはできません。PDFのファイル名が、本来の伝票情報でない場合、電子帳簿に保管する操作時に、使いづらいので、対策が必要です。
何かいい方法はないかと考えたとき、アマゾン注文履歴フィルタには、領収書に関連する情報をCSVで出力する機能もあり、一括でダウンロードしたPDFに対応するCSVファイルもダウンロードできます。
そこで、CSVファイルの情報を使って、いきなりPDF COMPLETE版で分割した個々のPDFファイルのファイル名を本来の注文番号に名前に変更する操作を自動でできないか考えました。CSVファイルが元になることから、1つの方法としてEXCEL VBAでCVSVファイルを参照して、関連PDF(分割されたPDFファイル)の名前を注文番号に変更するプログラムをVBAで作成することにしました。同時に、PDFのファイル名以外に、注文明細情報も電子帳簿保存時にメモ情報として利用できることや、支払った金額もCSVファイルから抽出できるので、実際に領収書を電子帳簿に保管する作業の中で、CSVファイルの情報を活用して自動登録できる仕組みを検討しました。
アマゾン注文履歴フィルタ機能をインストールして、検索条件を指定して複数の注文に関する領収書を画面に表示させると、右上に、ボタンが表示されます。注文履歴CSV(参考用)ダウンロードです。

このボタンクリックで、抽出した注文に関する領収書の明細情報をCSVファイルで取り出せます。
CSVファイルの行は、明細行単位で構成させますので、1つの領収書は複数行対応するため、注文した商品名などを取り出すには、複数行をマージする操作が必要です。できるだけ自動で、電子帳簿(webixで作成した業務アプリ)に各種情報をエントリしたいので、CSV情報を編集加工が必要です。
ダウンロードしたCSVファイルの構成例です。(一部、編集していますが)
1つの領収書に2つの商品が記載された例です。

同じ注文番号で構成される行は、5行で構成されており、最初の行(注文全体と記載された行)で該当領収書記載の合計注文金額を取り出すことができます。価格フィールドに記載がある行は、明細行になります。
電子帳簿には、注文番号を領収書PDFファイル名にして、合計金額と注文商品名をメモ情報に記載する動作としたいので、5行をマージして取り出します。
以下のようなイメージになります。

今回は、EXCEL VBAでCSVファイルを編集する機能を実装してみました。他の方法でも可能ですが、CSVファイルをそのまま利用して簡単に加工したかったので、EXCELを使っています。
VBAで抽出した情報に対し、該当の領収書が関連するプロジェクト(個人用か、事業用かなどの指定)と、明細情報が多いので、編集して短くする作業をEXCEL上で実施後、対象シートを先頭でアクティブにして保存します。
※WebixライブラリでEXCELをインポートするとき、該当EXCELに複数シートがあると、どのシートをインポートするかの記述が必要となるため、デフォルトでインポートできるようにEXCELを保存するときに、事前操作しておくと簡単です。(詳細は、別途、記載します)
いきなりPDFでPDFを分割したときのファイル名は、元のPDFファイル名に、分割順番数0009ー0001と定義されるので、EXCEL VBAで上記一覧に従って、領収書のPDFファイル名を一括変更します。(VBAで記述すると、簡単にファイル名の変更ができます)
分割操作時に、注意点があります。注文情報が多い伝票は、2ページ以上の領収書になるため、分割操作で考慮が必要です。いきなりPDFでは、全て、1ページ単位に分割するので、再度、マージする操作や、一部、空白ページをカットする操作などの考慮は必要です。
以上の操作(マージした情報作成と分割された領収書のファイル名を変更操作)を実施し、それらの情報を使って、電子帳簿に一括登録する機能を実装します。
以下のような画面をwebixで作成します。

画面には、EXCEL情報をインポートするためのボタンと、分割したPDFを選択してドラッグするエリア、EXCEL情報を一覧表示するエリアで構成しています。EXCELをインポートした例です。14件の伝票が存在するEXCELです。
EXCEL上で、該当伝票を整理操作して、個人用と事業用に分類しています。
個人用は、電子帳簿には、登録しないので、一覧では、チェックをデフォルトでは外しています。(フィールド幅は、参考情報を記載するために、本来の幅から編集しています)

上記一覧で、登録する領収書PDFがリストアップできていますので、一括登録したいところですが、Webアプリには、セキュリティ上の制限があり、ローカルファイルを自動でアップロードなどの操作が禁止されており、必ず人の操作が必要です。どのファイルをアップロードするかの実装には、ファイル選択用のダイアログを表示してファイルを選択する操作または、ファイルドラッグエリアを実装して、そこにファイルをドラッグ(複数も可能)する方法は可能です。今回は、同時に複数の領収書を一括登録したいので、ドラッグエリアを定義し、そこにPDFをドラッグする操作で実装してみました。
実際にドラッグされたときに、javascriptで、一覧情報とチェックし、アップロードするかどうかの判断をします。一覧に存在しないPDFをドラッグした場合は、無視し、既に格納したファイルを再ドラッグすると、重複操作で対象外にします。尚、アップロードするサーバ側(PHPで記述していますが)でもチェックがあり、重複登録などをガードします。
以下は、登録済の領収書を再度、ドラッグしたときの結果例です。ドラッグエリアで、エラーとなった表示と、一覧のステータスが重複になっています。PHPサーバ側で重複チェックをした結果の表示例です。通常操作では、ドラック後に自動アップロードされ、ステータスは、登録済となります。

上記操作で、登録された電子帳簿は、以下のようになります。(一部情報は、フィールド幅を編集して、表示していませんが)

手で、1伝票づつの登録作業は、伝票数が5件以上になると大変です。対象伝票のプロジェクト指定や明細情報の編集など
アマゾン注文履歴フィルタ機能を実装して活用すれば、作業の効率化が可能です。また、webixライブラリには、EXCELインポート(実際には、uploader機能を使用)したり、ファイルをドラッグしてサーバにアップロードする機能の実装が可能です。うまく実装すれば、操作しやすい機能を実現できます。今回の記事は、概要説明までです。次回から、各機能のソースコード紹介をします。













この記事が気に入ったらサポートをしてみませんか?