Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angularの静的サイトジェネレーター「Scully」の最新情報

puku0x
October 17, 2020

 Angularの静的サイトジェネレーター「Scully」の最新情報

puku0x

October 17, 2020
Tweet

More Decks by puku0x

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. @puku0x
    Angularは...?
    4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. import { ScullyConfig } from '@scullyio/scully';
    export const config: ScullyConfig = {
    projectRoot: './src',
    projectName: my-app,
    outDir: './dist/static',
    routes: {

    },
    defaultPostRenderers: [],
    };
    設定ファイル
    9

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. 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

    View full-size slide

  13. $ 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. import { ScullyConfig } from '@scullyio/scully';
    export const config: ScullyConfig = {

    defaultPostRenderers: ['seoHrefOptimise'],
    };
    リンクに末尾スラッシュ追加
    16

    View full-size slide

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

    View full-size slide

  18. $ 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],
    };

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  26. Thank you!
    @puku0x
    Noriyuki Shinpuku

    View full-size slide