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

2018年6月16日

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

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

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

Tutorial: Customizing themes for the Developer Portal

You can configure an overrides.css file in a theme to customize the appearance of your Developer ...

https://www.ibm.com/support/knowledgecenter/en/SSFS6T/com.ibm.apic.dev...

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

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

1 実装環境
2 既存のデフォルトテーマをローカルに持ってくる
3 名前の編集
4 カスタム CSS の追加
5 my_connect_theme.info(connect_theme.info) の編集
6 カスタムテーマの圧縮
7 カスタムテーマの反映
8 実装結果

実装環境

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;
}