IBM API Connect Developer.Portal のデザインをカスタマイズする

極々一部の人にしか需要がないものですが、結構はまったので誰かの助けになれば…
※なお本記事は公式の手順ではありませんのでリスクを勘案した上でご利用ください

API Connect の Developer.Portal のデザインをカスタマイズする方法です.

Knowledge Center の該当ページはこちらです.

こちらのページで困ったのが、”既存のデフォルトテーマにできるだけ変更を加えず”にカスタマイズするという手順が記載されていないところです.

そこで、本記事ではデフォルトテーマに対して最小限のカスタマイズを行う方法をご紹介します.

 

実装環境

  • Operating System: Ubuntu 16.04.4 LTS
  • System version: 7.x-5.0.8.3-20180426-2319
  • Distribution version: 7.x-5.0.8.3-20180426-2206

 

既存のデフォルトテーマをローカルに持ってくる

Developer.Portal の CLI にログインします.

デフォルトのテーマのファイルは以下のパスにあります.

/var/aegir/platforms/devportal-7.x-5.0.8.3-20180603-2206/sites/all/themes

(バージョンは環境ごとに読み替えてください)

この themes 配下にある connect_theme がデフォルトのテーマです.
これを圧縮してローカルに持って来ましょう.
(私は .tar.gz で固めて SCP で持って来ました)

中身は以下のようになっています.

  • css
  • color
  • js
  • templates
  • CHANGELOG.txt
  • connect_theme.info
  • favicon.ico
  • LICENSE.txt
  • logo.png
  • README.txt
  • screenshot.png
  • template.php
  • theme-settings.php

今回は上記太字部分の css へカスタム CSS を追加するのと、connect_theme.info の編集を主に行います.

 

名前の編集

connect_theme という名前のままだと既存の connect_theme と関数名が衝突してしまうので名前の変更を行います.

  • grep 置換で connect_theme を my_connect_theme に変更
  • connect_theme.info を my_connect_theme.info に変更

 

カスタム CSS の追加

今回は以下の overrides.css を css ディレクトリ配下へ追加しました.

.api.empty.top {
  height: 0px;
}

.planbutton.notuser {
  display: none;
}

.plansFooter {
  display: none;
}

.comment_forbidden.last {
  visibility: hidden;
}

.fivestar-widget-static.fivestar-widget-static-vote.fivestar-widget-static-5.clearfix {
  display: none;
}

.fivestar-summary.fivestar-summary-average-count {
  display: none;
}

.messages.status {
  display: none;
}

.apiratelimit {
  display: none;
}

.individualoperation {
  display: none;
}

.material-icons {
  display: none;
}

.subscribeButton {
  visibility: hidden;
}

.subscribeButtonInner {
  visibility: hidden;
}

 

my_connect_theme.info(connect_theme.info) の編集

テーマのタイトルを修正します.
(こちらはテーマの識別名になります)

name = My IBM API Connect Theme

カスタム CSS を追加します.

stylesheets[all][] = css/overrides.css

 

カスタムテーマの圧縮

編集が終わったらカスタムテーマを圧縮します.
.zip, .tar あたりで圧縮していただければ大丈夫です.

my_connect_theme.zip

 

カスタムテーマの反映

ここからは Developer.Portal 上の GUI 操作です.

admin でログインします.

 

“テーマ/新しいテーマをインストール” を選択します.

 

“ファイルを選択”で先ほど圧縮したファイルを選択し、インストールボタンを押します.

 

インストールに成功すると以下の画面が表示されます.
“Enable newly added themes” を選択します.

 

無効テーマのリストにインストールした My IBM API Connect Theme が表示されています.
“有効”を選択します.

 

今度は有効テーマのリストに表示されるので、”設定”を選択します.

 

色などを設定できます.
画面下部の”設定を保存”を選択します.これでキャッシュがリフレッシュされます.
(この工程を行わないとキャッシュの情報に引きずられて warning が出てしまいます)

 

最後に”デフォルトに設定”を選択します.

 

実装結果

実装結果です.色々非表示になっています.

 

この方法を使うと CSS レベルであれば色々カスタマイズできます.
文字を変えたいなどの要望がある場合には別途カスタムモジュールの適用が必要になります.

 

以上です.