半自動で多言語・国際化を実現できるAngular i18nがすごい。DeepLでの自動翻訳も紹介
Angular公式のi18nパッケージ（パッケージ名 @angular/locale）がとても出来がよく、DeepLを使った自動翻訳も簡単にできたので、何がよかったかをご紹介したいと思います。「いやいやそんなのまだまだだ」「こっちのツールの方が強強だ」という方はぜひ記事を書いていただき、知見を共有できれば幸いです。 Angular i18nというと「Angular公式のi18nパッケージ」（ @angular/locale ）と「Angularのi18n化（国際化）」の2つの意味がありややこしいですが、本文では前者の「Angular公式のi18nパッケージ」を指すことにします。 Angular i18nのよかったこと4選 私が採用してとても開発者体験がよかった点を4つご紹介したいと思います。 1. compiletime i18nによりパフォーマンスの問題がない まず、SPAの多言語化には
Next jsのサイトをi18n対応する手順（国際化ルーティング）
今回はNext.jsを使っているサイトをi18n対応する手順を解説します。 国際化ルーティングを行わないと、 サイト品質やSEO順位が著しく下がります。 i18n routingについて順番に説明していくので、絶対に行いましょう！ Next jsにおけるi18nについてNext jsには国際化(i18n)ルーティングをビルトインでサポートしています。 ロケールのリスト、デフォルトロケール、ドメイン固有のロケールを指定すると、Next jsが自動的にルーティングを処理します。 i18nルーティングのサポートは、ルートとロケールの解析を合理化することで、react-intl、react-i18next、lingui、rosettaなどの既存の国際化ライブラリソリューションを補完することを目的としています。 → ソフトウェアグローバリゼーション入門 国際化I18Nと地域化L10Nによる多言語対応
Next.jsにてContextとhookで多言語対応する
Next.jsにてContextとhookで多言語対応する Next.js(React)で多言語対応をしたい場合、isaachinman/next-i18nextなどのライブラリはありますが、ちょっと多機能すぎて、ブラックボックスな部分が多いと感じたので、簡単に自作してみることにしました。 準備 とりあえずNext.jsの環境を用意します。 $ npx create-next-app demo --use-npm --example "<https://github.com/vercel/next-learn-starter/tree/master/learn-starter>" $ cd demo
i18n対応AngularアプリケーションをFirebase Hostingで公開するときの設定 - Qiita
{ "hosting": { "public": "dist", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "redirects": [ { "source" : "/", "destination" : "/en", "type" : 301 } ], "rewrites": [ { "source": "/ja/**", "destination": "/ja/index.html" }, { "source": "/en/**", "destination": "/en/index.html" } ] } } public ここに設定したパス以下のファイルがデプロイされるので、今回の場合en/jaどちらのディレクトリもデプロイされる - redirects デフォルトの言語をenにしたいので/にアクセ
i18n対応Angularアプリケーションの開発環境 - Qiita
初めに この記事では以下のような構成のAngularアプリケーションを開発する際のローカル開発環境の構築を解説します。 Angular公式のi18n機能を使ってi18nを実現する 最終的なビルド生成物はAOTビルド後にサーバーまたはS3などの静的ファイルホスティングサービスから配信する **/en/ **/ja/ などのアクセス先のパスを変化させることによって言語切替が可能 アプリケーションのUI上から言語選択を行う機能の動作確認をローカルで行う必要がある $ ng -v Angular CLI: 6.1.5 Node: 9.11.1 OS: darwin x64 Angular: 6.1.4 ... animations, common, compiler, compiler-cli, core, forms ... http, language-service, platform-br
アプリ内で日本語/英語の設定を切り替える - Qiita
はじめに アプリ内に言語設定を設けて その設定値によってアプリ内のテキストの日本語/英語切り替えを行ってみます。 やること ログイン画面（仮）のピッカーで言語を選択し、 ログインボタンタップで言語が切り替わるようにします。 ※ピッカーの使用方法の説明は割愛させていただきます。 やらないこと 端末の言語設定（「設定」アプリの言語と地域のところでの言語設定）による切り替え。 テキストフィールドに入力された文字列の変換。 Stringsファイルを作成する 今回のサンプルは日本語と英語のStringsファイルが必要になります。 それぞれ、Japanese.strings, English.stringsとします。 // ログイン画面の文字列 "ABCUserName_Login" = "ユーザー名"; "ABCPassword_Login" = "パスワード"; "ABCLanguage_Logi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
How to deploy a multi-language Angular 10 app to Google Cloud using Firebase - FileIdea