レンコン畑でつかまえてスマートフォン用の表示で見るレンコン畑でつかまえて2019-05-05Angularでもいい感じに多言語化したいはじめに4月からVBおじさん改めナウでヤングなWebエンジニアになりました弊社です。MS信者の弊社としましては、Blazorをぶっこんでヒャッハーしたいのですが、GAしていないものをプロダクションに投入するのはまぁ・・・ねぇ・・・*1github.comじゃけんAngularを投入しましょうね~ということになったのですが、Angularで多言語化するにはどうすればいいのかよく分からなかったので確認してみました。ドキュメント困ったら公式ドキュメントを参照する。万葉集にも書かれています。time)の二つの手段があって、AOTは事前に各ロケール別のパッケージを生成しておく必要があるけどはやいよ。JITは実行時にやるから事前の準備は要らないけどおそいよ。好きなほうを選んでいってねだそうです。今回はAOTでやってみることにします。今回は、ビルド済みのAngularアプリケーションをnginxでホストします。APIサーバはnginxでリバースプロキシをかますことでいい感じにAngularアプリケーションからアクセスできるようにします。クライアント側はhogeとfugaの二つのコンポーネントがあり、下部のリンクをクリックすると交互に画面が遷移します。カウントはそれぞれの画面が遷移した回数を表し、これはクライアント個々の回数ではなくアプリケーション全体の数をカウントしています。そのためカウントはサーバ側のAPIでカウントをしています。APIで実装されています。多言語化まず、ベースとなるアプリケーションを用意します。今回はあらかじめこちらに用意しておきました。(キュー〇三分クッキング風に)github.com翻訳属性の付与とりあえずは多言語化する箇所にひたすらi18n属性を追加していきます。以下のコマンドを使用し翻訳ファイルを生成します。src/localeデフォルトではsrc直下に作成されるのですが、それだとなんか嫌なのでとりあえずlocale以下に格納するようにします。翻訳ファイルへの翻訳の記入さっき作った翻訳ファイルをコピーし、翻訳(今回は日本語)を入力します。github.comserve及びbuild時の変換設定デバッグ時及びビルド時に翻訳結果をマージできるように設定ファイルをいい感じに書き換えます。github.comすると、コマンドで日本語の翻訳結果がマージされたアプリケーションが起動します。APIAngularはデフォルトだと/直下に配置される前提でビルドされるっぽいので、それぞれのURLから展開できるようにbase-hrefを設定します。buildjaで成果物をビルドします。成果物をサーバにコピーして以下の感じに展開します。└─index.htmlとかそうしたら、いい感じにnginxの設定ファイルを書きます。}}確認おわりに悩んだ時間の大半はnginxの設定でした。2017がリリースされました。»プロフィールid:jyuch一人称が『弊社』なだけで別に所属団体の見解ってわけじゃないからね。(5)はてなブログをはじめよう!jyuchさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。