[IBM API Connect] 開発者ポータルを多言語対応する


# 概要
IBM API Connect の開発者ポータルを多言語対応させる方法について、このところ立て続けに聞かれましたので、簡単にまとめてみました。作業の取っ掛かりになれば幸いです。
ここで言う多言語対応とは、ブラウザのLocaleやユーザーアカウントの設定によって開発者ポータルの表示言語を切り替えることを意図しています。開発者ポータルの多言語対応を考える場合、大きく分けて以下の2つの対応が必要です。

1. Drupalサイトの多言語対応
Drupalは多言語に対応していますので、コンテンツの翻訳リソースを用意していけば対応可能です。

2. API定義文書(Swagger)の多言語対応
Swagger2.0はそのままでは多言語対応していませんので、API定義文書を多言語対応するためには[ベンダー拡張][swagger-extensions]を利用します。

# 前提環境
本稿は執筆時点 (2017/12/15) のIBM Cloud環境を前提としています。オンプレミス版をご利用の場合はIBM API Connect v5.0.8.1が相当します。

## Drupalサイトの多言語対応
Drupalサイトを多言語対応するためには、「翻訳」リソースを用意する必要があります。IBM API Connectの提供する開発者ポータルに初期状態で含まれているコンテンツの大半は日本語の翻訳リソースが付属していますが、不足している分についてはユーザーが追加することも可能です。

例えば、初期状態でメニューは以下のようになっています。
![image](https://qiita-image-store.s3.amazonaws.com/0/129138/af6b720d-c537-6519-ee4a-6ba7ee268f35.png)

日本語と英語が混じっていて気持ち悪いので、日本語訳を追加してみます。
**以下の作業はポータルの管理者としてログインした状態で行います。**

`サイト構築 > メニュー > メインメニュー` を選択します。
![image](https://qiita-image-store.s3.amazonaws.com/0/129138/5cf6ea86-411d-0525-2434-6e1409368e40.png)

メインメニュ―のアイテム一覧が表示されます。まずは `Getting Started` の `翻訳` を選択します。
![image](https://qiita-image-store.s3.amazonaws.com/0/129138/40fa3317-dcb6-935d-056a-b03916a2035b.png)

各言語の翻訳リソース一覧が表示されます。`Japanese` のエントリを見ると `Getting Started` がそのまま訳として登録されてしまっているので、`翻訳`を選択して訳を修正します。
![image](https://qiita-image-store.s3.amazonaws.com/0/129138/f52fb2b9-bd99-d3df-75c9-8f195ce593af.png)

タイトルや説明を適宜修正し、 `翻訳を保存` で変更内容を保存します。
![image](https://qiita-image-store.s3.amazonaws.com/0/129138/788b1836-b8e4-cd76-760e-b5ee1ecb6d73.png)

他のメニュー項目についても同様に翻訳を修正し、ホームへ戻るとメニューの表示が更新されています。
![image](https://qiita-image-store.s3.amazonaws.com/0/129138/86468b68-6206-3dee-8c03-958412f2cac5.png)


## API定義文書(Swagger)の多言語対応

IBM API Connect ではベンダー拡張である x-ibm-languages を使用することで多言語対応のための翻訳リソースを Swagger 文書内に挿入できます。x-ibm-languagesの使い方についての詳細は[マニュアルの記述][kc-multilang]を参照してください。

例えば、以下のようなAPI製品YAMLを例にとります。

```yaml:greeting-service_1.0.0.yaml
product: 1.0.0
info:
  name: greeting-service
  title: Greeting Service
  version: 1.0.0
  description: This service provides a set of greeting APIs.
visibility:
  view:
    enabled: true
    type: public
    tags: []
    orgs: []
  subscribe:
    enabled: true
    type: authenticated
    tags: []
    orgs: []
apis:
  hello-api:
    id: 5a33905d0cf236acd58e6cc0
plans:
  Default:
    title: Default Plan
```

このYAMLで定義されたAPI製品は、開発者ポータル上では以下のように表示されます。
![image](https://qiita-image-store.s3.amazonaws.com/0/129138/a30bd60d-3147-4b7e-e5cb-6d15adc0d7c1.png)

x-ibm-languages を使うと、以下のように様々な要素に対する翻訳リソースを定義できます。

```yaml
x-ibm-languages:
  title:
    ja: グリーティング・サービス
  description:
    ja: このサービスはグリーティングAPIを提供します。
```

API製品YAMLに組み込むと、このようになります。

```yaml:greeting-service_1.0.1.yaml
product: 1.0.0
info:
  name: greeting-service
  title: Greeting Service
  version: 1.0.0
  description: This service provides a set of greeting APIs.
  x-ibm-languages:
    title:
      ja: グリーティング・サービス
    description:
      ja: このサービスはグリーティングAPIを提供します。
visibility:
  view:
    enabled: true
    type: public
    tags: []
    orgs: []
  subscribe:
    enabled: true
    type: authenticated
    tags: []
    orgs: []
apis:
  hello-api:
    id: 5a33905d0cf236acd58e6cc0
plans:
  Default:
    title: Default Plan
```

改めて開発者ポータルの画面を表示すると、画面が無事に翻訳されています。
![image](https://qiita-image-store.s3.amazonaws.com/0/129138/45a34547-aa9a-0d37-3077-cb0c23ebf99e.png)

ブラウザの言語設定を変更して、`Accept-Language`ヘッダーを`en`優先にするとこのように英語表示に切り替わります。
![image](https://qiita-image-store.s3.amazonaws.com/0/129138/042a8ee7-68e7-d316-6f91-9b7c47b13836.png)


# 言語判定ルールの変更方法
開発者ポータルの表示言語の判定ルールは、デフォルトでは以下の優先順位となっています。

1. ログイン・ユーザー毎のプロファイルで指定された言語
1. ブラウザの言語

これらの定義はDrupalサイトの構成定義によって制御することが可能です。

`構成 > 地域と言語 > 言語 > 判定と選択` を選択して `
言語の判定` 画面へアクセスします。
![image](https://qiita-image-store.s3.amazonaws.com/0/129138/371d37d0-fe3e-37b7-4bdf-bca6ab910049.png)

`ユーザーインターフェーステキスト 言語の判定` の設定によって判定ルールの優先順位や詳細を定義することが可能です。
![image](https://qiita-image-store.s3.amazonaws.com/0/129138/2bbd6aef-a554-5e35-500c-f7a08bedf415.png)

また `コンテンツ 言語の判定` はデフォルトでは `インターフェース` に設定されていますので、コンテンツの言語判定はユーザーインターフェースの判定に従います。コンテンツとユーザーインターフェース (フレーム、タイトル、ヘルプ等) で異なる言語を使いたい場合はこちらを変更します。
![image](https://qiita-image-store.s3.amazonaws.com/0/129138/7aa82671-36cb-3c90-330f-55696e9ac472.png)

ユーザーインターフェース、コンテンツなどDrupal Coreが提供する言語タイプについてはDrupalのマニュアル ([Language Negotiation API][drupal-negotiation-api]) をご参照ください。

# 参考情報
- [Knowledge Center - Tutorial: Customizing themes for the Developer Portal][kc-tutorial-theme]
- [Knowledge Center - Using x-ibm-languages to create multilingual API and Product documentation][kc-multilang]
- [Drupal 7 - Enable language negotiation][drupal-negotiation-enable]
- [Drupal 7 - Language Negotiation API][drupal-negotiation-api]
- [Swagger2.0 - Swagger Extensions][swagger-extensions]

[kc-tutorial-theme]:https://www.ibm.com/support/knowledgecenter/SSMNED_5.0.0/com.ibm.apic.devportal.doc/tutorial_portal_customizing_css.html
[kc-multilang]:https://www.ibm.com/support/knowledgecenter/en/SSMNED_5.0.0/com.ibm.apic.toolkit.doc/rapic_swagger_languages.html
[drupal-negotiation-enable]:https://www.drupal.org/docs/7/multilingual/translating-site-interfaces/enable-language-negotiation
[drupal-negotiation-api]:https://www.drupal.org/node/1497272
[swagger-extensions]:https://swagger.io/docs/specification/2-0/swagger-extensions/