HTML5にてMSGファイルをドラッグ&ドロップで内容を取り込む

自作のアプリにて、顧客から飛んできたメールをタスク登録したり、メッセージの内容をサーバに登録したり、添付ファイルをBoxにアップロードしたり、これらの機能を装備する必要が出てきたので、作ってみました。

使用しているメーラーは、Outlook2019でメッセージを掴んで離すとmsg形式のファイルが生成されます。これを解析して内容を取り出し、対象顧客のタスクとして登録しつつ、添付ファイルはBoxの所定の場所にアップロードして、そのファイルパスも顧客管理のシステムに登録するのが目的です。今回もElectronをアプリの土台として利用しています。

図:こんな感じのMSGファイルビューアを作ります

今回使用するモジュール等

フォークしたもので、Node.jsで使うタイプもあったのですが、今回はこちらのサンプルを利用し、メールデータをドラッグ・アンド・ドロップで取得。ファイルについてはBox Driveを使って保存し、ファイルパスを取得し登録する一歩手前の感じまで作ります。

JSだけで出来るので、データの解析はelectronではレンダラプロセスのみで作業を行います(実際のデータの登録等はNode.js側で作業を行います)。なので、通常のJSやGoogle Apps ScriptのHTML Service側でも使えますね。

ソースコード

  • オリジナルのmsg.readerのサンプルはファイル選択方式でしたが、今回はドラッグ&ドロップ方式に変えてあります。
  • オリジナルのmsg.readerは送信元はきちんと取れますが、ToとCcがごっちゃになって返ってくるので、今回その部分はメールヘッダから自前で撮ってきて構築しています。(header2array関数にてメールヘッダを各行を配列にしてあります)
  • MSGファイル読み込み完了後に、ヘッダ部分に作業をする為の固定のヘッダとボタンを用意してあります。
  • ヘッダの行末の改行コードを;;に置き換えて、splitにて配列に変換しています。
  • メールヘッダのメアドには時々日本語でのユーザ名がBase64エンコードされて入ってるので、これに対応するため、デコードしたり余計な文字列を除去するコードを用意してあります。
  • メアドに日本語が入ってる場合、半角スペースで名前とメアドが区切られているので、これをsplitで配列化。加工後に再度結合させる処置をしています。
  • ToとCcは綺麗に整形されて、登録用の配列でるalistとclist配列に格納しています。
  • オリジナルには無いToとCcのリスト表示ようにHTMLを改造しています。
  • オリジナルは本文が改行コードになってるので、<BR>タグに置換させています。
  • 最終的にはmessage連想配列に各データを格納してあるので、これをメインプロセス側などに送って、別のシステムへと登録を想定しています。
  • クリアボタンで元のドラッグアンドドロップ画面に戻るようにしてあります。
  • 本文はスクロールするDiv内に表示するように改造してあります。
  • CC送信先と添付ファイルは、無い場合には非表示にしています。

関連リンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)