文書内エディタ (Strings)

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

対象

Team、Professional、Business、Enterpriseプライズプラン

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

対象

AdvancedおよびEnterpriseプラン（従来）

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

文書内エディタは、Strings 翻訳エディタとの直接統合機能により、翻訳者が作業を効率化し、ウェブサイトのページを翻訳するのに役立ちます。

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

文書内エディタ：

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

文書内エディタをインストールすると、多くのテクノロジーで仕事できるようにカスタマイズできます。

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

要件

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

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

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

専用の環境が利用できない場合は、必要に応じて文書内エディタを有効にして、既存のステージング環境を利用することもできます。

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、//キーに大文字が含まれる場合はfalseに設定
    };
  </script>
  <script type="module" async="" src="https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js"></script>

Web Framework のインストール

i18next

備考

i18next Phrase 文書内エディタ Post Processor は、 19.5.1 より新しいバージョンのすべての i18next をサポートしています。このライブラリは以前のバージョンでも仕事ができますが、正式にはサポートされていないため、特定の更新やバグ修正を受けられない場合があります。

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

i18next-Phrase-in-context-Editor-post-processorライブラリを推奨のパッケージマネージャでインストールします。
```
# 糸
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>
```
ブートストラップ (サンプル):
```
'i18next'からi18nextをインポート;
'i18next-xhr-backend'からi18nextXHRBackendをインポート;

i18next
    .use(i18nextXHRBackend)
    .init({
        fallbackLng: 'en',
        debug: true,
        ns: ['special', 'common'],
        defaultNS: 'special',
        backend: {
            // i18next-gitbookリポジトリから翻訳を読み込む
            loadPath: 'https://raw.githubusercontent.com/i18next/i18next-gitbook/master/locales/{{lng}}/{{ns}}.json',
            crossDomain: true
        }
    }, function(err, t) {
        // i18nextの初期化時に何かする
    });
```
ライブラリを統合するには
1. i18next-Phrase-in-context-エディタ-ポストプロセッサライブラリからPhraseInContextEditorPostProcessorをインポート。
2. 新しい i18next Phrase文書内エディタポストプロセッサ インスタンスを作成、 PhraseConfig を引数として渡します。
3. 新しく作成された i18next Phrase文書内エディタポストプロセッサ インスタンスを i18next 使用メソッドに渡します。
4. postProcess array プロパティに phraseInContextEditor 文字列を追加（ i18next init メソッドの設定オブジェクト内で渡されます）。

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

サンプルスニペット：

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

文書内エディタを起動します。
Webブラウザでアプリケーションを開き、文書内エディタを表示します。任意のPhrase組織ユーザーでサインイン。

設定オプションとサンプル方法。

国際化

備考

Vue I18n Phrase文書内エディタは、すべての Vue I18n バージョン8.17.5以降をサポートしています。このライブラリは以前のバージョンでも仕事ができますが、公式にはサポートされていないため、特定の更新やバグ修正はありません。

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

優先パッケージマネージャで最新パッケージをインストールします。

# 糸
yarn 追加 vue-i18n-Phrase-in-context-エディタ

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

またはCDNで読み込む（手動ウィンドウ['vue-i18n-Phrase-in-context-エディタ'] に登録）：

<script src="https://unpkg.com/vue-i18n-Phrase-in-context-エディタ/dist/vue-i18n-Phrase-in-context-エディタ.umd.min.js"></script>

ブートストラップ (サンプル):

'vue'からVueをインポート;
'vue-i18n'からVueI18nをインポート;

Vue.use(VueI18n);

const i18n = new VueI18n({
  ロケール: process.env.VUE_APP_I18N_ロケール || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: {
      こんにちは：「Hello world!」
  }
});

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

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

Vue I18n Phrase文書内エディタ ライブラリをインポートします。
新しい Vue I18n Phrase文書内エディタ インスタンスを作成。最初の引数として Vue I18n インスタンスを、2番目の引数として Phrase Config を渡します。

設定オプションとサンプル方法。

反応 (intl)

備考

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

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

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

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

設定：

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

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

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

reactアプリにスニペットを追加：

'react-intl-phraseapp'から{initializePhraseAppEditor}をインポート

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

initializePhraseAppEditor(config);

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

コードサンプル

このデモでは、Phrase文書内エディタとreact-intlの統合機能をご紹介します。

Angular 2 (ngx-translate)

前提条件

Phrase Stringsアカウントにサインアップ。
Angular 2 アプリケーションでローカライゼーションに ngx-translate モジュールを使用。

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

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

設定：

'ngx-translate-phraseapp'から{ initializePhraseAppEditor, PhraseConfig}をインポート;

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);

必要に応じて、米国固有の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

{ initializePhraseAppEditor, PhraseAppCompiler, PhraseConfig}を「ngx-translate-phraseapp」からインポート

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

initializePhraseAppEditor(config);

app.module.ts

'@ngx-translate/core' から { TranslateModule, TranslateLoader, TranslateCompiler } をインポート;
'@angular/common/http' から { HttpClientModule, HttpClient} をインポート;
{ PhraseAppCompiler }を「ngx-translate-phraseapp」からインポート
{ AppComponent }を'./app.component'からインポート;


エクスポート機能 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
      }
    }),
  ],
  プロバイダ: [],
  ブートストラップ: [AppComponent]
})

コードサンプル

このデモアプリでは、文書内エディタとAngularおよびngx-translateの統合機能をご紹介します。

Ruby on Rails（国際化）

備考

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

前提条件

Phrase Stringsアカウントにサインアップ。
Railsでも使用されている優れた i18n gemを使用。

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

次のいずれかの方法で、 phraseapp-in-context-エディタ-Ruby ライブラリを必要な環境に追加します。
- ジェム経由
```
gem install phraseapp-in-context-editor-ruby
```
- バンドル経由
  
  Gemfileに追加します。
```
gem 'phraseapp-in-context-editor-ruby
```
- 原文から直接ビルドして、最新かつ最高のものを入手できます。
```
bundle && gemビルド
```
Rails ジェネレータを実行して初期化ファイルを作成：
```
Rails generate phraseapp_in_context_editor:install --アカウント_ID=<YOUR_アカウント_ID> --プロジェクト-ID=<YOUR_プロジェクト_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"

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

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

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

コードサンプル

このデモでは、Phrase文書内エディタとreact-i18nextの統合機能をご紹介します。

Django

前提条件

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

備考

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

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

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

設定.pyに次の設定を追加：

    # Phrase文書内エディタ設定
    PHRASE_ENABLED = True
    PHRASE_アカウント_ID = "YOUR_アカウント_ID" # 独自のアカウントIDを設定する
    PHRASE_PROJECT_ID = "YOUR_PROJECT_ID"  # Set your own project id
    PHRASE_DATACENTER = "eu" # データセンターを選択してください 'eu' | 'us'
    PHRASE_PREFIX = "{{__"
    PHRASE_SUFFIX = "__}}"

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

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

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

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

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

コードサンプル

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

フラスコ

前提条件

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

備考

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

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

pip を指定して Flask-Phrase パッケージをインストールします。
```
pip install Flask-Phrase
```

次の設定をFlaskアプリ(app.configまたはconfig.py)に追加します。

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

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

flaskインポートフラスコから、[...]
flask_babelインポートBabelから
flask_PhraseインポートPhrase、gettext、ngettextから
app = Flask(__name__)
babel = Babel(アプリ)
phrase = Phrase(アプリ)

Phrase スニペットを次のタグでベースレイアウトファイルに追加します（テンプレートファイルのセクション内に記述する必要があります）。

<script>
    window.PHRASEAPP_CONFIG = {
        projectId:"あなたのプロジェクトID",
        accountId:"あなたのアカウントID",
        datacenter: "eu",
    };
    (function() {
        var phrasejs = document.createElement('script');
        phrasejs.type = 'module';
        phrasejs.async = true;
        phrasejs.src = 'https://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

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

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

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

window.PHRASEAPP_CONFIG = {
    projectId:"あなたのプロジェクトID",
    accountId:"あなたのアカウントID",
    datacenter: "us",
};

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

コードサンプル

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

Symfony 5.x

前提条件

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

備考

バージョン2.0.0はSymfony 5以上に対応しています。Symfony 2、3、または 4 を使用している場合は、: ICE のセットアップを参照してください。

文書内エディタをSymfonyアプリケーションと統合するには、次の手順に従います。

PhraseStringsInContextEditor とそのコンテンツをリポジトリの /src/Service フォルダまたは目的の場所にコピーします。別の場所に配置した場合は、それに応じて名前空間を調整します。

Phraseのアダプタで 翻訳者 サービスを飾るために config/services.yaml を調整します。

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

文書内エディタで Web ページが読めるように、次の JavaScript スニペットを {% block javascripts%} の間のベースまたは 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://d2bgdldl6xit7z.cloudfront.net/latest/ice/index.js'
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(phrasejs, s);
    })();
</script>

Symfony アプリケーションが文書内エディタに接続されました。

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

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

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

window.PHRASEAPP_CONFIG = {
    projectId:"あなたのプロジェクトID",
    accountId:"あなたのアカウントID",
    datacenter: "us",
};

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

コードサンプル

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

文書内エディタの設定

キー名の公開

通常、ビューレイヤーは翻訳可能文字列の名前（キー）を何らかの並べ替えメソッドやビューヘルパーに渡すことで翻訳を行います。

サンプル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 = (キー: 文字列) => '{{__phrase_' + key + '__}}'

キー名と特殊文字のエスカレーション

キー名が認識可能なファイル形式に変換されていることを確認してください。

以下の一覧の文字は、文書内エディタで公開する際にエスケープする必要があります。

文字	エスケープシーケンス	例
<	`[[[[[[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 = {

  プレフィックス: '[[__',

  suffix: "__]]"

}

これにより、エディタは [[__] で始まり __] で終わるタグを探すようになります。

[[__phrase_YOUR.KEY__]]

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

PhraseApp::InContextEditor.configure do |config|

  config.prefix = "[[__"

  config.suffix = "__]]"

終了

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

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

この設定は、 phraseapp-in-context-エディタ-Ruby gem を使用する場合にのみ使用できます。

文書内エディタはデフォルトで無効に設定されています。

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

PhraseApp::InContextEditor.enabled = true|false

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

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

完全解析

fullReparse を有効 React などの Virtual DOM を使用する JavaScript フレームワークで文書内エディタを使用する場合。これによって、DOM の変更が検出されたときに適切な再解析を行うことができます。

window.PHRASEAPP_CONFIG = {

  fullReparse： true

}

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

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

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

「lodash/escape」からのインポートエスケープ;

window.PHRASEAPP_CONFIG = {  

    sanitize: escape

}

シングルサインオン

シングルサインオンを使用し、文書内エディタを SSO 対応にして初期化する場合は、JavaScript スニペットの前に次の設定値を追加します。

window.PHRASEAPP_CONFIG = {

  sso: {

    enabled：true、
    
    プロバイダ: 'saml',

    identifier: [insert_company_identifier]

  }

}

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

window.PHRASEAPP_CONFIG = {

  sso: {

    enforced: true

  }

}

古い文書内エディタ：セットアップ

Web Framework のインストール

角度 2 (ngx-translate)

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

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

設定：

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "{{__",
  サフィックス:"__}}",
  fullReparse： true
};

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

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

これらのスニペットをAngularアプリに追加：

app.component.ts

インポート { initializePhraseAppEditor, PhraseAppCompiler} from 'ngx-translate-phraseapp'

let config = {
  projectId: '<YOUR_PROJECT_ID>',
  phraseEnabled: true,
  prefix: "{{__",
  サフィックス:"__}}",
  fullReparse： true
};

initializePhraseAppEditor(config);

app.module.ts

'@ngx-translate/core' から { TranslateModule, TranslateLoader, TranslateCompiler } をインポート;
'@angular/common/http' から { HttpClientModule, HttpClient} をインポート;
{ PhraseAppCompiler }を「ngx-translate-phraseapp」からインポート

エクスポート機能 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
      }
    }),
  ],
  プロバイダ: [],
  ブートストラップ: [AppComponent]
})

コードサンプル

このデモアプリでは、文書内エディタとAngularおよびngx-translateの統合機能をご紹介します。

AngularJS (angular-translate)

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

Bower経由でAngular-Phraseをインストール（または手動でダウンロード）：
```
$ bower install angular-Phrase
```
既存のAngularJSアプリケーションに angular-Phrase モジュールを追加後、 angular-translate モジュールをロードします。
```
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ブラウザでアプリケーションを開き、アプリケーションに適用された文書内エディタを確認します。任意のPhrase組織ユーザーでサインイン。

angular-Phrase on GitHub

コードサンプル

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

ジャンゴ

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

pipで django-Phrase パッケージをインストールします。
```
$ pip install django-Phrase
```
インストールされているアプリの一覧にPhraseを追加：
```
INSTALLED_APPS = (

    'phrase',

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

プロジェクトの文書内エディタを次のオプションで設定します。

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

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

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

コードサンプル

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

反応 (intl)

備考

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

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

設定：

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

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

reactアプリにスニペットを追加：

'react-intl-phraseapp'から{initializePhraseAppEditor}をインポート

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

initializePhraseAppEditor(config);

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

コードサンプル

このデモでは、Phrase文書内エディタとreact-intlの統合機能をご紹介します。

Ruby on Rails (国際化)

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

文書内エディタを使用する環境に phraseapp-in-context-Editor-Ruby gem を追加します。
```
group :development do
  gem 'phraseapp-in-context-editor-ruby'
 終了
```
bundleコマンドを実行してインストールします。
```
$ bundle install
```
Rails ジェネレータを実行して phraseapp-in-context- editor-Ruby gem をインストールします。
```
$ bundle exec Rails generate phraseapp_in_context_editor:install --アクセス-トークン=YOUR_アクセス_トークン --プロジェクト-ID=YOUR_プロジェクト_ID
```
--access-token

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

--project-id

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

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

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

コードサンプル

このデモでは、Phrase文書内エディタとreact-i18nextの統合機能をご紹介します。

春

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

パッケージ 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 Starterパッケージ（ePages提供）

Symfony 2.x

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

文書内エディタを実行する新しい環境を作成します。この例では、新しい環境は翻訳と名付けられています。

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

インポート：

    - { resource: config.yml }

パラメータ：

    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();

標準の翻訳メソッドをオーバーライドして、文書内エディタにキー名を公開オーダー：

# Acme/YourBundle/Translation/PhraseTranslator.php

<?php

namespace Acme\YourBundle\Translation;

Symfony\Bundle\FrameworkBundle\Translation\TranslatorをBaseTranslatorとして使用;

class PhraseTranslatorはBaseTranslatorを拡張します

{

    パブリック関数 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
```
任意のWebブラウザでアプリケーションを開き、アプリケーションに適用された文書内エディタを確認します。任意のPhrase組織ユーザーでサインイン。

Symfony翻訳ドキュメント

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

Symfony 3.x

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

文書内エディタを実行する新しい環境を作成します。この例では、新しい環境は翻訳と名付けられています。

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

インポート：

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

標準の翻訳メソッドをオーバーライドして、文書内エディタにキー名を公開オーダー：

# src/AppBundle/Translation/PhraseTranslator.php

<?php

namespace AppBundle\Translation;

Symfony\Bundle\FrameworkBundle\Translation\TranslatorをBaseTranslatorとして使用;

class PhraseTranslatorはBaseTranslatorを拡張します

{

   パブリック関数 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 は CompilerPassInterface を実装します

{

   パブリック関数プロセス(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ブラウザでアプリケーションを開き、アプリケーションに適用された文書内エディタを確認します。任意のPhrase組織ユーザーでサインイン。

Symfony翻訳ドキュメント

国際化

備考

Vue I18n Phrase文書内エディタは、すべての Vue I18n バージョン8.17.5以降をサポートしています。このライブラリは以前のバージョンでも仕事はできますが、正式にはサポートされていないため、特定の更新やバグ修正は行われません。

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

優先パッケージマネージャでパッケージをインストールします。

# 糸
yarn 追加 vue-i18n-Phrase-in-context-エディタ

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

またはCDNで読み込む（手動ウィンドウ['vue-i18n-Phrase-in-context-エディタ'] に登録）：

<script src="https://unpkg.com/vue-i18n-Phrase-in-context-エディタ/dist/vue-i18n-Phrase-in-context-エディタ.umd.min.js"></script>

ブートストラップ (サンプル):

'vue'からVueをインポート;
'vue-i18n'からVueI18nをインポート;

Vue.use(VueI18n);

const i18n = new VueI18n({
  ロケール: process.env.VUE_APP_I18N_ロケール || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: {
      こんにちは：「Hello world!」
  }
});

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

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

Vue I18n Phrase文書内エディタ ライブラリをインポートします。
新しい Vue I18n Phrase文書内エディタ インスタンスを作成。最初の引数として Vue I18n インスタンスを、2番目の引数として Phrase Config を渡します。

設定オプションとサンプル方法。

古い文書内エディタの使用

Ajax モード

文書内エディタは、変換オブザーバを使用した Ajax および DOM 操作（JavaScript 経由）をサポートしています。

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

window.PHRASEAPP_CONFIG = {

  ajaxObserver：false

}

デバッグモード

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

window.PHRASEAPP_CONFIG = {

  debugMode: true

}

ロケールを強制する

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

window.PHRASEAPP_CONFIG = {

  forceLocale: "pt-BR"

}

無視されたキー

この設定は、 phraseapp-in-context-エディタ-Ruby gem を使用する場合にのみ使用できます。

文書内エディタでキーを除外できます。Rails を使用する場合、エラーメッセージや日時ファイル形式のキーなどのデータでは、キーが無視されることがあります。phraseapp-in-context-エディタ-Ruby gem によるキーの自動処理から除外するには、キーの配列を phraseapp_in_context_エディタ初期化ファイルに追加します。ワイルドカードも使用できます。

PhraseApp::InContextEditor.configure do |config|

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

終了

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