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スニペット

アプリケーションレイアウトに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 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インスタンスを、i18nextの使用メソッドに渡します。
4. phraseInContextEditor文字列をpostProcess配列プロパティに追加します（i18nextのinitメソッドの設定オブジェクト内で渡されます）。

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

サンプルスニペット:

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

備考

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

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

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

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

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

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>

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

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

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属性を設定して古い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 EditorとAngularおよびngx-translateの統合機能を紹介しています。

Ruby on Rails (i18n)

備考

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

前提条件

Phrase Strings アカウントにサインアップしてください。
Rails でも使用されている優れた 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組織のユーザーでサインインします。

コードサンプル

このデモは、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 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組織設定にあります。

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

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

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

コードサンプル

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

Symfony 5.X

前提条件

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

備考

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

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

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

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

<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: 文字列) => '{{__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などの仮想DOMを使用するJavaScriptフレームワークでIn-context Editorを使用する場合は、fullReparseを有効にしてください。これにより、DOMの変更が検出されたときに適切な再解析が可能になります。

window.PHRASEAPP_CONFIG = {

  fullReparse: true

}

In-context Editorから要素を非表示にする

hidingClassesオプションにリストされているクラスは非表示として扱われ、In-context Editorのスキャナーによって除外されます。特定のクラスを持つ要素をスキャン可能にするには、そのクラス名を hidingClasses 配列に追加するのではなく、削除してください。配列にクラス名を追加すると、一致する要素が除外され、編集ボタンが非表示になります。配列からクラス名を削除すると、一致する要素が含まれ、編集ボタンが表示されます。

hidingClassesオプションは、要素とその祖先に対して静的なクラス存在チェックを実行します。計算された可視性やレスポンシブな可視性は評価しません。hidingClassesのエントリーと一致するレスポンシブユーティリティクラスを使用する要素（例：「hidden」という名前のクラスとブレークポイント固有の可視性クラスを組み合わせたもの）は、現在のビューポートで実際に表示されているかどうかに関係なく、スキャンから除外されます。スキャンが必要な要素に対して、純粋にレスポンシブスタイリング目的で hidingClasses にリストされているクラス名を使用することは避けてください。

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

コードサンプル

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

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

GitHub 上の angular-phrase

コードサンプル

angular-phrase 用のこのデモアプリケーションは、angular-translate を使用して 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 = '__}}'

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

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

コードサンプル

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

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>',
  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>
```
アプリケーションを任意のウェブブラウザで開き、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をインストールするには、以下の手順に従ってください。

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

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

@Bean

@Conditional(PhraseAppEnabledCondition.class)

public MessageSource messageSource() {

    return new PhraseAppMessageSource();

}

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

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

Symfony翻訳ドキュメント

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

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
```
アプリケーションを任意のウェブブラウザで開き、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からアクセスできなくなり、通常通りレンダリングされます。