[[JHIPSTER一覧]] *目次 [#c7471137] #contents * blueprintとは [#r0e288ab] 一言でいうと、JHIPSTER用のレイヤー単位での、ジェネレータ差し替え機構。かな。 デフォルトだと、テーブルの管理画面を迅速に作るぐらいしかできないし、利用者のプロジェクトのお作法用に、カスタマイズっているとおもうんだよね。 内部で使っているのは、yeomanの機能。 直訳すると、青写真なんだけど、yeomanでいうところの、generator-generator で、JHIPSTER5までは、moduleという概念だったんだけど、次の点が改善されていると思う。 - webアプリケーションのレイヤーごとに、テンプレートを切り替えれるようにした。 レイヤーとは、たとえば、サーバとか、クライアントとか、エンティティ等である。 JHIPSTER6ぐらいから使われだした、JHIPSTER用のテンプレート生成テンプレート *** 翻訳元のサイト [#ve236ce7] https://www.jhipster.tech/modules/creating-a-blueprint/ いっておきますが、英語は得意ではありません。そして、意訳が多分にふくまれております。あしからず。 基本的に、グーグル翻訳をペタペタはってます。 * blueprintを作成する [#md72103c] JHipsterブループリントは、 yeomanのジェネレータの合成機能 https://yeoman.io/authoring/composability.html をつかっています。 特定のJHipsterサブジェネレータから構成され、そのサブジェネレータの機能を拡張するYeomanジェネレータです。ブループリントは、サブジェネレータの定義済みゲッタをオーバーライドし、独自のテンプレートと機能を提供することができます。 JHipsterの青写真は、JHipsterのマーケットプレイス https://www.jhipster.tech/modules/marketplace/#/list にjhipster-blueprintラベルとともに記載されています。 これにより、JHipsterの特定の部分、たとえばクライアント側のテンプレートのみをオーバーライドできるサードパーティ製のブループリントを作成できます。 ** blueprintの使い方 [#hc7f385b] もし、<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 [#ya3ad9e2] JHipster Kotlinのblueprintは、同等のKotlinコードとサーバーサイドJavaコードのほとんどを置き換えます。 https://github.com/jhipster/jhipster-kotlin ** JHIPSTERのBLUEPRINT使用例 [#dbadd32c] *** クライアントのサブジェネレータであるbuleプリントを上書きする例 [#g3508b43] https://github.com/hipster-labs/generator-jhipster-sample-blueprint *** blueprintの初期スケルトンの作成方法 [#b41ac774] 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 質問に答えながら上書きしたいサブジェネレータを選択してください。 *** 質問される事項 [#vf25d0f9] ? 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をえらんでみた結果例 [#pe1e0e12] [ '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の意訳 [#g0dbf6f5] ##### 使い方 ##### ほかのプロジェクトで使うための準備 以下のコマンドを実行: npm install npm link npm link generator-jhipster 2.テンプレートを修正してください。 3.いざ、テンプレート生成 あなたのプロジェクトに、ディレクトりを移動させます。 npm link generator-jhipster-helloworld コードが上書きされるので、そのまえに、いったんgitで、コミットしてあることを確認します。 git status jhipster --blueprint helloworld コードが上書きされていることを確認しましょう。 git diff ** JHipsterブループリントの基本事項 [#p8a34106] JHipsterのblueprintは: - NPMのパッケージです。そして、Yeoman のgeneratorです。 下記に上げるような他のジェネレータ同様に、Yeomanのルールに従っています。 http://yeoman.io/generators/ なので、yoコマンドをつかってインストールしたり、更新したりできます。 . 先頭は generator-jhipster-で始めてください。 yeoman-generator と jhipster-blueprint の2つのキーワードをもっている必要があります。 ブループリントは、次のサブジェネレーター(ジェネレーターフォルダーの下)のみを拡張できます。 - common - client - server - entity - entity-client - entity-server - entity-i18n - languages - spring-controller - spring-service ** generator-jhipsterをインポートする [#a93cd987] 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のフェーズのカスタマイズ方法 [#sd8e79bd] 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の変数や関数にアクセスすることもできます。 ** 利用可能な変数と関数 [#n264f023] *** 設定ファイル .yo-rc.json からの変数: [#x57e7b72] あなたはJHipster設定.yo-rc.jsonとあなたのblueprint設定の両方からなる設定にアクセスすることができます *** グローバル変数 (ジェネレータ定数): [#x91f1b55] ジェネレータ定数で定数を使うことができます。 const javaDir = `${jhipsterConstants.SERVER_MAIN_SRC_DIR + this.packageFolder}/`; const resourceDir = jhipsterConstants.SERVER_MAIN_RES_DIR; const webappDir = jhipsterConstants.CLIENT_MAIN_SRC_DIR; *** 関数: [#a81440d5] あなたは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の開発のお作法 [#l874bec6] 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 ** JHipsterマーケットプレイスにblueprintを登録する [#w031718c] blueprintをJHipsterマーケットプレイスで入手できるようにするには、2つのキーワードが登録されてる必要があります。 - yeoman-generator - jhipster-blueprint 公開されているnpm にあることを確認する必要がありますpackage.json。 *** しくったのを見つけた場合 [#t6749689] JHipsterモジュールでもブループリントでもないエントリがマーケットプレイスに見つかった場合は、jhipster/jhipster.github に Pull Requestを送るという手段で、 modules-config.jsonファイルのblacklistedModulesセクションに追加することで、ブラックリストに追加できます。 * いざ、使ってみる。 [#y03143d4]