CookBook 開発Blog

IM-BloomMaker でリモートワークの報告メールを送信するアプリを作ってみた

投稿日:2020-04-17 更新日:

はじめに

IM-BloomMaker と IM-LogicDesigner で「リモートワークの報告メールを送信するアプリ」を作成したので、公開します。

新型コロナウィルスによる緊急事態宣言を受けて、弊社 NTTデータイントラマート の赤坂本社ではリモートワークをしている社員がほとんどです。
弊社の開発本部では、在宅勤務におけるルールとして、勤務開始と終了のタイミングで、開発本部メンバーのメーリングリスト宛に報告メールを送ることが義務付けられています。

【在宅勤務開始】【PDG】 2020-04-17 %名前%

お疲れ様です。%名前% です。

本日の予定は以下の通りです。
- 10:00-18:30(例)

作業場所:自宅

作業内容は以下を予定しています。
- %予定作業1%
- %予定作業2%

以上、よろしくお願いします。

ここで、以下の課題が発生しました。

  • 所属によっては、送信するアドレスが 1 つではなく、毎回宛先を設定するのがめんどくさい
  • 毎回メーラーを開くのがめんどくさい。(開発本部では、メインのコミュニケーションツールに IMBox を利用しており、メールはあまり利用していません。)
  • メールのタイトルを、テンプレート通りに設定するのがめんどくさい
  • 文章をテンプレート通りに記載するのは、もっとめんどくさい
  • 受信されるメールのタイトルの中で 【在宅勤務終了】 や 【在宅勤務完了】 などの表記揺れがあり、メールの振り分けルールを作るのがめんどくさい

いずれも些細なことではあるのですが、これらを解決するアプリを作成しようと考え、実装して社内システムに導入しました。

作成するアプリの要件

上述した課題や、報告メールのルールをもとに設定した要件は以下です。

  • 出勤 または 退勤 のタイミングで、それぞれのメールのテンプレートが利用できること。
  • メールの宛先 ( To, CC ) は、毎回入力しなくて良いこと。
  • メールのタイトルにルールを持たせること。
  • 所属グループごとに 【PDG】 や 【クラウドG】 のように、固定文字列を挿入できること。

ダウンロードはこちら

以下の資材は、 2020 Spring 以降の環境で、利用可能です。

IM-LogicDesigner インポート資材 : 181221_im_logicdesigner-data.zip

IM-LogicDesigner のインポート機能を利用してインポートしてください。
インポート後、インポートしたルーティング定義の認可 URI の設定を行ってください。
以下の資材がインポートされます。

種別 ID / ルーティング
フロー im_cookbook_181221_flow_remote_work_report_mail
ルーティング im_cookbook/181221_remote_work_report_mail

IM-BloomMaker インポート資材 181221_im_bloommaker-data.zip

IM-BloomMaker のインポート機能を利用してインポートしてください。
また、ルーティングは資材に含まれていませんので、ご自身での作成をお願いいたします。
以下の資材がインポートされます。

種別 ID
コンテンツ im_cookbook_181221

そのまま利用すると、メールが送信されてしまうのでご注意ください。
なお、メールの From は、ログインしているユーザのメールアドレスが利用されます。
メールアドレスが設定されていないユーザは、利用できないようになっています。

実装のポイント

変数の設計

作成したコンテンツは、以下のような変数構造になっています。

このような構造にすることで、変数が何に使われているのかがわかりやすくなると考えています。

また、定数は以下のような構造になっています。

列挙型 (enum) のような利用をする場合は、オブジェクトを作成し配下に定数を作成してあります。
こうすることで、列挙が後から増えた場合も、メンテナンスがしやすいと思います。

出勤・退勤 の自動判別

ページ読み込み時のタイミングで動作するアクション「初期表示イベント」内で、以下の実装を行っています。
15 時以降は退勤が設定されるようになっています。

ページ読み込み時のイベントは、「コンテナ」のプロパティを編集してください。
2020 Spring からは、「コンテナを選択」アイコンが追加されましたので、ぜひご利用ください。

2019 Winter までは、選択しているエレメントを、 Ctrl キーを押しながらクリックすることで、コンテナを選択できます。

テキストボックスに値が入力されたら、次のテキストボックスが出現

アクションに以下のような機能を入れています。

  • To や CC を指定するテキストボックスにユーザが値を入れたら「To のリスト更新」アクションを発火
    1. リストの中に空文字が存在する場合は、空文字を除去
    2. カスタムスクリプトで、リストの一番最後に空文字を追加
  • 確認ダイアログを開くタイミングで「確認ダイアログを開く」アクションを発火
    1. リストの中に空文字が存在する場合は除去する。

「To のリスト更新」アクションでは、以下のようなカスタムスクリプトを実行しています。

一般的に、 JavaScript のラムダ式はとても便利なのですが、 Internet Explorer での動作を考慮すると、スクリプト開発モデルでは利用できません。
しかし、 IM-BloomMaker のカスタムスクリプトでは、 ES6 ベースのスクリプトを記述しても、 Internet Explorer で動作するよう、自動でトランスパイル(変換)される仕組みが実装されています。
そのため、レガシーブラウザを意識することなく、ラムダ式やテンプレートリテラルなどを利用したスクリプトを実装することができます。

To, CC, 所属組織のキャッシュ

ひとことで書くと、ブラウザの localStorage を利用して実装されています。
そのため、キャッシュにおける処理については、サーバサイドでの実装は行っていません。

localStorage は、ブラウザに標準で実装されているキー・バリューの保存領域です。
なお localStorage はとても簡単な仕組みであり、 JavaScript から簡単に中身を参照できてしまいます。
そのためセキュアな情報の保存には利用してはいけないことに注意してください。

ダイアログを開くタイミングで発火する「確認ダイアログを開く」アクションでは、 localStorage にキャッシュを持たせています。

また、ページ読み込み時のタイミングで発火する「初期表示イベント」アクションでは、 localStorage
保存してあるキャッシュからの復元処理を実装しています。

上記のコードにおいて、 if (localStorage) の if 文で全体が囲まれています。
Internet Explorer の設定で localStorage の仕様をオフにできる機能があり、これによってスクリプトの実行時エラーが発生してしまうことを防ぐためです。

なお、 intra-mart Accel Platform では、もともと以下のような制限事項が存在します。そのため、上記については「念の為」の実装です。

  • intra-mart Accel Platform リリースノート - 制限事項 - クライアントブラウザ

    ローカルストレージやCookieの保存および読み取りが可能な設定でブラウザを利用してください。

ダイアログ内の、メール本文のラベル

フォームのテキストエリアでは、以下のようにメール本文が初期値として入力されています。

これを、確認ダイアログで表示する際に「ラベル」エレメントをのまま利用すると、以下のように行の始めに半角スペースが詰められてしまいます。

この事象を回避するために、「ラベル」エレメントに mail-message-preview のような id を付与して、以下のような CSS を設定しています。

こうすることで、以下のように、行のはじめの半角スペースが詰められず、期待通りに表示されます。

このように、 IM-BloomMaker では CSSエディタを利用することで、簡単に CSS を設定することができます。

おわりに

当該記事でご紹介したように、身近な改善を短期間で実現することができました。
こういったちょっとした改善は、 IM-BloomMaker / IM-LogicDesigner / IM-FormaDesigner の得意とするところです。
これを機に、より深く製品を知っていただけると幸いです。

最後まで読んでいただき、ありがとうございました。

-CookBook, 開発Blog
-,

執筆者:


comment

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

関連記事

【ViewCreator】LogicDesignerと連携してデータ参照の一覧を表示するデータ参照を作成する方法

ViewCreator において、標準の「データ参照一覧」画面では以下のような変更ができません。 「説明」を一覧に表示する。 「データ参照名」の(初期表示時の)列幅を変更する。 各データ参照の表示画面 …

no image

前回のログイン時刻を表示するポートレットの作成方法

このクックブックでは、前回のログイン時刻を表示するポートレットの作成方法をご紹介します。 具体的には、以下の3つの情報を表示するポートレットを作成します。 前回のログイン時刻 前回ログイン時のIPアド …

no image

【ViewCreator】検索にヒットした件数を取得する関数の作り方。

このCookBookでは、ViewCreatorで検索にヒットした件数を取得する関数の作り方についてご紹介します。 ユーザ定義関数についての詳細は下記のドキュメントを参照してください。 ViewCre …

no image

画面UI部品(imuiValidate)のバリデーションメッセージを任意の場所に表示する方法

このCookBookでは、画面UI部品のバリデーションメッセージを任意の場所に表示する方法について紹介しています。 intra-mart Accel Platform では、画面上に配置したUI部品の …

no image

Oracle Cloud に iAP を構築する方法

この CookBook では、Oracle Cloud に iAP を構築する方法について紹介しています。 Oracle Cloud では 2019/5/8 より東京リージョンが利用可能になりました。 …

RSSRSSRSSRSS