Papers, Pages and Post-it Notes

このページはコンポーネントページです

Wiki内で使用されているコンポーネントページです。このページを編集することはできません。
編集が必要だと思われる場合は、このページのディスカッションか、サイトスタッフまでご連絡ください。

詳しくはカテゴリ運用ポリシーを参照してください。

クレジット

タイトル: Papers, Pages and Post-it Notes
翻訳責任者: nebula2700
翻訳年: 2024
原題: Papers, Pages and Post-it Notes
著作権者: Croquembouche
作成年: 2020
初訳時参照リビジョン: 16
元記事リンク: ソース

これは何？

テキストを別々のページのように表示するコンポーネント。例えば本のページのように。

Croquemboucheによって作成。

ページ分割を再現するその他のコンポーネント:

• ハーマン・フラーの本　左
• ハーマン・フラーの本　右
• Herman Fuller Book Page Right (Chapter Start)
• Herman Fuller GOI: Chapter Start
• Herman Fuller GOI: Left Page v2
• Herman Fuller GOI: Right Page v2

使い方

どんなウィキでも:

[[include :scp-jp:component:pages
| medium=vintage-book
| contents=
<h1>こんにちは、私の本へようこそ。</h1>
執筆にかかった苦労が報われるよう、<em>心から楽しんで</em>もらえればと思います
]]

このコンポーネントには2つのパラメータがあります。

medium	どのような媒体でテキストを表示するかを指定します。これによって、各ページの背景画像やフォントなどが決まります。オプションの追加は大歓迎です。 — アイデアをお持ちの方は私（Croquembouche）までご連絡ください。 これらについての詳細はページ最下部にあります。
contents	非常にシンプルな書式や画像なら含めることができます。
style	ドキュメントに適用されるCSSスタイル

contentsパラメータはいくらでも改行できます。

contentsに以下の文字は使用できません:

• |（パイプ記号）
• `（バッククォート）ただし、直前にバックスラッシュ<sup>1</sup>がある場合は問題ありません（\`）
• ]]（2つの閉じ角括弧）ただし、行末または空白が続く場合に限ります

テキストフォーマット

contentsパラメータはWikidotではレンダリング²されません。私が自分で書いたカスタムパーサー³に直接渡され、HTMLとして出力されます。

慣れ親しんだ素敵なWikidot構文はすべて窓から吹き飛んでしまいます。その代わりに、インラインHTMLを記述しなければなりません。

例:

• 太字にするには、**テキスト**の代わりに<b>テキスト</b>と記述します。
• エムダッシュを作成するには--の代わりに文字通りのエムダッシュ（—）を記述します。
• 罫線を作るには-----の代わりに<hr>と記述します。

通常のHTMLとは違い、各行を<p>…</p>で囲む必要はありません。

---

画像

画像の標準的なHTMLを使用して、画像を組み込みます:

<img src="https://scp-jp-storage.wdfiles.com/local--files/ページ名/ファイル名">

position="top"またはposition="bottom"を追加することで画像を上部または下部に固定することができます。これにより、画像は表示されるページの上部または下部に固定されます。ただし、これはテキストの途中ではなく、単独で行にある画像にのみ適用されます:

<img position="top" src="URL">

画像を水平方向に中央寄せするには、このCSSをstyle属性に直接追加してください:

<img style="display: block; margin-left: auto; margin-right: auto;" src="URL">

画像が高すぎて1ページに収まらない場合、その下は切り落とされます。

---

改ページ

あなたは時々こう言いたくなるでしょう「そこまででいいぞ。次の部分は新しいページから始めるんだ。このページの残りは空白で構わないさ。」

そんな時は、単独の行に改ページを追加しましょう:

<br class="page-break">

改ページの次に来るものは、次のページになります。改ページの直前にposition="bottom"の画像がある場合、その画像は期待通り前のページの下部に表示されます。

---

高度な使用法

CSSはstyleパラメータを介して組み込むことができ、Javascriptはcontentsパラメータに埋め込むことができます。

CSSを使う

styleパラメータに記述したCSSは全てページに適用されます。これを使用することで、微調整をしたり、内容部分で使えるクラスを追加したり、フォントを変更（例）したりできます。

例:

[[include :scp-jp:component:pages
| medium=vintage-book
| style=
@import url('https://fonts.googleapis.com/css2?family=Hachi+Maru+Pop&display=swap');

.page {
font-family: "Hachi Maru Pop", cursive;
margin: 2rem;
}

.page .red {
color: red;
}
| contents=
このテキストは<span class="red">手書き</span>で表示されます。
]]

記事の他の場所にあるCSSモジュールでこのコンポーネントのスタイルを変更することはできません。 — これが唯一の方法です。

ヒント！ パラメータは好きな順番で追加できますが、styleパラメータをcontentsパラメータよりも上に置くのが良いでしょう。おそらくcontentsパラメータは非常に長くなります — そのため、設定やCSSをすべて上部にまとめておく方が扱いやすくなるかもしれません。

Javascriptを使う

contentsパラメータはJavascriptのテンプレートリテラルとして解析されます。これがバッククォートを使用できない理由です。

そのため、contentsパラメータ内で埋め込み式（${expression}）を使用して任意のJavaScriptを組み込むことができ、それが実行されたものが文字列に代入されます。例:

[[include :scp-jp:component:pages
| medium=vintage-book
| contents=
今日の曜日は${new Date().toLocaleString("default", { weekday: "long" })}です。
]]

この本は読者に今日が何曜日か教えてくれます。

こんなことをする必要はありますか？いいえ、ありません。ただできるというだけです。

任意のJavaScriptを含めることはできますが、OR演算子（||）はパイプ記号で構成されているため使用できないことに注意してください。しかし、ANDとNOTを使用することでORを再現できます: NOT((NOT x) AND (NOT y))は(x OR y)と等価です。Javascriptでは、これは!((!x) && (!y))となります。

媒体のオプション

'medium'パラメータのオプションは以下のとおりです。

私は新しい媒体のオプションのリクエストを積極的に募集しています。言い換えれば、このコンポーネントのタイトルは『Papers, Pages and Post-it Notes』であり、できる限り多用途に設計されていますが、現時点ではいくつかの機能しか実行できないということです。

ページ分割のフォーマットに関するリクエストがありましたら、私にお知らせください（Croquembouche）。

各媒体はブラウザの幅に影響されない固定アスペクト比を持っています。

媒体	背景	フォント	y:x	ソース
plain (デフォルト)		ブラウザのデフォルト	4:7
vintage-book		Noto Serif Japanese4	10:9	パブリックドメイン
gdocs		サンセリフ	sqrt(2)5:1

ソースコード

+ ソースコードを表示

HTML

ページソースの最下部にある[[html]]モジュールを確認してください。

CSS

/* Imports */
/* Note that fonts MUST be imported synchronously using the link element,
 * otherwise the page structure may not render properly */
 
/* Styling */
 
.pages-container {
  font-size: min(4vw, 1rem);
  position: relative;
}
 
/* A page without a medium needs some default styling. */
.aspect-ratio {
  margin: 1rem 0;
  /* The padding-top should be the ratio of the bg image's width / height */
  padding-top: calc(400 / 700 * 100%);
  position: relative;
}
.page {
  height: 0;
  padding: 2rem 2rem 3rem;
  position: absolute;
  height: 100%; width: 100%; top: 0; left: 0;
  box-sizing: border-box;
}
.page::before {
  content: "";
  position: absolute;
  height: 100%; width: 100%; top: 0; left: 0;
  pointer-events: none;
  background-image: linear-gradient(beige, antiquewhite);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  z-index: -1;
  box-sizing: border-box;
}
 
.content {
  position: relative;
  display: flex;
  flex-direction: column;
}
.content > * {
  margin-block-start: 0.5em;
  margin-block-end: 0.5em;
}
 
p, img, div { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { line-height: 1em; }
 
/* Each medium gets its own style. */
 
/* Vintage book */
 
.vintage-book {
  font-family: 'Libre Baskerville', serif;
  color: #514132;
  line-height: 1.5em;
  text-align: justify;
}
.vintage-book .aspect-ratio {
  padding-top: calc(2500 / 2250 * 100%);
}
.vintage-book .page {
  padding: 8vw 17vw;
}
.vintage-book .page::before {
  background-image:
    url(https://scp-jp-storage.wikidot.com/local--files/file%3A8260379-83-tgv9/book.1000px.webp);
}
.vintage-book > :nth-child(2n+1) .page::before {
  transform: scaleX(-1);
}
.vintage-book .content {
  transform: skewY(-0.5deg);
}
.vintage-book > :nth-child(2n+1) .content {
  transform: skewY(0.5deg);
}
.vintage-book .split-paragraph-start {
  text-align-last: justify;
}
.vintage-book .content > p:not(.split-paragraph-end):not(.is-image) {
  text-indent: 2em;
}
 
/* Gdocs */
 
.gdocs {
  font-family: sans-serif;
  color: #15141A;
  line-height: 1.25em;
}
.gdocs .aspect-ratio {
  padding-top: calc(1.414 / 1 * 100%);
}
.gdocs .page {
  padding: 10vw 10vw;
}
.gdocs .page::before {
  background: white;
  border: thin solid grey;
}

Javascript

let pageCount = 1
let resetCount = 0
 
// contents is already defined, see [[html]]
 
// Replace line breaks with <p>
contents = contents
  .split("\n")
  .filter(line => line.length > 0)
  .map(line => {
    return $(`<p>${line}<${"/p"}>`) // to fix Wikidot's syntax highlighting
  })
 
// Convert contents from text to jQuery objects
contents = $($.map(contents, el => el.get()))
 
// Remove empty objects
contents = contents.filter(":not(:empty)")
 
// Add flex order to paragraphs containing positioned images
contents.map((index, element) => {
  element = $(element)
  if (
    element.is("p") &&
    element.text().length === 0 &&
    element.children().length === 1 &&
    element.children().first().is("img")
  ) {
    // Mark images
    element.addClass("is-image")
    if (
      ["top", "bottom"].includes(element.children().first().attr("position"))
    ) {
      // Order positioned images
      element.css(
        "order",
        { top: -1, bottom: 1 }[element.children().first().attr("position")]
      )
    }
  }
})
 
// Once everything is ready, render the pages
// This includes image loading, so this is window load instead of document ready
$(window).on("load", () => {
  resetCount = 0
  let thisDocument = $(".pages-container")
  resetPage(thisDocument)
  // Sometimes doesn't work after first load - try again
  setTimeout(() => resetPage(thisDocument), 2000)
 
  let windowWidth = $(window).width()
 
  // Rerender the pages when the window size is changed
  $(window).on(
    "resize",
    debounce(() => {
      if ($(window).width() !== windowWidth) {
        windowWidth = $(window).width()
        resetPage(thisDocument)
      }
    }, 200)
  )
})
 
/**
 * Debounces the execution of a function - it will only fire once its
 * triggering events have stopped.
 *
 * By David Walsh: https://davidwalsh.name/javascript-debounce-function (MIT)
 *
 * @param func - The function to debounce.
 * @param wait - Milliseconds after which to assume there'll be no more events.
 */
function debounce(func, wait) {
  let timeout
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout)
      func(...args)
    }
    clearTimeout(timeout)
    timeout = setTimeout(later, wait)
  }
}
 
function resetPage(thisDocument) {
  thisDocument.empty()
  pageCount = 1
  thisPage = preparePage(thisDocument)
  setTimeout(() => {
    makePage(contents.clone(), thisPage, thisDocument)
    checkPage(thisDocument)
  }, 1)
}
 
function preparePage(thisDocument) {
  const aspectBox = $(`<div class='aspect-ratio'></div>`).appendTo(thisDocument)
  return $(`<div class='page'></div>`).appendTo(aspectBox)
}
 
/**
 * Recursively creates pages and sorts text into them.
 *
 * @param contents - Array of (remaining) HTML paragraphs.
 * @param thisPage - The current page as a jQuery element.
 */
function makePage(contents, thisPage, thisDocument) {
  console.log(`Making page ${pageCount++}`)
 
  let nextPageContents = []
 
  // Add the contents to the page
  thisPageContents = $("<div class='content'></div>").appendTo(thisPage)
  thisPageContents.empty().append(contents)
 
  // The page height is the maximum height of page content
  const pageHeight = thisPage.height()
 
  // The content height is the actual height of page content
  const contentHeight = thisPageContents.outerHeight()
 
  // If the content exceeds the page, create a new one
  if (
    contentHeight > pageHeight ||
    thisPageContents.has("br.page-break").length > 0
  ) {
    console.log(`Split needed (${contentHeight} > ${pageHeight})`)
 
    // Find the first element that can't fully appear on the page
    // (or a page break)
    const children = thisPageContents.children()
    let lastParagraphIndex = -1
    for (let index = 0; index < children.length; index++) {
      const child = $(children.eq(index))
      // First, check for a page break
      if (child.has("br.page-break").length > 0) {
        console.log("Splitting on page break")
        lastParagraphIndex = index
        break
      }
      // Second, check for an element that doesn't fit
      // Do this by summing the height of all children up to and this one,
      // then compare that to the desired page height
      const childBottom =
        children
          .slice(0, index)
          .toArray()
          .reduce((height, child) => {
            return height + $(child).outerHeight(true)
          }, 0) + child.outerHeight(true)
      console.log(index, childBottom, thisPage.height())
      if (childBottom > thisPage.height()) {
        lastParagraphIndex = index
        break
      }
    }
 
    if (lastParagraphIndex === -1) {
      // No elements can fit on this page!
      // Genuinely unsure what to do here
      // The default action is "move everything" so that's probably... fine...
      console.log("No elements can fit on this page")
    } else {
      // There's an element that either can't be on the page, or partially can
      console.log(`Splitting element with index ${lastParagraphIndex}`)
 
      // Trim away the content that we already know will fit
      nextPageContents = contents.splice(lastParagraphIndex)
      // The partial element is the first of nextPageContents.
 
      // Set the html to the contents we know will fit
      thisPageContents.empty().append(contents)
 
      // Extract a copy of the partial element from the next page
      let partialElement = $(nextPageContents[0]).clone()
 
      // If the partial element is p, it can be split up
      if (partialElement.is("p") && partialElement.text() != "") {
        // The element can be split across pages - move some of it back
 
        partialElement.appendTo(thisPageContents)
 
        const partialText = partialElement.text()
        let keepWords = partialText.split(" ")
        let moveWords = []
 
        // Remove words one by one until the element fits
        for (let index = keepWords.length; index > 0; index--) {
          if (thisPageContents.outerHeight(true) <= thisPage.height()) {
            // It fits! Declare split
            console.log(
              `Split successful after ${moveWords.length} words removed`
            )
            if (moveWords.length > 0) {
              partialElement.addClass("split-paragraph-start")
            }
            break
          }
          let word = keepWords.pop()
          moveWords.unshift(word)
          partialElement.text(keepWords.join(" "))
        }
 
        // Check if this was successful - might have just run out of words
        if (keepWords.length === 0) {
          // Not successful - undo everything
          console.log("Split unsuccessful; partial element removed")
          partialElement.remove()
        } else {
          // Success! Update the next page with the retained words
          nextPageContents[0].textContent = moveWords.join(" ")
        }
      } else {
        // The element can't be split, so don't move anything back
        // If it's the first element, it probably came from the previous page
        // If that's the case, jut dump it here
        if (lastParagraphIndex == 0) {
          console.log("Something couldn't be split, so it was dumped")
          partialElement.appendTo(thisPageContents)
          partialElement.css("height", pageHeight)
          partialElement.css("overflow", "hidden")
          nextPageContents.shift()
        }
      }
    }
 
    // If the last element of this page was split, so it the first of the next
    if (
      thisPageContents.children().last().is("p.split-paragraph-start") &&
      $(nextPageContents[0]).is("p")
    ) {
      nextPageContents[0].classList.add("split-paragraph-end")
    }
 
    // If the very first element of the next page is a page break, chuck it out
    if ($(nextPageContents[0]).has("br.page-break").length > 0) {
      console.log("Scrapping a page break")
      nextPageContents.shift()
    }
 
    // Slap an arbitrary limit on the recursion
    if (pageCount < 1000) {
      // Create a new page
      const nextPage = preparePage(thisDocument)
      makePage(nextPageContents, nextPage, thisDocument)
    } else {
      console.log("Pages stopped after 1000")
    }
  } else {
    console.log("No split needed")
  }
}
 
function checkPage(thisDocument) {
  if (resetCount > 5) {
    console.log("Overflow reset limit reached")
    return
  }
  let shouldReset = 0
  thisDocument.children().each((index, aspectBox) => {
    aspectBox = $(aspectBox)
    pageBox = $(aspectBox.children().first())
    contentBox = $(pageBox.children().first())
    if (contentBox.outerHeight(true) > pageBox.height()) {
      shouldReset++
    }
    if (shouldReset > 1) {
      console.log(`${shouldReset} pages overflowing, resetting`)
      resetCount++
      resetPage(thisDocument)
      checkPage(thisDocument)
    } else {
      console.log("No overflow reset needed")
    }
  })
}

脚注

1. 訳注: 表示環境によっては ¥（円記号）で表示される

2. 訳注: 特定のデータを視覚的な形式（テキストなど）で表示するプロセス。

3. 訳注: 特定のデータ形式を解析するため、独自に実装されるプログラムや関数。

4. 訳注: 原語版ではLibre Baskerville。

5. 訳注: ルート2（√２）を意味する。