脱PDFからのシングルHTMLのすすめ

July 08, 2020 by Chachay

レポートやメモの作成に定番のMicrosoft Wordや同時編集が魅力的なgoogle documentsを使ってきたが、gitで管理できるフォーマットを試しながら、gulp+pugで作るシングルページHTMLに行き着いたのでメモする。

これまで試したもの

やりたかったこと

脱ペーパー
これまでPDF化するなど印刷前提のフォーマットを貫いてきたけどペーパーレスの時代に「紙ページに収める」という縛られ方をする必要はないのではないだろうか。 挿絵の位置で改ページがあっちいったり、こっち行ったりをどうこうしたり、 横に平べったく長い表の貼り付けたり、 章タイトルの直後に改ページが来てpandocフィルタ追加したり… そういう調節とお別れしたい。
メール添付やクラウドストレージを通した配布
クラウドストレージのプレビュー機能の充実とブラウザ間の互換性向上によって、シングルHTMLファイルがPDFの代替になりそうな気がした。
インタラクティブなコンテンツ
いったん脱PDFし、HTMLをフォーマットとして選ぶとJSとかSVGとかの採用が見えてくる。

環境の準備

Webpackも考えたけどentry pointがjsファイルになる点が今ひとつコンセプトに合わなくてgulpにした。

npm install --global gulp-cli
npm init -y
npm i -D gulp pug gulp-pug
npm i -D gulp-inline-source gulp-inline-images

構成

root
├── _template
├── dest <-- ここに出来上がったレポートが出力される
├── gulpfile.js
├── package-lock.json
├── package.json
├── img <-- レポートに使う画像を放り込んでおく
└── src <-- ここにレポートの素を置く

gulpfile

const gulp = require('gulp')
const pug = require('gulp-pug')
const inlineSource = require('gulp-inline-source')
const inlineImages = require('gulp-inline-images')

gulp.task('pug', () => {
  return gulp.src(['./src/*.pug', '!./_**/*', '!./node_modules/**/*'])
    .pipe(pug({ pretty: true }))
    .pipe(inlineSource())
    .pipe(inlineImages({ basedir: './img/' }))
    .pipe(gulp.dest('./dest/'))
})
gulp.task('watch', () => {
  return gulp.watch(['./src/*.pug', './_template/*.pug'], gulp.series(['pug']))
})
gulp.task('default', () =>  {
  return gulp.parallel(['pug'])
})

あとはgulpでもgulp watchでも…. 画像, CSSそれにjavascriptはinline化してhtmlに埋め込んでしまいます。

レポートのテンプレート

コンセプトにも関わらず、紙に印刷したいとなったらpaper.css、プレゼンしたいならreveal.jsと思いつつ、Bootstrapをcssのみで使う選択肢で作ってみた。

ライブラリを追加する場合inlineのアノテーションを忘れないように！！

doctype html
html(lang="ja")
  block config
  head
    meta(charset="UTF-8")
    meta(name="viewport", content="width=device-width, initial-scale=1")
    link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css", inline)
    style.
      body {
        font-family: "Helvetica Neue", 
              "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
      }
    block css
    block scripts

    title #{title} 
body
  .container
    block content

本文の書き方

カラム数などによっては40emで折り返すようにしておくと読みやすいかも。

extends ../_template/template.pug

block config
  - var title='私のレポート'

block css
  style.
    .alert-trim {
      display: inline-block;
    }
    .col p {
      width: 40em;
    }

block content
  .row
    .col
      h1 報告
      h2 はじめに
      p 今月は…

Boilerplate

ボイラープレート用意した

Chachay/pug_boilerplate: My Boilerplate of Single HTML reports
at

No comments:

Post a Comment