Angular製静的サイトジェネレータScullyを試してみた

#RIA

#Angular

西村祐二

2020.01.18

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

どうも！大阪オフィスの西村祐二です。

最近気になっていた、Angular製静的サイトジェネレータScullyを試してみたので、作業ログをブログにまとめておきます。

試してみた

環境

Angular CLI: 9.0.0-rc.9
Node: 12.13.0
OS: darwin x64

Angular: 9.0.0-rc.9
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.0-rc.9
@angular-devkit/build-angular     0.900.0-rc.9
@angular-devkit/build-optimizer   0.900.0-rc.9
@angular-devkit/build-webpack     0.900.0-rc.9
@angular-devkit/core              9.0.0-rc.9
@angular-devkit/schematics        9.0.0-rc.9
@angular/cdk                      8.2.3
@angular/material                 8.2.3
@ngtools/webpack                  9.0.0-rc.9
@schematics/angular               9.0.0-rc.9
@schematics/update                0.900.0-rc.9
rxjs                              6.5.4
typescript                        3.6.4
webpack                           4.41.2

セットアップ

Angular CLIを使って雛形のアプリケーションを作成します。今回は適当に「scully-blog」という名前にしました。

※Scullyでは、ルーターがアプリケーションに存在する必要がありますのでご注意ください。

❯ npx -p @angular/cli@next ng new scully-blog --routing
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS

必要なライブラリを追加します。

cd scully-blog

ng add @scullyio/init

これで、セットアップ完了です。簡単ですね。

ブログ用のルーティングなど設定する

これも、ngコマンドから実行できます。ルーティングなど自動的に設定されるのでとても簡単ですね。

❯ ng g @scullyio/init:blog

    ✅️ Update /scully.config.js
CREATE src/app/blog/blog-routing.module.ts (369 bytes)
CREATE src/app/blog/blog.component.css (157 bytes)
CREATE src/app/blog/blog.component.html (160 bytes)
CREATE src/app/blog/blog.component.spec.ts (639 bytes)
CREATE src/app/blog/blog.component.ts (508 bytes)
CREATE src/app/blog/blog.module.ts (393 bytes)
UPDATE scully.config.js (199 bytes)
UPDATE src/app/app-routing.module.ts (336 bytes)
    ✅️ Blog ./blog/2020-01-18-blog.md file created
CREATE blog/2020-01-18-blog.md (95 bytes)

/blog/2020-01-18-blog.mdというファイルが生成されているようにMarkdownでブログなど書いていけます。

app.componentを修正する

不要なコードを削除しておきます。

<router-outlet></router-outlet>

ビルドする

土台の部分はできたのでビルドしてみます。

scullyコマンドを実行することによってdist/static/にファイルを生成してくれます。

ログよりAngularでビルドしたファイルを使ってサーバを立ち上げchromiumでクローリングしてファイルの生成しているみたいです。

❯ ng build
❯ npm run scully

> scully-blog@0.0.0 scully /Users/yuji/study/angular/scully/scully-blog
> scully

The option outDir isn't configured, using default folder "/Users/yuji/study/angular/scully/scully-blog/dist/static/".
Cleaned up /Users/yuji/study/angular/scully/scully-blog/dist/static/ folder.
 ☺   new Angular build imported
 ☺   Started servers in background
servers available
Finding all routes in application.
Pull in data to create additional routes.
Finding files in folder "/Users/yuji/study/angular/scully/scully-blog/blog"
Route list created in files:
      src/assets/scully-routes.json
      /Users/yuji/study/angular/scully/scully-blog/dist/static/assets/scully-routes.json
Route "/blog/2020-01-18-blog" rendered into file: "/Users/yuji/study/angular/scully/scully-blog/dist/static/blog/2020-01-18-blog/index.html"
Route list created in files:
      src/assets/scully-routes.json
      /Users/yuji/study/angular/scully/scully-blog/dist/static/assets/scully-routes.json

Generating took 4.43 seconds for 1 pages:
  That is 0.23 pages per second,
  or 4439 milliseconds for each page.

動作確認

スクリプトコマンドにscully:serveが追加されていますので、それを使って動作確認してみます。

❯ npm run scully:serve

> scully-blog@0.0.0 scully:serve /Users/yuji/study/angular/scully/scully-blog
> scully serve

The option outDir isn't configured, using default folder "/Users/yuji/study/angular/scully/scully-blog/dist/static/".
starting static server
/Users/yuji/study/angular/scully/scully-blog undefined
Scully static server started on "http://localhost:1668/"
Angular distribution server started on "http://localhost:1864/"
 ☺   new Angular build imported
Scully static server started on "http://localhost:1668/"
Angular distribution server started on "http://localhost:1864/"

ポート番号1668でScully、1864でAngularで生成したファイルをホスティングしているのでScullyの下記URLにアクセスしてみます。

http://localhost:1668/blog/2020-01-18-blog

するとMarkdownで記述されたコンテンツが表示されていることがわかります。

ちなみに、Angularのhttp://localhost:1864/blog/2020-01-18-blogだと下記のようなSorryという表示なるかとおもいます。

コンテンツを追加してみる

ngコマンドより、postとすることで対話形式で雛形ファイルを生成することができます。タイトルは適当に「scully-test」としました。

❯ ng g @scullyio/init:post
? What title do you want to use for the post? scully-test
? What's the target folder for this post? blog
    ✅️ Blog ./blog/scully-test.md file created
CREATE blog/scully-test.md (87 bytes)

Markdownファイルの生成だけではなく、ルーティング用のファイルも更新されていました。