In-context Editor (Strings)

本コンテンツはPhrase Language AIの機械翻訳により、英語から翻訳されています。

利用可能対象

Team、Professional、Business、Enterprise、およびSoftware UI/UXプラン

ライセンスに関する質問は、営業担当までお問い合わせください。

利用可能対象

高度なエンタープライズプラン(従来)

ライセンスに関する質問は、営業担当までお問い合わせください。

In-context Editorは、翻訳者がより効率的に仕事をこなし、Strings 翻訳エディタとの直接的な統合機能を通じてWebサイトのページを翻訳できるように設計されています。

現在、2つのバージョンが利用可能です：

In-context Editor：

新しい機能（多言語ビュー、レイアウトオプション、バッチアクション、コラボレーション機能など）と、翻訳エディタのUIが含まれています。
古いIn-context Editor。

In-context Editorをインストールした後、多くの技術と連携するようにカスタマイズできます。

Strings In-context Editorのインストール

要件

In-context Editorを使用するには、アプリケーションに以下が必要です：

WebベースのWebサイト、Webアプリケーション、モバイルサイトなど。
翻訳者がエディタを実行しているWebサーバーにアクセスできること。必要に応じて、ローカル環境でも可能です。
キーと値のローカリゼーションファイル構造。

翻訳可能なStringsが抽出され、キーと値の構造を使用して翻訳をレンダリングするビューレイヤーを持つWebサイト。
ビューレイヤーまたはテンプレートレイヤーに公開されたキー名。
エディタをレンダリングするJavaScriptスニペット。
理想的には、翻訳専用の環境。これはステージング環境のコピーにすることができます。初期設定にはより多くの仕事が必要ですが、より良いワークフローと高い安定性が得られます。

専用の環境を用意できない場合は、既存のステージング環境を使用し、必要に応じてIn-context Editorを有効にするオプションを選択できます。

JavaScript Snippet

アプリケーションレイアウトにJavaScriptスニペットを含めます。

このスニペットには、以下のために必要なコードが含まれています：

Phrase Strings APIとの通信。
ユーザーインターフェースのレンダリング。
ログインの提供。

プロジェクト IDはプロジェクト設定にあります。

アカウント IDはStrings組織設定にあります。

サンプル:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // Do not change this name for the config to work
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // Set to 'us' for US data center
      prefix: '{{__', // Set to the prefix for the key format in the view templates
      suffix: '__}}', // Set to the suffix for the key format in the view templates
      disableShortcuts: false, // Set to true to disable keyboard shortcuts
      autoLowercase: true, // Set to false if keys contain capital letters
    };
  </script>
  <script type=\"module\" async=\"\" src=\"https://cdn.phrase.com/strings/plugins/editor/latest/ice/index.js\"></script>

Webフレームワークのインストール

i18next

備考

i18next Phrase In-context Editor Post Processorは、19.5.1より新しいすべてのi18nextバージョンをサポートしています。このライブラリは以前のバージョンでも動作する可能性がありますが、公式にはサポートされておらず、特定のアップデートやバグ修正は行われない場合があります。

この環境にIn-context Editorをインストールするには、以下の手順に従ってください：

お好みのパッケージマネージャーを使用して、i18next-phrase-in-context-editor-post-processorライブラリをインストールします：
```
# yarn
yarn add i18next-phrase-in-context-editor-post-processor

# npm
npm install i18next-phrase-in-context-editor-post-processor
```
備考

推奨されるライブラリのバージョンは1.4.0以降です。

またはCDN経由で読み込みます：
```
<script src="https://unpkg.com/i18next-phrase-in-context-editor-post-processor"></script>
```
Bootstrap (サンプル):
```
import i18next from 'i18next';
import i18nextXHRBackend from 'i18next-xhr-backend';

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'en',
        debug: true,
        ns: ['special', 'common'],
        defaultNS: 'special',
        backend: {
            // load some translations from i18next-gitbook repo
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // do something on i18next initialization
    });
```
ライブラリを統合するには:
1. i18next-phrase-in-context-editor-post-processorライブラリからPhraseInContextEditorPostProcessorをインポートします。
2. PhraseConfigを引数として渡し、新しいi18next Phrase In-context Editor Post Processorインスタンスを作成します。
3. 新しく作成したi18next Phrase In-context Editor Post Processorインスタンスをi18nextuseメソッドに渡します。
4. phraseInContextEditor文字列をpostProcess配列プロパティに追加します（i18nextinitメソッドの設定オブジェクト内で渡されます）。

セットアップでi18nextインスタンスにICE JavaScriptスニペットを追加します。

サンプルスニペット:

i18nextInstance.use(new PhraseInContextEditorPostProcessor({
      phraseEnabled: true,
      projectId: '00000000000000004158e0858d2fa45c',
      accountId: '0bed59e5',
    }))

備考

ICEを正常にセットアップするには、accountIdを指定する必要があります。アカウント IDは、Strings組織設定にあります。

必要に応じて、useOldICE属性を設定してold ICEに切り替えます:

i18nextInstance.use(new PhraseInContextEditorPostProcessor({
      phraseEnabled: true,
      projectId: '00000000000000004158e0858d2fa45c',
      accountId: '0bed59e5',
      useOldICE: true,
    }))

In-context Editorを開始します。
Webブラウザでアプリケーションを開き、In-context Editorを表示します。Phrase組織のユーザーでサインインします。

Configuration options and sample methods。

Vue I18n

備考

Vue I18n Phrase In-context Editorは、Vue I18nバージョン8.17.5以降のすべてをサポートしています。このライブラリは以前のバージョンでも動作する可能性がありますが、公式にはサポートされておらず、特定のアップデートやバグ修正は行われません。

この環境にIn-context Editorをインストールするには、以下の手順に従ってください：

好みのパッケージマネージャーを使用してnewest packageをインストールします:

# yarn
yarn add vue-i18n-phrase-in-context-editor

# npm
npm install vue-i18n-phrase-in-context-editor

またはCDNで読み込みます（手動で window['vue-i18n-phrase-in-context-editor'] を登録してください）：

<script src="https://unpkg.com/vue-i18n-phrase-in-context-editor/dist/vue-i18n-phrase-in-context-editor.umd.min.js"></script>

Bootstrap (サンプル):

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: {
      hello: 'Hello world!'
  }
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');

ライブラリを統合するには:

Vue I18n Phrase In-context Editor ライブラリをインポートします。
新しい Vue I18n Phrase In-context Editor インスタンスを作成し、最初の引数として Vue I18n インスタンスを、2番目の引数として Phrase Config を渡します。

Configuration options and sample methods。

React (intl)

備考

このライブラリは、IE11以前のブラウザでは仕事ができない可能性があります。古いブラウザのサポートが必要な場合は、ビルドパイプラインにBabelを追加します。

このライブラリは、react-intlパッケージの共通コンポーネントを継承しています。initializePhraseAppEditor を呼び出してPhraseを有効にすると、コンポーネントの動作が変更されます。

この環境にIn-context Editorをインストールするには、次の手順に従います：

NPM経由で最新のパッケージをインストールします：
```
npm install react-intl-phraseapp
```
または原文からビルドします：
```
npm run dist
```
```
npm install
```

設定：

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};

プロジェクトのプロジェクト ID は、プロジェクト設定にあります。

アカウント ID は、Strings 組織設定にあります。

Reactアプリにスニペットを追加します：

import {initializePhraseAppEditor} from 'react-intl-phraseapp'

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountId: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};

initializePhraseAppEditor(config);

FormattedMessage のすべてのインポートを見つけ、原文を react-intl から react-intl-phraseapp に変更します。
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
jestを使用してユニットテストを実行します：
```
npm test
```

コードサンプル

このデモは、Phrase In-context Editorとreact-intlの統合機能を示しています。

Angular 2 (ngx-translate)

前提条件

サインアップ Phrase Strings アカウント。
Angular 2 アプリケーションでのローカライズには ngx-translate モジュールを使用してください。

この環境にIn-context Editorをインストールするには、次の手順に従います：

NPM でインストール:
```
npm install ngx-translate-phraseapp
```

設定：

import { initializePhraseAppEditor, PhraseConfig } from 'ngx-translate-phraseapp';

let config: PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseEnabled: true,
};

プロジェクトのプロジェクト ID は、プロジェクト設定にあります。

アカウント ID は、Strings 組織設定にあります。

必要に応じて、useOldICE属性を設定してold ICEに切り替えます:

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>',
  phraseEnabled: true,
  useOldICE: true,
};

initializePhraseAppEditor(config);

必要に応じて、US データセンターを通じて仕事できるように US 固有の URL を追加してください:

baseUrl: "https://us.app.phrase.com",
apiBaseUrl: 'https://api.us.app.phrase.com/api/v2',
oauthEndpointUrl: "https://api.us.app.phrase.com/api/v2/authorizations",
profileUrl: "https://us.app.phrase.com/settings/profile",

デフォルトでは、エディタのドキュメントパーサーはすべてのキーを小文字に変換します。この動作で問題が発生し、エディタ内で大文字と小文字を区別するキーを使用したい場合は、自動小文字変換機能を無効にしてください:
```
let config = {
  // ...
  autoLowercase: false
}
```

これらのスニペットを Angular アプリに追加してください:

app.component.ts

import { initializePhraseAppEditor, PhraseAppCompiler, PhraseConfig} from 'ngx-translate-phraseapp'

let config: PhraseConfig = {
  projectId: '<YOUR_PROJECT_ID>',
  accountID: '<YOUR_ACCOUNT_ID>'
  phraseEnabled: true,
};

initializePhraseAppEditor(config);

app.module.ts

import { TranslateModule, TranslateLoader, TranslateCompiler } from '@ngx-translate/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { PhraseAppCompiler } from 'ngx-translate-phraseapp'
import { AppComponent } from './app.component';


export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

コードサンプル

この demo app は、In-context Editor と Angular および ngx-translate の統合機能を紹介するものです。

Ruby on Rails (i18n)

備考

このライブラリは、古いブラウザや Microsoft IE11 ではそのままでは仕事しない可能性があります。それらのブラウザをサポートする必要がある場合は、ビルドパイプラインに Babel を追加してください。

前提条件

サインアップ Phrase Strings アカウント。
Rails<2> も使用している優れた i18n gem を使用してください。

この環境にIn-context Editorをインストールするには、次の手順に従います：

以下のいずれかの方法を使用して、目的の環境に phraseapp-in-context-editor-ruby ライブラリを追加してください。
- Gem 経由
```
gem install phraseapp-in-context-editor-ruby
```
- Bundler 経由
  
  Gemfileに追加します:
```
gem 'phraseapp-in-context-editor-ruby
```
- 最新かつ最高の機能を利用するために、原文から直接ビルドします:
```
bundle && gem build
```
Railsジェネレーターを実行して、初期化ファイルを作成します:
```
rails generate phraseapp_in_context_editor:install --account_id=<YOUR_ACCOUNT_ID> --project-id=<YOUR_PROJECT_ID>
```
プロジェクトのプロジェクト ID は、プロジェクト設定にあります。

アカウント ID は、Strings 組織設定にあります。
Rubyスニペットをアプリケーションレイアウトapp/views//layouts/application.html.erbに追加します:
```
<%= load_in_context_editor %>
```

以下の設定を初期化ファイル/config/initializers/phraseapp_in_context_editor.rbに追加します:

  config.enabled = true
  config.project_id = "YOUR_PROJECT_ID"
  config.account_id = "YOUR_ACCOUNT_ID"
  config.datacenter = "eu"

必要に応じて、USデータセンターを設定し、USエンドポイントでの作業を有効にします:

  config.enabled = true
  config.project_id = "YOUR_PROJECT_ID"
  config.account_id = "YOUR_ACCOUNT_ID"
  config.datacenter = "us"

任意のWebブラウザでアプリケーションを開き、In-context Editorがアプリに適用されていることを確認します。Phrase組織のユーザーでサインインします。

コードサンプル

このdemoは、Phrase In-context Editorとreact-i18nextの統合機能を示しています。

Django

前提条件

サインアップ Phrase Strings アカウント。
Python用のDjangoフレームワークを使用します。

備考

ICEの旧バージョンは、バージョン2.0.0以降利用できません。

この環境にIn-context Editorをインストールするには、次の手順に従います：

pipを使用してdjango-phraseパッケージをインストールします:
```
$ pip install django-phrase
```
インストール済みアプリの一覧にPhraseを追加します:
```
INSTALLED_APPS = (

    'phrase',

)
```
以下のテンプレートスニペットをレイアウトファイルtemplates/base_generic.htmlまたは同等のファイルに追加します:
```
{% load phrase_i18n %}
{% phrase_javascript %}
```
テンプレートでphrase_i18nテンプレートタグを使用します（例: demo/ice_demo/templates/index.html）:
```
{% load phrase_i18n %}
```

以下の設定をsettings.pyに追加します:

    # Phrase In-Context Editor settings
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # Set your own account id
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Set your own project id
    PHRASE_DATACENTER = "eu"  # Choose your datacenter 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

プロジェクトのプロジェクト ID は、プロジェクト設定にあります。

アカウント ID は、Strings 組織設定にあります。

問題が発生した場合は、JavaScript snippetを手動で統合することができます。

任意のWebブラウザでアプリケーションを開き、In-context Editorがアプリに適用されていることを確認します。Phrase組織のユーザーでサインインします。

GitHub上のDjangoアダプターコード

コードサンプル

このdemoアプリケーションは、In-context EditorをDjangoアプリケーションと統合する方法を示しています。

Flask

前提条件

サインアップ Phrase Strings アカウント。
PythonにはFlaskフレームワークを使用します。

備考

ICEの旧バージョンは、バージョン2.0.0以降利用できません。

この環境にIn-context Editorをインストールするには、次の手順に従います：

pipを使用してFlask-Phraseパッケージを追加します。
```
pip install Flask-Phrase
```

以下の設定をFlaskアプリ（app.configまたはconfig.py）に追加します。

PHRASEAPP_ENABLED = True
PHRASEAPP_PREFIX = '{{__'
PHRASEAPP_SUFFIX = '__}}'

アプリのコードは以下のようになります。

from flask import Flask, [...]
from flask_babel import Babel
from flask_phrase import Phrase, gettext, ngettext
app = Flask(__name__)
babel = Babel(app)
phrase = Phrase(app)

以下のタグを使用して、PhraseのJavaScriptスニペットをベースレイアウトファイルに追加します（テンプレートファイルのセクション内に配置する必要があります）。

<script>
    window.PHRASEAPP_CONFIG = {
        projectId: "YOUR-PROJECT-ID",
        accountId: "YOUR-ACCOUNT-ID",
        datacenter: "eu",
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://cdn.phrase.com/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

プロジェクトのプロジェクト ID は、プロジェクト設定にあります。

アカウント ID は、Strings 組織設定にあります。

必要に応じて、USデータセンターを設定し、USエンドポイントでの作業を有効にします:

window.PHRASEAPP_CONFIG = {
    projectId: "YOUR-PROJECT-ID",
    accountId: "YOUR-ACCOUNT-ID",
    datacenter: "us",
};

PHRASEAPP_ENABLED = Trueの場合、パッケージは翻訳関数からの戻り値を変更し、ICEが読み取れるファイル形式で提示します。Falseに設定すると、標準のFlask-Babel's gettext関数にフォールバックします。

コードサンプル

このデモアプリケーションは、In-context EditorをFlaskアプリケーションに統合する方法を示しています。

Symfony 5.x

前提条件

サインアップ Phrase Strings アカウント。
SymfonyフレームワークをPHPに使用します。

備考

バージョン2.0.0はSymfony 5以降をサポートしています。Symfony 2、3、または4を使用している場合は、ICEの旧バージョンを確認してください。

In-context EditorをSymfonyアプリケーションに統合するには、以下の手順に従ってください。

PhraseStringsInContextEditorとその内容を、リポジトリの/src/Serviceフォルダーまたは目的の場所にコピーします。別の場所に配置した場合は、それに応じて名前空間を調整してください。
config/services.yamlを調整して、翻訳者サービスをPhraseのアダプターで装飾します。
```
services:
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        decorates: translator
```

In-context EditorがWebページを読み取れるように、{% block javascripts %}の間に以下のJavaScriptスニペットをベースまたはTwigレイアウトテンプレートに追加します。

<script>
    window.PHRASEAPP_CONFIG = {
        accountId: '0bed59e5',
        projectId: '00000000000000004158e0858d2fa45c',
        datacenter: 'eu',
        origin: 'phrase-symfony',
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://cdn.phrase.com/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

SymfonyアプリケーションがIn-context Editorに接続されました。

プロジェクトのプロジェクト ID は、プロジェクト設定にあります。

アカウント ID は、Strings 組織設定にあります。

必要に応じて、USデータセンターを設定し、USエンドポイントでの作業を有効にします:

window.PHRASEAPP_CONFIG = {
    projectId: "YOUR-PROJECT-ID",
    accountId: "YOUR-ACCOUNT-ID",
    datacenter: "us",
};

アプリケーションをリロードし、Phraseの認証情報でログインして、Webページ上で直接翻訳プロセスを開始します。

コードサンプル

このdemoアプリケーションは、In-context EditorをSymfonyアプリケーションと統合する方法を示しています。

In-context Editorのセットアップ

キーの公開

通常、ビューレイヤーは、翻訳可能文字列（つまりキー）の名前を何らかの翻訳メソッドやビューヘルパーに渡すことで翻訳をレンダリングします。

PHPコードのサンプル：

$translations = array(

  "page.headline" => "Some Headline",

  "page.link.label" => "I am a link",

  "page.link.hint" => "Click me"

)

function translate($keyName) {

  return $translations[$keyName];

}

テンプレートは、実際の翻訳済み文字列ではなく、translate()メソッドの出力結果をレンダリングします：

<h1><?php echo translate("page.headline"); ?></h1>

ファイル形式の設定

どのキーの翻訳を表示するかをテンプレート内で指定する必要があります。

翻訳の代わりにキーを表示するには、このファイル形式を使用してください：

{{__phrase_NameOfYourKey__}}

例：

テンプレート内にキーpage.headlineがある場合、文字列{{__phrase_page.headline__}}を表示します。

必要なファイル形式でキーを表示するように、translate()ヘルパーメソッドを変更します：

function translate($keyName) {

  if ($phraseModeEnabled) {

    return "";

  } else {

    return $translations[$keyName];

  }

}

フレームワークに応じて、コード内の翻訳ヘルパーをオーバーライドするか、テンプレートで使用するラップされたバージョンを作成できます。

例：

const t = (key: string) => '{{__phrase_' + key + '__}}'

キーと特殊文字のエスケープ

キーが認識可能なファイル形式に変換されるようにしてください。

In-context Editorに表示する際、以下のリストにある文字はエスケープする必要があります：

文字	エスケープシーケンス	たとえば
<	`[[[[[[html_open]]]]]]`	{{__phrase__<key__}} は {{__phrase__key[[[[[[html_open]]]]]]__}} になります
>	`[[[[[[html_close]]]]]]`	{{__phrase__key>__}} は {{__phrase__[[[[[[html_close]]]]]]key__}} になります

自動大文字小文字変換

デフォルトでは、In-context Editor のドキュメントパーサーはすべてのキーを小文字に変換します。この動作で問題が発生し、In-context Editor 内で大文字と小文字を区別するキーを使用したい場合は、自動小文字変換機能を無効にします。

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

キーデコレータのカスタマイズ

In-context Editor を使用する場合、ドキュメントのコンテキスト内で一意の識別キーを生成するために、キー名は通常デコレータ（デフォルトでは中括弧）で囲まれます。

{{__phrase_YOUR.KEY__}}

これが同様の構文を使用する他のライブラリ（AngularJS や Ember.js を含むクライアントサイドのテンプレートエンジンなど）と競合を引き起こす場合は、セットアップで In-context Editor のデコレータのプレフィックスとサフィックスを変更してください。In-context Editor がどのデコレータを検索すべきかをパーサーに指示するには、JavaScript スニペットの前に以下の設定値を追加します。

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

これは、[[__ で始まり __]] で終わるタグを検索するようエディタに指示します。

[[__phrase_YOUR.KEY__]]

phraseapp-in-context-editor-ruby gem を使用して In-context Editor 機能を提供している場合は、デコレータが設定されていることを確認してください。

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

gem を使用していない場合は、カスタムコード内でキー名の公開パターンが調整されていることを確認してください。

In-context Editor の有効化と無効化

この設定は、phraseapp-in-context-editor-ruby gem を使用している場合にのみ利用可能です。

In-context Editor はデフォルトで無効になっています。

In-context Editor は明示的に有効または無効にできます。これは、JavaScript スニペットの組み込み（ビューヘルパーを使用する場合）およびビュー内での装飾されたキー名のレンダリングに影響します。

PhraseApp::InContextEditor.enabled = true|false

フラグを環境変数にバインドする例：

PhraseApp::InContextEditor.enabled = (ENV["IN_CONTEXT_EDITING"] == "1")

完全再解析

ReactなどのVirtual DOMを使用するJavaScriptフレームワークでIn-context Editorを使用する場合は、fullReparseを有効にしてください。これにより、DOMの変更が検出されたときに適切な再解析が可能になります。

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

Webページへの出力のサニタイズ

In-context Editorは、sanitizeプロパティに関数を提供することで、翻訳がWebページに挿入される前にエスケープまたは変更するように構成できます。

この関数は、最初の引数として翻訳文字列を受け取り、文字列を返す必要があります。

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

シングルサインオン

シングルサインオンを使用しており、SSOを有効にしてIn-context Editorを初期化したい場合は、JavaScriptスニペットの前に以下の設定値を追加してください。

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

ユーザーにSSOを使用したサインオンを要求するには、enforcedパラメータを設定します。

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

旧In-context Editor: セットアップ

Webフレームワークのインストール

Angular 2 (ngx-translate)

この環境にIn-context Editorをインストールするには、以下の手順に従ってください。

NPMでインストールします。
```
npm install ngx-translate-phraseapp
```

設定します。

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "{{__",
  suffix: "__}}",
  fullReparse: true
};

プロジェクトのプロジェクト IDは、プロジェクト設定にあります。

デフォルトでは、エディタのドキュメントパーサーはすべてのキーを小文字に変換します。この動作で問題が発生し、エディタ内で大文字と小文字を区別するキーを使用したい場合は、自動小文字変換機能を無効にします。
```
let config = {
  // ...
  autoLowercase: false
}
```

Angularアプリにこれらのスニペットを追加します。

app.component.ts

import { initializePhraseAppEditor, PhraseAppCompiler} from 'ngx-translate-phraseapp'

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "{{__",
  suffix: "__}}",
  fullReparse: true
};

initializePhraseAppEditor(config);

app.module.ts

import { TranslateModule, TranslateLoader, TranslateCompiler } from '@ngx-translate/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { PhraseAppCompiler } from 'ngx-translate-phraseapp'

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        provide: TranslateCompiler,
        useClass: PhraseAppCompiler
      }
    }),"}]}
  ],
  providers: [],
  bootstrap: [AppComponent]
})

コードサンプル

このデモアプリは、Angularおよびngx-translateとIn-context Editorの統合機能を紹介するものです。

AngularJS (angular-translate)

この環境にIn-context Editorをインストールするには、以下の手順に従ってください。

Bower経由でangular-phraseをインストールします（または手動でダウンロードします）：
```
$ bower install angular-phrase
```
angular-translateモジュールを読み込んだ後、既存のAngularJSアプリケーションにangular-phraseモジュールを追加します：
```
var myApp = angular.module("myApp", ['pascalprecht.translate', 'phrase']);
```
モジュールを設定します：
```
myApp.value("phraseProjectId", "YOUR-PROJECT-ID");

myApp.value("phraseEnabled", true);

myApp.value("phraseDecoratorPrefix", "");
```
プロジェクトのプロジェクト IDは、プロジェクト設定にあります。これにより、いくつかの設定オプションを含む初期化ファイルが作成されます。
<head>タグ内のアプリケーションにphrase-javascriptタグを追加します：
```
<phrase-javascript></phrase-javascript>
```
アプリケーションを任意のWebブラウザで開き、In-context Editorが適用されていることを確認します。Phrase組織のユーザーでサインインします。

GitHub上のangular-phrase

コードサンプル

このデモアプリケーションは、angular-phraseを使用してAngularJSをローカライズする方法を示しています。

Django

この環境にIn-context Editorをインストールするには、以下の手順に従ってください。

pipを使用してdjango-phraseパッケージをインストールします：
```
$ pip install django-phrase
```
インストール済みアプリの一覧にPhraseを追加します：
```
INSTALLED_APPS = (

    'phrase',

)
```
テンプレートでphrase_i18nテンプレートタグを使用します：
```
{% load phrase_i18n %}
```
django-phraseが翻訳メソッドをオーバーライドできるようにするには、i18nの後にphrase_i18nを読み込みます。
レイアウトにJavaScriptスニペットを追加します：
```
{% phrase_javascript %}
```

プロジェクトのIn-context Editorを以下のオプションで設定します：

PHRASE_ENABLED = TruePHRASE_PROJECT_ID = 'YOUR_PROJECT_ID'PHRASE_PREFIX = '{{__'PHRASE_SUFFIX = '__}}'

アプリケーションを任意のWebブラウザで開き、In-context Editorが適用されていることを確認します。Phrase組織のユーザーでサインインします。

Django adapter code on GitHub

コードサンプル

このdemoアプリケーションは、In-context EditorをDjangoアプリケーションと統合する方法を示しています。

React (intl)

備考

このライブラリは、react-intlパッケージの共通コンポーネントを継承しています。initializePhraseAppEditorを呼び出してPhraseが有効になっている場合、コンポーネントの動作が変更されます。

この環境にIn-context Editorをインストールするには、以下の手順に従ってください。

NPM経由でパッケージをインストールします：
```
npm install react-intl-phraseapp
```
または原文からビルドします：
```
npm run dist
```
```
npm install
```

設定します。

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};

プロジェクトのプロジェクト IDは、プロジェクト設定にあります。

Reactアプリにスニペットを追加します：

import {initializePhraseAppEditor} from 'react-intl-phraseapp'

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "[[__",
  suffix: "__]]",
  fullReparse: true
};

initializePhraseAppEditor(config);

FormattedMessageのすべてのインポートを見つけ、原文をreact-intlからreact-intl-phraseappに変更します。
```
import {FormattedMessage} from 'react-intl-phraseapp'
```
jestを使用してユニットテストを実行します：
```
npm test
```

コードサンプル

このdemoは、Phrase In-context Editorとreact-intlの統合機能を示しています。

Ruby on Rails (i18n)

この環境にIn-context Editorをインストールするには、以下の手順に従ってください。

In-context Editorを使用する環境にphraseapp-in-context-editor-ruby gemを追加します：
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
そしてbundleコマンドを実行してインストールします：
```
$ bundle install
```
Railsジェネレーターを実行してphraseapp-in-context-editor-ruby gemをインストールします：
```
$ bundle exec rails generate phraseapp_in_context_editor:install --access-token=YOUR_ACCESS_TOKEN --project-id=YOUR_PROJECT_ID
```
--access-token

プロファイル設定またはAuthorizations APIを介してアクセストークンを作成および管理します。

--project-id

プロジェクトのプロジェクト IDは、プロジェクト設定にあります。これにより、いくつかの設定オプションを含む初期化ファイルが作成されます。
phraseapp_in_context_editor_jsヘルパーを使用して、アプリケーションレイアウトの<head>タグ内にJavaScriptスニペットを追加します：
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
アプリケーションを任意のWebブラウザで開き、In-context Editorが適用されていることを確認します。Phrase組織のユーザーでサインインします。
Turbolinksを無効にする（使用している場合）

Turbolinksは、ページが読み込まれるたびに、ページからすべてのIn-context Editor UI要素を削除します。

<body>タグにdata-no-turbolink属性を追加します：
```
<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
```

コードサンプル

このdemoは、Phrase In-context Editorとreact-i18nextの統合機能を示しています。

Spring

この環境にIn-context Editorをインストールするには、以下の手順に従ってください。

com.phraseapp.incontexteditorpackageがアプリで利用可能であることを確認してください。
正しいプロジェクトIDを設定し、PhraseAppConfiguration.classの他のパラメータを調整します。

すべての翻訳をPhrase経由でレンダリングするには、アプリケーションにBeanを追加します：

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

テンプレートに必要なJavaScriptヘルパーを、Beanとして公開することで提供します：

@Bean

public PhraseAppJavascriptHeader phraseAppJavascriptHeader() {

    return new PhraseAppJavascriptHeader();

}

各ページの<head>タグ内に<script>タグを追加します：

<head>

    <script th:utext="${@phraseAppJavascriptHeader.getHeader()}"></script>

</head>

アプリケーションを再起動し、Phraseユーザーの認証情報でサインインします。

GitHub上のサンプルアプリケーションの原文

プロのようにSpringアプリケーションをローカライズする方法

Spring Boot Starterパッケージ (ePages提供)

Symfony 2.x

この環境にIn-context Editorをインストールするには、以下の手順に従ってください。

In-context Editorを実行する新しい環境を作成します。この例では、新しい環境の名前はtranslationです。

新しい設定ファイルを作成します：
```
# app/config/config_translation.yml

imports:

    - { resource: config.yml }

parameters:

    translator.class: Acme\YourBundle\Translation\PhraseTranslator
```

環境をブラウザからアクセス可能にするためのコントローラーを作成します：

# web/app_translation.php

<?php

require_once __DIR__.'/../app/bootstrap.php.cache';

require_once __DIR__.'/../app/AppKernel.php';

use Symfony\Component\HttpFoundation\Request;

$kernel = new AppKernel('translation', false);

$kernel->handle(Request::createFromGlobals())->send();

標準の翻訳メソッドをオーバーライドして、キー名をIn-context Editorに公開します：

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

use Symfony\Bundle\FrameworkBundle\Translation\Translator as BaseTranslator;

class PhraseTranslator extends BaseTranslator

{

    public function trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

    {

        $prefix = "";

        if (!isset($locale)) {

            $locale = $this->getLocale();

        }

        if (!isset($this->catalogues[$locale])) {

            $this->loadCatalogue($locale);

        }

        if ($domain == 'routes') {

            // Return translated values for 'routes' domain

            return strtr($this->catalogues[$locale]->get((string) $id, $domain), $parameters);

        } else {

            // Return PhraseApp translation keys for all other domains

            return $prefix.$id.$suffix;

        }

    }

}

レイアウトにJavaScriptスニペットを追加します：
```
# Acme/YourBundle/Resources/views/layout.html.twig
```
アプリケーションを任意のWebブラウザで開き、In-context Editorが適用されていることを確認します。Phrase組織のユーザーでサインインします。

Symfony翻訳ドキュメント

Symfony 2.x adapter code on GitHub

Symfony 3.x

この環境にIn-context Editorをインストールするには、以下の手順に従ってください。

In-context Editorを実行する新しい環境を作成します。この例では、新しい環境の名前はtranslationです。

新しい設定ファイルを作成します：
```
# app/config/config_translation.yml

imports:

   - { resource: config.yml }
```

環境をブラウザからアクセス可能にするためのコントローラーを作成します：

# web/app_translation.php

<?php

use Symfony\Component\HttpFoundation\Request;

$loader = require __DIR__.'/../app/autoload.php';

$kernel = new AppKernel('translation', true);

$kernel->loadClassCache();

$request = Request::createFromGlobals();

$response = $kernel->handle($request);

$response->send();

$kernel->terminate($request, $response);

標準の翻訳メソッドをオーバーライドして、キー名をIn-context Editorに公開します：

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

use Symfony\Bundle\FrameworkBundle\Translation\Translator as BaseTranslator;

class PhraseTranslator extends BaseTranslator

{

   public function trans($id, array $parameters = array(), $domain = 'messages', $locale = null)

   {

       $prefix = "";

       if (null === $domain) {

           $domain = 'messages';

       }

       // Return ID of translation key with pre- and suffix for PhraseApp

       return $prefix.$id.$suffix;

   }

}

バンドルがコンパイラーパスで使用されるときに、クラスが常にオーバーライドされるようにします：

# src/AppBundle/DependencyInjection/Compiler/OverrideServiceCompilerPass.php

<?php

namespace AppBundle\DependencyInjection\Compiler;

use Symfony\Component\DependencyInjection\Compiler\CompilerPassInterface;

use Symfony\Component\DependencyInjection\ContainerBuilder;

class OverrideServiceCompilerPass implements CompilerPassInterface

{

   public function process(ContainerBuilder $container)

   {

       $definition = $container->getDefinition('translator.default');

       $definition->setClass('AppBundle\Translation\PhraseTranslator');

   }

}

個別のコンパイラーパスを使用する場合は、バンドルクラスのbuild()メソッドにそれらを登録します：

# src/AppBundle/AppBundle.php

<?php

namespace AppBundle;

use Symfony\Component\HttpKernel\Bundle\Bundle;

use Symfony\Component\DependencyInjection\ContainerBuilder;

use AppBundle\DependencyInjection\Compiler\OverrideServiceCompilerPass;

class AppBundle extends Bundle

{

   public function build(ContainerBuilder $container)

   {

       parent::build($container);

       if($container->getParameter("kernel.environment") == 'translation') {

           $container->addCompilerPass(new OverrideServiceCompilerPass());

       };

   }

}

レイアウトにJavaScriptスニペットを追加します：
```
# src/YourBundle/Resources/views/layout.html.twig
```
アプリケーションを任意のWebブラウザで開き、In-context Editorが適用されていることを確認します。Phrase組織のユーザーでサインインします。

Symfony翻訳ドキュメント

Vue I18n

備考

Vue I18n Phrase In-context Editorは、Vue I18nバージョン8.17.5以降のすべてをサポートしています。このライブラリは以前のバージョンでも仕事をする可能性がありますが、公式にはサポートされておらず、特定のアップデートやバグ修正は行われません。

この環境にIn-context Editorをインストールするには、以下の手順に従ってください：

推奨されるパッケージマネージャーを使用してパッケージをインストールします：
```
# yarn
yarn add vue-i18n-phrase-in-context-editor

# npm
npm install vue-i18n-phrase-in-context-editor
```
またはCDNで読み込みます（手動でwindow['vue-i18n-phrase-in-context-editor']を登録してください）：
```
<script src="https://unpkg.com/vue-i18n-phrase-in-context-editor/dist/vue-i18n-phrase-in-context-editor.umd.min.js"></script>
```
ブートストラップ（サンプル）：
```
import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: {
      hello: 'Hello world!'
  }
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');
```
ライブラリを統合するには：
1. Vue I18n Phrase In-context Editorライブラリをインポートします。
2. 新しいVue I18n Phrase In-context Editorインスタンスを作成し、最初の引数としてVue I18nインスタンスを、2番目の引数としてPhrase Configを渡します。

設定オプションとサンプルメソッド。

古いIn-context Editorの使用

Ajaxモード

In-context Editorは、ミューテーションオブザーバーを使用してAjaxおよびDOM操作（JavaScript経由など）をサポートしています。

Ajaxモードは場合によっては問題を引き起こす可能性があり、In-context Editorを使用する際に深刻なパフォーマンスの問題が発生する可能性があります。Ajaxモードを無効にするには、JavaScriptスニペットの前に以下の設定値を追加します：

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

デバッグモード

デバッグモードを有効にするには、JavaScriptスニペットの前に以下の設定値を追加します：

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

ロケールの強制設定

In-context Editorの起動時に特定のロケールを明示的に設定するには、forceLocale設定を使用します。これは、現在Webアプリケーションに表示されているロケールをIn-context Editorで事前に選択する場合にも便利です：

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

無視されるキー

この設定は、phraseapp-in-context-editor-ruby gemを使用している場合にのみ利用可能です。

キーはIn-context Editorでレンダリングされないように除外できます。Railsを使用する場合、エラーメッセージや日付および時刻のファイル形式キーなどのデータに対してキーを無視できます。phraseapp-in-context-editor-ruby gemによってキーが自動的に処理されないように除外するには、phraseapp_in_context_editor.rb初期化ファイルにキーの配列を追加します。ワイルドカードも使用できます：

PhraseApp::InContextEditor.configure do |config|

  config.ignored_keys = ["date.*", "forbidden.key",   "errors.messages*"]

end

これらのパターンに一致するキーは、In-context Editorからアクセスできなくなり、通常通りレンダリングされます。