JHIPSTERのBLUEPRINTを作る

[ トップ ] [ 編集 | 凍結 | 差分 | バックアップ | 添付 | リロード ] [ 新規 | 一覧 | 単語検索 | 最終更新 | ヘルプ ]

目次 †

目次
blueprintとは
- 翻訳元のサイト
blueprintを作成する
いざ、使ってみる。

↑

blueprintとは †

一言でいうと、JHIPSTER用のレイヤー単位での、ジェネレータ差し替え機構。かな。

デフォルトだと、テーブルの管理画面を迅速に作るぐらいしかできないし、利用者のプロジェクトのお作法用に、カスタマイズっているとおもうんだよね。

内部で使っているのは、yeomanの機能。

直訳すると、青写真なんだけど、yeomanでいうところの、generator-generator

で、JHIPSTER5までは、moduleという概念だったんだけど、次の点が改善されていると思う。

webアプリケーションのレイヤーごとに、テンプレートを切り替えれるようにした。

レイヤーとは、たとえば、サーバとか、クライアントとか、エンティティ等である。

JHIPSTER6ぐらいから使われだした、JHIPSTER用のテンプレート生成テンプレート

↑

翻訳元のサイト †

https://www.jhipster.tech/modules/creating-a-blueprint/

いっておきますが、英語は得意ではありません。そして、意訳が多分にふくまれております。あしからず。

基本的に、グーグル翻訳をペタペタはってます。

↑

blueprintを作成する †

JHipsterブループリントは、

yeomanのジェネレータの合成機能

https://yeoman.io/authoring/composability.html

をつかっています。

特定のJHipsterサブジェネレータから構成され、そのサブジェネレータの機能を拡張するYeomanジェネレータです。ブループリントは、サブジェネレータの定義済みゲッタをオーバーライドし、独自のテンプレートと機能を提供することができます。

JHipsterの青写真は、JHipsterのマーケットプレイス

https://www.jhipster.tech/modules/marketplace/#/list

にjhipster-blueprintラベルとともに記載されています。

これにより、JHipsterの特定の部分、たとえばクライアント側のテンプレートのみをオーバーライドできるサードパーティ製のブループリントを作成できます。

↑

blueprintの使い方 †

もし、<blueprint name>という、blueprintが使えるようになっている前提ですが、

ブループリントを実行するには、下記のコマンドを実行します。

jhipster --blueprint <blueprint name>

もうちょっと、詳しく説明すると、

blueprintは、npmで、管理されているyeoman製のjhipsterモジュールみたいなものです、

自分でも何言っているのかわかんなくなりそうですが、言いたいことは、

使う準備として、使いたいものをしらべて、npm installしないとだめということです。

たとえば、使いたいものが、generator-jhipster-vuejs　という名前だとすると、

npm i -g generator-jhipster-vuejs

とします、i は、installの意味、-g は、いろいろなユーザで使えるように指定する意味だったとおもいます。

で、<blueprint name>が、vuejsだったとすると、

jhipster --blueprint vuejs

とやるわけです。

↑

Kotolinコードを生成するblueprint †

JHipster Kotlinのblueprintは、同等のKotlinコードとサーバーサイドJavaコードのほとんどを置き換えます。

https://github.com/jhipster/jhipster-kotlin

↑

JHIPSTERのBLUEPRINT使用例 †

↑

クライアントのサブジェネレータであるbuleプリントを上書きする例 †

https://github.com/hipster-labs/generator-jhipster-sample-blueprint

↑

blueprintの初期スケルトンの作成方法 †

JHipsterブループリントジェネレータを使用してブループリントを初期化できます。

JHipsterブループリントジェネレータを使用するには、以下のコマンドを実行します。

なお、このドキュメント書いているのは、以下のバージョンの時点での記事です。

generator-jhipster-blueprint@0.0.9

(バージョンが0.1にすらなっていないという。。。アルファ版相当？)

npm install -g generator-jhipster-blueprint

mkdir my-blueprint && cd my-blueprint

# リポジトリ作成
git init

# 最初のコミット
git commit --allow-empty -m "first commit"

Windowsをつかっている方への注意事項：yoコマンドは、PowerShell?から起動しないと、インタラクティブが正しく機能しないから注意しましょう。

yo jhipster-blueprint

質問に答えながら上書きしたいサブジェネレータを選択してください。

↑

質問される事項 †

? What is the base name of your module? helloworld
? Give a description of your module
? Which sub-generators do you want to override? entity
? What is your GitHub username? khayashi4337
? Who are you? Firstname Lastname Hayashi Kuniyuki
? Your email? khayashi4337@gmail.com
? Your home page url?
? Do you want to add a license? Apache License 2.0

↑

entityをえらんでみた結果例 †

[ 'entity' ]
   create package.json
   create .editorconfig
   create .eslintignore
   create .eslintrc.json
   create .prettierrc
   create .prettirignore
   create .gitattributes
   create .gitignore
   create .travis.yml
   create LICENSE
   create README.md
   create generators\entity\index.js
   create test\entity.spec.js

##### USAGE #####
To begin to work:
- launch: yarn install or npm install
- link: yarn link or npm link
- link JHipster: yarn link generator-jhipster or npm link generator-jhipster
- test your module in a JHipster project:
    - create a new directory and go into it
    - link the blueprint: yarn link generator-jhipster-helloworld or npm link  generator-jhipster-helloworld
    - launch JHipster with flags: jhipster --blueprint helloworld
- then, come back here, and begin to code!

↑

でてきたUSAGEの意訳 †

##### 使い方 #####

ほかのプロジェクトで使うための準備

　以下のコマンドを実行:

  npm install
  npm link
  npm link generator-jhipster

 2.テンプレートを修正してください。

 3.いざ、テンプレート生成

あなたのプロジェクトに、ディレクトりを移動させます。

      npm link  generator-jhipster-helloworld

コードが上書きされるので、そのまえに、いったんgitで、コミットしてあることを確認します。

      git status

      jhipster --blueprint helloworld

コードが上書きされていることを確認しましょう。

      git diff

↑

JHipsterブループリントの基本事項 †

JHipsterのblueprintは:

NPMのパッケージです。そして、Yeoman のgeneratorです。

下記に上げるような他のジェネレータ同様に、Yeomanのルールに従っています。

http://yeoman.io/generators/

なので、yoコマンドをつかってインストールしたり、更新したりできます。

. 先頭は generator-jhipster-で始めてください。

yeoman-generator と jhipster-blueprint の２つのキーワードをもっている必要があります。

ブループリントは、次のサブジェネレーター（ジェネレーターフォルダーの下）のみを拡張できます。

common
client
server
entity
entity-client
entity-server
entity-i18n
languages
spring-controller
spring-service

↑

generator-jhipsterをインポートする †

JHipsterブループリントは、依存関係としてgenerator-jhipsterを持っている必要があり、それをオーバーライドするために適切なsubジェネレータをインポートする必要があります。

    const chalk = require('chalk');
    const ClientGenerator = require('generator-jhipster/generators/client');
    ...

    module.exports = class extends ClientGenerator {
        constructor(args, opts) {
            super(args, Object.assign({ fromBlueprint: true }, opts)); // 変数fromBlueprintは重要です

            const jhContext = this.jhipsterContext = this.options.jhipsterContext;

            if (!jhContext) {
                this.error(`これは、JHIPSTERのblueprintです。 利用方法は、右記のような書式です。 ${chalk.yellow('jhipster --blueprint helloworld')}`);
            }

            this.configOptions = jhContext.configOptions || {};
            // このサブジェネレータ用のセットアップオプションはJHipsterで再利用してます。
            jhContext.setupClientOptions(this, jhContext);
        }

        get initializing() {
            // 親クラスのメソッドを直接よびだすことで何もyeomanのフェースを上書きしません。
            return super._initializing();
        }

        // 同様に、サブジェネレータのほかのフェーズの記述を必要に応じて追加します。
    }

上記の例の ClientGenerator? のように、アンダーバーで始まるメソッドは、親クラスで、再利用できます。

JHipsterのblueprintなどのサブジェネレータは、yeomanのフェーズで、どうするかの記述をします。

それぞれのyeomanのフェーズは、getterメソッドになっています。(get ではじまるやつ)

たとえば、get initializing　を例にとってみます。

blueprintはフェーズでの処理を、オーバーライドすることで、カスタマイズすることができるのです。

↑

yeomanのフェーズのカスタマイズ方法 †

1) なにもしない場合は、こちら

    get initializing() {
        return super._initializing();
    }

親クラスの初期化メソッドを呼び出しています。アンダーバーがついていますね。

2) フェーズを全部上書きする例, 自前の制御オンリーですね。

    get initializing() {
        return {
            myCustomInitPhaseStep() {
                // Do all your stuff here
            },
            myAnotherCustomInitPhaseStep(){
                // Do all your stuff here
            }
        };
    }

3) フェーズを部分的に上書きする方法です.既存のメソッドの上書きや、新しく初期化メソッドを追加する例

    get initializing() {
        const phaseFromJHipster = super._initializing();
        const myCustomPhaseSteps = {
            displayLogo() {
                // JHIPSTERのdisplayLogoメソッドを上書き
            },
            myCustomInitPhaseStep() {
                // あなたのオリジナルの処理
            },
        }
        return Object.assign(phaseFromJHipster, myCustomPhaseSteps);
    }

ブループリントから直接JHipsterの変数や関数にアクセスすることもできます。

↑

利用可能な変数と関数 †

↑

設定ファイル　.yo-rc.json　からの変数: †

あなたはJHipster設定.yo-rc.jsonとあなたのblueprint設定の両方からなる設定にアクセスすることができます

↑

グローバル変数　(ジェネレータ定数): †

ジェネレータ定数で定数を使うことができます。

    const javaDir = `${jhipsterConstants.SERVER_MAIN_SRC_DIR + this.packageFolder}/`;
    const resourceDir = jhipsterConstants.SERVER_MAIN_RES_DIR;
    const webappDir = jhipsterConstants.CLIENT_MAIN_SRC_DIR;

↑

関数: †

あなたはgenerator-baseですべての関数を使うことができます：

   this.angularAppName = this.getAngularAppName(); // get the Angular application name.
   this.printJHipsterLogo(); // to print the JHipster logo

注意： generator-base.jsと内の変数generator-constants.jsはパブリックAPIの一部なので、semverのバージョン管理に従います。

しかしgenerator-base-private.js、utils.jsなどのような他のファイルはsemverのバージョン管理に従わず、マイナーバージョン間でメソッドシグネチャを壊すかもしれません。

↑

blueprintの開発のお作法 †

blueprintの開発中に、以下の手順に注意してください。それらはとても重要です

ブループリントをグローバルにリンク注意: ブループリント（ステップ3）を作成中の各プロジェクトにリンクしたくない場合は、yeomanはグローバルにリンクされたYarnモジュールをフェッチしていないようなので、Yarnの代わりにNPMを使用してください。一方、これは以下のすべてのステップでもNPMを使用する必要があることを意味します。
```
cd my-blueprint
npm link
```

JHipsterの開発版をあなたの設計図にリンクしてください（オプション：マスターブランチやあなた自身のカスタムフォークのように、リリースされていないJHipster版を使いたい場合にのみ必要です）
```
cd generator-jhipster
npm link

cd my-blueprint
npm link generator-jhipster
```

生成するアプリの新しいフォルダを作成し、そこにJHipsterとあなたの設計図をリンクします。

mkdir my-app && cd my-app

npm link generator-jhipster-myblueprint
npm link generator-jhipster (Optional: Needed only if you are using a non-released JHipster version)

jhipster -d --blueprint myblueprint

↑