In-Context Editor (Strings)

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

利用可能対象

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

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

利用可能対象

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

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

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

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

文書内エディタ：

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

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

Strings文書内エディタのインストール

要件

文書内エディタを使用するには、アプリケーションが必要です：

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

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

専用環境が不可能な場合、必要に応じて文書内エディタを有効にするオプションを持つ既存のステージング環境を使用できます。

JavaScriptスニペット

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

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

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

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

Account 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エディタをインストールするには、次の手順に従ってください：

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) {
        // do something on i18next initialization
    });
```
ライブラリを統合するには:
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,
    }))
```
In-Contextエディタを開始します。
アプリケーションをウェブブラウザで開いてIn-Contextエディタを表示します。任意のPhrase組織ユーザーでサインインします。

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

Vue I18n

備考

Vue I18n フレーズ文書内エディタは、すべての 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: {
      こんにちは：'こんにちは、世界！'
  }
});

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app');
```
ライブラリを統合するには:
1. Vue I18n フレーズ文書内エディタ ライブラリをインポートします。
2. 新しい Vue I18n フレーズ文書内エディタ インスタンスを作成し、最初の引数として Vue I18n インスタンスを渡し、2 番目の引数として フレーズ設定 を渡します。

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

React (intl)

備考

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

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

この環境に文書内エディタをインストールするには、次の手順に従います：

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

前提条件

サインアップしてPhrase Stringsアカウントを作成します。

Angular 2アプリケーションのローカリゼーションには、ngx-translateモジュールを使用します。
NPMでインストールします:

この環境に文書内エディタをインストールするには、次の手順に従います：

let config:
```
npm install ngx-translate-phraseapp
```

設定：

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

PhraseConfig = {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);

デフォルトでは、エディタのドキュメントパーサーはすべてのキーを小文字に変換します。

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
}
```

export function HttpLoaderFactory(http:

app.component.ts

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

PhraseConfig = {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: {
        提供：TranslateLoader,
        useFactory:HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        提供：TranslateCompiler,
        useClass:PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

コードサンプル

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

Ruby on Rails (i18n)

備考

このライブラリは、古いブラウザやMicrosoft IE11ではすぐに使えるわけではありません。これらのブラウザをサポートする必要がある場合は、Babelをビルドパイプラインに追加してください。

前提条件

Angular 2アプリケーションのローカリゼーションには、ngx-translateモジュールを使用します。
優れたi18n gemを使用し、Railsでも使用されています。

この環境に文書内エディタをインストールするには、次の手順に従います：

次のいずれかの方法を使用して、目的の環境に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"

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

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

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

コードサンプル

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

Django

前提条件

Angular 2アプリケーションのローカリゼーションには、ngx-translateモジュールを使用します。
Python 用の Django フレームワークを使用します。

備考

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

この環境に文書内エディタをインストールするには、次の手順に従います：

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 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 スニペットを手動で統合することが可能です。

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

Django アダプターコードを GitHub で

コードサンプル

この demo アプリケーションは、Django アプリケーションに文書内エディタを統合する方法を示しています。

Flask

前提条件

Angular 2アプリケーションのローカリゼーションには、ngx-translateモジュールを使用します。
Python 用の Flask フレームワークを使用します。

備考

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

この環境に文書内エディタをインストールするには、次の手順に従います：

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)

次のタグを持つ基本レイアウトファイルにフレーズ JavaScript snippet を追加します (テンプレートファイルのセクション内に配置する必要があります):

<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組織設定にあります。

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

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

PHRASEAPP_ENABLED = True の場合、パッケージは翻訳関数から返される値を修正して、ICEが読み取れる形式を提示します。False に設定すると、標準の Flask-Babel's gettext関数に戻ります。

コードサンプル

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

Symfony 5.x

前提条件

Angular 2アプリケーションのローカリゼーションには、ngx-translateモジュールを使用します。
PHP用の Symfony フレームワークを使用します。

備考

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

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

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

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

services:
    ...
    App\Service\PhraseStringsInContextEditor\Translator:
        decorates: translator

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

<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エディタに接続されています。

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

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

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

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エディタに公開されるときにエスケープする必要があります：

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

自動ケース変換

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

window.PHRASEAPP_CONFIG = {

  autoLowercase: false

}

キー装飾子のカスタマイズ

文書内エディタを使用する際、キー名は通常、装飾子（デフォルトでは波括弧）で囲まれ、文書のコンテキスト内でユニークな識別キーを生成します：

{{__phrase_YOUR.KEY__}}

これが他のライブラリ（例：AngularJS や Ember.js などのクライアントサイドテンプレートエンジン）と類似の構文を使用している場合に競合を引き起こす場合は、文書内エディタの装飾子の接頭辞と接尾辞をセットアップで変更します。文書内エディタにパーサーが探すべき装飾子を指示するには、JavaScript スニペットの前に次の設定値を追加します。

window.PHRASEAPP_CONFIG = {

  prefix: '[[__',

  suffix: "__]]"

}

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

[[__phrase_YOUR.KEY__]]

phraseapp-in-context-editor-ruby gemを使用して文書内エディタ機能を提供する場合、デコレーターが設定されていることを確認してください:

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

end

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

文書内エディタの有効化と無効化

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

文書内エディタはデフォルトで無効になっています。

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

PhraseApp::InContextEditor.enabled = true|false

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

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

完全再解析

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

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

ウェブページへの出力のサニタイズ

文書内エディタは、サニタイズプロパティに関数を提供することで、ウェブページに挿入される前に翻訳をエスケープまたは変更するように設定できます。

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

import escape from “lodash/escape”;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

シングルサインオン

シングルサインオンを使用していて、SSOを有効にした状態で文書内エディタを初期化したい場合は、JavaScriptスニペットの前に次の設定値を追加してください:

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled: true,
    
    provider: 'saml',

    identifier: [insert_company_identifier]

  }

}

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

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

古い文書内エディタ:設定

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

Angular 2 (ngx-translate)

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

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: {
        提供：TranslateLoader,
        useFactory:HttpLoaderFactory,
        deps: [HttpClient]
      },
      compiler: {
        提供：TranslateCompiler,
        useClass:PhraseAppCompiler
      }
    }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})

コードサンプル

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

AngularJS (angular-translate)

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

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

GitHubのangular-phrase

コードサンプル

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

Django

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

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 = '__}}'

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

DjangoアダプターコードをGitHubで

コードサンプル

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

React (intl)

備考

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

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

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

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
```

コードサンプル

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

Ruby on Rails (i18n)

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

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

Turbolinksは、ページの取得ごとにすべての文書内エディタUI要素をページから削除します。

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

コードサンプル

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

春

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

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

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

文書内エディタが実行される新しい環境を作成します。例では、新しい環境は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') {

            // 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エディタがアプリに適用されているのを確認します。任意のPhrase組織のユーザーでサインインします。

Symfony翻訳ドキュメント

GitHubのSymfony 2.xアダプターコード

Symfony 3.x

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

文書内エディタが実行される新しい環境を作成します。例では、新しい環境は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';

       }

       // 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エディタがアプリに適用されているのを確認します。任意のPhrase組織のユーザーでサインインします。

Symfony翻訳ドキュメント

Vue I18n

備考

Vue I18nフレーズIn-Contextエディタは、すべての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: {
      こんにちは：'こんにちは、世界！'
  }
});

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

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

古い文書内エディタを使用する

Ajaxモード

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

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

window.PHRASEAPP_CONFIG = {

  ajaxObserver: false

}

デバッグモード

デバッグモードを有効にするには、JavaScriptスニペットの前に次の構成値を追加します:

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

ロケールの強制

文書内エディタを起動する際に特定のロケールを明示的に設定するには、forceLocale設定を使用します。これは、文書内エディタで現在表示されているウェブアプリケーションのロケールを事前に選択するのに役立ちます。

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

無視されたキー

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

キーは、文書内エディタでレンダリングされないように除外できます。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

これらのパターンのいずれかに一致するキーは、文書内エディタにアクセスできなくなり、通常通りレンダリングされます。