IBM API Connect 開発者ポータル構成ガイド 2. 開発者ポータルの外観の制御 2016/10/01 日本アイ ビー エム株式会社
はじめに 当資料の位置づけ 当資料は API Connect の開発者ポータルの主要なカスタマイズ方法についてまとめたものです V5.0.1 を前提としています 注意事項 当資料に含まれる情報は可能な限り正確を期しておりますが 当資料に記載された内容に関して何ら保証するものではありません ここでの記載内容はあくまでも支援情報であり 使用者の責任において取扱われるものとし 資料の内容によって受けたいかなる損害に関して一切の保証をいたしません 製品の新しいリリース 修正などによって動作 / 仕様が変わる可能性がありますので 必ずマニュアル等で最新の情報をご確認ください 2
開発者ポータルの構成 / カスタマイズ 1. 開発者ポータルの一般的な構成 2. 開発者ポータルの外観の制御 3. 開発者ポータルのコンテンツの制御 4. 開発者ポータルのセキュリティーの管理 5. 開発者ポータルのユーザーの管理 6. 開発者ポータルでのフォーラムの制御 3
目次 開発者ポータルについて 外観のカスタマイズ 開発者ポータルの外観の主要構成要素 ユースケース毎の逆引き索引 サイト属性のカスタマイズ ページ構成 ( メニュー構成 ) のカスタマイズ コンテンツのカスタマイズ その他 4
開発者ポータルについて 開発者ポータルは Drupal を使用して構成されている 開発者ポータル V5.0.1 は Drupal v7.43 がベース 開発者ポータル V5.0.2 は Drupal v7.44 がベース admin ユーザーでログインし [ レポート ] > [ 利用可能なアップデート ] より Drupal のバージョンを確認可能 5 カスタマイズするためには 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/
外観のカスタマイズ 6
開発者ポータルの外観の主要構成要素 favicon サイト名 サイト ロゴ メインメニュー フロントページ ブロック ( カスタム メニューなど ) イメージ カルーセル バナー イメージ 7
ユースケース毎の逆引き索引 サイト属性のカスタマイズ サイト名を変更したいサイト スローガンを変更したいサイトのEメールアドレスを変更したいサイト カラーを変更したいサイト ロゴを変更したい faviconを変更したいカスタム テーマを使用したいカスタム テーマを削除したい サイト名の変更サイト スローガンの変更サイトのEメールアドレスの変更サイト カラーの変更サイト ロゴの変更ショートカット アイコンの変更追加テーマのインストールテーマのアンインストール ページ構成 ( メニュー構成 ) のカスタマイズ メインメニューの構成をカスタマイズしたい カスタム メニューを追加したい ユーザー ロール毎にフロントページをカスタマイズしたい クライアント デバイスに応じてページ レイアウトをカスタマイズしたい コンテンツのカスタマイズ フロントページにバナー イメージを使用したい 開発者ポータルのページにブロックを追加したい コンテキストを使用してブロックの表示制御をしたい イメージ カルーセルを使用したい メインメニューの項目の変更メニューの追加フロントページの構成クライアント デバイス用のレイアウトの変更フロントページ バナー イメージの変更開発者ポータルのページで表示されるブロックの変更開発者ポータルのセクションへのコンテキストの追加イメージ カルーセルの実装 その他 8 PHP を使用して画面をカスタマイズしたい カスタム テーマで JavaScript を使用してカスタマイズしたい カスタム ブロックでの PHP の使用 カスタム テーマへのカスタム JavaScript の追加
サイト属性のカスタマイズ サイト名の変更 サイト スローガンの変更 サイトの E メールアドレスの変更 サイト カラーの変更 サイト ロゴの変更 ショートカット アイコンの変更 追加テーマのインストール テーマのアンインストール 9
サイト名の変更 (1/3) 開発者ポータルのサイト名を変更可能 設定手順 管理メニューより [ 環境設定 ] > [ システム ] > [ サイト情報 ] を選択 サイト名を入力し 保存 10
サイト名の変更 (2/3) 設定の確認方法 サイト名を表示させることで確認可能 管理メニューより [ テーマ ] > [ 設定 ] > [IBM API Connect] を選択 [ 表示の切り替え ] 欄にて [ サイト名 ] にチェックを入れて保存 11
サイト名の変更 (3/3) 確認結果 12
サイト スローガンの変更 (1/3) 開発者ポータルのサイト スローガンを変更可能 設定手順 管理メニューより [ 環境設定 ] > [ システム ] > [ サイト情報 ] を選択 スローガンを入力し 保存 13
サイト スローガンの変更 (2/3) 設定の確認方法 サイト スローガンを表示させることで確認可能 管理メニューより [ テーマ ] > [ 設定 ] > [IBM API Connect] を選択 [ 表示の切り替え ] 欄にて [ サイトスローガン ] にチェックを入れて保存 14
サイト スローガンの変更 (3/3) 確認結果 15
サイトの E メールアドレスの変更 開発者ポータルのサイトの代表メールアドレスを変更可能 代表メールアドレスは ユーザー登録時やパスワード再発行時の自動送信メール From: ( 差出人 ) として使用 設定手順 管理メニューより [ 環境設定 ] > [ システム ] > [ サイト情報 ] を選択 メールアドレスを変更し 保存 16
サイト カラーの変更 (1/3) テーマのサイト カラーを変更可能 カスタマイズ例 テーマのカラーセットを IBM API Management から Vanilla Sky に変更 設定手順 管理メニューより [ テーマ ] > [ 設定 ] > [IBM API Connect] を選択 17
サイト カラーの変更 (2/3) 設定手順 ( 続き ) [ 配色 ] 欄でカラーセットを Vanilla Sky に変更し 保存 パーツ毎の配色変更も可能 18
サイト カラーの変更 (3/3) カスタマイズ結果 19
サイト ロゴの変更 (1/2) 開発者ポータルのサイト ロゴを変更可能 設定手順 管理メニューより [ テーマ ] > [ 設定 ] > [IBM API Connect] を選択 [ ロゴ画像の設定 ] 欄を展開して [ デフォルトのロゴを使用 ] のチェックを外し 画像を選択して保存 20
サイト ロゴの変更 (2/2) 確認結果 21
ショートカット アイコンの変更 (1/3) 開発者ポータルのショートカット アイコン (favicon) を変更可能 設定手順 管理メニューより [ テーマ ] > [ 設定 ] > [IBM API Connect] を選択 22
ショートカット アイコンの変更 (2/3) 設定手順 ( 続き ) [ ショートカットアイコンの設定 ] 欄を展開して [ デフォルトのショートカットアイコンを使用 ] のチェックを外し 任意のアイコン画像を選択して保存 23
ショートカット アイコンの変更 (3/3) 確認結果 24
追加テーマのインストール (1/4) 新しいテーマをインストールして使用可能 テーマを一から作成するには Drupal の知識が必要 インターネット上に公開されているテーマをダウンロードして使用することも可能 https://www.drupal.org/project/project_theme 設定手順 管理メニューより [ テーマ ] > [ 新しいテーマをインストール ] を選択 25
追加テーマのインストール (2/4) 設定手順 ( 続き ) URL またはローカル ファイルからインストールするテーマを選択し [ インストール ] をクリック インストールが完了したら [Enable newly added themes] を選択 26
追加テーマのインストール (3/4) 設定手順 ( 続き ) インストールしたテーマの [ 有効にしデフォルトに設定する ] を選択 27
追加テーマのインストール (4/4) 追加したテーマのフロント ページ 28
テーマのアンインストール (1/3) インストール済みテーマをアンインストールするには 事前にテーマを無効にする必要がある 設定手順 テーマの無効化 管理メニューより [ テーマ ] を選択 29
テーマのアンインストール (2/3) 設定手順 ( 続き ) 任意のテーマの [ デフォルトに設定 ] をクリックし アンインストール対象のテーマとは別のテーマを一旦デフォルトに設定する アンインストール対象テーマの [ 無効 ] をクリック 30
テーマのアンインストール (3/3) 設定手順 ( 続き ) テーマのアンインストール [ アンインストール ] タブにて 対象テーマにチェックを入れ [ アンインストール ] をクリック 31
ページ構成 ( メニュー構成 ) のカスタマイズ メインメニューの項目の変更 メニューの追加 フロントページの構成 クライアント デバイス用のレイアウトの変更 32
メインメニューの項目の変更 (1/6) すべてのページに表示されるメインメニューの項目を変更可能 カスタマイズ例 メインメニューの右端に Drupal ホームページ (http://drupal.org) のリンクを追加 33
メインメニューの項目の変更 (2/6) 設定手順 管理メニューより [ サイト構築 ] > [ メニュー ] > [Main menu] を選択 34
メインメニューの項目の変更 (3/6) 設定手順 ( 続き ) [ リンクの追加 ] をクリック 35
メインメニューの項目の変更 (4/6) 設定手順 ( 続き ) タイトルおよびパスを入力 36
メインメニューの項目の変更 (5/6) 設定手順 ( 続き ) [ ウェイト ] 欄で [50] を選択し [ 保存 ] をクリック ウェイト (-50~50) にて リンクの表示位置を調整可能 ここでは リンクを右端に追加するため 最も大きい 50 を指定 37
メインメニューの項目の変更 (6/6) カスタマイズ結果 38
メニューの追加 (1/6) 開発者ポータルに新規メニューを追加し メニュー内にリンクを定義可能 設定手順 管理メニューより [ サイト構築 ] > [ メニュー ] > [ メニューの追加 ] を選択 39
メニューの追加 (2/6) 設定手順 ( 続き ) タイトルを入力し [ 保存 ] をクリック 40
メニューの追加 (3/6) 設定手順 ( 続き ) [ リンクの追加 ] をクリックし メニューリンクを作成 41
メニューの追加 (4/6) 設定手順 ( 続き ) メニューリンクのタイトルおよびパスを入力し [ 保存 ] をクリック 42
メニューの追加 (5/6) 設定手順 ( 続き ) 管理メニューより [ サイト構築 ] > [ ブロック ] を選択 メニュー追加時に自動生成されるメニュータイトルと同名のブロックのリージョンにて メニューを表示する領域を指定 ここでは [ 第 1 サイドバー ] を指定 43
メニューの追加 (6/6) カスタマイズ結果 すべてのページでメニューが表示される 44
( 参考 ) ブロックのリージョンについて ブロックとは 情報やコンテンツを表示するボックスのこと モジュールによって自動生成される ( 独自に追加することも可能 ) リージョンによってコンテンツの配置を指定する ブロックのリージョンはテーマによって異なる [ サイト構築 ] > [ ブロック ] を選択し [ ブロックリージョンのデモを見る ] より 使用しているテーマのリージョンを確認可能 45
フロントページの構成 (1/12) ユーザーのロール毎にフロントページのカスタマイズが可能 ロール毎に以下のモードを指定 スキップ ( デフォルト ) フロントページをカスタマイズしない Themed デフォルト テーマがフロントページに適用される すべて / Full フロントページを レイアウトを含め自在にカスタマイズ可能 ページを一から作成する必要がある Redirect パスで指定したページにリダイレクトされる エイリアス / Alias パスで指定したページを参照する 46
フロントページの構成 (2/12) スキップ 47
フロントページの構成 (3/12) Themed 48
フロントページの構成 (4/12) すべて 49
フロントページの構成 (5/12) Redirect 50
フロントページの構成 (6/12) エイリアス 51
フロントページの構成 (7/12) カスタマイズ例 administrator のフロントページのテキストを変更 デフォルトのフロントページ 52
フロントページの構成 (8/12) 設定手順 管理メニューより [ 環境設定 ] > [Front Page] > [ 設定 ] を選択 [Front Page Override] にチェックを入れる 53
フロントページの構成 (9/12) 設定手順 ( 続き ) [Front Page for administrator] で [Themed] を選択 54
フロントページの構成 (10/12) 設定手順 ( 続き ) [ データ ] 欄で [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> 55
フロントページの構成 (11/12) 設定手順 ( 続き ) ページ下部の [Save Settings] を押下し 設定を保存 56
フロントページの構成 (12/12) カスタマイズ結果 administrator のフロントページ 認証済みユーザーのフロントページ 57
クライアント デバイス用のレイアウトの変更 (1/3) タブレットやスマートフォンなど様々なデバイスに応じたレイアウトを設定可能 Standard Layout:PC ( デスクトップ / ラップトップ ) 向け Tablet Layout: タブレット向け Smalltouch Layout: スマートフォン向け 設定手順 管理メニューより [ テーマ ] > [ 設定 ] > [IBM API Connect ( 使用中テーマ )] を選択 58
クライアント デバイス用のレイアウトの変更 (2/3) 設定手順 ( 続き ) [Layout & General Settings] にて デバイス毎のレイアウトを指定 59
クライアント デバイス用のレイアウトの変更 (3/3) 設定内容の確認 テーマのリージョンを確認することで レイアウトを確認可能 例 :Standard Layout の sidebar で左寄せを選択した場合 60
コンテンツのカスタマイズ フロントページ バナー イメージの変更 開発者ポータルのページで表示されるブロックの変更 開発者ポータルのセクションへのコンテキストの追加 イメージ カルーセルの実装 61
フロントページ バナー イメージの変更 (1/4) ログイン後のホーム ページに表示される背景画像を変更可能 設定手順 管理メニューより [ コンテンツ ] > [ ブロック ] を選択 62
フロントページ バナー イメージの変更 (2/4) 設定手順 ( 続き ) [Welcome Banner] の [ 編集 ] をクリック 63
フロントページ バナー イメージの変更 (3/4) 設定手順 ( 続き ) [ イメージ ] 欄で表示したい画像を選択し [ アップロード ] をクリック ページ下部の [ 保存 ] をクリックし 設定を保存 64
フロントページ バナー イメージの変更 (4/4) カスタマイズ結果 65
開発者ポータルのページで表示されるブロックの変更 (1/4) 開発者ポータルのページで表示されるブロックの追加 / 変更が可能 設定手順 管理メニューより [ サイト構築 ] > [ ブロック ] > [ ブロックを追加 ] を選択 66
開発者ポータルのページで表示されるブロックの変更 (2/4) 設定手順 ブロックのタイトル 説明 本文を入力 67
開発者ポータルのページで表示されるブロックの変更 (3/4) 設定手順 表示領域 ( リージョン ) として [ 第 1 サイドバー ] を指定し [ 保存 ] をクリック 68
開発者ポータルのページで表示されるブロックの変更 (4/4) カスタマイズ結果 69
開発者ポータルのセクションへのコンテキストの追加 (1/8) コンテキスト 様々な条件からブロックやメニューなどの配置 表示を制御するモジュール コンテキストを使用することで 開発者ポータルに対して特定の条件に応じたブロックの表示制御が可能 カスタマイズ例 Home ページ (<front>) かつロールが administrator の場合に メニューを表示する 70
開発者ポータルのセクションへのコンテキストの追加 (2/8) 設定手順 モジュールの有効化 管理メニューより [ モジュール ] を選択 Context モジュールおよび Context UI モジュールを有効化し 保存 71 パフォーマンスを向上させるために コンテキストの構成が完了した後は 再度 Context UI モジュールを無効化する
開発者ポータルのセクションへのコンテキストの追加 (3/8) 設定手順 ( 続き ) コンテキストの追加 管理者メニューより [ サイト構築 ] > [ コンテキスト ] を選択 [ 追加 ] をクリック 72
開発者ポータルのセクションへのコンテキストの追加 (4/8) 設定手順 ( 続き ) コンテキスト名を入力 名前に使用できるのは英小文字 数字 _ ( アンダースコア ) - ( ハイフン ) 73
開発者ポータルのセクションへのコンテキストの追加 (5/8) 設定手順 ( 続き ) すべての条件を AND 条件とするため [Require all conditions] にチェックを入れる [Conditions] 欄で [ パス ] を選択し 右側の [ パス ] 欄にフロントページを示す <front> を入力 74
開発者ポータルのセクションへのコンテキストの追加 (6/8) 設定手順 ( 続き ) 同様に [Conditions] 欄で [ 役割 ] を選択し [administrator] にチェックを入れる 75
開発者ポータルのセクションへのコンテキストの追加 (7/8) 設定手順 ( 続き ) [Reactions] 欄で [ ブロック ] を選択し 表示したいブロックとリージョンを指定 右列にて [menu] を展開し [ テスト ] にチェックを入れ [ 第 1 サイドバー ] の [ 追加 ] をクリック 76
開発者ポータルのセクションへのコンテキストの追加 (8/8) カスタマイズ結果 administrator の Home (<front>) ページにメニューが表示される administrator の Home (<front>) ページ以外ではメニューが表示されない administrator 以外に対しては Home ページにもメニューが表示されない 77
イメージ カルーセルの実装 (1/26) 開発者ポータルのホーム ページなどをカスタマイズしてカルーセル ( スライドショー ) を表示可能 カスタマイズ例 2 枚の画像を自動で切り替えるカルーセルをホーム ページに表示 設定手順 モジュールの有効化 管理メニューより [ モジュール ] を選択 78
イメージ カルーセルの実装 (2/26) 設定手順 ( 続き ) [Views UI] を有効にし 保存 検索フィールドで views_ui と入力することで検索可能 Views UI が有効の場合 開発者ポータルのパフォーマンスが低下します セットアップ時のみ有効にしてください 79
イメージ カルーセルの実装 (3/26) 設定手順 ( 続き ) カルーセルのコンテンツタイプを作成 管理メニューより [ サイト構築 ] > [ コンテンツタイプ ] > [ コンテンツタイプの追加 ] を選択 80
イメージ カルーセルの実装 (4/26) 設定手順 ( 続き ) コンテンツタイプ名を入力し [ 編集 ] をクリック システム内部名称 説明 ( 任意 ) を入力し [ コンテンツタイプの保存 ] をクリック 81
イメージ カルーセルの実装 (5/26) 設定手順 ( 続き ) 作成したコンテンツタイプの [ フィールドの管理 ] をクリック [Body] フィールドを削除 82
イメージ カルーセルの実装 (6/26) 設定手順 ( 続き ) [ フィールドを追加 ] 欄にラベル名 システム内部名称を入力し [ フィールドタイプ ] として [ イメージ ] を選択 [ ウィジェット ] 欄が イメージ になっていることを確認し 保存 83
イメージ カルーセルの実装 (7/26) 設定手順 ( 続き ) 他のイメージがない場合にデフォルトのイメージとして使用する画像を選択し [ フィールド設定を保存 ] をクリック [ 設定の保存 ] をクリックし 保存 84
イメージ カルーセルの実装 (8/26) 設定手順 ( 続き ) カルーセルに表示する画像をアップロード 管理メニューより [ コンテンツ ] を選択し [ コンテンツを追加 ] をクリック 前手順で作成したコンテンツタイプを選択 85
イメージ カルーセルの実装 (9/26) 設定手順 ( 続き ) 画像タイトルを入力 画像を選択して [ アップロード ] をクリックし 保存 86
イメージ カルーセルの実装 (10/26) 設定手順 ( 続き ) [Clone content] をクリックし タイトルと画像を次のスライドに含めるものに置き換えて保存 87
イメージ カルーセルの実装 (11/26) 設定手順 ( 続き ) カルーセルのビューを作成 管理メニューより [ サイト構築 ] > [ ビューを追加 ] を選択 ビューの名前を入力し 入力フィールド横の [ 編集 ] をクリック システム内部名称を入力し [ ページを作成する ] のチェックを外す 88
イメージ カルーセルの実装 (12/26) 設定手順 ( 続き ) [ ブロックを作成 ] にチェックを入れ [ 表示形式 ] 欄で [Slick carousel] を選択 [ ページ毎の件数 ] でカルーセルのスライド数を入力し [ 継続 編集 ] をクリック 89
イメージ カルーセルの実装 (13/26) 設定手順 ( 続き ) [ タイトル ] セクションのリンクをクリック タイトルを入力し [ 適用 ] をクリック 90
イメージ カルーセルの実装 (14/26) 設定手順 ( 続き ) [ フォーマット ] セクションの [ 設定 ] をクリック [Skin main] で [ デフォルト ] を選択 91
イメージ カルーセルの実装 (15/26) 設定手順 ( 続き ) [ フィールド ] セクションの [ 追加 ] をクリック 作成したコンテンツタイプを選択し [ 適用 ] をクリック 92
イメージ カルーセルの実装 (16/26) 設定手順 ( 続き ) [ ラベルの作成 ] のチェックを外し [ 適用 ] をクリック 93
イメージ カルーセルの実装 (17/26) 設定手順 ( 続き ) [ フィールド ] セクションで [ コンテンツ : タイトル ] をクリックし [ 削除 ] をクリック 94
イメージ カルーセルの実装 (18/26) 設定手順 ( 続き ) [ フィルターの条件 ] セクションで [ コンテンツ : 掲載 ( はい )] をクリックし [ 削除 ] をクリック 95
イメージ カルーセルの実装 (19/26) 設定手順 ( 続き ) [ 保存 ] をクリックして設定を保存 96
イメージ カルーセルの実装 (20/26) 設定手順 ( 続き ) 開発者ポータルのホーム ページでカルーセル機能を有効化 管理メニューより [ 環境設定 ] > [ メディア ] > [Slick carousel] を選択 [Default] の [ 編集 ] をクリック 97
イメージ カルーセルの実装 (21/26) 設定手順 ( 続き ) [ 設定 ] タブの [Autoplay] にチェックを入れ 保存 98
イメージ カルーセルの実装 (22/26) 設定手順 ( 続き ) ホーム ページでカルーセルの構成 管理メニューより [ サイト構築 ] > [ ページ ] を選択 welcome ページの [ 編集 ] をクリック 99
イメージ カルーセルの実装 (23/26) 設定手順 ( 続き ) [Panel] セクションの [ コンテンツ ] をクリック ようこそバナーを削除するために [Top] ペインの設定アイコンをクリックし [ 削除 ] を選択 100
イメージ カルーセルの実装 (24/26) 設定手順 ( 続き ) [Top] ペインの設定アイコンをクリックし [ コンテンツを追加 ] を選択 101
イメージ カルーセルの実装 (25/26) 設定手順 ( 続き ) [ その他 ] > [View: スライド ショー : Block] を選択し [Finish] をクリック [Update and save] をクリック 102
イメージ カルーセルの実装 (26/26) 確認結果 103
その他 カスタム ブロックでの PHP の使用 カスタム テーマへのカスタム JavaScript の追加 104
カスタム ブロックでの PHP の使用 (1/10) PHP を使用してブロックのカスタマイズが可能 カスタマイズ例 administrator に対して PHP コードの実行を許可し PHP コードを使用してブロック内に文字列を表示する 105
カスタム ブロックでの PHP の使用 (2/10) 設定手順 PHP filter の有効化 ( デフォルト : 無効 ) 管理メニューより [ モジュール ] を選択 [PHP filter (php)] を有効化 検索フィールドに php と入力することで検索可能 106
カスタム ブロックでの PHP の使用 (3/10) 設定手順 ( 続き ) 役割毎の PHP コードの実行許可設定 ( デフォルト : すべての役割で実行不可 ) 管理メニューより [ 環境設定 ] > [ コンテンツ作成 ] > [ テキストフォーマット ] を選択 107
カスタム ブロックでの PHP の使用 (4/10) 設定手順 ( 続き ) [PHP code] の [ 設定 ] クリックし [ 役割 ] 欄で [administrator] にチェックを入れて保存 108
カスタム ブロックでの PHP の使用 (5/10) 設定手順 ( 続き ) WYSIWYG プロファイルの PHP コード無効化 ( デフォルト : 有効 ) 管理メニューより [ 環境設定 ] > [ コンテンツ作成 ] > [Wysiwyg profiles] を選択 WYSIWYG エディターは PHP コードと互換性がないため WYSIWYG プロファイルで PHP コードを無効化する必要があります 109
カスタム ブロックでの PHP の使用 (6/10) 設定手順 ( 続き ) [PHP code] の [ 編集 ] をクリック [ 基本セットアップ ] を展開し [Enabled by default] のチェックを外して保存 110
カスタム ブロックでの PHP の使用 (7/10) 設定手順 ( 続き ) ブロックに PHP コードを追加 管理メニューより [ サイト構築 ] > [ ブロック ] > [ ブロックを追加 ] を選択 111
カスタム ブロックでの PHP の使用 (8/10) 設定手順 ( 続き ) ブロックのタイトルと説明を入力 [ ブロックの本文 ] 欄に以下の PHP コードを入力し 保存 <?php print mycustomblockcode";?> 日本語の Knowledge Center の記載されている PHP コードに文法誤りがあるため要注意 英語版に記載の PHP コードが正しい 112
カスタム ブロックでの PHP の使用 (9/10) 設定手順 ( 続き ) ブロックのリージョンで [ 第 1 サイドバー ] を選択し 保存 113
カスタム ブロックでの PHP の使用 (10/10) カスタマイズ結果 114
カスタム テーマへのカスタム JavaScript の追加 (1/3) カスタム テーマに JavaScript を追加することで 動的処理や動きの追加 / 上書きが可能 カスタマイズ例 サンプルとしてコンソールにメッセージを出力する JavaScript をテーマへ追加 サンプル テーマは下記 URL より zip ファイルをダウンロードして使用 https://www.ibm.com/support/knowledgecenter/ja/ssmned_5.0.0/c om.ibm.apic.devportal.doc/banka_connect_theme.zip 設定手順 追加したい JavaScript を作成 テキスト エディターで以下の JavaScript コードを入力し console.js として保存 console.log("test of JavaScript"); 115
カスタム テーマへのカスタム JavaScript の追加 (2/3) 設定手順 ( 続き ) インストールするテーマの.info ファイルに以下の行を追記 banka_connect_theme.info ; Custom JS scripts[] = console.js カスタム テーマを圧縮してインストールし 有効化 テーマのインストールおよび有効化手順は 当資料の 追加テーマのインストール を参照 116 カスタム テーマは以下の場所にインストールされる /var/aegir/platforms/devportal-7.x-5.0.1.0-20160530- 2209/sites/< 開発者ポータルのホスト名 (FQDN)>/themes/< カスタム テーマ名 > 青字部分は環境に依存 admin@apicdevportal:~$ ls /var/aegir/platforms/devportal-7.x-5.0.1.0-20160530- 2209/sites/apicdevportal.ise.ibm.com/themes/banka_connect_theme banka_connect_hero.jpg banka_logo.png LICENSE.txt test.js banka_connect_theme.info css screenshot.png theme-settings.php banka_logo.jpg favicon.ico template.php
カスタム テーマへのカスタム JavaScript の追加 (3/3) 確認結果 117