この製品のマニュアルセットは、偏向のない言語を使用するように配慮されています。このマニュアルセットでの偏向のない言語とは、年齢、障害、性別、人種的アイデンティティ、民族的アイデンティティ、性的指向、社会経済的地位、およびインターセクショナリティに基づく差別を意味しない言語として定義されています。製品ソフトウェアのユーザーインターフェイスにハードコードされている言語、RFP のドキュメントに基づいて使用されている言語、または参照されているサードパーティ製品で使用されている言語によりドキュメントに例外が存在する場合があります。シスコのインクルーシブランゲージに対する取り組みの詳細は、こちらをご覧ください。
このドキュメントは、米国シスコ発行ドキュメントの参考和訳です。リンク情報につきましては、日本語版掲載時点で、英語版にアップデートがあり、リンク先のページが移動/変更されている場合がありますことをご了承ください。あくまでも参考和訳となりますので、正式な内容については米国サイトのドキュメントを参照ください。
さまざまなデフォルト ポータルが用意されており、これらを編集および複製したり、追加ポータルを作成したりすることができます。ポータルの外観を完全にカスタマイズし、その結果として、ポータルのエクスペリエンスをカスタマイズすることもできます。他のポータルへの影響なく、各ポータルを個別にカスタマイズできます。
ポータル全体またはポータルの特定のページに適用される、次のようなポータル インターフェイスのさまざまな側面をカスタマイズできます。
テーマ、イメージ、色、バナー、およびフッター
ポータル テキスト、エラー メッセージ、および通知の表示に使用される言語
タイトル、コンテンツ、手順、およびフィールドとボタンのラベル
電子メール、SMS、およびプリンタでゲストに送信される通知(アカウント登録ゲスト ポータルとスポンサー ポータルにのみ該当)
ユーザに表示されるエラー メッセージと情報メッセージ
特定の必要によってゲスト情報を収集するカスタム フィールド(アカウント登録ゲスト ポータルとスポンサー ポータルにのみ該当)
Web ポータルのカスタマイズの詳細については、「ISE Portal Builder」および「HowTo: ISE Web Portal Customization Options」を参照してください。 |
エンドユーザのポータル ページをカスタマイズする方法は複数あり、それぞれ異なるレベルの知識が必要です。
ポータルをカスタマイズした後、それを複製して(同じタイプの)複数のポータルを作成できます。たとえば、1 つの業務エンティティのホットスポット ゲスト ポータルをカスタマイズした場合、それを複製し、少し変更して他の業務エンティティのカスタム ホットスポット ゲスト ポータルを作成することができます。
ミニ エディタのボックス内のワードが長いと、ポータルの画面領域のスクロールがオフになる場合があります。これを防ぐには、HTML 段落属性 style="word-wrap: break-word" を使用します。次に例を示します。
<p style="word-wrap:break-word"> thisisaverylonglineoftextthatwillexceedthewidthoftheplacethatyouwanttoputitsousethisstructure </p>
HTML または javascript を使用してポータル ページをカスタマイズする場合は、必ず有効な構文を使用してください。ミニ エディタに入力するタグおよびコードは ISE によって検証されません。無効な構文が原因でポータル フロー時に問題が発生する場合があります。
Cisco ISE では、「そのまま」使用するか、または新しいカスタム ファイルを作成するためのモデルとして既存の CSS ファイルを使用することでカスタマイズできる、ポータル テーマのデフォルト セットが提供されます。ただし、カスタマイズされた CSS ファイルを使用しないでポータルの外観を変更することもできます。
たとえば、独自の企業ロゴやバナー イメージを使用する場合は、単にこれらの新しいイメージ ファイルをアップロードして使用することができます。ポータルのさまざまな要素および領域の色を変更することによって、デフォルトのカラー スキームをカスタマイズできます。カスタム変更時に、カスタム変更を表示する言語を選択することもできます。
ロゴおよびバナーを置き換えるための画像を設計するときは、画像のサイズを次のピクセル サイズに可能な限り近づけてください。
バナー | 1724 X 133 |
デスクトップのロゴ | 86 X 45 |
モバイルのロゴ | 80 X 35 |
ISE はポータルに合わせて画像のサイズを変更しますが、画像が小さすぎるとサイズ変更後に正しく表示されない場合があります。
高度なカスタマイズ(ページ レイアウトの変更、ポータル ページへのビデオ クリップや広告の追加など)を行うには、独自のカスタム CSS ファイルを使用できます。
特定のポータルでのこのようなタイプの変更は、そのポータルのすべてのページにグローバルに適用されます。ページ レイアウトの変更は、ポータル内にグローバルに、または特定の 1 ページのみに適用することができます。
エンドユーザ Web ポータル ページでゲストに表示されるタイトル、テキスト ボックス、手順、フィールドとボタンのラベル、その他の視覚要素をカスタマイズすることができます。ページをカスタマイズするときには、ページ設定を動的に編集することができます。
これらの変更は、カスタマイズしている特定のページにのみ適用されます。
ニーズに最適な事前定義済みテーマを選択し、デフォルト設定のほとんどを使用します。その後、次のような基本的なカスタマイズが可能です。
![]() ヒント | 更新するときに、カスタマイズの参照を行うことができます。 |
デフォルト ポータル テーマのデフォルト カラー スキームをカスタマイズして、ポータルのさまざまな要素と領域の色を変更できます。これらの変更は、カスタマイズしているポータル全体に適用されます。
ポータルの色を変更する場合は、次のことに注意してください。
このオプションを使用して、このポータルで使用するためにインポートしたカスタム ポータル テーマのカラー スキームを変更することはできません。その色の設定を変更するには、カスタム テーマ CSS ファイルを編集する必要があります。
ポータルのテーマ カラーを変更した後で、[ポータル テーマ(Portal Theme)] ドロップダウン メニューから別のポータルのテーマを選択した場合、元のポータル テーマの変更は失われ、デフォルト カラーに戻ります。
変更済みのカラー スキームを使用してポータルのテーマ カラーを調整し、保存する前に色をリセットした場合、カラー スキームはデフォルト カラーに戻り、前の変更はすべて失われます。
カスタム変更を加えるときに、変更内容を表示する言語を選択できます。この変更は、カスタマイズしているポータル全体に適用されます。
ポータル ページをカスタマイズするときに選択した言語に加えた変更が、サポート対象のすべての言語プロパティ ファイルで更新されていることを確認します。
独自の企業ロゴ、アイコン、およびバナー イメージを使用する場合は、カスタム イメージをアップロードするだけで既存のイメージを置き換えることができます。サポートされている画像形式は、.gif、.jpg、.jpeg、.png です。これらの変更は、カスタマイズしているポータル全体に適用されます。
ポータルのフッター(たとえば、アドバタイズメント)にイメージを含めるには、そのイメージがある外部サーバにアクセスできる必要があります。
ポータルの各ページのバナーおよびフッター セクションに表示される情報をカスタマイズできます。これらの変更は、カスタマイズしているポータル全体に適用されます。
ポータルに表示されるすべてのテキストを更新できます。カスタマイズするページの各 UI 要素に、入力できる文字数の最小範囲および最大範囲があります。テキスト ブロックの一部が使用可能な場合、ミニ エディタを使用して表示スタイルをテキストに適用できます。これらの変更は、カスタマイズしている特定のポータル ページにだけ適用されます。これらのページ要素は、電子メール、SMS、印刷通知ごとに異なります。
テキストの基本的な書式設定を行うには、[説明テキスト(Instructional Text)]、[オプションの内容 1(Optional Content 1)]、および [オプションの内容 2(Optional Content 2)] テキスト ボックスにあるミニ エディタを使用します。これらの変更は、カスタマイズしている特定のポータル ページにだけ適用されます。
[全画面表示の切り替え(Toggle Full Screen)] ボタンを使用して、作業しているテキスト ボックスのサイズを拡大および縮小します。
[表示名(Display Name)] | 変数名による代替 |
---|---|
ゲスト - 会社(Guest - Company) |
ui_guest_company |
ゲスト - 電子メール アドレス(Guest - Email address) |
ui_guest_email_address |
ゲスト- 終了日時(Guest - End date and time) |
ui_guest_end_date_time |
ゲスト - 名(Guest - First name) |
ui_guest_first_name |
ゲスト - 姓(Guest - Last name) |
ui_guest_last_name |
ゲスト - ロケーション名(Guest - Location name) |
ui_guest_location_name |
ゲスト - 最大登録デバイス数(Guest - Maximum registered devices) |
ui_guest_max_reg_devices |
ゲスト - 最大同時ログイン数(Guest - Maximum simultaneous logins) |
ui_guest_max_siml_login |
ゲスト - パスワード(Guest - Password) |
ui_guest_password |
ゲスト - 訪問先担当者(電子メール)(Guest - Person being visited (email)) |
ui_guest_person_visited |
ゲスト - 電話番号(Guest - Phone number) |
ui_guest_phone_number |
ゲスト - 訪問の理由(Guest - Reason for visit) |
ui_guest_reason_visit |
ゲスト - SMS プロバイダー(Guest - SMS Provider) |
ui_guest_sms_provider |
ゲスト - SSID(Guest - SSID) ゲストがネットワークに接続するために使用できるワイヤレス ネットワークを指定するために使用します。 |
ui_guest_ssid |
ゲスト - 開始日時(Guest - Start date and time) |
ui_guest_start_date_time |
ゲスト - 残り時間(Guest - Time left) |
ui_guest_time_left |
ゲスト - ユーザ名(Guest - Username) |
ui_guest_user_name |
[ユーザ名(Username)] ポータルにログインしたユーザのユーザ名を指定するために使用します。 |
ui_sponsor_user_name |
[表示名(Display Name)] | 変数名による代替 |
---|---|
MDM - ベンダー名(MDM - Vendor Name) |
ui_mdm_vendor_name |
[表示名(Display Name)] | 変数名による代替 |
---|---|
デバイス - ログイン失敗の頻度制限(MyDevices - Login Failure Rate Limit) |
$user_login_failure_rate_limit$ |
デバイス - 最大登録デバイス数(MyDevices - Max Devices to Register) |
ui_max_register_devices |
デバイス - ユーザ名(MyDevices - User Name) ポータルにログインしたユーザのユーザ名を指定するために使用します。 |
$session_username$ |
カスタマイズがポータル ユーザ(ゲスト、スポンサー、従業員)にどのように表示されるかを確認できます。
[ポータルテストURL(Portal test URL)] をクリックして、変更を表示します。
テスト ポータルは RADIUS セッションをサポートしていないため、すべてのポータルに対するポータル フローの全体は表示されません。BYOD およびクライアント プロビジョニングは RADIUS セッションに依存するポータルの例です。
(注)
変更がさまざまなデバイスでどのように表示されるかを動的に確認するには、[プレビュー(Preview)] をクリックします。
デスクトップ デバイス:[プレビュー(Preview)] をクリックし、[デスクトップ プレビュー(Desktop Preview)] をクリックします。新しいタブが開いて、すべての変更がこのタブに表示されます。
変更が表示されない場合は、[プレビューのリフレッシュ(Refresh Preview)] をクリックします。表示されるポータルは、変更を確認するためだけのものです。ボタンをクリックしたり、データを入力したりすることはできません。
カスタム ポータル ファイル メニューでは、ISE サーバに独自のファイルをアップロードすることができ、ゲストおよび BYOD ポータルのカスタマイズに使用できます。アップロードしたファイルは PSN に保存され、すべての PSN で同期されます。
サポートされるファイル タイプは次のとおりです。
.png、.gif、.jpg、.jpeg:背景、お知らせ、広告用
.htm、.html、.js、.json:高度なカスタマイズ用、たとえば、ポータル ビルダー
ファイルのサイズは限定されます:
ファイルあたり 20 MB
すべてのファイルの合計が 200 MB
ファイルのリストのパス列には、このサーバ上のファイルの URL が表示されます。この URL は、ミニエディタ外部でそのファイルを参照する場合に使用できます。イメージ ファイルの場合、リンクをクリックすると、新しいウィンドウが開き、イメージが表示されます。
アップロードされたファイルは、ポータル ページのカスタマイズの下のミニ エディタで、管理者用ポータルを除くすべてのポータル タイプにより参照できます。ミニ エディタにファイルを挿入するには、ツールバーの [ファイルを挿入(insert file)] ボタンをクリックします。[HTML ソース(HTML Source)] ビューに切り替えます。挿入されたファイルが適切な HTML タグで囲まれていることがわかります。
テストのために、表示可能なアップロード ファイルを ISE の外部からブラウザで表示することもできます。URL は https://ise_ip:8443/portal/customFiles/filename です。
Cisco ISE から提供されるデフォルトのポータル テーマの 1 つを使用しない場合、ニーズに合わせてポータルをカスタマイズできます。そのためには、CSS および Javascript ファイルと jQuery Mobile ThemeRoller アプリケーションの使用経験が必要です。
デフォルトのポータル テーマを変更することはできませんが、次の操作を実行できます。
ポータルのデフォルト テーマ CSS ファイルのエクスポート、およびカスタム ポータル テーマを作成する基本として使用できます。
カスタム ポータル テーマ CSS ファイルの作成、デフォルトのポータル テーマを編集し、新規ファイルとして保存することによって可能になります。
カスタム ポータル テーマ CSS ファイルのインポート、ポータルに適用できます。
専門知識と要件の範囲に基づいて、事前定義済み変数の使用など、さまざまなタイプの高度なカスタマイズを実行できます。これにより、表示される情報の整合性の実現、ポータル ページへのアドバタイズメントの追加、HTML、CSS、および Javascript コードを使用した内容のカスタマイズ、ポータル ページのレイアウト変更が可能になります。
Cisco ISE では、[ポータル ページのカスタマイズ(Portal Page Customization)] に表示されているさまざまなページのテキスト ボックスで HTML および Javascript コードを使用して、エンドユーザ ポータルに表示される内容をカスタマイズすることができます。
さまざまなポータルにアクセスし、ここで有効にしたオプションに基づいてテキスト ボックスに HTML および JavaScript コードを入力できます。
CSS ファイルの使用に関する経験がある場合、デフォルトのポータル テーマ CSS ファイルをカスタマイズして、ポータル プレゼンテーションを変更し、ページ レイアウト、色、フォントなどの要素を操作できます。CSS ファイルをカスタマイズすると、プレゼンテーションの特性の指定における柔軟性と制御が向上し、複数のページでフォーマットを共有することが可能になり、構造化されたコンテンツの複雑さと繰り返しが削減されます。
Cisco ISE エンドユーザ ポータルは、種類が異なる 2 つの CSS ファイル(structure.css および theme.css)を使用します。ポータル テーマごとに独自の theme.css ファイルがありますが、ポータル タイプにつき structure.css ファイルは 1 つのみです(例:ゲスト ポータルの場合は guest.structure.css、スポンサー ポータルの場合は sponsor.structure.css、デバイス ポータルの場合は mydevices.structure.css)。
structure.css では、ページ レイアウトと構造のスタイルを指定しています。これには各ページの要素の位置が定義され、jQuery Mobile 構造のスタイルも含まれています。structure.css ファイルは表示のみ可能で、編集することはできません。ただし、theme.css ファイル内のページ レイアウトを変更し、これらのファイルをポータルにインポートして適用すると、最新の変更が structure.css のスタイルよりも優先されます。
theme.css ファイルは、フォント、ボタンの色、ヘッダーの背景などのスタイルを指定します。theme.css ファイルをエクスポートし、テーマ設定を変更してインポートし、ポータルのカスタム テーマとして使用できます。theme.css ファイルに対するページ レイアウト スタイルの変更は、structure.css ファイルで定義されるスタイルよりも優先されます。
シスコが提供するデフォルトのポータル theme.css ファイルは変更できません。ただし、ファイル内の設定を編集して、新しいカスタム theme.css ファイルに保存できます。カスタム theme.css ファイルをさらに編集することはできますが、Cisco ISE に再度インポートする場合は、最初に使用されていたのと同じテーマ名にしてください。同じ theme.css ファイルに 2 つの異なるテーマ名を使用することはできません。
たとえば、デフォルトの green theme.css ファイルを使用して新しいカスタム blue theme.css ファイルを作成し、Blue と名付けることができます。その後、blue theme.css ファイルを編集できますが、これを再度インポートする場合は、同じテーマ名の Blue を再利用する必要があります。Cisco ISE はファイル名やその名前とテーマ名の一意性の関係を確認するため、そのファイルを Red という名前にすることはできません。ただし、blue theme.css ファイルを編集し、red theme.css として保存し、新規ファイルをインポートして Red と名付けることは可能です。
シスコのエンドユーザ ポータルのカラー スキームは、jQuery ThemeRoller と互換性があります。ThemeRoller Web サイトを使用して、ポータル全体の色を簡単に編集できます。
ThemeRoller の色の「見本」にはそれぞれ独自のカラー スキームがあります。それらのスキームによって、主要 UI 要素(ツールバー、コンテンツ ブロック、ボタン、リスト項目、フォントのテキスト シャドウなど)の色、テクスチャ、フォントの設定が定義されます。さらに、ボタンのさまざまな操作状態(通常時、マウスオーバー時、押された時)の設定も定義されます。
シスコでは、次の 3 つの見本が使用されます。
スイッチ A:デフォルトのスイッチ。
スイッチ B:強調する要素を定義します(例:[承認(Accept)] ボタンなど)。
スイッチ C:重要な要素を定義します(例:アラート、エラー メッセージ、無効な入力フィールド、削除ボタンなど)。
スイッチを新たに追加して適用する場合は、そのスイッチを使用する要素を含む HTML コードを(オプション コンテンツなどに)追加しない限り、追加したスイッチを適用できません。
シスコ提供のデフォルトの CSS ファイルを編集するか、またはデフォルトのテーマに定義されている CSS クラスおよび構造に基づいて新しいファイルを作成するには、jQuery Mobile ThemeRoller(リリース 1.3.2)の必要なバージョンを使用してください。
jQuery Mobile ThemeRoller のスウォッチおよびテーマの詳細情報については、『Creating a Custom Theme with ThemeRoller』の「Theming Overview」を参照してください。jQuery Mobile ThemeRoller のオンライン ヘルプを使用して、カスタム テーマをダウンロード、インポート、および共有する方法を学習します。
HTML、CSS、および Javascript コードを使用して、ポータル ページに表示されるテキストおよびコンテンツをカスタマイズする方法のチュートリアルについては、Code Academy にアクセスしてください。
見本がどのように使用されるかを示すために、ゲスト ポータルのデフォルト テーマが色の違いを示すように ThemeRoller で編集されました。
次の画面は、ユーザ(見本 B)からのアクションを取るボタンとともにゲスト ポータルのログイン エラー(見本 C)を示し、画面の残りは見本 A です。
jQuery Mobile ThemeRoller のバージョン 1.3.2 を使用していることを確認します。ご使用のバージョンが次のように画面の左上隅に表示されます。
ゲスト アカウントが作成されるときに、それらをロケーションに関連付けて Service Set Identifier(SSID)属性を指定することできます。ロケーションと SSID のどちらも、CSS クラスとして使用することができます。これを使用すると、ゲストのロケーションと SSID に基づいて、それぞれ異なる CSS スタイルをポータル ページに適用できます。
![]() (注) | この情報は、クレデンシャルを持つゲスト ポータルにのみ、ゲストがログインした後に適用されます。 |
次に例を示します。
ゲスト ロケーション:ロケーションとして San Jose または Boston を持つアカウント付きゲストがクレデンシャルを持つゲスト ポータルにログインした場合、guest-location-san-jose または guest-location-boston のいずれかのクラスをすべてのポータル ページで使用できます。
ゲスト SSID:Coffee Shop Wireless という名前の SSID の場合、すべてのポータル ページで guest-ssid-coffee-shop-wireless という CSS クラスを使用できます。この SSID は、ゲスト アカウントに指定した SSID であり、ログイン時にゲストが接続した SSID ではありません。
スイッチやワイヤレス LAN コントローラ(WLC)などのデバイスをネットワークに追加するときに、ロケーションも指定できます。このロケーションも CSS クラスとして使用することができ、これを使用すると、ネットワーク デバイスのロケーションに応じて、それぞれ異なる CSS スタイルをポータル ページに適用できます。
たとえば、WLC が Seattle に割り当てられ、ゲストが Seattle-WLC から Cisco ISE にリダイレクトされた場合、すべてのポータル ページで device-location-my-locations-usa-seattle という CSS クラスを使用できます。
Cisco ISE は、クライアント デバイスのタイプ(ゲスト、スポンサー、または従業員)を検出し、企業のネットワークまたはエンドユーザ Web ポータル(ゲスト、スポンサーおよびデバイス)にアクセスします。タイプは、モバイル デバイス(Android、iOS など)またはデスクトップ デバイス(Windows、MacOS など)のいずれかとして検出されます。デバイス タイプは、CSS クラスとして利用できます。このクラスは、ユーザのデバイス タイプに基づいてポータル ページに異なる CSS スタイルを適用するために使用できます。
ユーザは Cisco ISE のエンドユーザ Web ポータルにログインすると、それらのポータル ページで cisco-ise-mobile クラスまたは cisco-ise-desktop クラスを使用できます。
シスコが提供するデフォルトのポータル テーマをダウンロードし、ニーズに合わせてカスタマイズできます。それを高度なカスタマイズを実行するための基本として使用できます。
カスタム ポータル テーマを作成するには、既存のデフォルト ポータル テーマをカスタマイズして、新規ポータルの theme.css ファイルに変更を保存します。デフォルト テーマの設定および見本を変更して、選択したポータルへのグローバルな変更を行うことができます。
ステップ 1 | ダウンロードしたポータルの theme.css ファイルのコンテンツを jQuery Mobile ThemeRoller ツールにインポートします。
| ||
ステップ 2 | (任意)
ポータル コンテンツに組み込まれたリンク | ||
ステップ 3 | (任意)
動的なテキスト更新の変数の挿入 | ||
ステップ 4 | (任意)
テキストをフォーマットし、リンクを含めるソース コードの使用 | ||
ステップ 5 | (任意)
アドバタイズメントとしてのイメージの追加 | ||
ステップ 6 | (任意)
ゲスト ロケーションに基づいたグリーティングのカスタマイズ | ||
ステップ 7 | (任意)
ユーザ デバイス タイプに基づいたグリーティングのカスタマイズ | ||
ステップ 8 | (任意)
カルーセル アドバタイジングの設定 | ||
ステップ 9 | (任意)
ポータル ページのレイアウトの変更 | ||
ステップ 10 | カスタマイズされたファイルを新しい theme.css ファイルとして保存します。
| ||
ステップ 11 | 新しい theme.css ファイルは、準備を整えた後、Cisco ISE にインポートできます。 |
リンクを追加して、ゲストがポータル ページからさまざまな Web サイトにアクセスできるようにすることができます。これらの変更は、カスタマイズしている特定のポータル ページにだけ適用されます。
[全画面表示の切り替え(Toggle Full Screen)] ボタンを使用して、作業しているテキスト ボックスのサイズを拡大および縮小します。
内容を動的に更新する事前定義済みの変数($variable$)を代わりに使用することによって、ポータルに表示されるテキストのテンプレートを作成することもできます。これにより、ゲストに表示するテキストと情報の一貫性が維持されます。これらの変更は、カスタマイズしている特定のポータル ページにだけ適用されます。
[全画面表示の切り替え(Toggle Full Screen)] ボタンを使用して、作業しているテキスト ボックスのサイズを拡大および縮小します。
ミニ エディタのフォーマットとプレーン テキスト付きリンク アイコンの使用に加えて、HTML、CSS、および Javascript コードを使用して、ポータル ページに表示されるテキストをカスタマイズすることもできます。これらの変更は、カスタマイズしている特定のポータル ページにだけ適用されます。
[全画面表示の切り替え(Toggle Full Screen)] ボタンを使用して、作業しているテキスト ボックスのサイズを拡大および縮小します。
がデフォルトで有効になっていることを確認します。
で [HTML を使用したポータルのカスタマイズの有効化(Enable portal customization with HTML)]ポータル ページの特定の領域に表示されるイメージおよびアドバタイズメントを含めることができます。
[全画面表示の切り替え(Toggle Full Screen)] ボタンを使用して、作業しているテキスト ボックスのサイズを拡大および縮小します。
が有効になっていることを確認します。
で [HTML を使用したポータルのカスタマイズの有効化(Enable portal customization with HTML)]カルーセル アドバタイジングは、複数の製品イメージまたは説明テキストが表示され、バナー内で循環して繰り返されるアドバタイズメントの形式です。ゲスト ポータルでカルーセル アドバタイジングを使用して、複数の関連製品や、会社が提供するさまざまな製品を宣伝します。
[全画面表示の切り替え(Toggle Full Screen)] ボタンを使用して、作業しているテキスト ボックスのサイズを拡大および縮小します。
をオンにします。
を選択し、[HTML と Javascript を使用したポータルのカスタマイズの有効化(Enable portal customization with HTML and Javascript)]ステップ 1 | 次のポータルに移動します。 | ||
ステップ 2 | [ページ(Pages)] で、更新するページを選択します。 | ||
ステップ 3 | [ページのカスタマイズ(Page Customizations)] で、[説明テキスト(Instructional Text)]、[任意のコンテンツ 1(Optional Content 1)]、および [任意のコンテンツ 2(Optional Content 2)] テキスト ボックスで提供されるミニエディタを使用して、ソース コードを入力および表示します。 | ||
ステップ 4 | [HTML ソースの切り替え(Toggle HTML Source)] ボタンをクリックします。 | ||
ステップ 5 | ソース コードを入力します。
<script> var currentIndex = 0; setInterval(changeBanner, 5000); function changeBanner(){ var bannersArray = ["<img src='http://www.cisco.com/c/en/us/products/routers/index/_jcr_content/ content_parsys/overview/layout-overview/gd12v2/gd12v2-left/n21v1_cq/ n21v1DrawerContainer.img.jpg/1379452035953.jpg' width='100%'/>", "<img src='http://www.cisco.com/c/en/us/products/routers/index/_jcr_content/ content_parsys/overview/layout-overview/gd12v2/gd12v2-left/n21v1_cq_0/ n21v1DrawerContainer.img.jpg/1400748629549.jpg' width='100%' />", "<img src='http://www.cisco.com/c/en/us/products/routers/index/_jcr_content/ content_parsys/overview/layout-overview/gd12v2/gd12v2-left/n21v1_cq_1/ n21v1DrawerContainer.img.jpg/1376556883237.jpg' width='100%'/>" ]; var div = document.getElementById("image-ads"); if(div){ currentIndex = (currentIndex<2) ? (currentIndex+1) : 0; div.innerHTML = bannersArray[currentIndex]; } } </script> <style> .grey{ color: black; background-color: lightgrey; } </style> <div class="grey" id="image-ads"> <img src='http://www.cisco.com/c/en/us/products/routers/index/_jcr_content/ content_parsys/overview/layout- overview/gd12v2/gd12v2-left/n21v1_cq/ n21v1DrawerContainer.img.jpg/1379452035953.jpg'/> </div> <script> var currentIndex = 0; setInterval(changeBanner, 2000); function changeBanner(){ var bannersArray = ["Optimize branch services on a single platform while delivering an optimal application experience across branch and WAN infrastructure", "Transform your Network Edge to deliver high-performance, highly secure, and reliable services to unite campus, data center, and branch networks", "Differentiate your service portfolio and increase revenues by delivering end-to-end scalable solutions and subscriber-aware services"]; var colorsArray = ["grey", "blue", "green"]; var div = document.getElementById("text-ads"); if(div){ currentIndex = (currentIndex<2) ? (currentIndex+1) : 0; div.innerHTML = bannersArray[currentIndex]; div.className = colorsArray[currentIndex]; } } </script> <style> .grey{ color: black; background-color: lightgrey; } .blue{ color: black; background-color: lightblue; } .green{ color: black; background-color: lightgreen; } </style> <div class="grey" id="text-ads"> Optimize branch services on a single platform while delivering an optimal application experience across branch and WAN infrastructure </div>
| ||
ステップ 6 | [保存(Save)] をクリックします。 |
次の例に、ゲストがクレデンシャルを持つゲスト ポータル(ホットスポットではない)にログインした後に表示される正常なログイン メッセージを、ゲスト タイプに設定されたロケーションに基づいてカスタマイズする方法を示します。
[全画面表示の切り替え(Toggle Full Screen)] ボタンを使用して、作業しているテキスト ボックスのサイズを拡大および縮小します。
ステップ 1 | 次のポータルのいずれかに移動します。 |
ステップ 2 | [ページ(Pages)] で、[認証成功(Authentication Success)] ページを選択します。 |
ステップ 3 | [ページのカスタマイズ(Page Customizations)] で、[オプションの内容 1(Optional Content 1)] テキスト ボックスで提供されるミニエディタを使用して、HTML ソース コードを入力および表示します。 |
ステップ 4 | [HTML ソースの切り替え(Toggle HTML Source)] ボタンをクリックします。 |
ステップ 5 | ソース コードを入力します。 たとえば、ロケーションベースのグリーティングを含めるには、[オプションコンテンツ1(Optional Content 1)] に次のコードを入力します。<style> .custom-greeting { display: none; } .guest-location-san-jose .custom-san-jose-greeting { display: block; } .guest-location-boston .custom-boston-greeting { display: block; } </style> <div class="custom-greeting custom-san-jose-greeting"> Welcome to The Golden State! </div> <div class="custom-greeting custom-boston-greeting"> Welcome to The Bay State! </div>正常なログイン後に、特定のロケーションに応じて異なるメッセージがゲストに表示されます。 |
ユーザが Cisco ISE エンドユーザ Web ポータル(ゲスト、スポンサーおよびデバイス)のいずれかにログインした後に、ユーザに送信するグリーティングを、クライアント デバイス タイプ(モバイルまたはデスクトップ)に基づいてカスタマイズできます。
[全画面表示の切り替え(Toggle Full Screen)] ボタンを使用して、作業しているテキスト ボックスのサイズを拡大および縮小します。
ステップ 1 | 次のポータルに移動します。 |
ステップ 2 | [ページ(Pages)] で、更新するページを選択します。 |
ステップ 3 | [ページのカスタマイズ(Page Customizations)] で、[オプションの内容 1(Optional Content 1)] テキスト ボックスで提供されるミニエディタを使用して、HTML ソース コードを入力および表示します。 |
ステップ 4 | [HTML ソースの切り替え(Toggle HTML Source)] ボタンをクリックします。 |
ステップ 5 | ソース コードを入力します。 たとえば、AUP ページにデバイス タイプベースのメッセージを含めるには、[AUP] ページの [オプションの内容 1(Optional Content 1)] テキスト ボックスに次のコードを入力します。<style> .custom-greeting { display: none; } .cisco-ise-desktop .custom-desktop-greeting { display: block; } .cisco-ise-mobile .custom-mobile-greeting { display: block; } </style> <div class="custom-greeting custom-mobile-greeting"> Try our New Dark French Roast! Perfect on the Go! </div> <div class="custom-greeting custom-desktop-greeting"> We brough back our Triple Chocolate Muffin! Grab a seat and dig in! </div>ユーザがネットワークまたはポータルへのアクセスを取得するために使用したデバイスに応じて、[AUP] ページに異なるグリーティングが表示されます。 |
ページの全体的なレイアウトを操作できます。たとえば、追加情報や情報へのリンクを提供するサイドバーを AUP ページに追加できます。
ステップ 1 | 作成し、ポータルに適用するカスタム theme.css ファイルの末尾に次の CSS コードを追加します。これにより、[オプションの内容 1(Optional Content 1)] テキスト ボックスが次のように表示されるように AUP ページのレイアウトが変更されます。
#page-aup .cisco-ise-optional-content-1 { margin-bottom: 5px; } @media all and ( min-width: 60em ) { #page-aup .cisco-ise-optional-content-1 { float: left; margin-right: 5px; width: 150px; } #page-aup .cisco-ise-main-content { float: left; width: 800px; } #page-aup .cisco-ise-main-content h1, #page-aup .cisco-ise-main-content p { margin-right: auto; margin-left: -200px; } } 次に、ポータルの AUP ページの [オプションの内容1(Optional Content 1)] テキスト ボックスで HTML コードを使用して、リンクを追加できます。 |
ステップ 2 | 次のポータルに移動します。 |
ステップ 3 | [ページ(Pages)] で、サイド バーを追加するページを選択します。 |
ステップ 4 | [ページのカスタマイズ(Page Customizations)] で、[オプションの内容 1(Optional Content 1)] テキスト ボックスで提供されるミニエディタを使用して、ソース コードを入力および表示します。 |
ステップ 5 | [HTML ソースの切り替え(Toggle HTML Source)] ボタンをクリックします。 |
ステップ 6 | ソース コードを入力します。
<ul data-role="listview"> <li>Rent a Car</li> <li>Top 10 Hotels</li> <li>Free Massage</li> <li>Zumba Classes</li> </ul> ![]()
![]() |
ステップ 7 | [保存(Save)] をクリックします。 |
[オプションの内容(Optional Content)] テキスト ボックスに別のテキストまたは HTML コードを入力して、他のページをカスタマイズできます。
作成したカスタム theme.css ファイルをアップロードし、エンドユーザ ポータルに適用できます。これらの変更は、カスタマイズしているポータル全体に適用されます。
カスタム theme.css ファイルを編集し、Cisco ISE に再度インポートする場合は、最初に使用したテーマ名を使用するように注意してください。同じ theme.css ファイルに 2 つの異なるテーマ名を使用することはできません。
カスタマイズするポータルにこのカスタム ポータル テーマを適用できます。
Cisco ISE にインポートしたカスタム ポータル テーマは、いずれかのポータルで使用されていない場合に削除できます。Cisco ISE によって提供されているデフォルトのテーマを削除することはできません。
他のポータルで使用されているポータル テーマを削除することはできません。
カスタマイズがポータル ユーザ(ゲスト、スポンサー、従業員)にどのように表示されるかを確認できます。
[ポータルテストURL(Portal test URL)] をクリックして、変更を表示します。
テスト ポータルは RADIUS セッションをサポートしていないため、すべてのポータルに対するポータル フローの全体は表示されません。BYOD およびクライアント プロビジョニングは RADIUS セッションに依存するポータルの例です。
(注)
変更がさまざまなデバイスでどのように表示されるかを動的に確認するには、[プレビュー(Preview)] をクリックします。
デスクトップ デバイス:[プレビュー(Preview)] をクリックし、[デスクトップ プレビュー(Desktop Preview)] をクリックします。新しいタブが開いて、すべての変更がこのタブに表示されます。
変更が表示されない場合は、[プレビューのリフレッシュ(Refresh Preview)] をクリックします。表示されるポータルは、変更を確認するためだけのものです。ボタンをクリックしたり、データを入力したりすることはできません。
ゲスト、スポンサー、デバイスおよびクライアント プロビジョニングの各ポータルは、サポートされているすべての言語およびロケールにローカライズされています。ローカライズには、テキスト ラベル、メッセージ、フィールド名およびボタン ラベルが含まれます。クライアント ブラウザが Cisco ISE テンプレートにマッピングされていないロケールを要求した場合、ポータルは英語のテンプレートを使用して内容を表示します。
管理者ポータルを使用して、各言語のゲスト、スポンサー、デバイスの各ポータルで使用されるフィールドを個別に変更できます。また、言語を追加することも可能です。現在、クライアント プロビジョニング ポータルについては、これらのフィールドはカスタマイズできません。
デフォルトでは、各タイプのポータルでは 15 言語がサポートされています。[ポータル ページのカスタマイズ(Portal Page Customization)] ページで、ポータルで使用する言語を選択し、オプションで選択した言語でページのコンテンツを更新します。ある言語に合わせてページのフォントとコンテンツを変更しても、他の言語へこの変更は反映されません。[ポータル ページのカスタマイズ(Portal Page Customization)] 画面で行った変更は、次回に言語ファイルをエクスポートするときに組み込まれます。
![]() (注) | NAC および MAC エージェントのインストーラおよび WebAgent ページはローカライズされていません。 |
編集するポータルを開きます。
[ポータル ページのカスタマイズ(Portal Page Customization] タブで、ページの最上部近くにある [表示(view in)] ドロップダウンから、編集する言語を選択します。
必要に応じてコンテンツ、ヘッダー、フォントを変更します。
ポータル設定を保存し、更新する次の言語でこのフローを繰り返します。
各 [ポータル ページのカスタマイズ(Portal Page Customization)] ページでは言語ファイルも提供されます。言語ファイルとは、属性ファイルが含まれている ZIP です。これらの属性ファイルは、ポータル フローの一部であるテキストやヘッダーのカスタマイズには使用できますが、[ポータル ページのカスタマイズ(Portal Page Customization)] ページのカスタマイズには使用できません。
言語ファイルには、特定のブラウザ ロケール設定(例:フランス語の場合は fr、fr-fr、fr-ca)へのマッピングと、その言語でのポータル全体のすべての文字列設定が含まれています。1 つの言語用のブラウザ ロケール設定を変更した場合、変更内容は他のすべてのエンドユーザ Web ポータルに適用されます。たとえば、ホットスポット ゲスト ポータルの French.properties ブラウザ ロケールを fr,fr-fr,fr-ca から fr,fr-fr に変更すると、この変更内容がデバイス ポータルにも適用されます。
zip 形式の言語ファイルをエクスポートし、新規言語の追加や不要な既存言語の削除などを行って更新することができます。
言語ファイルの更新手順については、次を参照してください。
各ポータル タイプに使用できる言語ファイルをエクスポートして、そのファイルで指定された既存の値を編集およびカスタマイズし、言語を追加または削除できます。
![]() (注) | 言語プロパティ ファイル内の一部のディクショナリ キーだけが値(テキスト)で HTML をサポートしています。 |
ポータル タイプに使用したい言語が言語ファイルにない場合は、新しい言語プロパティ ファイルを作成し、zip 形式の言語ファイルに追加できます。不要な言語がある場合、その言語プロパティ ファイルを削除できます。
言語プロパティ ファイルを追加または削除するには、各ポータル タイプで使用可能な zip 形式の言語ファイルをエクスポートします。
ステップ 1 | UTF-8 を表示するエディタ(Notepad ++ など)を使用して、言語を追加または削除するポータル タイプ用の定義済み言語ファイルを開きます。
複数のポータル タイプの言語を追加または削除するには、該当するすべてのポータル プロパティ ファイルを使用します。 | ||
ステップ 2 | 新しい言語を追加するには、既存の言語プロパティ ファイルを他のファイルと同じ命名規則を使用する新しい言語プロパティ ファイルとして zip 形式の言語ファイルに保存します。たとえば、新しい日本語の言語プロパティ ファイルを作成するには、ファイルを Japanese.properties(LanguageName.properties)として保存します。 | ||
ステップ 3 | 新しい言語プロパティ ファイルの最初の行にブラウザ ロケール値を指定して、ブラウザ ロケールに新しい言語を関連付けます。たとえば、LocaleKeys= ja,ja-jp(LocaleKeys=browser locale value)を Japanese.properties ファイルの最初の行に入力する必要があります。 | ||
ステップ 4 | 新しい言語プロパティ ファイルでディクショナリ キーのすべての値(テキスト)を更新します。
ディクショナリ キーは変更できません。キーの値だけを変更できます。
|
言語プロパティ ファイルを追加または削除したり、既存のプロパティ ファイルのテキストを更新してカスタマイズした編集済み言語ファイルをインポートできます。
![]() (注) | Word ファイルからカスタマイズした内容をコピーして貼り付けることはできません。代わりに [ファイル(File)] > [名前を付けて保存(Save As)] を選択し、Word ファイルを HTML 形式で保存します。その後、この HTML ファイルからカスタマイズした内容をコピーして貼り付けることができます。 |
変更したテキストまたは追加した新しい言語を表示するには、[表示(View In)] ドロップダウン リストから特定の言語を選択します。
各ポータルで内で、ゲストが電子メール、SMS テキスト メッセージ、および印刷物で通知を受け取る方法をカスタマイズできます。これらの通知を使用して、次の場合にログイン クレデンシャルを電子メール送信、テキスト送信、または印刷します。
ゲストがアカウント登録ゲスト ポータルを使用し、自分自身の登録に成功した場合。
スポンサーがゲスト アカウントを作成し、ゲストに詳細を提供する場合。スポンサー グループ作成時にスポンサーによる SMS 通知の使用を許可するかどうかを指定できます。これらの機能を利用できる場合は、常に電子メール通知および印刷通知を使用できます。
ネットワークにアクセスしようとするアカウント登録ゲストを承認するよう要求するスポンサー宛電子メール通知をカスタマイズすることもできます。また、ゲストとスポンサーに表示されるデフォルトのエラー メッセージをカスタマイズできます。
ステップ 1 | 自己登録スポンサー ポータルの場合、 を選択します。 |
ステップ 2 | [グローバル ページのカスタマイズ(Global Page Customizations)] で指定されたデフォルトの [ロゴ(電子メール)(Logo (Email))] を変更できます。 |
ステップ 3 | [件名(Subject)] および [電子メール本文(Email body)] を指定します。電子メール メッセージに含まれる、ゲスト アカウント情報を指定するには、事前定義済みの変数を使用します。テキストをカスタマイズするには、ミニエディタと HTML タグを使用します。 |
ステップ 4 | [設定(Settings)] では、次のことが可能です。 |
ステップ 5 | [保存(Save)] をクリックし、[閉じる(Close)] をクリックします。 |
ステップ 1 | アカウント登録ゲスト ポータルおよびスポンサー ポータルの場合は、 を選択します。 |
ステップ 2 | [メッセージ テキスト(Message Text)] をカスタマイズするには、ミニエディタと HTML タグを使用します。SMS テキスト メッセージに含まれる、ゲスト アカウント情報を指定するには、事前定義済みの変数を使用します。 |
ステップ 3 | [設定(Settings)] では、次のことが可能です。
|
ステップ 4 | [保存(Save)] をクリックし、[閉じる(Close)] をクリックします。 |
![]() (注) | 各ポータル内では、印刷通知ロゴは、電子メール通知ロゴの設定から継承されます。 |
がデフォルトで有効になっていることを確認します。
で [HTML を使用したポータルのカスタマイズの有効化(Enable portal customization with HTML)]ステップ 1 | アカウント登録ゲスト ポータルおよびスポンサー ポータルの場合は、 を選択します。 |
ステップ 2 | [印刷説明テキスト(Print Introduction Text)] を指定します。電子メール メッセージに含まれる、ゲスト アカウント情報を指定するには、事前定義済みの変数を使用します。テキストをカスタマイズするには、ミニエディタと HTML タグを使用します。 |
ステップ 3 | サムネールで、または [印刷プレビュー(Print Preview)] をクリックして、カスタマイズをプレビューします。サムネールでは、HTML のカスタマイズを表示できません。 [印刷プレビュー(Print Preview)] オプションを選択した場合、アカウントの詳細を印刷できるウィンドウが表示され、そこで適切に表示されることを確認します。 |
ステップ 4 | [保存(Save)] をクリックし、[閉じる(Close)] をクリックします。 |
アカウント登録ゲストのアカウントが作成され、そのゲストがログイン クレデンシャルを取得する前に、アカウント登録ゲストを承認するようスポンサーに要求できます。電子メールでスポンサーに送信される、承認を要求する情報をカスタマイズできます。この通知は、ネットワーク アクセスを許可する前にアカウント登録ゲスト ポータルを使用するアカウント登録ゲストを承認する必要があると指定した場合にのみ表示されます。
ゲストへの電子メールでの通知のサポートを設定します。 を選択します。[ゲストへの電子メール通知を有効にする(Enable email notifications to guests)] をオンにします。
スポンサーに自己登録アカウントの要求を承認させるには、[ポータルの動作およびフローの設定(Portal Behavior and Flow Settings)] タブの [アカウント登録ページの設定(Self-Registration Page Settings)] で、[アカウント登録ゲストが承認される必要がある(Require self-registered guests to be approved)] をオンにします。それによって、[ポータルページのカスタマイズ(Portal Page Customization)] の [通知(Notifications)] の下の [承認要求の電子メール(Approval Request Email)] タブが有効になり、スポンサーに送られる電子メールをカスタマイズできます。
ステップ 1 | を選択します。ここでは次を実行できます。
|
ステップ 2 | スポンサーが送信する承認電子メールの内容をカスタマイズします。 を選択してから、[メール通知(Email Notification)] タブを選択します。 の順に選択し、[ポータル ページのカスタマイズ(Portal Page Customization)] |
ゲスト、スポンサー、および従業員に表示される [失敗(Failure)] ページに表示されるエラー メッセージを完全にカスタマイズできます。[失敗(Failure)] ページは、ブラックリスト ポータルを除くすべてのエンドユーザ Web ポータルで利用可能です。
ステップ 1 | 次のいずれかを実行します。 |
ステップ 2 | [表示言語(View In)] ドロップダウンから、メッセージのカスタマイズ時にテキストを表示する言語を選択します。 このドロップダウン リストには、特定のポータルに関連付けられた言語ファイルのすべての言語が含まれています。ポータル ページのカスタマイズ時に行った変更でサポート対象の言語プロパティ ファイルを更新します。 |
ステップ 3 | エラー メッセージ テキストを更新します。特定のエラー メッセージを検索するには、エラー メッセージに関連付けられた AUP を検索する aup などのキーワードを入力します。 |
ステップ 4 | [保存(Save)] をクリックし、[閉じる(Close)] をクリックします。 |