Laravel ローカライゼーションは、開発者が多言語ウェブサイトを作成できるようにする強力なツールです。ウェブローカライゼーション を Laravel プロジェクトに実装することで、さまざまな言語的背景を持つ訪問者にパーソナライズされたユーザーエクスペリエンスを提供し、最終的にリーチを拡大し、ユーザーエンゲージメントを向上させることができます。
ローカライゼーションを Laravel アプリケーションに実装する方法を説明し、ローカライゼーションの取り組みを簡素化・強化するツールを紹介します！
なぜ Laravel ウェブサイトをローカライズする必要があるのですか？
Laravel ウェブサイトをローカライズすべき重要な理由をいくつか紹介します。.
- グローバルなオーディエンスに到達: あなたのLaravelウェブサイトをローカライズすることで、あなたのアプリの到達範囲を国際的なオーディエンスに拡大できます。これにより、異なる国や言語の背景を持つユーザーがあなたのコンテンツを理解し、操作できるようになります
- ユーザーエクスペリエンスの向上: ローカライゼーションにより、ユーザーはネイティブ言語でアプリを操作できます。これにより、ユーザーエクスペリエンスが大幅に向上します。これにより、エンゲージメント率が向上し、直帰率が低下し、コンバージョンが増加します。
- 競争優位:競争の激しいグローバル市場では、複数の言語でアプリを提供することで、競合他社に対して大きな優位性を得ることができます。国際市場への取り組みを示し、新しい市場への参入をより効果的に支援します。
- SEOの改善: 適切にローカライズされたウェブサイトは、特定の言語での検索結果でより高いランキングを得る傾向があります。これにより、ブログのトラフィックが増加し、多言語翻訳によるさまざまな市場でのオンラインでの可視性が向上します。
多言語 Laravel ローカライゼーションの要件
Laravelで多言語ローカライゼーションを実装する際には、いくつかの要件と手順を考慮する必要があります。.
- 最新のローカライゼーション機能を利用するには、 Laravel の最新バージョン（例：バージョン10.x）を使用していることを確認してください。.
- PHPと Laravel フレームワークの基本的な理解は、実装プロセスで役立ちます。.
- Laravelをサポートするローカル開発環境またはサーバー（Webサーバーとデータベースを含む）を設定します。.
- 最初からアプリケーションがサポートする言語を決定してください。.
シンプルな Laravel 翻訳
Laravel アプリケーションまたはウェブを翻訳する前に満たすべき要件を理解した後、 Laravel を簡単に翻訳するためのいくつかの手順を提供します.
これを行うには、ローカライズするビューアファイル（たとえば、resources/views/welcome.blade.php）を開きます。次に、bodyタグを以下のコードに置き換えます。.
<body class="antialiased">
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center py-4 sm:pt-0">
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
<div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
Welcome to Linguise website!
</div>
</div>
</div> <script data-no-optimize="1">var litespeed_vary=document.cookie.replace(/(?:(?:^|.*;\s*)_lscache_vary\s*\=\s*([^;]*).*$)|^.*$/,"");litespeed_vary||fetch("/wp-content/plugins/litespeed-cache/guest.vary.php",{method:"POST",cache:"no-cache",redirect:"follow"}).then(e=>e.json()).then(e=>{console.log(e),e.hasOwnProperty("reload")&&"yes"==e.reload&&(sessionStorage.setItem("litespeed_docref",document.referrer),window.location.reload(!0))});</script><script data-optimized="1" type="litespeed/javascript" data-src="https://www.linguise.com/wp-content/litespeed/js/91733db3849bd555826dc24780e4dad1.js?ver=0275f"></script><script>window.litespeed_ui_events=window.litespeed_ui_events||["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
ご覧のとおり、上記のテキストは現在コードに直接記述されています。これは効率が悪く、Web サイトを異なる言語に翻訳する
上記のテキストをより柔軟にし、さまざまな言語に簡単に適応できるようにします。 Laravel はこれに非常に役立つ機能を提供します。ローカライゼーションシステムです。最初のステップとして、既存のテキストを以下のコードに置き換えます。.
{{ __('Welcome to Linguise website!') }}
Laravel はデフォルトで上記のテキストを表示し、ユーザーが英語以外の言語を選択した場合に翻訳を検索します。この場合、アプリケーションのデフォルト言語として英語が使用されます。.
多言語Webサイトでのロケールの設定
しかし、 Laravel は現在の言語をどのように決定するのか、またはアプリケーションでどの言語が利用できるのかをどのように知るのでしょうか? config/app.phpファイルのロケール設定を確認します。このファイルを開き、次の2つのキーを探してください。.
/*
|--------------------------------------------------------------------------
| Application Locale Configuration
|--------------------------------------------------------------------------
|
| The application locale determines the default locale that will be used
| by the translation service provider. You are free to set this value
| to any of the locales which will be supported by the application.
|
*/
'locale' => 'en',
/*
|--------------------------------------------------------------------------
| Application Fallback Locale
|--------------------------------------------------------------------------
|
| The fallback locale determines the locale to use when the current one
| is not available. You may change the value to correspond to any of
| the language folders that are provided through your application.
|
*/
'fallback_locale' => 'en',
キーに関する説明は明確であるべきです。要約すると、ロケールキーはアプリケーションのデフォルトのロケールを保持します（コードで他のロケールが指定されていない場合）。存在しないロケールがアプリケーションで要求された場合、フォールバックロケールが有効になります。.
次に、このファイルに新しいキーを追加して、サポートされているすべてのロケールのリストを提供します。.
/*
|--------------------------------------------------------------------------
| Available locales
|--------------------------------------------------------------------------
|
| List all locales that your application works with
|
*/
'available_locales' => [
'English' => 'en',
'Italian' => 'it',
'French' => 'fr',
],
この時点で、 Laravel のWebサイトが英語、イタリア語、フランス語の3つの言語をサポートするように設定されています。.
Laravel 翻訳ファイルの概要
Laravelをはじめ、多くのフレームワークでは、異なる言語の翻訳が別々のファイルに保存されています。これらの翻訳ファイルを整理するために2つの方法が使用されています。.
古い方法では、resources/lang/{en,fr,it}/{myfile.php}のような構造でファイルを保存します。新しい方法では、resources/lang/{fr.json, it.json}のようなJSONファイルを使用します。この記事では新しい方法に焦点を当てますが、翻訳キーの命名とアクセス方法の違いは別として、古い方法でも原則は似ています。.
地域的なバリエーションがある言語の場合、ISO 15897規格に従って言語ディレクトリまたはファイルに名前を付ける必要があります。たとえば、イギリス英語はen-gbではなくen_GBと呼ばれます。.
一般情報
Laravelでは、多くのフレームワークと同様に、異なる言語の翻訳は別々のファイルに保存されます。 Laravel 翻訳ファイルを整理する方法は主に2つあります。.
- 従来の方法では、resources/lang/{en,fr,it}/{myfile.php} のパスにファイルを保存します。.
- 最新の方法では、resources/lang/{fr.json, it.json} ファイルを使用します。.
この記事では、2番目の方法に焦点を当てますが、原則は両方に適用できます（翻訳キーの名前付けとアクセス方法に違いがあります）。 .
地域によって異なる言語の場合、ISO 15897規格に従って言語ディレクトリ/ファイル名を付けることが推奨されます。たとえば、イギリス英語はen-gbではなくen_GBと表記されます。.
Laravel 翻訳ファイルの作成
アプリケーションのロケールを構成したら、デフォルトのウェルカムメッセージの翻訳に進むことができます。.
まず、resources/lang ディレクトリ内に JSON 形式の新しいローカリゼーションファイルを作成することから始めましょう。まず、resources/lang/it.json ファイルを作成し、適切な翻訳を入力します。.
{
"Welcome to Linguise website!": "Benvenuti nel sito web di Linguise!"
}
次に、resources/lang/ja.jsonファイルを追加します.
{
"Welcome to Linguise website!": "Bienvenue sur le site de Linguise"
}
ご覧のとおり、welcome.blade.phpファイル（{{ __(‘ Linguise ウェブサイトへようこそ！’) }}）からデフォルトメッセージを一貫して参照しています。デフォルトメッセージが英語であることを Laravel が自動的に認識するため、en.jsonファイルを作成する必要はありません。.
Laravel 多言語アプリで言語スイッチャーを設定する
さらに、 Laravel はローカル言語を上書きするようにまだ設定されていないため、今のところ、ルート内で直接翻訳を処理します。デフォルトのウェルカムルートをroutes/web.phpファイル内でこのように変更します。.
Route::get('/{locale?}', function ($locale = null) {
if (isset($locale) && in_array($locale, config('app.available_locales'))) {
app()->setLocale($locale);
}
return view('welcome');
});
この場合、オプションのロケールGETパラメータをキャプチャし、それに基づいて現在のロケールを設定します (要求されたロケールがサポートされている場合)。.
これで、Webサイトにアクセスし、サポートされている言語をURLの最初のセグメントとして含めることができます。たとえば、localhost/it または localhost/fr に移動すると、ローカライズされたコンテンツが表示されます。ロケールを指定しない場合、またはサポートされていないロケールを選択した場合、 Laravel は英語 (en) にデフォルト設定されます。.
Laravel のローカリゼーションミドルウェア
すべてのURLにロケールを含めることは理想的ではなく、サイトの視覚的な魅力を損なう可能性があります。これに対処するために、言語スイッチャーを設定し、ユーザーセッションを利用して翻訳されたコンテンツを表示します。app/Http/Middleware/Localization.phpファイルに新しいミドルウェアを作成するか、artisan make:middleware Localizationコマンドを実行して生成できます。.
次に、以下のコードを内部に追加します。.
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\App;
use Illuminate\Support\Facades\Session;
class Localization
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure $next
* @return mixed
*/
public function handle(Request $request, Closure $next)
{
if (Session::has('locale')) {
App::setLocale(Session::get('locale'));
}
return $next($request);
}
}
このミドルウェアは、セッションにこのオプションが存在する場合、ユーザーが選択したロケーションを使用するように Laravel を指示します。.
この処理をすべてのリクエストで実行する必要があるため、app/Http/Kernel.php の Web ミドルウェアグループのデフォルトのミドルウェアスタックに追加します。.
/**
* The application's route middleware groups.
*
* @var array<string, array<int, class-string|string>>
*/
protected $middlewareGroups = [
'web' => [
\App\Http\Middleware\EncryptCookies::class,
\Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
\Illuminate\Session\Middleware\StartSession::class,
\Illuminate\View\Middleware\ShareErrorsFromSession::class,
\App\Http\Middleware\VerifyCsrfToken::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
\App\Http\Middleware\Localization::class, // <--- add this
],
ルートの変更
次に、routes/web.phpファイルでロケールを切り替えるルートを定義します。ここではクロージャルートを使用していますが、必要に応じてコントローラ内に同じコードを配置することもできます.
Route::get('language/{locale}', function ($locale) {
app()->setLocale($locale);
session()->put('locale', $locale);
return redirect()->back();
});
さらに、以前にデフォルトのウェルカムルートに追加されたロケール切り替えを削除します。ルートルートはこれで次のようになります。.
Route::get('/', function () {
return view('welcome');
});
これが完了すると、ユーザーはlocalhost/language/{locale}にアクセスすることによってのみアクティブな言語を切り替えることができます。選択されたロケールはセッションに保存され、ユーザーは前のページに戻されます（Localizationミドルウェアによって処理されます）。.
テストするには、localhost/language/it にアクセスしてください（ブラウザでセッションCookieが有効になっていると仮定）。翻訳されたコンテンツが表示されるはずです。サイトをナビゲートしたりページを更新したりしても、選択した言語は有効なままです。.
言語切り替え機能の実装
<div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
@foreach($available_locales as $locale_name => $available_locale)
@if($available_locale === $current_locale)
<span class="ml-2 mr-2 text-gray-700">{{ $locale_name }}</span>
@else
<a class="ml-1 underline ml-2 mr-2" href="language/{{ $available_locale }}">
<span>{{ $locale_name }}</span>
</a>
@endif
@endforeach
</div>
新しく作成した言語スイッチャーを「welcome」ビューに含めるには、welcome.blade.phpファイルのスイッチャーを表示したい場所に次の行を追加するだけです。.
<body class="antialiased">
<div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center py-4 sm:pt-0">
<div class="max-w-6xl mx-auto sm:px-6 lg:px-8">
@include('partials/language_switcher')
<div class="flex justify-center pt-8 sm:justify-start sm:pt-0">
{{ __('Welcome to our website!') }}
</div>
</div>
</div> <script data-optimized="1" type="litespeed/javascript" data-src="https://www.linguise.com/wp-content/litespeed/js/91733db3849bd555826dc24780e4dad1.js?ver=0275f"></script><script>window.litespeed_ui_events=window.litespeed_ui_events||["mouseover","click","keydown","wheel","touchmove","touchstart"];var urlCreator=window.URL||window.webkitURL;function litespeed_load_delayed_js_force(){console.log("[LiteSpeed] Start Load JS Delayed"),litespeed_ui_events.forEach(e=>{window.removeEventListener(e,litespeed_load_delayed_js_force,{passive:!0})}),document.querySelectorAll("iframe[data-litespeed-src]").forEach(e=>{e.setAttribute("src",e.getAttribute("data-litespeed-src"))}),"loading"==document.readyState?window.addEventListener("DOMContentLoaded",litespeed_load_delayed_js):litespeed_load_delayed_js()}litespeed_ui_events.forEach(e=>{window.addEventListener(e,litespeed_load_delayed_js_force,{passive:!0})});async function litespeed_load_delayed_js(){let t=[];for(var d in document.querySelectorAll('script[type="litespeed/javascript"]').forEach(e=>{t.push(e)}),t)await new Promise(e=>litespeed_load_one(t[d],e));document.dispatchEvent(new Event("DOMContentLiteSpeedLoaded")),window.dispatchEvent(new Event("DOMContentLiteSpeedLoaded"))}function litespeed_load_one(t,e){console.log("[LiteSpeed] Load ",t);var d=document.createElement("script");d.addEventListener("load",e),d.addEventListener("error",e),t.getAttributeNames().forEach(e=>{"type"!=e&&d.setAttribute("data-src"==e?"src":e,t.getAttribute(e))});let a=!(d.type="text/javascript");!d.src&&t.textContent&&(d.src=litespeed_inline2src(t.textContent),a=!0),t.after(d),t.remove(),a&&e()}function litespeed_inline2src(t){try{var d=urlCreator.createObjectURL(new Blob([t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1")],{type:"text/javascript"}))}catch(e){d="data:text/javascript;base64,"+btoa(t.replace(/^(?:<!--)?(.*?)(?:-->)?$/gm,"$1"))}return d}</script></body>
app/Providers/AppServiceProvider.phpファイルを開き、boot()メソッドに以下のコードを追加して、言語切り替え時に現在のロケールをすべてのビューと共有します。
* Bootstrap any application services.
*
* @return void
*/
public function boot()
{
view()->composer('partials.language_switcher', function ($view) {
$view->with('current_locale', app()->getLocale());
$view->with('available_locales', config('app.available_locales'));
});
}
Laravel PHPの高度な翻訳機能
このディスカッションでは、他のローカリゼーションコンポーネント、つまり日付、数字、通貨を処理します。手順は以下の通りです。.
Laravel のローカライズされた日付
日付と時刻の処理は、ローカリゼーションのプロセスにおいて非常に重要です。 Laravel は、日付と時刻を管理するためにCarbonを使用します。ここでは、Carbonを使用してローカライズされた日付を表示する方法について説明します。.
<?php
Route::get('/', function () {
$today = \Carbon\Carbon::now()
->settings(
[
'locale' => app()->getLocale(),
]
);
// LL is macro placeholder for MMMM D, YYYY (you could write same as dddd, MMMM D, YYYY)
$dateMessage = $today->isoFormat('dddd, LL');
return view('welcome', [
'date_message' => $dateMessage
]);
});
このコードは、アプリケーションの現在のロケールに基づいてCarbonロケールを設定し、それに応じて日付をフォーマットします。.
ビューにローカライズされた日付を表示するには:
{{ __('Welcome to our website, :Name', ['name' => ‘Johb’]) }}
<br>
{{ trans_choice('{0} There :form :count apples|{1} There :form just :count apple|[2,19] There :form :count apples', 1, ['form' => 'is']) }}
<br>
{{ $date_message }}
数字と通貨のフォーマット
国によって、数字のフォーマット方法はさまざまです。たとえば、.
- フランス → 123 123,12
- ドイツ → 123.123,12
- 日本 → 123,123
これらのバリエーションを Laravel アプリケーションで実現するには、NumberFormatterを使用できます。.
<?php
$num = NumberFormatter::create('en_US', NumberFormatter::DECIMAL);
$num2 = NumberFormatter::create('fr', NumberFormatter::DECIMAL);
特定の言語で数字をスペルアウトすることもできます。.
<?php
$num = NumberFormatter::create('en_US', NumberFormatter::SPELLOUT);
$num2 = NumberFormatter::create('it', NumberFormatter::SPELLOUT);
通貨は次のとおりです。フランス語のロケール (`fr`) では、通貨はユーロ (€) で表示され、米国のロケール (`en_US`) では、米ドル ($) で表示されます。.
<?php
$currency1 = NumberFormatter::create('it', NumberFormatter::CURRENCY);
$currency2 = NumberFormatter::create('en_US', NumberFormatter::CURRENCY);
Laravel ローカライゼーションの代替ソリューション Linguise
記事で説明されている Laravel ローカリゼーションの手順を理解した後、このプロセスには、ユーザーが Laravel プログラムコードを深く理解する必要がある多くの手順が含まれます。.
これは、アプリケーションのローカライズを希望する初心者ユーザーにとって確かに困難なことになる可能性があります。したがって、より革新的なソリューションが必要です。それは、高速翻訳が可能で、ローカライズをサポートし、実装に必要な手順がわずかである必要があります。.
有望なソリューションの1つは Linguiseです。 Linguise は、深いコーディング知識を必要とせずに、 Laravel ローカライゼーションへのより簡単で効率的なアプローチを提供します。 Linguise の主な機能には次のものがあります。.
- Laravelとの簡単な統合
- コーディングなしで言語スイッチャーをカスタマイズする
- 画像翻訳
- ローカルコンテキストに合わせて翻訳をカスタマイズするライブエディタ
- 動的に生成されるコンテンツの動的翻訳
- 多言語バージョンのSEO最適化
LaravelLinguiseインストールする手順も簡単に実行できます。ここでは簡単な説明を示します。
- Linguise アカウントを作成します（30日間の無料トライアルを無料で利用できます）
- Laravel のWebドメインを登録し、いくつかの情報を入力します。APIキーが取得できます。.
- Linguise 翻訳スクリプトを入手した Laravel フォルダにアップロードして接続します。.
- htaccessファイルに言語URLを設定します。.
- HTMLのヘッダーに言語切り替えスクリプトを挿入します。.
- 必要に応じて言語スイッチャーをカスタマイズします
- 言語切り替えは Laravel ウェブに表示され、コンテンツは自動的に翻訳されます。.
どうやって？ Linguiseを使用すると、登録してアクティブにするだけで言語スイッチャーが表示されます。その後、ライブエディター、メディアの翻訳、画像などを通じて自由にローカライズできます。.
結論
Laravel ローカライゼーションは、開発者が多言語のウェブサイトやアプリケーションを作成できるようにする強力な機能です。私たちが見てきたように、組み込みの Laravel ローカライゼーションプロセスには複数のステップが含まれ、フレームワークの理解が必要です。初心者やより迅速な解決策を求める人にとっては、難しい場合があります。.
Linguiseのようなツールは、より合理化されたアプローチを求める人々に革新的な代替手段を提供します。これらのソリューションは、迅速な翻訳機能、簡単な統合、言語切り替えや画像翻訳などのユーザーフレンドリーな機能を提供します。さあ、あなたのLinguiseアカウントを作成して、Laravel
