タイトでキュートなHipがSterなBootとAngularでScaffold

 タイトでキュートなHipがSterなBootとAngularでScaffold

ほげ駆動の発表資料です。

87e94dd0e8a5f52de58a0e4a0b1a1f3f?s=128

Shinichi Kozake

June 26, 2016
Tweet

Transcript

  1. ,*KR鯽5VGT鰛 鱣鱈鱬鰘 鱑鲉鯮鱬鰛 5ECHHQNF #PIWNCT鰘 $QQV鰙

  2. 鱀鰻鰙鱔鱧鱭鰛鱣鱈鱻鰟鱨鯮鲏鰉鰴鰛鯵獑

  3. Who are U?

  4. ׯײ׭؃׵猳 鱣鱈鱬鰘 鱑鲉鯮鱬鰛

  5. What is JHipster?

  6. JHipster is JHipster is a Yeoman generator Spring Boot +

    AngularJS モダン Web アプリケーションを素早く作れることを⽬的 オープンソース YeomanはモダンWebアプリケーションを提供するScaffoldツール すべてGitHubで開ൃ https://github.com/jhipster/generator-jhipster
  7. ,*KRUVGT鰟㕡苏 Client-side Server-side

  8. %NKGPVUKFG

  9. %NKGPVUKFG IE9以上とモダンBrowserをサポートします。

  10. %NKGPVUKFG CSSフレームワークであるBootstrapを⽤いてレスポンシブなWebデザインを ࣮現できます。

  11. %NKGPVUKFG Google製JavaScriptフレームワーク。 フルスタックな機能を⽤いたSPA(Single Page Application)が構築できます。

  12. %NKGPVUKFG ウェブサーバーとウェブブラウザとの間の૒⽅向通信の技術規格。 ૒⽅向通信が低コストで࣮現可能です。

  13. %NKGPVUKFG Twitter製のフロントエンド⽤パッケージ管理ツールです。 JavaScript,CSS,HTMLなどを依存ؔ係を含めて管理してくれます。

  14. %NKGPVUKFG Node.jsをベースとしたビルドシステムです。 さまざまな作業を⾃動化可能となります。 ストリーミングビルドシステムと⾔われ、ファイルのॲ理をストリームで ⾏います。

  15. %NKGPVUKFG Sass (Syntactically Awesome Stylesheets)。 スタイルシート⾔語でCSSを簡略にコーディング出དྷます。

  16. %NKGPVUKFG BrowserSyncはWeb開ൃをサポートするローカルサーバーです。 HTMLなどのファイルをม更すると⾃動でブラウザをリロードしてくれるので、 インタラクティブな開ൃが可能となります。

  17. %NKGPVUKFG Karmaはテストフレームワークと組み合わせて࣮ブラウザ上でテストを⾏えます。

  18. %NKGPVUKFG ProtractorはSelenium WebDriverJSベースのフレームワークです。 E2E(End to End)テストをサポートします。

  19. 5GTXGTUKFG

  20. 5GTXGTUKFG Spring プロジェクトが提供する༷ʑなライブラリやフレームワークを ⼿早く使えるフレームワークです。 Spring Securityなどの協⼒なプロダクトを活⽤することで、素早く安全な Webアプリケーションを開ൃできます。

  21. 5GTXGTUKFG Netflix OSSはマイクロサービスを࣮現するOSS製品です。 Eureka(中間レイヤのサーバのロードバランスと障害復چ)やZuul(動的なルー ティング、モニタリング、障害耐性、セキュリティなどの役割をもつサービス) などがあります。

  22. 5GTXGTUKFG Gradle / Mavenは、Javaのデファクトスタンダードなビルドツールです。 JHipsterではどちらのビルドツールを使うかを選୒できます。

  23. 5GTXGTUKFG HibernateはJavaのO/Rマッパーフレームワークです。 JPAやSpring Data JPAの࣮૷として⽤いられています。

  24. 5GTXGTUKFG LiquibaseはDBリファクタリングツールです。 DB のม更を XML ファイル(ChangeLog)で管理し、異なる DB 製品であって も、同じ XML

    ファイルのม更で反映することができます。
  25. 5GTXGTUKFG MySQL、PostgreSQ、Oracleなどのデータベース製品をサポートします。 この他、MariaDBもサポートしています。

  26. 5GTXGTUKFG MongoDBはNoSQLと呼ばれるドキュメント指向データベースです。

  27. 5GTXGTUKFG Cassandraは、Facebook,Twitter,Diggなどの有名Webサービスが導⼊したこ とで注⽬を集めているFacebook 製NoSQLデータベースです。 Apacheに寄贈され,Apacheトッププロジェクトに昇格しました。

  28. 5GTXGTUKFG EHCacheはキャッシュ機能を提供する Java ライブラリです。 HibernateのL2キャッシュで⽤いられます。

  29. 5GTXGTUKFG Hazelcastは、オープンソースのインメモリデータグリッドソフトウェアです。 ノード間でのインメモリのデータ共有、ঢ়態更新を管理します。 HibernateのL2キャッシュやHTTPセッションをクラスタ化する際に⽤いられます。

  30. 5GTXGTUKFG ElasticSearchは全⽂ݕ索システムです。 Luceneという全⽂ݕ索エンジンを利⽤しており、REST-APIを提供しています。

  31. 5GTXGTUKFG Thymeleafは、Javaのテンプレートエンジンライブラリです。 ナチュラルテンプレーティングというコンセプトに持っており、 ੩的にブラウザでの表⽰が可能です。デザイナとの共同作業に便利です。

  32. 5GTXGTUKFG GatlingはScala製の負荷テスト⽀援ツールです。

  33. 5GTXGTUKFG CucumberはE2E(End to End)のテストツールです。

  34. How to install

  35. ローカルインストール Vagrantでのインストール Docker でのインストール JHipsterはローカルインストールの他、VagrantやDocerを使ったインストール が可能です

  36. ローカルインストール Vagrantでのインストール Docker でのインストール 今回は、ローカルインストールを紹介します

  37. Java8をOracleのWebサイトからインストール ! ビルドツールはMavenかGradleを選୒可能 ※こららはWrapperで⾃動的にインストールされるので、⽤意しなくてもOK ! git-scm.com からGitをインストール ! ! Node.jsのWebサイトからNode.jsをインストール

    ! ! ⼀ॹにインストールされるnpmを使⽤して JHipsterに必要なnpmパッケージをインストール ローカルインストール
  38. ! $ npm install -g yo ! ! ! $

    npm install -g bower ! ! ! $ npm install -g gulp ! ! ! $ npm install -g generator-jhipster :FPNBOͷΠϯετʔϧ #PXFSͷΠϯετʔϧ (VMQͷΠϯετʔϧ +)JQ4UFSͷΠϯετʔϧ ローカルインストール
  39. How to create app

  40.  上記コマンドを࣮⾏すると、JHipsterのアプリケーション作成が始まります。 ! $mkdir hogeHipster ! $ cd hogeHipster !

    $ yo jhipster *QYVQETGCVGCRR
  41.  ██ ██ ██ ████████ ███████ ██████ ████████ ████████ ███████

    ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ████████ ██ ███████ █████ ██ ██████ ███████ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██████ ██ ██ ████████ ██ ██████ ██ ████████ ██ ██ ! http://jhipster.github.io ! Welcome to the JHipster Generator v3.4.1 Application files will be generated in folder: /Users/s_kozake/IdeaProjects/hogeHipster ______________________________________________________________________________ ! JHipster update available: 3.4.2 (current: 3.4.1) Run npm install -g generator-jhipster to update. ______________________________________________________________________________ ! ? (1/16) Which *type* of application would you like to create? (Use arrow keys) ❯ Monolithic application (recommended for simple projects) Microservice application Microservice gateway [BETA] JHipster UAA server (for microservice OAuth2 authentication) *QYVQETGCVGCRR JHipsterではMonolithicなアプリケーションもしくは マイクロサービスアプリケーションを選୒できます。
  42. JHipsterを⽤いると、上記例のようなマイクロサービスアプリケーション構成を ⼿ܰに構築できます。

  43. 上記の⾚࿮がjhipster-generatorで作成可能です。

  44.  ? (1/16) Which *type* of application would you like

    to create? (Use arrow keys) ❯ Monolithic application (recommended for simple projects) Microservice application Microservice gateway [BETA] JHipster UAA server (for microservice OAuth2 authentication) *QYVQETGCVGCRR 作成するアプリケションタイプを選୒します。 ここではMonolithicなアプリケーションを選୒します。
  45.  ? (2/16) What is the base name of your

    application? (hogeHipster) *QYVQETGCVGCRR アプリケーション名を⼊⼒します。 現在のディレクトリ名がデフォルトのアプリケーション名として表⽰されます。
  46.  ? (3/16) What is your default Java package name?

    (com.mycompany.myapp) *QYVQETGCVGCRR javaのパッケージ名を⼊⼒します。
  47.  ? (4/16) Which *type* of authentication would you like

    to use? HTTP Session Authentication (stateful, default Spring Security mechanism) ❯ OAuth2 Authentication (stateless, with an OAuth2 server implementation) JWT authentication (stateless, with a token) *QYVQETGCVGCRR 認ূ⽅式にHTTP Sessionを⽤いたैདྷのWebアプリケーション認ূ⽅式の他、 OAuth2やJWTを⽤いた認ূ⽅式が選୒できます。 これらを⽤いることで、ステートレスな認ূ⽅式が࣮現できます。
  48.  ? (5/16) Which *type* of database would you like

    to use? (Use arrow keys) ❯ SQL (H2, MySQL, MariaDB, PostgreSQL, Oracle) MongoDB *QYVQETGCVGCRR データベースを選୒します。 RDBMSの他、NoSQLであるMongoDBも選୒可能です。
  49.  ? (6/16) Which *production* database would you like to

    use? ❯ MySQL MariaDB PostgreSQL Oracle - Warning! The Oracle JDBC driver (ojdbc) is not bundled because it is not Open Source. Please follow our documentation to install it manually. *QYVQETGCVGCRR プロダクトで使⽤するデータベースの種類を選୒します。 Oracleを選୒した場合、JDBCドライバはバンドルされていないҝ、 ⼿動で⽤意する必要があります。
  50.  ? (7/16) Which *development* database would you like to

    use? (Use arrow keys) ❯ H2 with disk-based persistence H2 with in-memory persistence MySQL ! *QYVQETGCVGCRR 開ൃで使⽤するデータベースの種類を選୒します。 H2かMYSQLが選୒でき、H2はデータをディスクに保存する場合と インメモリで動作する場合のどちらかを選୒できます。
  51.  ? (8/16) Do you want to use Hibernate 2nd

    level cache? ❯ No Yes, with ehcache (local cache, for a single node) Yes, with HazelCast (distributed cache, for multiple nodes) *QYVQETGCVGCRR Hibernate 2ndレベルキャッシュを⽤いるかどうかを選୒します。 ehcacheを⽤いたローカルキャッシュ⽅式もしくはHazelCastを⽤いた 複਺ノードでのキャッシュ⽅式も選୒可能です。
  52.  ? (9/16) Do you want to use a search

    engine in your application? No ❯ Yes, with ElasticSearch *QYVQETGCVGCRR 全⽂ݕ索エンジンであるElasticSearchを使⽤するかどうかを選୒します。 ElasticSearchを選୒すると、Spring Data ElasticSearchを⽤いた設定が ⾏われます。開ൃモードでは、組ࠐみのElasticSearchが⽤いられます。
  53.  ? (10/16) Do you want to use clustered HTTP

    sessions? (Use arrow keys) ❯ No Yes, with HazelCast *QYVQETGCVGCRR HTTP SessionをHazelCastを⽤いたクラスタ構成にするかどうかを選୒します。
  54.  ? (11/16) Do you want to use WebSockets? No

    ❯ Yes, with Spring Websocket *QYVQETGCVGCRR Spring Websocketを⽤いるかどうかを選୒します。
  55.  ? (12/16) Would you like to use Maven or

    Gradle for building the backend? Maven ❯ Gradle *QYVQETGCVGCRR ビルドツールにMavenかGradleを選୒します。
  56.  ? (13/16) Would you like to use the LibSass

    stylesheet preprocessor for your CSS? (y/N) *QYVQETGCVGCRR Sassをサポートするかどうかを選୒します。
  57.  ? (14/16) Would you like to enable internationalization support?

    (Y/n) *QYVQETGCVGCRR ࠃ際化をサポートするかを選୒します。
  58.  ? Please choose the native language of the application?

    Hindi Hungarian Italian ❯ Japanese Korean Marathi Polish (Move up and down to reveal more choices) *QYVQETGCVGCRR ࠃ際化を選୒した場合、ネイティブランゲージを選୒します。
  59.  ? Please choose additional languages to install ◯ Czech

    ◯ Danish ◯ Dutch ❯◉ English ◯ French ◯ Galician ◯ German (Move up and down to reveal more choices) *QYVQETGCVGCRR 他にサポートするネイティブランゲージを選୒します。
  60.  ? (15/16) Which testing frameworks would you like to

    use? (Press <space> to select) ❯◉ Gatling ◯ Cucumber ◯ Protractor *QYVQETGCVGCRR ⽤いたいテストフレームワークを選୒します。
  61.  Installing languages: ja, en create bower.json create package.json create

    README.md create .gitignore : create src/main/webapp/i18n/en/global.json create src/main/webapp/i18n/en/health.json create src/main/resources/i18n/messages_en.properties ! ! I'm all done. Running npm install & bower install for you to install the required dependencies. If this fails, try running the command yourself. ! ! npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated cross-spawn-async@2.2.4: cross-spawn no longer requires a build toolchain, use it instead! npm WARN deprecated npmconf@2.1.2: this package has been reintegrated into npm and is now out of date with respect to npm npm WARN deprecated graceful-fs@3.0.8: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree. npm WARN deprecated minimatch@0.2.14: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated lodash@1.0.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0. npm WARN deprecated graceful-fs@1.2.3: graceful-fs v3.0.0 and before will fail on node releases >= v7.0. Please update to graceful-fs@^4.0.0 as soon as possible. Use 'npm ls graceful-fs' to find it in the tree. npm WARN deprecated minimatch@0.3.0: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue fetchMetadata → 304 ▌ ╢████████████████████████████████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ ░░░░░░░░░░░░░░░░░░░░░╟ ! *QYVQETGCVGCRR 全ての選୒が終ると、インストールが始まります。
  62.  *QYVQETGCVGCRR ! $ git init ! $ git add

    . ! $ git commit -m "first install jhipster” ! $ git tag install インストールが終ったら、gitで管理しましょう。 適切な.gitignoreファイルが⽤意されているので便利です。
  63. How to run

  64.  ! $ ./gradlew bootrun 上記コマンドを࣮⾏すると、8080ポートでWebアプリケーションが起動します。 *QYVQTWP

  65.  ! $ ./gulp 上記コマンドを࣮⾏すると、9000ポートでBrowsersyncが起動します。 これにより、࣮⾏したままը⾯の修正がインタラクティブに⾏えます。 *QYVQTWP

  66. gulpコマンドを࣮⾏すると、ブラウザが⾃動起動してը⾯が表⽰されます。

  67. アカウント - 認ূを選୒してログインします。 adminとuserのアカウントがデフォルトで⽤意されています。 初期パスワードはアカウント名と同じです。

  68. adminアカウントでログインすると、エンティティや管理がナビゲーションタブ に表⽰されます。

  69. ⾔語タブで⾔語表⽰を切り替えることができます。

  70. adminでログインすると、アプリケーションを管理するҝの༷ʑな機能が ⽤意されています。例えば管理 - メトリクスを選୒すると、JVMのঢ়態や HTTPリクエスト਺などを確認することができます。

  71. 管理 - ヘルスチェックを選୒すると、データベースやディスクスペースのঢ়態を 確認することができます。

  72. 管理 - 設定を選୒すると、Spring configurationやsystemEnvironmentなど、 各種アプリケーション環境設定を表⽰できます。

  73. 管理 - APIを選୒すると、Swagger UIによるWebAPIのドキュメント を表⽰できます。

  74. 管理 - データベースを選୒すると、接ଓしているデータベースの管理ը⾯を 表⽰できます。

  75. データベースにログインすることで、データベースの಺容を確認できます。

  76. create entity

  77. JHipsterを⽤いて、上のようなEntityとそれを編集するCRUDը⾯を⽣成します。

  78.  ! $ yo jhipster:entity author 上記コマンドを࣮⾏して、Author Entityを⽣成します。 ETGCVGGPVKV[

  79.  ? Do you want to add a field to

    your entity? (Y/n) ETGCVGGPVKV[ フィールドを追加するかどうかを聞かれますので、Yesを選୒します。
  80.  ? What is the name of your field? name

    ETGCVGGPVKV[ フィールド名を⼊⼒します。
  81.  ? What is the type of your field? (Use

    arrow keys) ❯ String Integer Long Float Double BigDecimal LocalDate (Move up and down to reveal more choices) ETGCVGGPVKV[ フィールドの型を選୒します。
  82.  ? Do you want to add validation rules to

    your field? (y/N) Y ETGCVGGPVKV[ フィールドのバリデーションルールを追加するかどうかを選୒します。
  83.  ? Which validation rules do you want to add?

    ◉ Required ❯◯ Minimum length ◉ Maximum length ◯ Regular expression pattern ETGCVGGPVKV[ 必須⼊⼒、最⼩/最⼤⾧や正規表現によるチェックを選୒できます。 ここでは、必須⼊⼒と最⼤⾧を選୒します。
  84.  ? What is the maximum length of your field?

    (20) 100 ETGCVGGPVKV[ 最⼤⾧の⾧さを⼊⼒します。
  85.  ================= Author ================= Fields name (String) required maxlength='100' ETGCVGGPVKV[

    選୒·⼊⼒した಺容が表⽰されます。
  86.  Generating field #2 ! ? Do you want to

    add a field to your entity? Yes ? What is the name of your field? birthDate ? What is the type of your field? LocalDate ? Do you want to add validation rules to your field? Yes ? Which validation rules do you want to add? Required ! ================= Author ================= Fields name (String) required maxlength='100' birthDate (LocalDate) required ! ETGCVGGPVKV[ 同༷に、birthDateフィールドを追加します。
  87.  ? Do you want to add a relationship to

    another entity? No ETGCVGGPVKV[ リレーションを追加するかどうかを選୒します。 ここではNoを選୒します。
  88.  ? Do you want to use a Data Transfer

    Object (DTO)? ❯ No, use the entity directly [BETA] Yes, generate a DTO with MapStruct ETGCVGGPVKV[ EntityのDTOを作成するかどうかを選୒できます。 ここでは、EntityをそのままDTOとして⽤いるのでNoを選୒します。
  89.  ? Do you want to use separate service class

    for your business logic? No, the REST controller should use the repository directly ❯ Yes, generate a separate service class Yes, generate a separate service interface and implementation ETGCVGGPVKV[ RESTコントローラからRepositoryを直接呼び出す⽅式かビジネスロジックを書く ҝのServiceクラスを作成するかどうかを選୒します。 ここでは、Serviceクラスの作成を選୒します。
  90.  ? Do you want pagination on your entity? No

    ❯ Yes, with a simple pager Yes, with pagination links Yes, with infinite scroll ETGCVGGPVKV[ ը⾯のページング⽅式を選୒します。 simple pager : Bootstrap pagerベースのページング pagination links: Bootstrap pagination コンポーネント infinite scroll : infinite scroll ディレクティブ
  91.  Everything is configured, generating the entity... ! create .jhipster/Author.json

    create src/main/java/team/hoge/hipster/domain/Author.java create src/main/java/team/hoge/hipster/repository/AuthorRepository.java create src/main/java/team/hoge/hipster/repository/search/AuthorSearchRepository.java create src/main/java/team/hoge/hipster/web/rest/AuthorResource.java create src/main/java/team/hoge/hipster/service/AuthorService.java create src/main/resources/config/liquibase/changelog/20160623225714_added_entity_Author.xml conflict src/main/resources/config/liquibase/master.xml ? Overwrite src/main/resources/config/liquibase/master.xml? overwrite force src/main/resources/config/liquibase/master.xml create src/main/webapp/app/entities/author/authors.html create src/main/webapp/app/entities/author/author-detail.html create src/main/webapp/app/entities/author/author-dialog.html create src/main/webapp/app/entities/author/author-delete-dialog.html conflict src/main/webapp/app/layouts/navbar/navbar.html ? Overwrite src/main/webapp/app/layouts/navbar/navbar.html? overwrite force src/main/webapp/app/layouts/navbar/navbar.html create src/main/webapp/app/entities/author/author.state.js create src/main/webapp/app/entities/author/author.controller.js create src/main/webapp/app/entities/author/author-dialog.controller.js create src/main/webapp/app/entities/author/author-delete-dialog.controller.js create src/main/webapp/app/entities/author/author-detail.controller.js create src/main/webapp/app/entities/author/author.service.js create src/main/webapp/app/entities/author/author.search.service.js create src/main/webapp/i18n/ja/author.json conflict src/main/webapp/i18n/ja/global.json ? Overwrite src/main/webapp/i18n/ja/global.json? overwrite force src/main/webapp/i18n/ja/global.json create src/main/webapp/i18n/en/author.json conflict src/main/webapp/i18n/en/global.json ? Overwrite src/main/webapp/i18n/en/global.json? overwrite force src/main/webapp/i18n/en/global.json create src/test/javascript/spec/app/entities/author/author-detail.controller.spec.js create src/test/java/team/hoge/hipster/web/rest/AuthorResourceIntTest.java create src/test/gatling/simulations/AuthorGatlingTest.scala ! Running gulp Inject to add javascript to index ETGCVGGPVKV[
  92.  ETGCVGGPVKV[ ! $ yo jhipster:entity book 同༷に、Book Entityを⽣成します。

  93.  ================= Book ================= Fields title (String) required maxlength='100' description

    (String) maxlength='200' publicationDate (LocalDate) required price (BigDecimal) required ! ! Generating relationships to other entities ! ? Do you want to add a relationship to another entity? (Y/n) y ETGCVGGPVKV[ Author Entityの時と同༷に、フィールドを追加します。 Author Entityとのリレーションを作成するので、 リレーションを追加するかどうかでYesを選୒します。
  94.  ? What is the name of the other entity?

    author ETGCVGGPVKV[ どのEntityとのリレーションを⽣成するかを聞かれるので、 authorを⼊⼒します。
  95.  ? What is the name of the relationship? (author)

    ETGCVGGPVKV[ リレーション名を聞かれるので、ここではデフォルトのauthorとします。
  96.  ? What is the type of the relationship? one-to-many

    ❯ many-to-one many-to-many one-to-one ETGCVGGPVKV[ リレーションのカーディナリティを選୒します。 Bookから⾒てAuthorは1つなので、「many-to-one」を選୒します。
  97.  ? When you display this relationship with AngularJS, which

    field from 'author' do you want to use? (id) name ETGCVGGPVKV[ BookのCRUDը⾯でAuthorを表⽰する時のフィールド名を⼊⼒します。 ここでは、nameを⼊⼒して名前を表⽰させることにします。
  98.  ? Do you want to add any validation rules

    to this relationship? (y/N) y ETGCVGGPVKV[ BookのCRUDը⾯でAuthorを表⽰する時のフィールド名を⼊⼒します。 ここでは、nameを⼊⼒して名前を表⽰することにします。
  99.  ? Which validation rules do you want to add?

    ❯◉ Required ETGCVGGPVKV[ リレーションにバリデーションルールを追加します。 ここでは、BookにରしてAuthorへのリレーションが必ず存在するようにするҝ、 Requiredを選୒します。
  100.  ================= Book ================= Fields title (String) required maxlength='100' description

    (String) maxlength='200' publicationDate (LocalDate) required price (BigDecimal) required ! Relationships author (Author) many-to-one required ETGCVGGPVKV[ 上記಺容でBook Entityを⽣成します。
  101. ログインすると、エンティティにAuthorとBookが追加されています。

  102. エンティティ-Bookを選୒すると、CRUDը⾯が表⽰できます。

  103. エンティティ-Bookの表⽰ը⾯。

  104. エンティティ-Bookの編集ը⾯。

  105. エンティティ-Bookの削除確認ダイアログ。

  106. material design

  107.  ! $ bower install bootstrap-material-design --save bootstrap-material-designインストールすることで、簡୯にը⾯を Materialデザインにม更できます。 OCVGTKCNFGUKIP

  108.  Index.htmlを修正 ! <script> $.material.init(); </script> インストール後、index.htmlに上記಺容を追加してください。 OCVGTKCNFGUKIP

  109.  ! $ gulp build ! $ ./gradlew bootrun ը⾯を再ビルドし、再起動します。

    OCVGTKCNFGUKIP
  110. ը⾯がmaterialデザインになりました!

  111. まとめ

  112. 鱀鰻鰙鱔鱧鱭鰛鱣鱈鱻鰟鱨鯮鲏鰉鰴鰛鯵猳猳 Ͱ ƅ˜ƅ Ͱ  JHipSterで⽤いているツールの勉ڧをしたり、出⼒されたソースコードで 勉ڧすると、モダンなWeb開ൃに役⽴つと思いますよ!