Angularの静的サイトジェネレーター 「Scully」の最新情報 GDG DevFest 2020 @puku0x Noriyuki Shinpuku

Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x 2

@puku0x SSG流行ってる 3 Gridsome VuePress Nuxt.js Next.js Gatsby

@puku0x Angularは...? 4

@puku0x Scully ● Angular用のSSG（静的サイトジェネレータ） 5 https://scully.io/ 9月にv1.0.0 リリース

@puku0x 仕組み ● Angularアプリケーションを Puppeteer で実行 ○ HttpClient等の通信完了を確認して出力 ○ PLATFORM_IDが常にブラウザー ● 実行時はプリレンダされたHTML → 読み込み完了で Angularアプリケーションに置き換わる 6

$ ng new my-app --routing $ cd my-app $ ng add @scullyio/init インストール 7

$ ng g @scullyio/init:blog $ ng g @scullyio/init:post --name="New Post" ブログ作成 8

import { ScullyConfig } from '@scullyio/scully'; export const config: ScullyConfig = { projectRoot: './src', projectName: my-app, outDir: './dist/static', routes: { … }, defaultPostRenderers: [], }; 設定ファイル 9

export const config: ScullyConfig = { routes: { '/users/:userId': { type: 'json', userId: { url: 'https://jsonplaceholder.typicode.com/users', property: 'id', }, }, }, }; 動的コンテンツのプリレンダ 10

export const config: ScullyConfig = { routes: { '/blog/:slug': { type: 'contentFolder', slug: { folder: './blog, }, }, }, }; ファイルからページ生成 11

constructor(private srs: ScullyRoutesService) {} post$ = this.srs.getCurrent().pipe( map((route: ScullyRoute) => ({ title: route.title || route.route, description: route.description, slug: route.slug, })), shareReplay(1) ); ScullyRoutesService 12

$ ng build --prod $ npx scully --RSD --scan --prod $ npm run scully:serve Angular distribution server started on “http://localhost:1864/” Scully static server started on “http://localhost:1668/” 実行 13

$ ng build --watch 開発 14 $ npx scully --watch

import { setPluginConfig } from '@scullyio/scully'; import { MarkedConfig } from '@scullyio/scully/lib/fileHanderPlugins/markdown'; setPluginConfig('md', { enableSyntaxHighlighting: true, }); シンタックスハイライト 15

import { ScullyConfig } from '@scullyio/scully'; export const config: ScullyConfig = { … defaultPostRenderers: ['seoHrefOptimise'], }; リンクに末尾スラッシュ追加 16

$ npm i -D @scullyio/plugins-scully-plugin-remove-scripts $ ng build --prod タグ削除 17 import { ScullyConfig, setPluginConfig } from '@scullyio/scully'; import { removeScripts, RemoveScriptsConfig } from '@scullyio/plugins-scully-plugin-remove-scripts'; setPluginConfig<RemoveScriptsConfig>(removeScripts, { keepTransferstate: false }); export const config: ScullyConfig = { defaultPostRenderers: [removeScripts], };

$ npm i -D @scullyio/scully-plugin-critical-css 不要なCSS削除 18 import { ScullyConfig } from '@scullyio/scully'; import { criticalCSS } from '@scullyio/scully-plugin-critical-css'; export const config: ScullyConfig = { defaultPostRenderers: [criticalCSS], };

@puku0x PWA化 ● @angular/service-workerとの組み合わせに課題 ○ https://github.com/scullyio/scully/issues/529 ○ https://github.com/angular/angular/issues/16051 ● Workbox等の利用を推奨 19

import { registerPlugin } from '@scullyio/scully'; export const customPlugin = 'customPlugin'; const plugin = async (html: string): Promise => { // レンダリングする文字列（HTML）を返す return html; }; registerPlugin('render', customPlugin, plugin); カスタムプラグイン 20

const plugin = async (html: string): Promise => { const workboxScript = ` (function() { if ('serviceWorker' in navigator) { window.addEventListener('load', function() { navigator.serviceWorker.register(service-worker.js'); }); } })(); `; return html.replace(/<\/head/i, `${workboxScript}

@puku0x 22 https://github.com/puku0x/puku0x.net

@puku0x 23

@puku0x Scullyの今後 ● ドキュメント拡充 ● プラグイン追加 ○ https://github.com/scullyio/scully/tree/main/libs/plugins ● Angular以外も対応予定？ 24

@puku0x まとめ ● Scullyを使うと簡単にSSGを導入できる ○ 既存の資産が活かせる ○ エコシステム拡充中 ○ https://scully.io/ 25

@puku0x 26 https://www.vega-c.com/recruit/

Thank you! @puku0x Noriyuki Shinpuku