Webixライブラリを使った電子帳簿保存機能（機能改善：PDFプレビュー）（その1）No.049

noteで記事を紹介するようになり、数ケ月が経過しましたが、記事を書こうと思ったきっかけは、Webアプリ（スマホ画面操作も含め）の開発がWebixというライブラリ（Javascript）とサーバ側にPHP言語を採用すると、スピーディに簡単に機能を実装できることの紹介と、実際の業務への活用事例を紹介し、必要であれば、開発を受けることを目的でスタートしました。その中でいくつかの業務事例を紹介する中の１つに電子帳簿の保存機能の実装事例があります。アマゾンのようなサイトでは、領収書をPDFでダウンロードして、PDFを解読しながら、金額や明細情報をDB（電子帳簿）に保存することを実現できる事例を紹介していますが、量販店などで購入した場合、レシートをもらって、スキャナーでスキャンしてから1枚づつシステムに登録する作業が発生します。
以下のような画面を使って、電子帳簿として登録します。
該当レシートに関連する購入先情報、金額、購入品の明細情報、電子帳簿の種別や日付などを画面から入力し、レシートをフォルダから選択して格納する操作です。この方法では、以前から作業性の課題がありました。スキャンする元のレシートとスキャンした電子ファイルがどれだか、簡単には対応がつかず、同時に複数枚のレシートを登録する操作をすると、PDFの中身を開いて確認する操作などが発生し、作業性がよくないです。また、PDFのファイル名も自動付与している場合、スキャンしたときの日付時刻情報となっているか、スキャン時に毎回、手でファイ名を指定する作業が発生し、この作業も作業効率の低下課題でした。

改善案をいくつか検討していましたが、今回、以下のような方法を採用してみようと記事にしています。
webixライブラリには、pdfビューワーというコンポーネントがあります。
PDFファイルをURLなどで指定すれば、ブラウザで表示できる機能です。
但し、この機能は、Webix Pro editionでのみ使用可能です。（Webix Pro editionは、有料ライセンスです）
一般的なPDFファイルを指定したURLでもブラウザは、PDF表示できますが、このpdfビューワーは、URL以外の指定（たとえば、PC内のPDFを選択して表示するなど）でも使用できます。今回は、このpdfビューワーを使って、PDFファイルを選択し、画面に表示させ、内容を確認して、金額や明細情報、日付情報、業者情報などを入力後に、サーバに電子媒体として登録する操作を実装してみます。同時に、同じPDFを二重登録しないように、事前に登録済かのチェックも行う機能も追加します。

記事では、以前の機能を残したまま、新たな機能用のボタンを追加して改造します。
以下のような画面をPDFファイル選択時にプレビューとして表示し、その内容を確認しながら、各種情報を入力して電子帳簿として保存します。

以下のURLアクセスで、PDF選択してプレビュー操作を確認してみてください。

Code Snippet

PDF選択すると、Windowが表示され、PDFの内容を確認できます。
このデモでは、各種情報を入力するフィールドはありませんが、PDFを参照しながら、必要情報を入力して、格納ボタンを押下するような操作イメージとなります。
今回は、ここまでの記事です。次回、実際の機能を実装した画面を紹介します。