こんにちは。システムエンジニアの篠原です。
画面上のパーツの見た目を作り込んだり、機能を追加することは、Webエンジニアとしてはそこそこ大きな負担になるものです。
JavaScriptを含む多くの言語では、プラグインを追加することによって、より綺麗なデザインや実装を簡単に使用することができますが、前月にお伝えしたSPAフレームワーク、Vue.jsでも同様に、プラグインをインポートすることで、簡単に拡張が行えます。
昨今のWebサービスのグローバル化に伴って、多言語対応を意識した実装を求められることがかなり多くなりました。
私が携わっているVue.jsを使用したWebアプリケーションのプロジェクトでは、vue-i18nというプラグインを導入して多言語対応を行うことにしました。
画面上にベタ書きしていた文言を、キー項目と言語ごとの翻訳内容に分離することで、多言語拡張を実現します。
ここまではプラグインの簡単な説明ですが、実際にアプリケーションに適用していく際にはどんな点に注意しなければならないでしょうか？
キーと文言を1対1で管理する都合上、キー項目が多くなればなるほど、管理は複雑化します。
後から見ると、同じ文言が違うキーで散らばっていたりする、なんてこと、ないでしょうか。
後々に複雑化しないように文言管理を行うようにするためにはどのようにアプローチを行うのが良いのでしょう。
これは私の私見ではありますが、項目の分類はシンプルに、そして無用な例外を作らないようにと、次のように考えました。
まず、アプリケーションの中で同じ概念を指す項目名は、画面ごとに揺らぎがあってはなりません。
したがって、キー名を common.XXX などとします。
後から文言変更を行う際も、このキー単位で変更されるようにします。
次に、分割すべき単位をあらかじめ明確にしておきます。
これはプロジェクトごとに事情が異なるかと思いますが、機能IDごと、プログラムソースファイルごと、共通パーツごとなどが考えられます。
今回はVue.jsを使用している都合上、使っているvueファイルのファイル名で機械的に振り分けるようにしました。
これなら、多少文言の重複は発生するかもしれませんが、曖昧な分割にはなりません。
また、項目バリデーション用のメッセージも1つの分割単位としました。
screen.hoge.XXX
validation.XXX
などですね。
ここで、前述したアプリ上一貫した項目名がきちんとまとまっていれば、プレースホルダーを活用することで汎用的なキー項目化ができるはずです。
もし、より良い管理方法をご存じの方がいらっしゃれば、ご教示いただければ幸いです。
ソース上の文言をキー項目に置き換える作業そのものは単純ですが、キー項目の設定に最初に一定の方針を決めて取り組まないと、後から運用上困ることも多いです。
ここに記載されていることが参考になれば何よりです。
入会申込
ログイン
