第14章 組み込みページの変更

本章では、システム生成ページの任意の要素を変更または表示/非表示にする方法について説明します。

システムによって生成される要素には、Signup、Dashboard、Account ページなど、デベロッパーポータルから変更できないものがあります。本ガイドでは、CSS および Javascript を使用してこれらのページのコンテンツをカスタマイズする方法について説明します。

注意

3scale のシステム生成ページは、変更の対象です (ただしまれです)。これらの変更により、本ガイドに従って実装するカスタマイズが機能しなくなる可能性があります。これらの変更手法を使用せずに済む場合は、使用を避けてください。設定変更を続行する前に、サービスの提供を阻害する変更を識別し、ポータルの機能を正常な状態に維持するのに必要なメンテナンス作業を実施できることを確認してください。

14.1. 要素の特定

何よりも重要なことは、非表示にする対象の特定です。これには、Firebug (または Chrome Developer や Opera Dragonfly など、その他の開発者ツール) を使用します。目的の要素を選択し、コンソールでその要素を右クリックして Copy CSS Path を選択します。これにより、正確な CSS パスを保存して、操作を簡単にすることができます。要素がサイドバーナビゲーションウィジェットの一部である場合は、リスト内での位置も指定する必要がある点に注意してください。これには、「+」セレクター (たとえば、3 番目の li 要素を選択する場合: ul + li + li + li) または :nth-child(n) CSS3 疑似クラスのどちらかを使用できます。

Developer portal modify built-in pages CSS

14.2. 要素の変更または非表示

要素を特定したので、表示設定を変更することができます。要素のタイプに応じて、CSS 操作または jQuery スクリプトという 2 つの手法からどちらかを選択できます。CSS 操作の方が軽量で信頼性に優れますが、多くのページに存在するある種の要素に対しては適切に機能しません (たとえば、管理ポータルの Dashboard にあるサイドバーの 3 番目の要素は、Account セクションにも存在するが、値が違う)。一部のテクニカルな実装には、古いブラウザーではサポートされない CSS3 の使用が必要です。次の 2 つの手順で、これらの両アプローチを説明します。

14.3. オプション A: CSS

たとえば、Dashboard ページから最新の要素を非表示にしてみます。最初のステップで、その CSS パスを以下のように特定しました。

#three-scale .dashboard_bubble

同じパスを持つ 2 番目のボックスなので、「+」セレクターを使用する点に留意してください。これで、パスは以下のようになります。

.main_layout #three-scale .dashboard_bubble + .dashboard_bubble
/* or */
.main_layout #three-scale .dashboard_bubble:nth-child(1)

display プロパティーを none に変更すると、そのボックスが非表示になります。

.main_layout #three-scale .dashboard_bubble:nth-child(1) {
  display: none;
}

14.4. オプション B: jQuery

サイドバーメニューの要素など、テクニカルな要素を非表示にする場合は、jQuery を使用する方が適切です。これらの要素の CSS パスは Dashboard と Account セクションとで同一ですが、両方のセクションで要素を非表示にする必要はありません。そこで、CSS パスとコンテンツに基づいて要素を選択します。ここでの例は、Dashboard のサイドバーから messages セクションを非表示にする場合を想定しています。CSS パスは以下のとおりです。

#three-scale #submenu li a

コンテンツと一致させるには、.text() 関数を使用します。また、ドキュメントのヘッドと ready 関数内にコードを含め、すべてのコンテンツが生成された後に実行されるようにします。

Developer portal modify built-in pages

作成されるコードスニペットは以下のようになります。

$(function() {
  $('#three-scale #submenu li a').each(function() {
    if ($(this).text() == "Messages")
      $(this).parent().css('display', 'none');
  });
});

これが唯一のソリューションという訳ではありません。実行可能な方法の 1 つを示しているだけです。属性の値に基づき Pure.CSS と CSS3 セレクターを使用しても、例と同じことができます。CSS3 セレクターの詳細な仕様については、こちら を参照してください。