API Connectの開発者ポータルをカスタマイズしてみよう！

 IBMのAPI製品であるAPI connectは開発者ポータルにDrupalを採用しています。なのでDrupalがわかれば簡単にUI、機能のカスタマイズできます。ここではBuemixでオーダーしたAPI connectのUIの変更方法を紹介します。
さて先ずはBluemixでAPI connectをオーダーしてみましょう。今回は無料のLiteプランを選択しました。

![スクリーンショット 2017-09-20 10.28.06.png](https://qiita-image-store.s3.amazonaws.com/0/59741/d22b6b11-e8c3-79ea-5e60-3dc93530814a.png)

オーダー後API connectのダッシュボードを見るとSandBoxができているのがわかります。

![スクリーンショット 2017-09-20 10.39.59.png](https://qiita-image-store.s3.amazonaws.com/0/59741/94ef3609-98f8-8551-4af8-f4efaa8f729a.png)

　SandBoxをクリックしてください。
　次に上のメニューから”設定”を。左メニューから”ポータル”をクリックして”IBM開発者ポータル”を選択してください。選択したら右上のディスクのアイコンをクリックして設定を保存してください。

![スクリーンショット 2017-09-20 10.44.47.png](https://qiita-image-store.s3.amazonaws.com/0/59741/eb593c85-5f94-929e-5ca4-4d41a8a675c3.png)

　開発者ポータルができるまで少々お待ちください。
![スクリーンショット 2017-09-20 10.56.08.png](https://qiita-image-store.s3.amazonaws.com/0/59741/9c4ae9d6-f6f8-4763-fdc4-06eac1c4c88b.png)

　数分待って、ポータルURLの右側をクリックして開発者ポータルに行ってください。以下のような画面が払われます。
![スクリーンショット 2017-09-20 11.06.54.png](https://qiita-image-store.s3.amazonaws.com/0/59741/0522727e-1ee7-9876-d7a9-ac453508b935.png)

　ポータルが出来ましたというメールも言っているはずです、そのメールの中に上記開発者ポータルへのAdminのログイン方法が書いてあります。
![スクリーンショット 2017-09-20 11.11.56.png](https://qiita-image-store.s3.amazonaws.com/0/59741/b14bf532-e27f-0c55-c3a7-af1a86033983.png)

　Adminでログインすると以下のようにAdmin用のメニューが一番上に出て来ます。
![スクリーンショット 2017-09-20 11.17.12.png](https://qiita-image-store.s3.amazonaws.com/0/59741/bb3f0bb9-265d-66d3-e60d-358071984187.png)

　これらのメニューでサイトのUIを変えたり機能を追加したりすることができます。
　今回はUIを変えてみましょう。DrupalではUIのことをテーマと言います。テーマは世界中の開発者、ベンダーによって開発されておりご自分の好きなデザインを選ぶことができます。もちろんテーマを変えてもウェブのコンテンツは変わらないのでご安心ください。

　テーマーの例
![スクリーンショット 2017-09-20 11.24.37.png](https://qiita-image-store.s3.amazonaws.com/0/59741/461e1f5d-58c7-0c4d-a65d-f0feb998c153.png)
　
　DrupalのコミュニティーをまとめているDrupalアソシエーションのサイトにもたくさんのフリーのテーマが置いてあります。 https://www.drupal.org/project/project_theme
　それではテーマを変えてみましょう。
　上記のアソシエーションのサイトからテーマを選んでください。
　今回は下の　Professional Themeを選びます。
![スクリーンショット 2017-09-20 11.30.59.png](https://qiita-image-store.s3.amazonaws.com/0/59741/deddc82e-be5f-ddaf-4d43-d0c51a395716.png)

　こちらをクリックして選ぶと詳細が出て来ます。下の方に行くとテーマのダウンロードリンクが出て来ます。右クリックでダウンロード先のURLをクリップボードにコピーしてください。ちなみにtar.gz形式で、また開発者ポータルで使われているDrupalはバージョン7なので７用の方を選んでください。
![スクリーンショット 2017-09-20 11.35.07.png](https://qiita-image-store.s3.amazonaws.com/0/59741/92c6fd17-133d-f060-f2fd-5bf804057417.png)



　開発者ポータルからテーマ-> 新しいテーマをインストールを選んでください。
![スクリーンショット 2017-09-20 11.28.33.png](https://qiita-image-store.s3.amazonaws.com/0/59741/09fb4d21-73c9-9ab1-510b-e4f1b85e1aa7.png)

　次のURLからインストールするのところにクリップボードにコピーしたURLを入れてインストールをクリックしてください。

![スクリーンショット 2017-09-20 11.40.22.png](https://qiita-image-store.s3.amazonaws.com/0/59741/dfa027c4-61bc-0dea-cec6-efd5db55947f.png)

　"Enable newly added theme"をクリックしてください。
![スクリーンショット 2017-09-20 11.41.37.png](https://qiita-image-store.s3.amazonaws.com/0/59741/5c75ae67-f171-f14c-b15a-1dcca81d9554.png)

　今インストールしたテーマが下の方に出て来ます。”有効にしディフォルトに設定する”をクリックしてください。
![スクリーンショット 2017-09-20 11.43.54.png](https://qiita-image-store.s3.amazonaws.com/0/59741/dace50ce-1ed4-4d36-68cc-ccc384327893.png)

見た目（UI)が変わりましたね。
![スクリーンショット 2017-09-20 11.46.21.png](https://qiita-image-store.s3.amazonaws.com/0/59741/84f6e69d-b728-ac88-f183-e7206c1ec4e8.png)


色々なテーマを試してみてください。