@yamato-daiwa/frontendの日本語化

導入

当パッケージは**@yamato-daiwa/frontend**と言う主要パッケージに対してピア依存性となっているので、主要パッケージと一緒に導入する事。

npm i @yamato-daiwa/frontend 2.0.0-beta.10 @yamato-daiwa/frontend-localization-japanese -E

尚、当パッケージをJavaScriptフレームワークへの対応と一緒に利用可能。

| JavaScriptフレームワーク | パッケージ名・リンク | |-------------------|--------------------------------------------------------------------------------------------| | Vue | @yamato-daiwa/frontend-vue | | React | @yamato-daiwa/frontend-react |

目次

• ページ原形
  • staticPreviewAnywherePageLocalization__japanese
• GUIコンポーネント

StaticPreviewAnywherePage　静的プレビューの「どこでも」ページ

1. includeディレクティブでStaticPreviewAnywherePageLocalization.pugファイルをインポートする。 Requirementsと言うPugブロックの中で行う事を推奨。
2. JavaScriptブロックに於いて、StaticPreviewAnywherePage__YDF.configure({})を呼び出す際、 localizationと言うオブジェクト型の単一引数のプロパティにstaticPreviewAnywherePageLocalization__japanese定数を指定する。

//- 貴方のプロジェクトの場合、「node_modules」への相対パスが異なる可能性がある 
extends ../../node_modules/@yamato-daiwa/frontend/PagesTemplates/StaticPreviewAnywherePageTemplate.pug


block append Requirements

  //- 貴方のプロジェクトの場合、「node_modules」への相対パスが異なる可能性がある
  include ../../node_modules/@yamato-daiwa/frontend-localization-japanese/StaticPreviewAnywherePageLocalization.japanese.pug
    

block append Metadata

  -

    StaticPreviewAnywherePage__YDF.configure({

      metadata: {
        locale: "ja",
        title: "ページのタイトル",
        // ...
      },

      localization: staticPreviewAnywherePageLocalization__japanese,
      
      // ...

    });

グラフィカル・ユーザ・インターフェースのコンポネント

マーカップの日本語化

先ずincludeディレクティブでGUI_Components.pugをインポートする。

//- 貴方のプロジェクトの場合、「node_modules」への相対パスが異なる可能性がある
extends ../../@yamato-daiwa/frontend-localization-japanese/GUI_Components.pug

其の上、具体的なコンポーネントのマークアップを日本語化するには、当コンポーネントのPugミックスインを呼び出す前に、 JavaScriptブロック内で当コンポネントに 該当しているJavaScriptクラスのlocalizationと言う静的フィルドに日本語化のオブジェクトを設定する。 日本語化のオブジェクトは下記の原形に従っている。

[コンポーネント名（小文字から、ベンダー語尾無し）]YDF_ComponentLocalization__japanese

例えば、AttentionBoxコンポーネントの場合、日本語化のオブジェクトはattentionBoxYDF_ComponentLocalization__japaneseになり、当コンポーネント を日本語化するには、下記のコードが必要。

- AttentionBox__YDF.localization = attentionBoxYDF_ComponentLocalization__japanese;

| コンポネントのPug混入の名前 | JavaScriptクラス名 | 日本語化オブジェクト名 | |-------------------|---------------------|---------------------------------------------------| | AttentionBox--YDF | AttentionBox__YDF | attentionBoxYDF_ComponentLocalization__japanese |