ibm api connect 開発者ポータル構成ガイド 2章...© 2016 ibm corporation 2...

© 2016 IBM Corporation

2016/10/01日本アイ・ビー・エム株式会社

IBM API Connect 開発者ポータル構成ガイド

2. 開発者ポータルの外観の制御

© 2016 IBM Corporation2

当資料の位置づけ当資料は、API Connectの開発者ポータルの主要なカスタマイズ方

法についてまとめたものです。 V5.0.1を前提としています。

注意事項当資料に含まれる情報は可能な限り正確を期しておりますが、当資

料に記載された内容に関して何ら保証するものではありません。ここでの記載内容はあくまでも支援情報であり、使用者の責任において取扱われるものとし、資料の内容によって受けたいかなる損害に関して一切の保証をいたしません。

製品の新しいリリース、修正などによって動作／仕様が変わる可能性がありますので、必ずマニュアル等で最新の情報をご確認ください。

はじめに


1. 開発者ポータルの一般的な構成2. 開発者ポータルの外観の制御3. 開発者ポータルのコンテンツの制御4. 開発者ポータルのセキュリティーの管理5. 開発者ポータルのユーザーの管理6. 開発者ポータルでのフォーラムの制御

開発者ポータルの構成/カスタマイズ


開発者ポータルについて外観のカスタマイズ

開発者ポータルの外観の主要構成要素ユースケース毎の逆引き索引サイト属性のカスタマイズページ構成 (メニュー構成)のカスタマイズコンテンツのカスタマイズその他

目次


開発者ポータルはDrupalを使用して構成されている開発者ポータル V5.0.1はDrupal v7.43がベース開発者ポータル V5.0.2はDrupal v7.44がベース

adminユーザーでログインし、[レポート] > [利用可能なアップデート]よりDrupalのバージョンを確認可能

カスタマイズするためにはDrupalについての理解が必要 Drupal公式サイト

英語： https://www.drupal.org/ 日本語： http://drupal.jp/

IBMサイト developerWorks

Drupal 7 用に新しいテーマを作成する» http://www.ibm.com/developerworks/jp/opensource/library/os-new-drupal-theme/

開発者ポータルについて

https://www.drupal.org/

http://drupal.jp/

http://www.ibm.com/developerworks/jp/opensource/library/os-new-drupal-theme/


外観のカスタマイズ


開発者ポータルの外観の主要構成要素

favicon

サイト名

メインメニュー

フロントページ

サイト・ロゴ

ブロック(カスタム・メニューなど)

バナー・イメージ

イメージ・カルーセル


ユースケース毎の逆引き索引サイト属性のカスタマイズ

サイト名を変更したいサイト名の変更

サイト・スローガンを変更したいサイト・スローガンの変更

サイトのEメールアドレスを変更したいサイトのEメールアドレスの変更

サイト・カラーを変更したいサイト・カラーの変更

サイト・ロゴを変更したいサイト・ロゴの変更

faviconを変更したいショートカット・アイコンの変更

カスタム・テーマを使用したい追加テーマのインストール

カスタム・テーマを削除したいテーマのアンインストール

ページ構成 (メニュー構成)のカスタマイズ

メインメニューの構成をカスタマイズしたいメインメニューの項目の変更

カスタム・メニューを追加したいメニューの追加

ユーザー・ロール毎にフロントページをカスタマイズしたいフロントページの構成

クライアント・デバイスに応じてページ・レイアウトをカスタマイズしたい

クライアント・デバイス用のレイアウトの変更

コンテンツのカスタマイズ

フロントページにバナー・イメージを使用したいフロントページ・バナー・イメージの変更

開発者ポータルのページにブロックを追加したい開発者ポータルのページで表示されるブロックの変更

コンテキストを使用してブロックの表示制御をしたい開発者ポータルのセクションへのコンテキストの追加

イメージ・カルーセルを使用したいイメージ・カルーセルの実装

その他

PHPを使用して画面をカスタマイズしたいカスタム・ブロックでのPHPの使用

カスタム・テーマでJavaScriptを使用してカスタマイズしたいカスタム・テーマへのカスタムJavaScriptの追加


サイト名の変更サイト・スローガンの変更サイトのEメールアドレスの変更

サイト・カラーの変更サイト・ロゴの変更ショートカット・アイコンの変更追加テーマのインストールテーマのアンインストール

サイト属性のカスタマイズ


開発者ポータルのサイト名を変更可能

設定手順管理メニューより、[環境設定] > [システム] > [サイト情報]を選択

サイト名を入力し、保存

サイト名の変更 (1/3)


設定の確認方法サイト名を表示させることで確認可能

管理メニューより、[テーマ] > [設定] > [IBM API Connect]を選択

[表示の切り替え]欄にて[サイト名]にチェックを入れて保存



確認結果



開発者ポータルのサイト・スローガンを変更可能


スローガンを入力し、保存

サイト・スローガンの変更 (1/3)


設定の確認方法サイト・スローガンを表示させることで確認可能

管理メニューより、[テーマ] > [設定] > [IBM API Connect]を選択

[表示の切り替え]欄にて[サイトスローガン]にチェックを入れて保存



確認結果



開発者ポータルのサイトの代表メールアドレスを変更可能代表メールアドレスは、ユーザー登録時やパスワード再発行時の自

動送信メール「From: (差出人)」として使用


メールアドレスを変更し、保存

サイトのEメールアドレスの変更


テーマのサイト・カラーを変更可能

カスタマイズ例テーマのカラーセットを”IBM API Management”から”Vanilla Sky”

に変更

設定手順管理メニューより、[テーマ] > [設定] > [IBM API Connect]を選択

サイト・カラーの変更 (1/3)


設定手順 (続き) [配色]欄でカラーセットを”Vanilla Sky”に変更し、保存

パーツ毎の配色変更も可能



カスタマイズ結果



開発者ポータルのサイト・ロゴを変更可能


[ロゴ画像の設定]欄を展開して[デフォルトのロゴを使用]のチェックを外し、画像を選択して保存

サイト・ロゴの変更 (1/2)


確認結果

サイト・ロゴの変更 (2/2)


開発者ポータルのショートカット・アイコン (favicon)を変更可能


ショートカット・アイコンの変更 (1/3)


設定手順 (続き) [ショートカットアイコンの設定]欄を展開して[デフォルトのショー

トカットアイコンを使用]のチェックを外し、任意のアイコン画像を選択して保存



確認結果



新しいテーマをインストールして使用可能テーマを一から作成するにはDrupalの知識が必要インターネット上に公開されているテーマをダウンロードして使用

することも可能 https://www.drupal.org/project/project_theme

設定手順管理メニューより、[テーマ] > [新しいテーマをインストール]を選択

追加テーマのインストール (1/4)

https://www.drupal.org/project/project_theme


設定手順 (続き) URLまたはローカル・ファイルからインストールするテーマを選択

し、[インストール]をクリックインストールが完了したら、[Enable newly added themes]を選択



設定手順 (続き) インストールしたテーマの[有効にしデフォルトに設定する]を選択



追加したテーマのフロント・ページ



インストール済みテーマをアンインストールするには、事前にテーマを無効にする必要がある

設定手順テーマの無効化

管理メニューより、[テーマ]を選択

テーマのアンインストール (1/3)


設定手順 (続き) 任意のテーマの[デフォルトに設定]をクリックし、アンインストール対

象のテーマとは別のテーマを一旦デフォルトに設定する

アンインストール対象テーマの[無効]をクリック



設定手順 (続き) テーマのアンインストール

[アンインストール]タブにて、対象テーマにチェックを入れ、[アンインストール]をクリック



メインメニューの項目の変更メニューの追加フロントページの構成クライアント・デバイス用のレイアウトの変更

ページ構成 (メニュー構成)のカスタマイズ


すべてのページに表示されるメインメニューの項目を変更可能

カスタマイズ例メインメニューの右端にDrupalホームページ (http://drupal.org)

のリンクを追加

メインメニューの項目の変更 (1/6)

http://drupal.org/


設定手順管理メニューより、[サイト構築] > [メニュー] > [Main menu]を

選択



設定手順 (続き) [リンクの追加]をクリック



設定手順 (続き) タイトルおよびパスを入力



設定手順 (続き) [ウェイト]欄で[50]を選択し、[保存]をクリック


ウェイト (-50～50)にて、リンクの表示位置を調整可能

ここでは、リンクを右端に追加するため、最も大きい50を指定


開発者ポータルに新規メニューを追加し、メニュー内にリンクを定義可能

設定手順管理メニューより、[サイト構築] > [メニュー] > [メニューの追

加]を選択

メニューの追加 (1/6)


設定手順 (続き) タイトルを入力し、[保存]をクリック



設定手順 (続き) [リンクの追加]をクリックし、メニューリンクを作成



設定手順 (続き) メニューリンクのタイトルおよびパスを入力し、[保存]をクリック



設定手順 (続き) 管理メニューより、[サイト構築]

> [ブロック]を選択

メニュー追加時に自動生成されるメニュータイトルと同名のブロックのリージョンにて、メニューを表示する領域を指定ここでは、[第1サイドバー]を指定



カスタマイズ結果すべてのページでメニューが表示される



ブロックとは、情報やコンテンツを表示するボックスのことモジュールによって自動生成される (独自に追加することも可能)

リージョンによってコンテンツの配置を指定するブロックのリージョンはテーマによって異なる

[サイト構築] > [ブロック]を選択し、[ブロックリージョンのデモを見る]より、使用しているテーマのリージョンを確認可能

(参考) ブロックのリージョンについて


ユーザーのロール毎にフロントページのカスタマイズが可能ロール毎に以下のモードを指定

スキップ (デフォルト) フロントページをカスタマイズしない

Themed デフォルト・テーマがフロントページに適用される

すべて / Full フロントページを、レイアウトを含め自在にカスタマイズ可能ページを一から作成する必要がある

Redirect パスで指定したページにリダイレクトされる

エイリアス / Alias パスで指定したページを参照する

フロントページの構成 (1/12)


スキップ



Themed



すべて



Redirect



エイリアス



カスタマイズ例 administratorのフロントページのテキストを変更


デフォルトのフロントページ


設定手順管理メニューより、[環境設定] > [Front Page] > [設定]を選択

[Front Page Override]にチェックを入れる



設定手順 (続き) [Front Page for administrator]で[Themed]を選択



設定手順 (続き) [データ]欄で[HTML]ボタンを押下し、以下のHTMLコードを入力


<h1 style="text-align: center; padding-top: 120px; margin-top: 0;"><span style="font-size: 1.5em; color: #000000;">Front page for administrator</span></h1><p style="text-align: center;"><span style="color: #000000;">Welcome to our API portal where you will find a great selection of APIs for your awesome innovative apps</span></p><p style="text-align: center;"> </p>


設定手順 (続き) ページ下部の[Save Settings]を押下し、設定を保存





administratorのフロントページ

認証済みユーザーのフロントページ


タブレットやスマートフォンなど様々なデバイスに応じたレイアウトを設定可能 Standard Layout：PC (デスクトップ/ラップトップ)向け Tablet Layout：タブレット向け Smalltouch Layout：スマートフォン向け

設定手順管理メニューより、[テーマ] > [設定] > [IBM API Connect (使用

中テーマ)]を選択

クライアント・デバイス用のレイアウトの変更 (1/3)


設定手順 (続き) [Layout & General Settings]にて、デバイス毎のレイアウトを指

定



設定内容の確認テーマのリージョンを確認することで、レイアウトを確認可能

例：Standard Layoutのsidebarで左寄せを選択した場合



フロントページ・バナー・イメージの変更開発者ポータルのページで表示されるブロックの変更開発者ポータルのセクションへのコンテキストの追加イメージ・カルーセルの実装

コンテンツのカスタマイズ


ログイン後のホーム・ページに表示される背景画像を変更可能

設定手順管理メニューより、[コンテンツ] > [ブロック]を選択

フロントページ・バナー・イメージの変更 (1/4)


設定手順 (続き) [Welcome Banner]の[編集]をクリック



設定手順 (続き) [イメージ]欄で表示したい画像を選択し、[アップロード]をクリッ

ク

ページ下部の[保存]をクリックし、設定を保存



開発者ポータルのページで表示されるブロックの追加/変更が可能

設定手順管理メニューより、[サイト構築] > [ブロック] > [ブロックを追

加]を選択

開発者ポータルのページで表示されるブロックの変更 (1/4)


設定手順ブロックのタイトル、説明、本文を入力



設定手順表示領域 (リージョン)として[第1サイドバー]を指定し、[保存]を

クリック



コンテキスト様々な条件からブロックやメニューなどの配置、表示を制御するモ

ジュール

コンテキストを使用することで、開発者ポータルに対して特定の条件に応じたブロックの表示制御が可能

カスタマイズ例 Homeページ (<front>)かつロールがadministratorの場合に、メ

ニューを表示する

開発者ポータルのセクションへのコンテキストの追加 (1/8)


設定手順モジュールの有効化

管理メニューより、[モジュール]を選択

“Context”モジュールおよび”Context UI”モジュールを有効化し、保存


パフォーマンスを向上させるために、コンテキストの構成が完了した後は、再度”Context UI”モジュールを無効化する


設定手順 (続き) コンテキストの追加

管理者メニューより、[サイト構築] > [コンテキスト]を選択

[追加]をクリック



設定手順 (続き) コンテキスト名を入力

名前に使用できるのは英小文字、数字_ (アンダースコア)、- (ハイフン)



設定手順 (続き) すべての条件をAND条件とするため、[Require all conditions]に

チェックを入れる

[Conditions]欄で[パス]を選択し、右側の[パス]欄にフロントページを示す”<front>”を入力



設定手順 (続き) 同様に[Conditions]欄で[役割]を選択し、[administrator]にチェック

を入れる



設定手順 (続き) [Reactions]欄で[ブロック]を選択し、表示したいブロックとリージョ

ンを指定右列にて[menu]を展開し、[テスト]にチェックを入れ、[第1サイドバー]

の[追加]をクリック





administratorのHome (<front>)ページにメニューが表示される

administratorのHome (<front>)ページ以外ではメニューが表示されない

administrator以外に対してはHomeページにもメニューが表示されない


開発者ポータルのホーム・ページなどをカスタマイズしてカルーセル (スライドショー)を表示可能

カスタマイズ例 2枚の画像を自動で切り替えるカルーセルをホーム・ページに表示

設定手順モジュールの有効化


イメージ・カルーセルの実装 (1/26)


設定手順 (続き) [Views UI]を有効にし、保存

検索フィールドで”views_ui”と入力することで検索可能


「Views UI」が有効の場合、開発者ポータルのパフォーマンスが低下します。セットアップ時のみ有効にしてください。


設定手順 (続き) カルーセルのコンテンツタイプを作成

管理メニューより、[サイト構築] > [コンテンツタイプ] > [コンテンツタイプの追加]を選択



設定手順 (続き) コンテンツタイプ名を入力し、[編集]をクリックシステム内部名称、説明 (任意)を入力し、[コンテンツタイプの保存]

をクリック



設定手順 (続き) 作成したコンテンツタイプの[フィールドの管理]をクリック

[Body]フィールドを削除



設定手順 (続き) [フィールドを追加]欄にラベル名、システム内部名称を入力し、

[フィールドタイプ]として[イメージ]を選択 [ウィジェット]欄が”イメージ”になっていることを確認し、保存



設定手順 (続き) 他のイメージがない場合にデフォルトのイメージとして使用する画像を

選択し、[フィールド設定を保存]をクリック [設定の保存]をクリックし、保存



設定手順 (続き) カルーセルに表示する画像をアップロード

管理メニューより、[コンテンツ]を選択し、[コンテンツを追加]をクリック

前手順で作成したコンテンツタイプを選択



設定手順 (続き) 画像タイトルを入力画像を選択して[アップロード]をクリックし、保存



設定手順 (続き) [Clone content]をクリックし、タイトルと画像を次のスライドに含め

るものに置き換えて保存



設定手順 (続き) カルーセルのビューを作成

管理メニューより、[サイト構築] > [ビューを追加]を選択

ビューの名前を入力し、入力フィールド横の[編集]をクリックシステム内部名称を入力し、[ページを作成する]のチェックを外す



設定手順 (続き) [ブロックを作成]にチェックを入れ、[表示形式]欄で[Slick carousel]

を選択 [ページ毎の件数]でカルーセルのスライド数を入力し、[継続・編集]を

クリック



設定手順 (続き) [タイトル]セクションのリンクをクリックタイトルを入力し、[適用]をクリック



設定手順 (続き) [フォーマット]セクションの[設定]をクリック [Skin main]で[デフォルト]を選択



設定手順 (続き) [フィールド]セクションの[追加]をクリック作成したコンテンツタイプを選択し、[適用]をクリック



設定手順 (続き) [ラベルの作成]のチェックを外し、[適用]をクリック



設定手順 (続き) [フィールド]セクションで[コンテンツ: タイトル]をクリックし、[削

除]をクリック



設定手順 (続き) [フィルターの条件]セクションで[コンテンツ: 掲載 (はい)]をクリック

し、[削除]をクリック



設定手順 (続き) [保存]をクリックして設定を保存



設定手順 (続き) 開発者ポータルのホーム・ページでカルーセル機能を有効化

管理メニューより、[環境設定] > [メディア] > [Slick carousel]を選択

[Default]の[編集]をクリック



設定手順 (続き) [設定]タブの[Autoplay]にチェックを入れ、保存



設定手順 (続き) ホーム・ページでカルーセルの構成

管理メニューより、[サイト構築] > [ページ]を選択

welcomeページの[編集]をクリック



設定手順 (続き) [Panel]セクションの[コンテンツ]をクリックようこそバナーを削除するために、[Top]ペインの設定アイコンをク

リックし、[削除]を選択



設定手順 (続き) [Top]ペインの設定アイコンをクリックし、[コンテンツを追加]を選択



設定手順 (続き) [その他] > [View: スライド・ショー: Block]を選択し、[Finish]をク

リック [Update and save]をクリック



確認結果



カスタム・ブロックでのPHPの使用カスタム・テーマへのカスタムJavaScriptの追加

その他


PHPを使用してブロックのカスタマイズが可能

カスタマイズ例 administratorに対してPHPコードの実行を許可し、PHPコードを

使用してブロック内に文字列を表示する

カスタム・ブロックでのPHPの使用 (1/10)


設定手順 PHP filterの有効化 (デフォルト：無効)


[PHP filter (php)]を有効化検索フィールドに”php”と入力することで検索可能



設定手順 (続き) 役割毎のPHPコードの実行許可設定 (デフォルト：すべての役割で

実行不可) 管理メニューより、[環境設定] > [コンテンツ作成] > [テキスト

フォーマット]を選択



設定手順 (続き) [PHP code]の[設定]クリックし、[役割]欄で[administrator]にチェッ

クを入れて保存



設定手順 (続き) WYSIWYGプロファイルのPHPコード無効化 (デフォルト：有効)

管理メニューより、[環境設定] > [コンテンツ作成] > [Wysiwygprofiles]を選択


WYSIWYGエディターはPHPコードと互換性がないため、WYSIWYGプロファイルでPHPコードを無効化する必要があります。


設定手順 (続き) [PHP code]の[編集]をクリック [基本セットアップ]を展開し、[Enabled by default]のチェックを外し

て保存



設定手順 (続き) ブロックにPHPコードを追加

管理メニューより、[サイト構築] > [ブロック] > [ブロックを追加]を選択



設定手順 (続き) ブロックのタイトルと説明を入力 [ブロックの本文]欄に以下のPHPコードを入力し、保存


<?php print “myCustomBlockCode"; ?>

日本語のKnowledge Centerの記載されているPHPコードに文法誤りがあるため要注意。英語版に記載のPHPコードが正しい。


設定手順 (続き) ブロックのリージョンで[第1サイドバー]を選択し、保存



カスタム・テーマにJavaScriptを追加することで、動的処理や動きの追加/上書きが可能

カスタマイズ例サンプルとしてコンソールにメッセージを出力するJavaScriptをテー

マへ追加サンプル・テーマは下記URLよりzipファイルをダウンロードして使用

https://www.ibm.com/support/knowledgecenter/ja/SSMNED_5.0.0/com.ibm.apic.devportal.doc/banka_connect_theme.zip

設定手順追加したいJavaScriptを作成

テキスト・エディターで以下のJavaScriptコードを入力し、”console.js”として保存

カスタム・テーマへのカスタムJavaScriptの追加 (1/3)

console.log("Test of JavaScript");

https://www.ibm.com/support/knowledgecenter/ja/SSMNED_5.0.0/com.ibm.apic.devportal.doc/banka_connect_theme.zip


設定手順 (続き) インストールするテーマの.infoファイルに以下の行を追記

カスタム・テーマを圧縮してインストールし、有効化テーマのインストールおよび有効化手順は、当資料の「追加テーマのイ

ンストール」を参照

カスタム・テーマは以下の場所にインストールされる /var/aegir/platforms/devportal-7.x-5.0.1.0-20160530-

2209/sites/<開発者ポータルのホスト名 (FQDN)>/themes/<カスタム・テーマ名>

※青字部分は環境に依存


; Custom JSscripts[] = console.js

banka_connect_theme.info

admin@apicdevportal:~$ ls /var/aegir/platforms/devportal-7.x-5.0.1.0-20160530-2209/sites/apicdevportal.ise.ibm.com/themes/banka_connect_themebanka_connect_hero.jpg banka_logo.png LICENSE.txt test.jsbanka_connect_theme.info css screenshot.png theme-settings.phpbanka_logo.jpg favicon.ico template.php


確認結果


ibm api connect 開発者ポータル構成ガイド 2章...© 2016 ibm corporation 2...

Documents