© 2016 IBM Corporation
2016/10/01日本アイ・ビー・エム株式会社
IBM API Connect 開発者ポータル構成ガイド
2. 開発者ポータルの外観の制御
© 2016 IBM Corporation2
当資料の位置づけ 当資料は、API Connectの開発者ポータルの主要なカスタマイズ方
法についてまとめたものです。 V5.0.1を前提としています。
注意事項 当資料に含まれる情報は可能な限り正確を期しておりますが、当資
料に記載された内容に関して何ら保証するものではありません。ここでの記載内容はあくまでも支援情報であり、使用者の責任において取扱われるものとし、資料の内容によって受けたいかなる損害に関して一切の保証をいたしません。
製品の新しいリリース、修正などによって動作/仕様が変わる可能性がありますので、必ずマニュアル等で最新の情報をご確認ください。
はじめに
© 2016 IBM Corporation3
1. 開発者ポータルの一般的な構成2. 開発者ポータルの外観の制御3. 開発者ポータルのコンテンツの制御4. 開発者ポータルのセキュリティーの管理5. 開発者ポータルのユーザーの管理6. 開発者ポータルでのフォーラムの制御
開発者ポータルの構成/カスタマイズ
© 2016 IBM Corporation4
開発者ポータルについて外観のカスタマイズ
開発者ポータルの外観の主要構成要素 ユースケース毎の逆引き索引 サイト属性のカスタマイズ ページ構成 (メニュー構成)のカスタマイズ コンテンツのカスタマイズ その他
目次
© 2016 IBM Corporation5
開発者ポータルは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/
開発者ポータルについて
© 2016 IBM Corporation6
外観のカスタマイズ
© 2016 IBM Corporation7
開発者ポータルの外観の主要構成要素
favicon
サイト名
メインメニュー
フロントページ
サイト・ロゴ
ブロック(カスタム・メニューなど)
バナー・イメージ
イメージ・カルーセル
© 2016 IBM Corporation8
ユースケース毎の逆引き索引サイト属性のカスタマイズ
サイト名を変更したい サイト名の変更
サイト・スローガンを変更したい サイト・スローガンの変更
サイトのEメールアドレスを変更したい サイトのEメールアドレスの変更
サイト・カラーを変更したい サイト・カラーの変更
サイト・ロゴを変更したい サイト・ロゴの変更
faviconを変更したい ショートカット・アイコンの変更
カスタム・テーマを使用したい 追加テーマのインストール
カスタム・テーマを削除したい テーマのアンインストール
ページ構成 (メニュー構成)のカスタマイズ
メインメニューの構成をカスタマイズしたい メインメニューの項目の変更
カスタム・メニューを追加したい メニューの追加
ユーザー・ロール毎にフロントページをカスタマイズしたい フロントページの構成
クライアント・デバイスに応じてページ・レイアウトをカスタマイズしたい
クライアント・デバイス用のレイアウトの変更
コンテンツのカスタマイズ
フロントページにバナー・イメージを使用したい フロントページ・バナー・イメージの変更
開発者ポータルのページにブロックを追加したい 開発者ポータルのページで表示されるブロックの変更
コンテキストを使用してブロックの表示制御をしたい 開発者ポータルのセクションへのコンテキストの追加
イメージ・カルーセルを使用したい イメージ・カルーセルの実装
その他
PHPを使用して画面をカスタマイズしたい カスタム・ブロックでのPHPの使用
カスタム・テーマでJavaScriptを使用してカスタマイズしたい カスタム・テーマへのカスタムJavaScriptの追加
© 2016 IBM Corporation9
サイト名の変更サイト・スローガンの変更サイトのEメールアドレスの変更
サイト・カラーの変更サイト・ロゴの変更ショートカット・アイコンの変更追加テーマのインストールテーマのアンインストール
サイト属性のカスタマイズ
© 2016 IBM Corporation10
開発者ポータルのサイト名を変更可能
設定手順 管理メニューより、[環境設定] > [システム] > [サイト情報]を選択
サイト名を入力し、保存
サイト名の変更 (1/3)
© 2016 IBM Corporation11
設定の確認方法 サイト名を表示させることで確認可能
管理メニューより、[テーマ] > [設定] > [IBM API Connect]を選択
[表示の切り替え]欄にて[サイト名]にチェックを入れて保存
サイト名の変更 (2/3)
© 2016 IBM Corporation12
確認結果
サイト名の変更 (3/3)
© 2016 IBM Corporation13
開発者ポータルのサイト・スローガンを変更可能
設定手順 管理メニューより、[環境設定] > [システム] > [サイト情報]を選択
スローガンを入力し、保存
サイト・スローガンの変更 (1/3)
© 2016 IBM Corporation14
設定の確認方法 サイト・スローガンを表示させることで確認可能
管理メニューより、[テーマ] > [設定] > [IBM API Connect]を選択
[表示の切り替え]欄にて[サイトスローガン]にチェックを入れて保存
サイト・スローガンの変更 (2/3)
© 2016 IBM Corporation15
確認結果
サイト・スローガンの変更 (3/3)
© 2016 IBM Corporation16
開発者ポータルのサイトの代表メールアドレスを変更可能 代表メールアドレスは、ユーザー登録時やパスワード再発行時の自
動送信メール「From: (差出人)」として使用
設定手順 管理メニューより、[環境設定] > [システム] > [サイト情報]を選択
メールアドレスを変更し、保存
サイトのEメールアドレスの変更
© 2016 IBM Corporation17
テーマのサイト・カラーを変更可能
カスタマイズ例 テーマのカラーセットを”IBM API Management”から”Vanilla Sky”
に変更
設定手順 管理メニューより、[テーマ] > [設定] > [IBM API Connect]を選択
サイト・カラーの変更 (1/3)
© 2016 IBM Corporation18
設定手順 (続き) [配色]欄でカラーセットを”Vanilla Sky”に変更し、保存
パーツ毎の配色変更も可能
サイト・カラーの変更 (2/3)
© 2016 IBM Corporation19
カスタマイズ結果
サイト・カラーの変更 (3/3)
© 2016 IBM Corporation20
開発者ポータルのサイト・ロゴを変更可能
設定手順 管理メニューより、[テーマ] > [設定] > [IBM API Connect]を選択
[ロゴ画像の設定]欄を展開して[デフォルトのロゴを使用]のチェックを外し、画像を選択して保存
サイト・ロゴの変更 (1/2)
© 2016 IBM Corporation21
確認結果
サイト・ロゴの変更 (2/2)
© 2016 IBM Corporation22
開発者ポータルのショートカット・アイコン (favicon)を変更可能
設定手順 管理メニューより、[テーマ] > [設定] > [IBM API Connect]を選択
ショートカット・アイコンの変更 (1/3)
© 2016 IBM Corporation23
設定手順 (続き) [ショートカットアイコンの設定]欄を展開して[デフォルトのショー
トカットアイコンを使用]のチェックを外し、任意のアイコン画像を選択して保存
ショートカット・アイコンの変更 (2/3)
© 2016 IBM Corporation24
確認結果
ショートカット・アイコンの変更 (3/3)
© 2016 IBM Corporation25
新しいテーマをインストールして使用可能 テーマを一から作成するにはDrupalの知識が必要 インターネット上に公開されているテーマをダウンロードして使用
することも可能 https://www.drupal.org/project/project_theme
設定手順 管理メニューより、[テーマ] > [新しいテーマをインストール]を選択
追加テーマのインストール (1/4)
© 2016 IBM Corporation26
設定手順 (続き) URLまたはローカル・ファイルからインストールするテーマを選択
し、[インストール]をクリック インストールが完了したら、[Enable newly added themes]を選択
追加テーマのインストール (2/4)
© 2016 IBM Corporation27
設定手順 (続き) インストールしたテーマの[有効にしデフォルトに設定する]を選択
追加テーマのインストール (3/4)
© 2016 IBM Corporation28
追加したテーマのフロント・ページ
追加テーマのインストール (4/4)
© 2016 IBM Corporation29
インストール済みテーマをアンインストールするには、事前にテーマを無効にする必要がある
設定手順 テーマの無効化
管理メニューより、[テーマ]を選択
テーマのアンインストール (1/3)
© 2016 IBM Corporation30
設定手順 (続き) 任意のテーマの[デフォルトに設定]をクリックし、アンインストール対
象のテーマとは別のテーマを一旦デフォルトに設定する
アンインストール対象テーマの[無効]をクリック
テーマのアンインストール (2/3)
© 2016 IBM Corporation31
設定手順 (続き) テーマのアンインストール
[アンインストール]タブにて、対象テーマにチェックを入れ、[アンインストール]をクリック
テーマのアンインストール (3/3)
© 2016 IBM Corporation32
メインメニューの項目の変更メニューの追加フロントページの構成クライアント・デバイス用のレイアウトの変更
ページ構成 (メニュー構成)のカスタマイズ
© 2016 IBM Corporation33
すべてのページに表示されるメインメニューの項目を変更可能
カスタマイズ例 メインメニューの右端にDrupalホームページ (http://drupal.org)
のリンクを追加
メインメニューの項目の変更 (1/6)
© 2016 IBM Corporation34
設定手順 管理メニューより、[サイト構築] > [メニュー] > [Main menu]を
選択
メインメニューの項目の変更 (2/6)
© 2016 IBM Corporation35
設定手順 (続き) [リンクの追加]をクリック
メインメニューの項目の変更 (3/6)
© 2016 IBM Corporation36
設定手順 (続き) タイトルおよびパスを入力
メインメニューの項目の変更 (4/6)
© 2016 IBM Corporation37
設定手順 (続き) [ウェイト]欄で[50]を選択し、[保存]をクリック
メインメニューの項目の変更 (5/6)
ウェイト (-50~50)にて、リンクの表示位置を調整可能
ここでは、リンクを右端に追加するため、最も大きい50を指定
© 2016 IBM Corporation38
カスタマイズ結果
メインメニューの項目の変更 (6/6)
© 2016 IBM Corporation39
開発者ポータルに新規メニューを追加し、メニュー内にリンクを定義可能
設定手順 管理メニューより、[サイト構築] > [メニュー] > [メニューの追
加]を選択
メニューの追加 (1/6)
© 2016 IBM Corporation40
設定手順 (続き) タイトルを入力し、[保存]をクリック
メニューの追加 (2/6)
© 2016 IBM Corporation41
設定手順 (続き) [リンクの追加]をクリックし、メニューリンクを作成
メニューの追加 (3/6)
© 2016 IBM Corporation42
設定手順 (続き) メニューリンクのタイトルおよびパスを入力し、[保存]をクリック
メニューの追加 (4/6)
© 2016 IBM Corporation43
設定手順 (続き) 管理メニューより、[サイト構築]
> [ブロック]を選択
メニュー追加時に自動生成されるメニュータイトルと同名のブロックのリージョンにて、メニューを表示する領域を指定 ここでは、[第1サイドバー]を指定
メニューの追加 (5/6)
© 2016 IBM Corporation44
カスタマイズ結果 すべてのページでメニューが表示される
メニューの追加 (6/6)
© 2016 IBM Corporation45
ブロックとは、情報やコンテンツを表示するボックスのこと モジュールによって自動生成される (独自に追加することも可能)
リージョンによってコンテンツの配置を指定する ブロックのリージョンはテーマによって異なる
[サイト構築] > [ブロック]を選択し、[ブロックリージョンのデモを見る]より、使用しているテーマのリージョンを確認可能
(参考) ブロックのリージョンについて
© 2016 IBM Corporation46
ユーザーのロール毎にフロントページのカスタマイズが可能ロール毎に以下のモードを指定
スキップ (デフォルト) フロントページをカスタマイズしない
Themed デフォルト・テーマがフロントページに適用される
すべて / Full フロントページを、レイアウトを含め自在にカスタマイズ可能 ページを一から作成する必要がある
Redirect パスで指定したページにリダイレクトされる
エイリアス / Alias パスで指定したページを参照する
フロントページの構成 (1/12)
© 2016 IBM Corporation47
スキップ
フロントページの構成 (2/12)
© 2016 IBM Corporation48
Themed
フロントページの構成 (3/12)
© 2016 IBM Corporation49
すべて
フロントページの構成 (4/12)
© 2016 IBM Corporation50
Redirect
フロントページの構成 (5/12)
© 2016 IBM Corporation51
エイリアス
フロントページの構成 (6/12)
© 2016 IBM Corporation52
カスタマイズ例 administratorのフロントページのテキストを変更
フロントページの構成 (7/12)
デフォルトのフロントページ
© 2016 IBM Corporation53
設定手順 管理メニューより、[環境設定] > [Front Page] > [設定]を選択
[Front Page Override]にチェックを入れる
フロントページの構成 (8/12)
© 2016 IBM Corporation54
設定手順 (続き) [Front Page for administrator]で[Themed]を選択
フロントページの構成 (9/12)
© 2016 IBM Corporation55
設定手順 (続き) [データ]欄で[HTML]ボタンを押下し、以下のHTMLコードを入力
フロントページの構成 (10/12)
<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>
© 2016 IBM Corporation56
設定手順 (続き) ページ下部の[Save Settings]を押下し、設定を保存
フロントページの構成 (11/12)
© 2016 IBM Corporation57
カスタマイズ結果
フロントページの構成 (12/12)
administratorのフロントページ
認証済みユーザーのフロントページ
© 2016 IBM Corporation58
タブレットやスマートフォンなど様々なデバイスに応じたレイアウトを設定可能 Standard Layout:PC (デスクトップ/ラップトップ)向け Tablet Layout:タブレット向け Smalltouch Layout:スマートフォン向け
設定手順 管理メニューより、[テーマ] > [設定] > [IBM API Connect (使用
中テーマ)]を選択
クライアント・デバイス用のレイアウトの変更 (1/3)
© 2016 IBM Corporation59
設定手順 (続き) [Layout & General Settings]にて、デバイス毎のレイアウトを指
定
クライアント・デバイス用のレイアウトの変更 (2/3)
© 2016 IBM Corporation60
設定内容の確認 テーマのリージョンを確認することで、レイアウトを確認可能
例:Standard Layoutのsidebarで左寄せを選択した場合
クライアント・デバイス用のレイアウトの変更 (3/3)
© 2016 IBM Corporation61
フロントページ・バナー・イメージの変更開発者ポータルのページで表示されるブロックの変更開発者ポータルのセクションへのコンテキストの追加イメージ・カルーセルの実装
コンテンツのカスタマイズ
© 2016 IBM Corporation62
ログイン後のホーム・ページに表示される背景画像を変更可能
設定手順 管理メニューより、[コンテンツ] > [ブロック]を選択
フロントページ・バナー・イメージの変更 (1/4)
© 2016 IBM Corporation63
設定手順 (続き) [Welcome Banner]の[編集]をクリック
フロントページ・バナー・イメージの変更 (2/4)
© 2016 IBM Corporation64
設定手順 (続き) [イメージ]欄で表示したい画像を選択し、[アップロード]をクリッ
ク
ページ下部の[保存]をクリックし、設定を保存
フロントページ・バナー・イメージの変更 (3/4)
© 2016 IBM Corporation65
カスタマイズ結果
フロントページ・バナー・イメージの変更 (4/4)
© 2016 IBM Corporation66
開発者ポータルのページで表示されるブロックの追加/変更が可能
設定手順 管理メニューより、[サイト構築] > [ブロック] > [ブロックを追
加]を選択
開発者ポータルのページで表示されるブロックの変更 (1/4)
© 2016 IBM Corporation67
設定手順 ブロックのタイトル、説明、本文を入力
開発者ポータルのページで表示されるブロックの変更 (2/4)
© 2016 IBM Corporation68
設定手順 表示領域 (リージョン)として[第1サイドバー]を指定し、[保存]を
クリック
開発者ポータルのページで表示されるブロックの変更 (3/4)
© 2016 IBM Corporation69
カスタマイズ結果
開発者ポータルのページで表示されるブロックの変更 (4/4)
© 2016 IBM Corporation70
コンテキスト 様々な条件からブロックやメニューなどの配置、表示を制御するモ
ジュール
コンテキストを使用することで、開発者ポータルに対して特定の条件に応じたブロックの表示制御が可能
カスタマイズ例 Homeページ (<front>)かつロールがadministratorの場合に、メ
ニューを表示する
開発者ポータルのセクションへのコンテキストの追加 (1/8)
© 2016 IBM Corporation71
設定手順 モジュールの有効化
管理メニューより、[モジュール]を選択
“Context”モジュールおよび”Context UI”モジュールを有効化し、保存
開発者ポータルのセクションへのコンテキストの追加 (2/8)
パフォーマンスを向上させるために、コンテキストの構成が完了した後は、再度”Context UI”モジュールを無効化する
© 2016 IBM Corporation72
設定手順 (続き) コンテキストの追加
管理者メニューより、[サイト構築] > [コンテキスト]を選択
[追加]をクリック
開発者ポータルのセクションへのコンテキストの追加 (3/8)
© 2016 IBM Corporation73
設定手順 (続き) コンテキスト名を入力
名前に使用できるのは英小文字、数字_ (アンダースコア)、- (ハイフン)
開発者ポータルのセクションへのコンテキストの追加 (4/8)
© 2016 IBM Corporation74
設定手順 (続き) すべての条件をAND条件とするため、[Require all conditions]に
チェックを入れる
[Conditions]欄で[パス]を選択し、右側の[パス]欄にフロントページを示す”<front>”を入力
開発者ポータルのセクションへのコンテキストの追加 (5/8)
© 2016 IBM Corporation75
設定手順 (続き) 同様に[Conditions]欄で[役割]を選択し、[administrator]にチェック
を入れる
開発者ポータルのセクションへのコンテキストの追加 (6/8)
© 2016 IBM Corporation76
設定手順 (続き) [Reactions]欄で[ブロック]を選択し、表示したいブロックとリージョ
ンを指定 右列にて[menu]を展開し、[テスト]にチェックを入れ、[第1サイドバー]
の[追加]をクリック
開発者ポータルのセクションへのコンテキストの追加 (7/8)
© 2016 IBM Corporation77
カスタマイズ結果
開発者ポータルのセクションへのコンテキストの追加 (8/8)
administratorのHome (<front>)ページにメニューが表示される
administratorのHome (<front>)ページ以外ではメニューが表示されない
administrator以外に対してはHomeページにもメニューが表示されない
© 2016 IBM Corporation78
開発者ポータルのホーム・ページなどをカスタマイズしてカルーセル (スライドショー)を表示可能
カスタマイズ例 2枚の画像を自動で切り替えるカルーセルをホーム・ページに表示
設定手順 モジュールの有効化
管理メニューより、[モジュール]を選択
イメージ・カルーセルの実装 (1/26)
© 2016 IBM Corporation79
設定手順 (続き) [Views UI]を有効にし、保存
検索フィールドで”views_ui”と入力することで検索可能
イメージ・カルーセルの実装 (2/26)
「Views UI」が有効の場合、開発者ポータルのパフォーマンスが低下します。セットアップ時のみ有効にしてください。
© 2016 IBM Corporation80
設定手順 (続き) カルーセルのコンテンツタイプを作成
管理メニューより、[サイト構築] > [コンテンツタイプ] > [コンテンツタイプの追加]を選択
イメージ・カルーセルの実装 (3/26)
© 2016 IBM Corporation81
設定手順 (続き) コンテンツタイプ名を入力し、[編集]をクリック システム内部名称、説明 (任意)を入力し、[コンテンツタイプの保存]
をクリック
イメージ・カルーセルの実装 (4/26)
© 2016 IBM Corporation82
設定手順 (続き) 作成したコンテンツタイプの[フィールドの管理]をクリック
[Body]フィールドを削除
イメージ・カルーセルの実装 (5/26)
© 2016 IBM Corporation83
設定手順 (続き) [フィールドを追加]欄にラベル名、システム内部名称を入力し、
[フィールドタイプ]として[イメージ]を選択 [ウィジェット]欄が”イメージ”になっていることを確認し、保存
イメージ・カルーセルの実装 (6/26)
© 2016 IBM Corporation84
設定手順 (続き) 他のイメージがない場合にデフォルトのイメージとして使用する画像を
選択し、[フィールド設定を保存]をクリック [設定の保存]をクリックし、保存
イメージ・カルーセルの実装 (7/26)
© 2016 IBM Corporation85
設定手順 (続き) カルーセルに表示する画像をアップロード
管理メニューより、[コンテンツ]を選択し、[コンテンツを追加]をクリック
前手順で作成したコンテンツタイプを選択
イメージ・カルーセルの実装 (8/26)
© 2016 IBM Corporation86
設定手順 (続き) 画像タイトルを入力 画像を選択して[アップロード]をクリックし、保存
イメージ・カルーセルの実装 (9/26)
© 2016 IBM Corporation87
設定手順 (続き) [Clone content]をクリックし、タイトルと画像を次のスライドに含め
るものに置き換えて保存
イメージ・カルーセルの実装 (10/26)
© 2016 IBM Corporation88
設定手順 (続き) カルーセルのビューを作成
管理メニューより、[サイト構築] > [ビューを追加]を選択
ビューの名前を入力し、入力フィールド横の[編集]をクリック システム内部名称を入力し、[ページを作成する]のチェックを外す
イメージ・カルーセルの実装 (11/26)
© 2016 IBM Corporation89
設定手順 (続き) [ブロックを作成]にチェックを入れ、[表示形式]欄で[Slick carousel]
を選択 [ページ毎の件数]でカルーセルのスライド数を入力し、[継続・編集]を
クリック
イメージ・カルーセルの実装 (12/26)
© 2016 IBM Corporation90
設定手順 (続き) [タイトル]セクションのリンクをクリック タイトルを入力し、[適用]をクリック
イメージ・カルーセルの実装 (13/26)
© 2016 IBM Corporation91
設定手順 (続き) [フォーマット]セクションの[設定]をクリック [Skin main]で[デフォルト]を選択
イメージ・カルーセルの実装 (14/26)
© 2016 IBM Corporation92
設定手順 (続き) [フィールド]セクションの[追加]をクリック 作成したコンテンツタイプを選択し、[適用]をクリック
イメージ・カルーセルの実装 (15/26)
© 2016 IBM Corporation93
設定手順 (続き) [ラベルの作成]のチェックを外し、[適用]をクリック
イメージ・カルーセルの実装 (16/26)
© 2016 IBM Corporation94
設定手順 (続き) [フィールド]セクションで[コンテンツ: タイトル]をクリックし、[削
除]をクリック
イメージ・カルーセルの実装 (17/26)
© 2016 IBM Corporation95
設定手順 (続き) [フィルターの条件]セクションで[コンテンツ: 掲載 (はい)]をクリック
し、[削除]をクリック
イメージ・カルーセルの実装 (18/26)
© 2016 IBM Corporation96
設定手順 (続き) [保存]をクリックして設定を保存
イメージ・カルーセルの実装 (19/26)
© 2016 IBM Corporation97
設定手順 (続き) 開発者ポータルのホーム・ページでカルーセル機能を有効化
管理メニューより、[環境設定] > [メディア] > [Slick carousel]を選択
[Default]の[編集]をクリック
イメージ・カルーセルの実装 (20/26)
© 2016 IBM Corporation98
設定手順 (続き) [設定]タブの[Autoplay]にチェックを入れ、保存
イメージ・カルーセルの実装 (21/26)
© 2016 IBM Corporation99
設定手順 (続き) ホーム・ページでカルーセルの構成
管理メニューより、[サイト構築] > [ページ]を選択
welcomeページの[編集]をクリック
イメージ・カルーセルの実装 (22/26)
© 2016 IBM Corporation100
設定手順 (続き) [Panel]セクションの[コンテンツ]をクリック ようこそバナーを削除するために、[Top]ペインの設定アイコンをク
リックし、[削除]を選択
イメージ・カルーセルの実装 (23/26)
© 2016 IBM Corporation101
設定手順 (続き) [Top]ペインの設定アイコンをクリックし、[コンテンツを追加]を選択
イメージ・カルーセルの実装 (24/26)
© 2016 IBM Corporation102
設定手順 (続き) [その他] > [View: スライド・ショー: Block]を選択し、[Finish]をク
リック [Update and save]をクリック
イメージ・カルーセルの実装 (25/26)
© 2016 IBM Corporation103
確認結果
イメージ・カルーセルの実装 (26/26)
© 2016 IBM Corporation104
カスタム・ブロックでのPHPの使用カスタム・テーマへのカスタムJavaScriptの追加
その他
© 2016 IBM Corporation105
PHPを使用してブロックのカスタマイズが可能
カスタマイズ例 administratorに対してPHPコードの実行を許可し、PHPコードを
使用してブロック内に文字列を表示する
カスタム・ブロックでのPHPの使用 (1/10)
© 2016 IBM Corporation106
設定手順 PHP filterの有効化 (デフォルト:無効)
管理メニューより、[モジュール]を選択
[PHP filter (php)]を有効化 検索フィールドに”php”と入力することで検索可能
カスタム・ブロックでのPHPの使用 (2/10)
© 2016 IBM Corporation107
設定手順 (続き) 役割毎のPHPコードの実行許可設定 (デフォルト:すべての役割で
実行不可) 管理メニューより、[環境設定] > [コンテンツ作成] > [テキスト
フォーマット]を選択
カスタム・ブロックでのPHPの使用 (3/10)
© 2016 IBM Corporation108
設定手順 (続き) [PHP code]の[設定]クリックし、[役割]欄で[administrator]にチェッ
クを入れて保存
カスタム・ブロックでのPHPの使用 (4/10)
© 2016 IBM Corporation109
設定手順 (続き) WYSIWYGプロファイルのPHPコード無効化 (デフォルト:有効)
管理メニューより、[環境設定] > [コンテンツ作成] > [Wysiwygprofiles]を選択
カスタム・ブロックでのPHPの使用 (5/10)
WYSIWYGエディターはPHPコードと互換性がないため、WYSIWYGプロファイルでPHPコードを無効化する必要があります。
© 2016 IBM Corporation110
設定手順 (続き) [PHP code]の[編集]をクリック [基本セットアップ]を展開し、[Enabled by default]のチェックを外し
て保存
カスタム・ブロックでのPHPの使用 (6/10)
© 2016 IBM Corporation111
設定手順 (続き) ブロックにPHPコードを追加
管理メニューより、[サイト構築] > [ブロック] > [ブロックを追加]を選択
カスタム・ブロックでのPHPの使用 (7/10)
© 2016 IBM Corporation112
設定手順 (続き) ブロックのタイトルと説明を入力 [ブロックの本文]欄に以下のPHPコードを入力し、保存
カスタム・ブロックでのPHPの使用 (8/10)
<?php print “myCustomBlockCode"; ?>
日本語のKnowledge Centerの記載されているPHPコードに文法誤りがあるため要注意。英語版に記載のPHPコードが正しい。
© 2016 IBM Corporation113
設定手順 (続き) ブロックのリージョンで[第1サイドバー]を選択し、保存
カスタム・ブロックでのPHPの使用 (9/10)
© 2016 IBM Corporation114
カスタマイズ結果
カスタム・ブロックでのPHPの使用 (10/10)
© 2016 IBM Corporation115
カスタム・テーマに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");
© 2016 IBM Corporation116
設定手順 (続き) インストールするテーマの.infoファイルに以下の行を追記
カスタム・テーマを圧縮してインストールし、有効化 テーマのインストールおよび有効化手順は、当資料の「追加テーマのイ
ンストール」を参照
カスタム・テーマは以下の場所にインストールされる /var/aegir/platforms/devportal-7.x-5.0.1.0-20160530-
2209/sites/<開発者ポータルのホスト名 (FQDN)>/themes/<カスタム・テーマ名>
※青字部分は環境に依存
カスタム・テーマへのカスタムJavaScriptの追加 (2/3)
; 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
© 2016 IBM Corporation117
確認結果
カスタム・テーマへのカスタムJavaScriptの追加 (3/3)