補足と注意事項

SP版JSプラグインに関する補足と、プラグイン作成時の注意事項を記載しています。

SP版JSプラグイン読み込みに関する補足

eセールスマネージャーに登録したSP版JSプラグインは、各ユーザーがeセールスマネージャーSP版にログインした際に読み込まれます。
読み込まれていることを直接確認するには、Webブラウザの開発者ツールを用いて、headタグ内を検索してください。
JavaScriptファイルはscriptタグ、CSSはlinkタグによって読み込まれていることが確認できます。



また、PC版JSプラグインとの相違点として次の点にご注意ください。
PC版JSプラグインでは対象画面においてのみ、JavaScriptやCSSが有効化されますが、
SP版JSプラグインではeセールスマネージャーSP版のすべての画面に適用されてしまいます。
そのため、プラグインのJavaScriptに関しては3．適用対象画面に記載されているイベントの処理として記述する必要があります。
これは、eセールスマネージャーSP版が非同期通信ベースで画面に描画される要素を切り替えていることに起因します。
PC版では同期通信ベースで画面遷移が行われるため、画面が切り替わるたびに画面要素全体の書き換えが発生しますが、
SP版ではそれが発生しないため、独自のイベントを発生することでプラグインの処理を実行しています。
具体的な実装方法については、プラグイン作成例をご参照ください。

SP版JSプラグイン実装内容に関する注意事項

SP版JSプラグインとして登録する、JavaScript、CSSファイルの実装方法や実装内容に関する注意点を説明します。

システムの設定値の利用に関する注意

eセールスマネージャーではHTML上の項目を管理者ユーザ・特権ユーザにて自由に追加・削除・変更する事が可能です。
特権ユーザにおいて設定可能なシステムの値、また管理者ユーザで設定可能な各種設定値などの値を参照する場合には
システムの設定値が可変であることに十分ご留意ください。

画面表示項目が変更される主な例は下記になります。
  • プロセスシナリオ設定による画面表示項目の変動
  • 顧客階層化による画面表示項目の変動
  • 拡張項目の追加や削除による画面表示項目の変動


画面要素（ノード）の取得

JavaScriptやCSSでは、あるノードの親子関係や兄弟関係を使用し、ノードを相対的に指定する事が可能です。
しかし、ノードを相対的に指定する場合、項目の追加・削除・変更に伴いDOM構造が変更されるために
  • 画面レイアウトが崩れる。
  • エラーが発生し本来JavaScriptで行いたい処理が実行出来なくなる。
  • 操作したいノード以外のノードを操作してしまう。
などの問題が生じる可能性があります。

ノードを取得する際にはidを指定するなど、
ノードの関係を用いて相対的にノードを指定するのではなく、ノードそのものを直接取得する方式を推奨します。
// ノードを相対的に取得（非推奨） var child = node_elem.firstChild;   // idを指定し直接取得（推奨例） var child = document.getElementById("child");   // jQueryでidを指定し直接取得（推奨例） var child = $("#child")



undefined（未定義）の考慮

項目の追加・削除・変更により、指定したHTML要素が取得できなくなる可能性があります。
該当する要素が存在せずundefinedとなりエラーが発生した場合、後続の処理が行われない可能性が生じます。

プラグイン開発時のHTMLや要素の取得方法を正とするのではなく、項目が無くなった際のエラーハンドリングを適切に行う必要があります。
例えば、下記のような方法をご検討ください。
  • HTML要素を取得した際に undefined でないかを必ずチェックする。
  • 例外処理文「try...catch」を使用し、エラーが発生した場合でもその他の処理に影響がないように実装する。

DOMやページの読み込み時に動作する処理

下記はDOMやページの読み込み時の処理の実装でよく使われる方法です。
$(document).ready(function(){     // DOMの読み込み完了時の処理 });   $(window).load(function(){     // ページ内の全ての要素の読み込み完了時の処理 });
eセールスマネージャーSP版では、画面遷移に伴う画面の書き換えが発生しないため、
DOMやページの読み込みは、SP版ログイン時のみ行われます。 そのため、上記の方法では意図したタイミングで動作を実行できない可能性があります。

画面の読み込み時の処理をカスタマイズする場合は、3．適用対象画面に記載の「画面の読み込み(load)」イベントをご使用ください。

画面要素の指定時の注意点

eセールスマネージャーSP版の各画面は、class属性が"page"であるdivタグ内に要素を保持しています。
また、各画面のdivタグは、シート名（顧客、案件、等）と操作（登録、変更、等）をつなげた文字列をname属性として付与されており、
これを用いて、特定の画面要素を取得することが可能です。

例）
顧客詳細画面のname属性　：　customer_detail_page

SP版の画面の切り替えにおいて、前の画面(遷移元の画面)の画面要素は一定のタイミングで削除(remove)されますが、
画面が切り替わるたびに削除が行われるわけではなく、前の画面の要素がstyle属性を"display: none;"として残存していることがあります。
そのため、上記の方法で画面要素を取得する際、遷移順やタイミングによっては残存している遷移元画面の要素が取得される可能性があります。
現在表示されている画面の要素を取得するためには、要素を取得する際に疑似セレクタ「:visible」を必ず付与してください。

例）
任意の顧客の顧客詳細画面を開いた際、顧客詳細画面は下記で取得できます。
// 疑似セレクタ「:visible」を付与しない $("div.page[name='customer_detail_page']")   // 疑似セレクタ「:visible」を付与する $("div.page[name='customer_detail_page']:visible")
実際に上記コードで取得した結果は下記のようになります。

※画像のコードでは「.length」を使用して、取得できた要素の数を示しています。

疑似セレクタ「:visible」を付与した場合では、現在画面に表示されている画面要素のみが取得できます。


CSSファイルでの不十分なセレクタ指定

CSSファイルも同様に、eセールスマネージャーSP版の全ての画面で有効です。
CSSファイルでセレクタ指定が不十分だと、ユーザーが想定していない画面の要素にもCSSが適用される可能性があります。
上述したname属性や疑似セレクタ「:visible」などを用いて、適切にセレクタを指定するようにご注意ください。

既存の処理を上書きした際の注意点

case3．複数の項目を連動させた、複雑な入力チェックを追加するで示した通り、
SP版JSプラグインを利用して、既存の登録・変更などの処理を上書きすることが可能です。
既存の処理を上書きした際は、eセールスマネージャーの本来の処理が最終的に実行されるように注意してください。
本来の処理が実行されない場合、データの登録や変更ができない可能性があります。

独自要素追加時の注意点

JavaScriptで画面上に動的に要素を追加することは可能ですが、予期せぬレイアウト崩れを招く恐れがあるため、注意が必要です。
例えば、下記の事項にご注意ください。
  • 要素の追加時、追加する場所を指定するセレクタを適切に設定する。
    セレクタ指定が不十分だと、他画面にも要素が追加されてしまったり、画面遷移時に要素が残存する可能性があります。
  • 要素の追加時、必要に応じて追加した要素を削除する処理も記述する。
    削除処理を記述しない場合、画面遷移を繰り返すことで要素が重複する可能性があります。


ダイアログ表示についての注意点

下記のような方法で、画面上にダイアログを表示することが可能です。
// メッセージとOKボタンを持つダイアログを表示 window.alert(message);   // メッセージとOKボタン、キャンセルボタンを持つダイアログを表示 window.confirm(message);   // メッセージとテキスト入力フィールドを持つダイアログを表示 window.prompt(message);  
SP版プラグインのJavaScriptで上記の方法を使用した場合、
Webブラウザを利用してeセールスマネージャーSP版にアクセスした場合、またはAndroid OSアプリをご利用の場合はダイアログが表示されます。
しかし、iOSアプリをご利用の場合は、画面描画処理を行っている外部依存コンポーネントの仕様上、ダイアログが表示されませんのでご注意ください。
iOSアプリで画面上にメッセージを表示したい場合は、
case2．顧客詳細画面にて、日付型項目から特定の日数が経過した場合に警告メッセージを表示する
で紹介した、警告メッセージの追加方法を参考に実装ください。

文字入力処理についての注意点

文字入力処理を実装する場合は、項目や型ごとの最大文字数を超えないようにしてください。
JSプラグインで追加された文字列や数値がeセールスマネージャーの最大桁数を超える場合
eセールスマネージャーの処理が正しく行えなくなります。