インコンテキストエディタ（文字列）

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

利用可能対象

チーム、プロフェッショナル、ビジネス、エンタープライズ、ソフトウェアUI/UXプラン

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

利用可能対象

高度なエンタープライズプラン（従来）

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

インコンテキストエディタは、翻訳者がより効率的に作業を行い、Strings 翻訳エディタとの直接統合を通じてウェブサイトのページを翻訳するのを助けるために設計されています。

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

インコンテキストエディタ：

新しい機能（多言語ビュー、レイアウトオプション、バッチアクション、コラボレーション機能など）と翻訳エディタからのUIを含みます。
古いインコンテキストエディタ。

インコンテキストエディタをインストールした後、多くの技術と連携するようにカスタマイズできます。

Stringsインコンテキストエディタのインストール

要件

インコンテキストエディタを使用するには、アプリケーションが次のものを必要とします：

ウェブベースのウェブサイト、ウェブアプリケーション、モバイルサイトなど。
翻訳者は、エディタを実行しているウェブサーバーにアクセスできます。必要に応じて、これはローカル環境である可能性があります。
キー-バリューのローカリゼーションファイル構造。

翻訳可能な文字列が抽出されたウェブサイトと、翻訳をレンダリングするためにキー-バリュー構造を使用するビュー層。
ビューまたはテンプレート層に公開されたキー名。
エディタをレンダリングするJavaScriptスニペット。
理想的には、翻訳用の専用環境。これはステージング環境のクローンであり、最初に設定するのはより多くの作業が必要ですが、より良いワークフローと安定性を提供します。

専用環境が不可能な場合は、必要に応じてIn-Context Editorを有効にするオプションを持つ既存のステージング環境を使用できます。

JavaScript Snippet

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

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

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

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

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

サンプル:

<script type="text/javascript">
    window.PHRASEAPP_CONFIG={ // この名前を変更しないでください、設定が機能するために
      accountId: 'ACCOUNT_ID',
      projectId: 'PROJECT_ID',
      datacenter: 'eu', // 米国データセンターの場合は'us'に設定
      prefix: '{{__', // ビューテンプレートのキー形式のプレフィックスを設定
      suffix: '__}}', // ビューテンプレートのキー形式のサフィックスを設定
      disableShortcuts: false, // キーボードショートカットを無効にするにはtrueに設定
      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>

ウェブフレームワークのインストール

i18next

備考

i18nextのフレーズインコンテキストエディタポストプロセッサは、19.5.1以降のすべてのi18nextバージョンをサポートしています。このライブラリは以前のバージョンでも動作する可能性がありますが、公式にはサポートされておらず、特定の更新やバグ修正が行われない可能性があります。

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください：

好みのパッケージマネージャーで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>
```
ブートストラップ（サンプル）：
```
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) {
        // i18nextの初期化時に何かを行う
    });
```
ライブラリを統合するには:
1. PhraseInContextEditorPostProcessorをi18next-phrase-in-context-editor-post-processorライブラリからインポートします。
2. 新しいi18next Phrase In-Context Editor Post Processorインスタンスを作成し、PhraseConfigを引数として渡します。
3. 新しく作成したi18next Phrase In-Context Editor Post Processorインスタンスをi18nextのuseメソッドに渡します。
4. phraseInContextEditor文字列をpostProcess配列プロパティに追加します（i18nextのinitメソッドの設定オブジェクト内で渡されます）。
ICE JavaScriptスニペットをセットアップ内のi18nextインスタンスに追加します。

サンプルスニペット:
```
i18nextInstance.use(new PhraseInContextEditorPostProcessor({
      phraseEnabled: true,
      projectId: '00000000000000004158e0858d2fa45c',
      accountId: '0bed59e5',
    }))
```
備考

accountIdはICEを正常にセットアップするために提供されなければなりません。アカウントIDはStrings組織の設定にあります。

必要に応じて、useOldICE属性を設定して古いICEに切り替えます:
```
i18nextInstance.use(new PhraseInContextEditorPostProcessor({
      phraseEnabled: true,
      projectId: '00000000000000004158e0858d2fa45c',
      accountId: '0bed59e5',
      useOldICE: true,
    }))
```
インコンテキストエディタを開始します。
ウェブブラウザでアプリケーションを開いてインコンテキストエディタを表示します。任意のPhrase組織のユーザーでサインインします。

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

Vue I18n

備考

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

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください：

好みのパッケージマネージャーで最新のパッケージをインストールします:

# 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: 'こんにちは、世界！'
  }
});

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を渡します。

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

React (intl)

備考

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

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

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください：

NPM経由でnewest packageをインストールします：
```
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エディタとreact-intlの統合を示しています。

Angular 2 (ngx-translate)

前提条件

サインアップしてPhrase Stringsアカウントを作成します。
Angular 2アプリケーションのローカリゼーションにはngx-translateモジュールを使用します。

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください：

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属性を設定して古いICEに切り替えます:

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

initializePhraseAppEditor(config);

必要に応じて、米国の特定の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]
})

コードサンプル

このデモアプリは、In-ContextエディタとAngularおよびngx-translateの統合を紹介しています。

Ruby on Rails (i18n)

備考

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

前提条件

サインアップしてPhrase Stringsアカウントを作成します。
優れたi18n gemを使用し、Railsでも使用されています。

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください：

次のいずれかの方法を使用して、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の組織設定にあります。
アプリケーションレイアウトapp/views//layouts/application.html.erbにRubyスニペットを追加します：
```
<%= 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"

アプリケーションを任意のウェブブラウザで開いて、アプリに適用されたIn-Contextエディタを確認してください。任意のPhrase組織のユーザーでサインインします。

コードサンプル

このデモは、Phrase In-Contextエディタとreact-i18nextの統合を示しています。

Django

前提条件

サインアップしてPhrase Stringsアカウントを作成します。
Python用のDjangoフレームワークを使用してください。

備考

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

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください：

django-phraseパッケージをpipでインストールしてください：
```
$ 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の設定
    PHRASE_ENABLED = True
    PHRASE_ACCOUNT_ID = "YOUR_ACCOUNT_ID"  # 自分のアカウントIDを設定してください
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # 自分のプロジェクトIDを設定してください
    PHRASE_DATACENTER = "eu"  # データセンターを選択してください 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

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

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

問題が発生した場合、JavaScriptスニペットを手動で統合することが可能です。

アプリケーションを任意のウェブブラウザで開いて、アプリに適用されたIn-Contextエディタを確認してください。任意のPhrase組織のユーザーでサインインします。

DjangoアダプターコードはGitHubにあります

コードサンプル

このデモアプリケーションは、In-ContextエディタをDjangoアプリケーションに統合する方法を示しています。

Flask

前提条件

サインアップしてPhrase Stringsアカウントを作成します。
Python用のFlaskフレームワークを使用してください。

備考

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

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください：

Flask-Phraseパッケージをpipでインストールします:
```
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のgettext関数にフォールバックします。

コードサンプル

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

Symfony 5.x

前提条件

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

備考

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

In-ContextエディタをSymfonyアプリケーションに統合するには、次の手順に従ってください：

PhraseStringsInContextEditorとその内容をリポジトリの/src/Serviceフォルダまたは希望の場所にコピーします。他の場所に配置する場合は、名前空間を適宜調整してください。

config/services.yamlを調整して、Phraseのアダプタで翻訳者サービスを装飾します：

サービス：
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        decorates: translator

In-Context Editorがウェブページを読み取れるように、次のJavaScriptスニペットを基本またはTwigレイアウトテンプレートの{% block javascripts %}の間に追加します：

<script>
    window.PHRASEAPP_CONFIG = {
        accountId: '0bed59e5',
        projectId: '00000000000000004158e0858d2fa45c',
        データセンター：'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の認証情報でログインして、ウェブページ上で直接翻訳プロセスを開始します。

コードサンプル

このデモアプリケーションは、In-ContextエディタをSymfonyアプリケーションに統合する方法を示しています。

In-contextエディタの設定

キー名の公開

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

サンプル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エディタ機能を提供する場合は、デコレーターが設定されていることを確認してください:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

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

In-Contextエディタの有効化と無効化

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

In-Contextエディタはデフォルトで無効になっています。

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

PhraseApp::InContextEditor.enabled = true|false

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

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

完全再解析

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

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

出力をウェブページにサニタイズする

In-Contextエディタは、サニタイズプロパティに関数を提供することで、翻訳をウェブページに挿入する前にエスケープまたは変更するように構成できます。

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

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

シングルサインオン

シングルサインオンを使用していて、SSOを有効にした状態でIn-Contextエディタを初期化したい場合は、JavaScriptスニペットの前に次の構成値を追加してください。

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

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

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

古いIn-Contextエディタ: セットアップ

ウェブフレームワークのインストール

Angular 2 (ngx-translate)

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください。

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]
})

コードサンプル

このデモアプリは、In-ContextエディタとAngularおよびngx-translateの統合を示しています。

AngularJS (angular-translate)

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください。

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はプロジェクト設定にあります。これにより、いくつかの設定オプションを含む初期化ファイルが作成されます。
phrase-javascript ディレクティブを <head> タグ内のアプリケーションに追加します：
```
<phrase-javascript></phrase-javascript>
```
アプリケーションを任意のウェブブラウザで開いて、In-Contextエディタがアプリに適用されているのを確認します。任意のPhrase組織のユーザーでサインインしてください。

angular-phrase on GitHub

コードサンプル

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

Django

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください。

django-phraseパッケージをpipでインストールします:
```
$ pip install django-phrase
```
インストールされたアプリのリストにPhraseを追加します:
```
INSTALLED_APPS = (

    'phrase',

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

これらのオプションでプロジェクトのIn-Context Editorを設定します:

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

アプリケーションを任意のウェブブラウザで開いて、In-Contextエディタがアプリに適用されているのを確認します。任意のPhrase組織のユーザーでサインインしてください。

Djangoアダプターコード on GitHub

コードサンプル

このデモアプリケーションは、DjangoアプリケーションとIn-Contextエディタを統合する方法を示しています。

React (intl)

備考

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

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください。

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エディタとreact-intlの統合を示しています。

Ruby on Rails (i18n)

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください。

In-Context Editorを使用したい環境にphraseapp-in-context-editor-rubygemを追加します:
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 end
```
そして、バンドルコマンドを実行してインストールします:
```
$ bundle install
```
phraseapp-in-context-editor-ruby gemをインストールするには、Rails ジェネレーターを実行します:
```
$ 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はプロジェクト設定にあります。これにより、いくつかの設定オプションを含む初期化ファイルが作成されます。
<head> タグ内のアプリケーションレイアウトにJavaScriptスニペットを追加します。phraseapp_in_context_editor_js ヘルパーを使用します:
```
<head>
  ...
  <%= phraseapp_in_context_editor_js %>
  ...
</head>
```
アプリケーションを任意のウェブブラウザで開いて、In-Contextエディタがアプリに適用されているのを確認します。任意のPhrase組織のユーザーでサインインしてください。
Turbolinksを無効にします（使用している場合）

Turbolinksは、ページの取得ごとにIn-Context Editor UI要素をすべてページから削除します。

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

コードサンプル

このdemoは、Phrase In-Contextエディタとreact-i18nextの統合を示しています。

Spring

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください。

package com.phraseapp.incontexteditor がアプリで利用可能であることを確認します。
正しいプロジェクト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スターターパッケージ（ePages提供）

Symfony 2.x

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください。

In-Contextエディタが実行される新しい環境を作成します。例では、新しい環境は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エディタにキー名を公開するために、標準の翻訳メソッドをオーバーライドします：

# 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') {

            // 'routes' ドメインの翻訳された値を返す

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

        } else {

            // 他のすべてのドメインのためのPhraseApp翻訳キーを返す

            return $prefix.$id.$suffix;

        }

    }

}

レイアウトにJavaScriptスニペットを追加します:
```
# Acme/YourBundle/Resources/views/layout.html.twig
```
アプリケーションを任意のウェブブラウザで開いて、In-Contextエディタがアプリに適用されているのを確認します。任意のPhrase組織のユーザーでサインインしてください。

Symfony翻訳ドキュメント

Symfony 2.x adapter code on GitHub

Symfony 3.x

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください。

In-Contextエディタが実行される新しい環境を作成します。例では、新しい環境は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エディタにキー名を公開するために、標準の翻訳メソッドをオーバーライドします：

# 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';

       }

       // PhraseAppのためのプレフィックスとサフィックスを持つ翻訳キーのIDを返す

       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
```
アプリケーションを任意のウェブブラウザで開いて、In-Contextエディタがアプリに適用されているのを確認します。任意のPhrase組織のユーザーでサインインしてください。

Symfony翻訳ドキュメント

Vue I18n

備考

この環境にIn-Contextエディタをインストールするには、次の手順に従ってください:

好みのパッケージマネージャーでパッケージをインストールします:

# 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 フレーズインコンテキストエディタライブラリをインポートします。
2. 新しいVue I18n フレーズインコンテキストエディタインスタンスを作成し、最初の引数としてVue I18nインスタンスを渡し、2番目の引数としてフレーズ設定を渡します。

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

古いインコンテキストエディタの使用

Ajaxモード

インコンテキストエディタは、ミューテーションオブザーバーを使用してAjaxおよびDOM操作（つまり、JavaScript経由）をサポートしています。

Ajaxモードは、場合によって問題を引き起こす可能性があり、インコンテキストエディタを使用する際に深刻なパフォーマンスの問題を引き起こす可能性があります。Ajaxモードを無効にするには、JavaScriptスニペットの前に次の設定値を追加します:

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

デバッグモード

デバッグモードを有効にするには、JavaScriptスニペットの前に次の設定値を追加してください:

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

ロケールの強制

In-Contextエディタを起動する際に特定のロケールを明示的に設定するには、forceLocale設定を使用します。これは、In-Contextエディタで現在表示されているロケールを事前に選択するのに便利です。

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

無視されたキー

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

キーはIn-Contextエディタでレンダリングされないように除外できます。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エディタにアクセスできず、通常通りレンダリングされます。