jHipsterの画面をいじってみる
jHipsterを触っていて感じたことや、
気になったことなどを個人的にまとめています。
間違った情報などあればご指摘ください。
※むしろ教えて欲しいです。
※MACで開発しています。
jHipsterの画面の立ち上げる
今回は学習のためReactを選択してプロジェクトを作成し、gitにあげて、いつでも戻せるようにしたところから作業スタートします。
まずは、ヘッダーにに表示されている情報を修正します。
画面表示を確認するために、ルートディレクトリで、下記コマンドを別々のコマンドで実行する。
./mvnw
npm start
すると、画面が立ち上がり、プロジェクト作成直後の画面が立ち上がります。
トップ画面に存在する情報を書き換えていきます。
ヘッダーの文字を修正する
ルートディレクトリからみてsrc配下のファイルを編集します。
※実際にブラウザから読み込まれているのはtarget/www配下のモジュール
mavenのみのビルドの場合、TypeScriptの変更が即時反映されないため、Nodeサーバを立ち上げて、そこへブラウザアクセスして確認します。
下記ファイルを確認すると、ヘッダ描写に関する情報が乗っているのがわかります。
src/main/webapp/shared/layout/header/header-components.tsx
が・・・当該箇所の記述を確認すると、
export const Brand = props => (
<NavbarBrand tag={Link} to="/" className="brand-logo">
<BrandIcon />
<span className="brand-title">
<Translate contentKey="global.title">Review Comparison</Translate>
</span>
<span className="navbar-version">{appConfig.VERSION}</span>
</NavbarBrand>
);
Translateというタグで囲まれているのがわかります。
こちらは、言語設定に応じて描写する情報を変えるためのタグで、jHipsterでプロジェクト作成時になんの言語を選択したのか、によって分岐する様子です。
ここのTranslateを外して、表示しても良いのですが・・・描写するために使用している設定ファイルの方を変更します。
修正する対象ファイルは、
src/main/webapp/i18n/ja/global.jsonです。
header-components.tsx側でタグに振られたキーが、
contentKey="global.title"
ここに対応する日本文言を変更します。
余談ですが・・・i18nは「Internationalization」の最初が「i」、最後が「n」、間に１８文字アルファベットがあるから、だそうです。
Webで調べました。
{
"global": {
"title": "Review_comparison",
"browsehappy": "<strong>古い</strong>ブラウザーが使われています。より良い体験を得るために<a href=\"http://browsehappy.com/?locale=en\">ブラウザをアップデート</a>してください。",
"menu": {
"home": "ホーム",
"jhipster-needle-menu-add-element": "JHipster will add additional menu entries here (do not translate!)",
"entities": {
"main": "エンティティ",
"title"に設定されている情報を変更します。
ヘッダー文字が変わりました。
まとめると・・・
src/main/webapp/ 配下に画面描写の情報を持っているファイルがあり、
Translateタグに囲まれている場合(または囲む場合)、contentKeyから参照される日本語文言が表示されます。
日本語文言は
src/main/webapp/i18n/ja/ 配下に存在するため、そこを変更すると文言が変更できます。
多言語対応がすでに入っていて、国ごとの設定ファイルとして管理する、ということですね。（あまりたくさんのフレームワークを経験してないので、あまり知らない・・・）