クラウド版メールワイズをカスタマイズする

(公式サイトの説明文より抜粋)

メールワイズとは、お問い合わせ対応や採用業務などで使う共通メールアドレス宛のメールを、複数のユーザーで対応状況を共有できるグループメーラーです。

カスタマーサポートでの業務上, メールワイズを利用している企業は多いかと思います.

そのままでも十分に強力なメールワイズですが, クラウド版ではさらにJavaScriptを利用したカスタマイズができます.

▼公式告知
https://mailwise.cybozu.com/product/whatsnew/2014_06.html

▼公式サンプル
https://office-js.cybozu.com/mw_attach

これにより, 公式の機能で足りない部分の機能を独自に追加することができます.
ただ, 公式サイトの説明が上の参考URLしか見つからず, 情報量少なめなのでこちらの記事でカスタマイズJSを書くまでの流れを残そうと思います.

これからいじろうと思ってる方の参考になればと思います.

---

#基本的な構成

クラウド版メールワイズでは, URLにpage=hogehogeとしてページ名が付与されます.
また, JS側ではmw.PAGEとしてその値を受取ることができます.

カスタマイズJSとして登録できるJSは1種類のため, このようにページごとにifでくくって処理を書いていきます.

customize.js

$(function() {
    // メール詳細画面での処理
    if (mw.PAGE == "MailView") {
        // ここに詳細画面での処理を書く
        // ...
    }
    
    // メール送信内容作成画面での処理
    if (mw.PAGE == "MailSend") {
        // ここに送信内容作成画面での処理を書く
        // ...
    }
    
    // ページ名に関わらずすべての画面で処理したい内容を書く
    // ...
});

#カスタマイズJSを書くまでの流れ

今回はコメント欄にログイン中のユーザー名を初期入力しておくシンプルな処理を例にします. ※1

1. ページ名を確認する

今回追加する処理は「メール詳細画面でのコメント入力欄」に関するものなので, メール詳細画面のURLからページ名が「MailView」なのを確認します.

「基本的な構成」で確認したように今回のJSはこんな感じになります.

customize.js

$(function() {
    // メール詳細画面での処理
    if (mw.PAGE == "MailView") {
        // 今回の処理はここに書くよ
    }
});

2. 要素を確認する

コメント欄を右クリックなどし, ブラウザ機能の「要素を見る（※2）」で要素を確認します.
カスタマイズJSではjQueryが使用できるようなので $('textarea[name=Comment]') で対象の「コメント欄」要素が取得できます.

同様に, 画面右上に表示されているユーザー名の要素も確認します.
$('#account-menu').find('.header-menu-caption').text() で「ユーザー名」要素が取得できるかと思います.

3. 実際に処理を書いてコンソールで試す

ブラウザ機能の「コンソール画面」で今回実行したいJSを試していきます.
当たり前ですが, 他のページだと狙ってる要素が存在しなくて動かなかったりするので「メール詳細画面」のコンソールで行うようにしてください.

今回は, 「ユーザー名:」をコメント欄の初期値として記載したいので, 下記のように書くことができます.
コンソールで下記を実行すると, コメント欄にログイン中のユーザー名と:が自動的に入るかと思います.

$('textarea[name=Comment]').val($('#account-menu').find('.header-menu-caption').text() + ':');

実際には下記のように既に値が入っていない場合のみ書き換える, とした方が安全かもしれません.

if($('textarea[name=Comment]').val() == ""){
    $('textarea[name=Comment]').val($('#account-menu').find('.header-menu-caption').text() + ':');
}

4. JSを組み立てる

処理が上手く実行できてるのを確認できたら基本部分とメインの処理部分を組立てます.

customize.js

$(function() {
    // メール詳細画面での処理
    if (mw.PAGE == "MailView") {
        // コメント欄の初期値にユーザー名を入力する
        if($('textarea[name=Comment]').val() == ""){
            $('textarea[name=Comment]').val($('#account-menu').find('.header-menu-caption').text() + ':');
        }
    }
});

5. カスタマイズJSとして登録する

メールワイズのシステム設定 > JavaScript設定から, 今回作成したJSファイルを選択し登録します.

これでカスタマイズJSの設定が完了しました.

---

これだけ気軽にJSでカスタマイズができると業務に合わせていろいろ作れるので非常に便利で重宝しています.

まだまだカスタマイズできる部分もあるので, 利用できるものを賢く使ってどんどん効率化できるといいなぁーと思います.

最後となりますが, いくつか注意点もありますのでこちらに記載しておきます.

注意点:

• クラウド版メールワイズ自体はJSで動かしている機能がかなりありますので, 書き方をミスすると他の箇所も動かなくなる 事があります.
• カスタマイズJS自体のテストはできないので, 3の段階でそれぞれの処理を必ず十分にテストしてあることを確認してください. カスタマイズJSは登録後すぐに反映されます.
• 登録できるJSは1種類のため, 既に登録されているJSがある場合は登録中のJSファイルをDLしてから編集・追記することをおすすめします.

特に, 「適用する対象」を「すべてのユーザー」にした場合にはすべてのユーザーに反映されてしまいますので本当に要注意です.

---

※1: コメントしたユーザー名を一覧で見られるようにしたいのですが, 2015/03現在は公式未対応のため, コメント時に都度自分の名前を記載する必要があるのです. これは非常に面倒...後日公式機能として追加されたらと思っています.

▼公式サイト：コメントを書き込む
https://manual.cybozu.co.jp/mailwise/user_app/mail/mail_info.html#anchor015

※2: 正式名称わからないのでこのように書かせていただきましたが, おそらくみんな知ってるあの機能です. ブラウザによって「要素を検証」など名前が異なります.