Help us understand the problem. What is going on with this article?

jHipster自己学習(2)

jHipsterの画面をいじってみる

jHipsterを触っていて感じたことや、
気になったことなどを個人的にまとめています。
間違った情報などあればご指摘ください。
※むしろ教えて欲しいです。
※MACで開発しています。

jHipsterの画面の立ち上げる

今回は学習のためReactを選択してプロジェクトを作成し、gitにあげて、いつでも戻せるようにしたところから作業スタートします。

まずは、ヘッダーにに表示されている情報を修正します。
画面表示を確認するために、ルートディレクトリで、下記コマンドを別々のコマンドで実行する。

./mvnw
npm start

すると、画面が立ち上がり、プロジェクト作成直後の画面が立ち上がります。
スクリーンショット 2019-10-22 9.51.59.png

トップ画面に存在する情報を書き換えていきます。

ヘッダーの文字を修正する

ルートディレクトリからみてsrc配下のファイルを編集します。
※実際にブラウザから読み込まれているのはtarget/www配下のモジュール

mavenのみのビルドの場合、TypeScriptの変更が即時反映されないため、Nodeサーバを立ち上げて、そこへブラウザアクセスして確認します。

スクリーンショット 2019-10-22 9.57.53.png

下記ファイルを確認すると、ヘッダ描写に関する情報が乗っているのがわかります。
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」、間に18文字アルファベットがあるから、だそうです。
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"に設定されている情報を変更します。
スクリーンショット 2019-10-22 10.09.44.png
ヘッダー文字が変わりました。

まとめると・・・
src/main/webapp/ 配下に画面描写の情報を持っているファイルがあり、
Translateタグに囲まれている場合(または囲む場合)、contentKeyから参照される日本語文言が表示されます。

日本語文言は
src/main/webapp/i18n/ja/ 配下に存在するため、そこを変更すると文言が変更できます。

多言語対応がすでに入っていて、国ごとの設定ファイルとして管理する、ということですね。(あまりたくさんのフレームワークを経験してないので、あまり知らない・・・)

画面レイアウトを変更する

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした