インコンテキストエディタは、翻訳者がより効率的に作業を進め、Strings 翻訳エディタとの直接統合を通じてウェブページを翻訳できるように設計されています。
現在、2つのバージョンが利用可能です:
-
新しい機能（多言語ビュー、レイアウトオプション、一括操作、コラボレーション機能など）と、翻訳エディタのUIが含まれています。
インコンテキストエディタをインストールした後、多くの技術と連携するようにカスタマイズできます。
インコンテキストエディタを使用するには、アプリケーションに以下が必要です:
-
ウェブベースのウェブサイト、ウェブアプリケーション、モバイルサイトなど。
-
翻訳者がエディタを実行しているウェブサーバーにアクセスできること。必要に応じて、ローカル環境でも可能です。
-
キーと値のローカリゼーションファイル構造。
翻訳可能な文字列が抽出されており、キーと値の構造を使用して翻訳をレンダリングするビューレイヤーを持つウェブサイト。
-
ビューレイヤーまたはテンプレートレイヤーに公開されているキー名。
-
エディタをレンダリングする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:アカウント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>
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>
-
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 });ライブラリを統合するには：
-
i18next-phrase-in-context-editor-post-processorライブラリから
PhraseInContextEditorPostProcessorをインポートします。 -
PhraseConfigを引数として渡し、新しいi18next Phrase In-Context Editor Post Processorインスタンスを作成します。
-
新しく作成したi18next Phrase In-Context Editor Post Processorインスタンスを、i18nextのuseメソッドに渡します。
-
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, { -
インコンテキストエディタを起動します。
-
Webブラウザでアプリケーションを開き、インコンテキストエディタを表示します。Phrase組織のいずれかのユーザーでサインインします。
備考
Vue I18n Phraseインコンテキストエディタは、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>
-
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');ライブラリを統合するには:
備考
このライブラリは、IE11以前のブラウザでは動作しない可能性があります。古いブラウザのサポートが必要な場合は、ビルドパイプラインにBabelを追加してください。
このライブラリは、react-intlパッケージの共通コンポーネントを継承しています。initializePhraseAppEditor を呼び出してPhraseを有効にすると、コンポーネントの動作が変わります。
この環境にIn-Contextエディタをインストールするには、以下の手順に従ってください：
-
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エディタとreact-intlの統合を示しています。
前提条件
-
サインアップ して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.tsimport { initializePhraseAppEditor, PhraseAppCompiler, PhraseConfig} from 'ngx-translate-phraseapp' let config = {PhraseConfig = { projectId: '<YOUR_PROJECT_ID>', accountID: '<YOUR_ACCOUNT_ID>' phraseEnabled: true, { initializePhraseAppEditor(config);app.module.tsimport { 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] {
コードサンプル
このdemo appは、In-ContextエディタとAngularおよびngx-translateの統合を紹介するものです。
備考
このライブラリは、古いブラウザやMicrosoft IE11ではそのままでは動作しない可能性があります。これらのブラウザのサポートが必要な場合は、ビルドパイプラインに Babel を追加してください。
前提条件
この環境に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"
-
任意のWebブラウザでアプリケーションを開き、In-Contextエディタがアプリに適用されていることを確認します。Phrase組織のいずれかのユーザーでサインインします。
コードサンプル
この デモ は、Phrase In-Contextエディタとreact-i18nextの統合を示しています。
前提条件
備考
ICEの旧バージョンは、バージョン2.0.0以降利用できません。
この環境にIn-Contextエディタをインストールするには、以下の手順に従ってください：
-
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エディタがアプリに適用されていることを確認します。Phrase組織のいずれかのユーザーでサインインします。
コードサンプル
この demo アプリケーションは、In-ContextエディタをDjangoアプリケーションと統合する方法を示しています。
前提条件
備考
ICEの旧バージョンは、バージョン2.0.0以降利用できません。
この環境にIn-Contextエディタをインストールするには、以下の手順に従ってください：
-
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 の場合、パッケージは翻訳関数からの戻り値を変更し、ICEが読み取れる形式で提示します。False に設定すると、標準の Flask-Babel gettext 関数にフォールバックします。
コードサンプル
この demo アプリケーションは、In-ContextエディタをFlaskアプリケーションと統合する方法を示しています。
前提条件
備考
バージョン2.0.0はSymfony 5以降をサポートしています。Symfony 2、3、または4を使用している場合は、旧バージョンのICEをご確認ください。
In-Context EditorをSymfonyアプリケーションに統合するには、以下の手順に従ってください。
-
PhraseStringsInContextEditorとその内容を、リポジトリの/src/Serviceフォルダ、または任意の場所にコピーします。別の場所に配置した場合は、それに応じて名前空間を調整してください。 -
config/services.yamlを調整して、translatorサービスを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アプリケーションに統合する方法を示しています。
通常、ビューレイヤーは、翻訳可能な文字列の名前（つまりキー）を何らかの翻訳メソッドやビューヘルパーに渡すことで翻訳をレンダリングします。
サンプル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エディターに表示される際にエスケープされる必要があります。
|
文字 |
エスケープシーケンス |
たとえば |
|---|---|---|
|
{ |
|
{{__phrase__<key__}} は {{__phrase__key[[[[[[html_open]]]]]]__}} になります |
|
{ |
|
{{__phrase__key>__}} は {{__phrase__[[[[[[html_close]]]]]]key__}} になります |
デフォルトでは、In-Contextエディターのドキュメントパーサーはすべてのキーを小文字に変換します。この動作で問題が発生し、In-Contextエディター内で大文字と小文字を区別するキーを使用する場合は、自動小文字変換機能を無効にしてください:
window.PHRASEAPP_CONFIG = {
autoLowercase: false
{
In-Contextエディターを使用する場合、ドキュメント内で一意の識別キーを生成するため、キー名は通常、デコレーター（デフォルトでは中括弧）で囲まれます:
{{__phrase_YOUR.KEY__}}
これが他のライブラリ（AngularJSやEmber.jsなどのクライアントサイドテンプレートエンジンなど）と競合し、同様の構文を使用している場合は、セットアップでIn-Contextエディターのデコレーターのプレフィックスとサフィックスを変更してください。パーサーがどのデコレーターを探すべきかをIn-Contextエディターに指示するには、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")
React のような仮想 DOM を使用する JavaScript フレームワークでインコンテキストエディターを使用する場合は、fullReparse を有効にしてください。これにより、DOM の変更が検出されたときに適切な再解析が可能になります。
window.PHRASEAPP_CONFIG = {
fullReparse: true
{
hidingClasses オプションにリストされているクラスは非表示として扱われ、インコンテキストエディタースキャナーによって除外されます。特定のクラスを持つ要素をスキャン可能にするには、そのクラス名を hidingClasses 配列に追加するのではなく、配列から削除してください。配列にクラス名を追加すると一致する要素が除外され編集ボタンが非表示になり、配列からクラス名を削除すると一致する要素が含まれ編集ボタンが表示されます。
hidingClasses オプションは、要素とその祖先に対して静的なクラス存在チェックを実行します。計算された可視性やレスポンシブな可視性は評価されません。hidingClasses のエントリと一致するレスポンシブユーティリティクラスを使用する要素（例：「hidden」という名前のクラスとブレークポイント固有の可視性クラスを組み合わせたもの）は、現在のビューポートで実際に表示されているかどうかに関係なく、スキャンから除外されます。スキャンが必要な要素に対して、純粋にレスポンシブなスタイリングのために hidingClasses にリストされているクラス名を使用することは避けてください。
In-Contextエディタは、sanitizeプロパティに関数を提供することで、翻訳がウェブページに挿入される前にエスケープまたは変更するように構成できます。
この関数は、最初の引数として翻訳文字列を受け取り、文字列を返す必要があります。
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
{
{
翻訳可能なキーが多数あるページの場合、インコンテキストエディターはキーを100個ずつのページに読み込みます。読み込み時に編集マーカーが有効になるのは、最初のページのキーのみです。残りのキーは、ページをさらにスクロールするか、キーを直接検索するまで翻訳されていない状態で表示されます。直接検索はページネーションをバイパスするためです。ページネーションはクライアントライブラリではなくサーバー側で行われるため、ページサイズを増やす設定オプションはありません。
スクロールに頼らずにすべてのキーの翻訳ステータスを確認するには、インコンテキストエディターの検索アイコンをクリックしてキーリストを開きます。キーリストには、すでに統合されたキーとプロジェクトから欠落しているキーの合計数が表示されます。また、現在のページで検出されたキーだけでなく、プロジェクト内のすべてのキーを表示するように切り替えることもできます。あるいは、Strings翻訳エディタで関連するジョブの翻訳完了状況を直接確認してください。こちらにはページベースのレンダリング制限はありません。
この環境にインコンテキストエディターをインストールするには、以下の手順に従ってください。
-
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.tsimport { initializePhraseAppEditor, PhraseAppCompiler} from 'ngx-translate-phraseapp' let config = { projectId: '<YOUR_PROJECT_ID>', phraseEnabled: true, prefix: "{{__", suffix: "__}}", fullReparse: true { initializePhraseAppEditor(config);app.module.tsimport { 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] {
コードサンプル
このデモアプリは、インコンテキストエディターとAngularおよびngx-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組織のユーザーでサインインしてください。
コードサンプル
angular-phrase用のこのデモアプリケーションは、angular-translateを使用してAngularJSをローカライズする方法を示しています。
この環境にインコンテキストエディターをインストールするには、以下の手順に従ってください。
-
pipを使用して
django-phraseパッケージをインストールします。$ pip install django-phrase
-
インストール済みアプリのリストにPhraseを追加します。
INSTALLED_APPS = ( 'phrase', { -
テンプレートでphrase_i18nテンプレートタグを使用します。
{% load phrase_i18n %}django-phraseが翻訳メソッドをオーバーライドできるようにするには、i18nの後にphrase_i18nを読み込みます。 -
レイアウトにJavaScriptスニペットを追加します。
{% phrase_javascript %} -
以下のオプションを使用して、プロジェクトのインコンテキストエディターを設定します。
PHRASE_ENABLED = TruePHRASE_PROJECT_ID = 'YOUR_PROJECT_ID'PHRASE_PREFIX = '{{__'PHRASE_SUFFIX = '__}}' -
任意のWebブラウザでアプリケーションを開き、インコンテキストエディターがアプリに適用されていることを確認してください。Phrase組織のユーザーでサインインしてください。
コードサンプル
このデモアプリケーションは、インコンテキストエディターをDjangoアプリケーションに統合する方法を示しています。
備考
このライブラリは、IE11以前のブラウザでは動作しない可能性があります。古いブラウザのサポートが必要な場合は、ビルドパイプラインにBabelを追加してください。
このライブラリは、react-intlパッケージの共通コンポーネントを継承しています。initializePhraseAppEditorを呼び出してPhraseを有効にすると、コンポーネントの動作が変わります。
この環境にインコンテキストエディターをインストールするには、以下の手順に従ってください。
-
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 Editorとreact-intlの統合を示しています。
この環境にIn-Context Editorをインストールするには、以下の手順に従ってください。
-
In-Context Editorを使用する環境に
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
アクセストークン
プロファイル設定、またはAuthorizations APIを介して、アクセス トークンを作成および管理します。
project.id
プロジェクトのプロジェクトIDは、プロジェクト設定にあります。これは、いくつかの設定オプションを含む初期化ファイルを作成します。
-
アプリケーションレイアウト内の
<head>タグに、phraseapp_in_context_editor_jsヘルパーを使用してJavaScriptスニペットを追加します：<head> { <%= phraseapp_in_context_editor_js %> { </head> -
任意のWebブラウザでアプリケーションを開き、In-Contextエディタがアプリに適用されていることを確認してください。Phrase組織のユーザーでサインインしてください。
-
Turbolinksを無効にします（使用している場合）
Turbolinksは、ページを取得するたびにページからすべてのIn-Context Editor UI要素を削除します。
<body>タグにdata-no-turbolink属性を追加します：<body <%= PhraseApp::InContextEditor.enabled? ? "data-no-turbolink" : "" %>>
コードサンプル
このデモは、Phrase In-Context Editorとreact-i18nextの統合を示しています。
2025年春
この環境にIn-Context Editorをインストールするには、以下の手順に従ってください。
-
パッケージ
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のユーザー資格情報でサインインします。
この環境に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(); -
インコンテキストエディタにキー名を公開するために、標準の翻訳メソッドをオーバーライドします。
# 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組織のユーザーでサインインしてください。
この環境に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); -
インコンテキストエディタにキー名を公開するために、標準の翻訳メソッドをオーバーライドします。
# 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組織のユーザーでサインインしてください。
備考
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');ライブラリを統合するには：
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エディターからアクセスできなくなり、通常通りレンダリングされます。