Transcript UIの強化
2012/04/13 日本アイ・ビー・エム株式会社 IBM SmarterCloud Control Desk 7.5 新機能ガイド － UIの強化 © 2012 IBM Corporation 本書について 本書では、ISCCD7.5（Maximo 7.5）で強化もしくは新たに追加されたUI機能について解説しま す。 また以下の機能については有効/無効の切り替えおよび各種設定の変更手順を示します。 – 非同期バリデーション – クライアント・サイド・バリデーション – ナビゲーション – 新規レコード作成ダイアログ ※上記の機能を全て無効に設定すると、旧バージョンのMaximo（7.1、7.2）のUIに戻すことができます。 2 ©2012 IBM Corporation 目次 非同期バリデーション – 概要 – 機能の有効化/無効化による表示の違い クライアント・サイド・バリデーション – 概要 – 機能の有効化/無効化による表示の違い ナビゲーション – 概要 – 機能の有効化/無効化による表示の違い 新規レコード作成ダイアログ – 概要 – 機能の有効化/無効化による表示の違い その他のUI機能 – 仕様ウィジェット – リフレッシュ・ボタン – リッチ・テキスト・コントロール 設定の変更手順 – システム全体の設定 – システム・プロパティの変更手順 – アプリケーション単位での設定 – フィールド単位での設定 – アプリケーション定義XMLの変更手順 3 ©2012 IBM Corporation 非同期バリデーション － 概要 これまでタブアウト時に同期実行されていたフィールドの評価が非同期になりました。 このため、タブアウトし制御がブラウザーに戻った瞬間に評価結果が出ず遅れて表 示される事がありますが、制御が戻る時間が早くなったためユーザーの全体の待ち 時間が大幅に短縮されます。 チェック結果は各項目やその項目があるタブにアイコンで表示されるため、これまで の用にエラー・ワーニングがあることがわかってもそれがどこかわからないと言うこと が激減します。また、アイコンをクリックすることでエラー内容が確認できます。 この非同期Validationはアプリ ケーション・項目・サーバー全体 でOn/Off可能です。 将来的には、Validationをユー ザーにて設定すること機能を搭載 する予定です。 エラー時にはすべての項目がダイ アログで表示されます。 4 ©2012 IBM Corporation 非同期バリデーション － 機能の有効化/無効化による表示の違い 有効 無効 • 入力された値が見つからない場合、入力フィールド、セクションお よびタブにエラー・アイコンが表示される • 入力された値が見つからない場合、値の選択ダイアログがポップ アップ表示される • 入力フィールドのエラー・アイコンにマウス・カーソルを乗せると、 エラーの詳細がポップアップ表示される • これらの処理は同期実行され、ユーザーが他のフィールドへの入 力を続行するには、入力値を一旦クリアしなければならない。 • これらの処理は非同期に実行され、ユーザーは入力値を保持し たまま、他のフィールドへの値の入力を続行できる。 5 ©2012 IBM Corporation クライアント・サイド・バリデーション － 概要 これまでサーバー側で実行していたデータの有効性チェック（データ型やサイズの検 証）を、ブラウザ側で実行することができるようになりました。ブラウザ側の負荷が若 干あがりますが、入力の都度サーバーとの通信を行う必要がなくなり、ネットワーク・ トラフィックを大幅に削減することが可能です。 また、自動入力プロパティーを構成することで、インクリメンタル検索やユーザーが他 のフィールドに入力したデータに基づいて、フィールドにデータを取り込むことが可能 です。構成可能なプロパティは以下の3つです。 – 先行入力 インクリメンタル検索機能のこと。フィールドにデータを入力していくと、そのデータに対 する1つ以上の一致候補が一覧表示される。 – 値の選択 あるフィールドでユーザーが入力 先行入力：一致候補 の一覧表示 したデータが他のフィールドに取 り込まれるようにする。 – フィルター ユーザーに提示する先行入力の 選択項目を制限する。 6 ※クライアント・サイド・バリデーション機能を有効化するには、非同期バリ デーションが有効であることが前提となります。 ©2012 IBM Corporation クライアント・サイド・バリデーション － 機能の有効化/無効化による表示の違い 有効 無効 • 自動入力プロパティーを構成したフィールドに値を入力すると、 フィールドにキャッシュされたデータをからインクリメンタル検索を 実行し、入力値に該当する値の候補をドロップダウン・リストで表 示する（先行入力） • 自動入力プロパティーを構成したフィールドに値を入力しても、値 の候補は表示されない • 入力の途中で他のフィールドにフォーカスを移した場合は、候補 の中から値が自動入力される • 入力の途中で他のフィールドにフォーカスを移した場合は、 Smart Fill アイコンが表示され、クリックすると入力値に該当する 値の候補から、値を選択することができる • 上記の処理は、常にサーバー・サイドで実行される • 上記の処理は、サーバーでの有効性チェックの前に、クライアン ト・ブラウザーで実行される 他のフィールドにフォーカス 他のフィールドにフォーカス 7 ©2012 IBM Corporation ナビゲーション － 概要１ アプリケーション間の移動の簡略化 これまでの問題点: – リンク先メニューでアプリケーションが見つけにくく、アプリケーション間の移動が 煩雑である。 – 保存されたクエリやアクション・メニューが重要であるにもかかわらず、アクセスが 煩雑である。 – 標準のUIが複雑である。 – リスト・タブとそのほかのタブの関係性 What‘s New? #1 – ヘッダー・バー 新しいホーム・アイコンでどこからでもスタート・センターに移動可能です。 リンク先メニューはホーム・アイコンの右に移動し、ドロップ・ダウン・ボタンとなりました。 ホーム・アイコンとリンク先メニュー・アイコンにツール・チップにて説明が表示されます。 リンク先メニューの1番上にスタート・センターへのリンクが作成されました。 88 ©2012 IBM Corporation ナビゲーション － 概要2 What‘s New? #2 – ナビゲーション・バー 画面の左側にナビゲーション・バーが追加されました。 3つのスタイルがあります。 – 1) ツールバー付アプリケーション – 2) ツールバー無しアプリケーション – 3) ナビゲーション・バーの無いアプリケーション 常にアプリケーションの左側に表示されます。 (標準でナビゲーション・バーがオフのアプリケーションは除く) ナビゲーション・バーの表示状態は保持されず、アプリケーションを開いた際には 常に標準状態でナビゲーション・バーが表示されます。 ナビゲーション・バーは閉じることが出来ます。 9 ©2012 IBM Corporation ナビゲーション － 概要３ What‘s New? #3 リストタブの廃止 アプリケーションを開いた際にリストタブが表示されなくなり、リストへのリンクが”パンくずリスト”と して表示されるようになりました。 What‘s New? #4 ラベルの配置変更 ©2012 IBM Corporation 10水平方向スクロールを最小限にする為に、ラベルはそのコンポーネントの上に移動されました。 ナビゲーション － 機能の有効化/無効化による表示の違い１ ヘッダー・バー 有効 • 「リンク先」、「スタート・センター」へのリンクがヘッダー・バーの左端に移動し、アイコンとして表示される 無効 • 「リンク先」、「スタート・センター」へのリンクがヘッダー・バーの中央にテキストとして表示される 11 ©2012 IBM Corporation ナビゲーション － 機能の有効化/無効化による表示の違い２ ナビゲーション・バー 有効 無効 • 画面左側にナビゲーション・バーが表示される • コンテンツが画面全体に表示される • アプリケーション単位で表示/非表示を設定している場合は、シス テム・プロパティの設定は適用されない（後述） • アプリケーション単位で表示/非表示を設定している場合は、シス テム・プロパティの設定は適用されない（後述） 12 ©2012 IBM Corporation ナビゲーション － 機能の有効化/無効化による表示の違い３ リストタブ 有効 • アプリケーションにリストタブが表示されず、リストへのリンクがパンくずリストとして表示される 無効 • アプリケーションにリストタブが表示され、パンくずリストは表示されない 13 ©2012 IBM Corporation 機能の有効化/無効化による表示の違い － ナビゲーション４ ラベルの表示位置 有効 • ラベルが入力フィールドの上段に表示される 無効 • ラベルが入力フィールドの左側に表示される 14 ©2012 IBM Corporation 新規レコード作成ダイアログ － 概要 新規レコード作成の簡略化 これまでの問題点: – インシデント、サービス要求、変更のレコードを新規に作成する際、表示される項目 が多く、どのフィールドに入力するべきか分かりづらい（特に新しいユーザー） 解決策: – 新規レコードの作成時に入力すべき項目を明らかにし、ユーザーが最小限の入力でレ コードを作成できるようにする インシデント、サービス要求、変更のレコードを新規作成すると、新規レコード作成ダイ アログがポップアップ表示される インシデント 15 サービス要求 変更 ©2012 IBM Corporation 新規レコード作成ダイアログ － 機能の有効化/無効化による表示の違い インシデント 有効 無効 • インシデントの新規レコードを作成すると、入力フィールドを持つ ダイアログが表示される • インシデントの新規レコードを作成すると、初めからインシデント・ アプリケーションの画面が表示される。 • ダイアログの入力フィールドに値を入力して「今すぐ送信」ボタン をクリックすると、入力値を反映した状態で新規レコードが作成さ れる（この時点で保存される） • この時点ではまだレコードは作成されておらず、値を入力後「保 存」ボタンをクリックしてレコードを保存する必要がある 16 ©2012 IBM Corporation 新規レコード作成ダイアログ － 機能の有効化/無効化による表示の違い サービス要求 有効 無効 • サービス要求の新規レコードを作成すると、入力フィールドを持つ ダイアログが表示される • サービス要求の新規レコードを作成すると、初めからサービス要 求アプリケーションの画面が表示される。 • ダイアログの入力フィールドに値を入力して「今すぐ送信」ボタン をクリックすると、入力値を反映した状態で新規レコードが作成さ れる（この時点で保存される） • この時点ではまだレコードは作成されておらず、値を入力後「保 存」ボタンをクリックしてレコードを保存する必要がある 17 ©2012 IBM Corporation 新規レコード作成ダイアログ － 機能の有効化/無効化による表示の違い 変更 有効 無効 • 変更の新規レコードを作成すると、入力フィールドを持つダイアロ グが表示される • 変更の新規レコードを作成すると、初めからサービス要求アプリ ケーションの画面が表示される。 • ダイアログの入力フィールドに値を入力して「今すぐ送信」ボタン をクリックすると、入力値を反映した状態で新規レコードが作成さ れる（この時点で保存される） • この時点ではまだレコードは作成されておらず、値を入力後「保 存」ボタンをクリックしてレコードを保存する必要がある 18 ©2012 IBM Corporation その他のUI機能 － 仕様ウィジェット これまで値を保持するために3つの異なったフィールドを使用していましたが、これらを1つの フィールドを使用する様に変更しました。 下記のアプリケーションで変更が適用されています: – 変更, 構成アイテム, 資産, ロケーション, セルフ・サービス・センター, インシデント, 問題, アクティビティ, 現状の構成アイテム, サービス要求の作成, 請求書, 部品マスター, 資産テンプレート, オファリング, 注文書, 購買要求書, リリース, ソリューション, サービス要求, チケット・テンプレート, 作業指示書管理 19 19 ©2012 IBM Corporation その他のUI機能 － リフレッシュ・ボタン これまでTPM系製品にあったテーブルにリフレッシュボタンが 標準装備されました。 テーブルコンポーネントへの標準装備であるため、TPAE内すべての アプリケーションで使用可能になっています。 20 20 ©2012 IBM Corporation その他のUI機能 － リッチ・テキスト・コントロール Long Descriptionと通信テンプレートにリッチテキストコントロールが採用されました。 これにより文字のサイズの変更から画像の挿入等、自由に装飾を施した文章を記録 に残す事が可能になります。 スクリプト等問題を起こす可能性のある内容は保存時に削除されます。 21 21 ©2012 IBM Corporation 設定の変更手順 － システム全体の設定 UI機能の設定変更をシステム全体に適用するためには、Maximo のシステム・プロパティを変更し ます。 以下の機能を対象とし、システム・プロパティの設定変更手順を示します。 – 非同期バリデーション – クライアント・サイド・バリデーション – ナビゲーション – 新規レコード作成ダイアログ ※上記の機能を全て無効に設定すると、旧バージョンのMaximo（7.1、7.2）のUIに戻すことができま す。 22 ©2012 IBM Corporation 設定の変更手順 － 各機能のプロパティ１ UI機能の設定変更をシステム全体に適用するためには、Maximo のシステム・プロパティを変更します。 各機能ごとに、以下のプロパティを変更できます。 非同期バリデーション プロパティー名 mxe.webclient.async 説明 デフォルト値 1 非同期バリデーションが有効かどうかを示します。個別に有効/無効が設定されてい るアプリケーションおよびフィールドにはこの設定は適用されません。 0：無効、1：有効 mxe.webclient.asyncerrortooltipwai マウスをエラー・アイコン上に置いたときに、エラー・ツールチップ・ダイアログが開く 2 tbeforeopen まで待機する期間 (秒数)。 mxe.webclient.asyncrendertimelimi フレームワークが複数の非同期要求を処理しているときに、クライアントに送信され t る応答と応答の間の最大秒数 15 mxe.webclient.asyncrequestsbefor 応答をレンダリングするまでに、フレームワークが処理する並行非同期要求の最大 erender 数 5 クライアント・サイド・バリデーション プロパティー名 説明 mxe.webclient.ClientDataValidationクライアント・サイド・バリデーションを有効にします。 0：無効、1：有効 デフォルト値 1 mxe.webclient.ClientEventQueue.t サーバーへ送信する前にクライアント・イベント・キューに入れることができるイベント hreshold の最大数 1 mxe.webclient.ClientEventQueue.ti クライアント・イベント・キューがサーバーへの送信までに待機する最大時間 (ミリ秒)。 meout 3000 23 ©2012 IBM Corporation 設定の変更手順 － 各機能のプロパティ２ ナビゲーション プロパティー名 説明 デフォルト値 mxe.webclient.homeButtonHeader ヘッダー・バーの設定。有効にすると、「リンク先」メニューを画面の左側に移動し、 1 s 「スタート・センター」ボタンをヘッダーに追加します。 0：無効、1：有効 mxe.webclient.systemNavBar 1 ナビゲーション・バーの設定。有効にすると、画面左側にナビゲーション・バーが表示 される。個別に表示/非表示が設定されているアプリケーションにはこの設定は適用 されません。 0：無効、1：有効 mxe.webclient.tabBreadCrumbs リストタブの非表示設定。有効にすると、アプリケーションの一覧タブが非表示になり、 1 代わりに画面上部にリストへのリンク（パンくずリスト）が表示されます。 0：無効、1：有効 mxe.webclient.verticalLabels 各入力フィールドのラベルの表示位置の設定。有効にすると、ラベルがフィールドの 上部に表示され、無効にすると左側に表示されます。 0：無効、1：有効 新規レコード作成ダイアログ プロパティー名 説明 pmsrv.servicerequest.usecreatedia サービス要求のレコードを新規に作成する際、ダイアログを使用する。 log 0：無効、1：有効 デフォルト値 1 pminc.incident.usecreatedialog インシデントのレコードを新規に作成する際、ダイアログを使用する。 0：無効、1：有効 1 pmchg.change.usecreatedialog 変更のレコードを新規に作成する際、ダイアログを使用する。 0：無効、1：有効 1 24 ©2012 IBM Corporation 設定の変更手順 － システム・プロパティの変更方法１ 「システムの構成」→「プラットフォームの構成」→「システムのプロパティ」を選択 25 ©2012 IBM Corporation 設定の変更手順 － システム・プロパティの変更方法２ ① ② ③ ④ ⑤ グローバル・プロパティの「フィルター」をクリックし、検索欄を表示 変更したいプロパティを検索（ここでは mxe.webclient.systemNavBarを検索） プロパティ名の左側にあるアイコンをクリック グローバル値を変更（1→0） ツールバーの「保存」ボタンをクリックし、変更を保存 ⑤ ① ③ ② ④ 26 ©2012 IBM Corporation 設定の変更手順 － システム・プロパティの変更方法３ ① 変更したプロパティ名の左側にあるチェックボックスを選択 ② ツールバーの「実行中のリフレッシュ」ボタンをクリック ② ① 27 ©2012 IBM Corporation 設定の変更手順 － システム・プロパティの変更方法４ 選択したプロパティ名がリストされていることを確認し、「OK」ボタンをクリック 28 ©2012 IBM Corporation 設定の変更手順 － システム・プロパティの変更方法５ 一度ログアウトし、再度ログインして変更が反映されていることを確認 29 ©2012 IBM Corporation 設定の変更手順 － アプリケーション単位での設定 以下の機能については、アプリケーション単位で有効/無効を設定することができます。 – 非同期バリデーション – ナビゲーション・バー アプリケーション単位で設定した内容は、システム・プロパティの設定より優先されます。 設定を変更するには、変更を適用したいアプリケーションの定義XMLファイルをエクスポートし、 presentation タブにそれぞれ以下の属性を追加します。 機能名 30 変更対象タブ 追加する属性名 属性値 非同期バリデーション presentation synchronous true ： 同期 false ： 非同期 ナビゲーション・バー presentation systemnav true ： 表示 false ： 非表示 ©2012 IBM Corporation 設定の変更手順 － 入力フィールド単位での設定 以下の機能については、入力フィールド単位で有効/無効を設定することができます。 – 非同期バリデーション 入力フィールド単位で設定した内容は、システム・プロパティおよびアプリケーションの設定より優先 されます。 設定を変更するには、変更を適用したい入力フィールドが含まれているアプリケーションの定義XML ファイルをエクスポートし、変更する入力フィールドを定義しているタブに以下の属性を追加します。 機能名 非同期バリデーション 31 変更対象タブ 追加する属性名 変更する入力フィール synchronous ドを定義しているタブ 属性値 true ： 同期 false ： 非同期 ©2012 IBM Corporation 設定の変更手順 － アプリケーション定義XMLの編集方法１ 「システムの構成」→「プラットフォームの構成」→「アプリケーション・デザイナー」を選択 32 ©2012 IBM Corporation 設定の変更手順 － アプリケーション定義XMLの編集方法２ 設定を変更するアプリケーションを検索し、選択（ここではサービス要求アプリケーションを選択） 33 ©2012 IBM Corporation 設定の変更手順 － アプリケーション定義XMLの編集方法３ ツールバーの「アプリケーション定義のエクスポート」ボタンをクリック 34 ©2012 IBM Corporation 設定の変更手順 － アプリケーション定義XMLの編集方法４ XMLファイルが新規ウィンドウで開かれるので、「ファイル」→「名前を付けて保存」を選択して、任意の場所に保存 35 ©2012 IBM Corporation 設定の変更手順 － アプリケーション定義XMLの編集方法５ 任意のテキスト・エディターでファイルを開き、設定を変更して保存（ここではナビゲーション・バーを非表示に設定、 その他の設定方法は本資料のP19、P20を参照） 36 ©2012 IBM Corporation 設定の変更手順 － アプリケーション定義XMLの編集方法６ 再度アプリケーション・デザイナーでXMLをエクスポートしたアプリケーションを開く ツールバーの「アプリケーション定義XMLのインポート」を選択 37 ©2012 IBM Corporation 設定の変更手順 － アプリケーション定義XMLの編集方法７ 編集したXMLファイルを指定し、「OK」ボタンをクリック 38 ©2012 IBM Corporation 設定の変更手順 － アプリケーション定義XMLの編集方法８ 変更した内容が正しく反映されていることを確認し、ツールバーの「保存」ボタンをクリックして変更を保存 39 ©2012 IBM Corporation