# データシート：データから作る表とセル結合 > TSVで貼り付けた表をparseTSVで読み、mergeCells、setAlignment、setCellBackgroundで整えます。レジスターマップは自動でページをまたいで分割されます。 - HTML版: https://postext.dev/ja/cookbook/technical-datasheet - レシピ No. 010 · 表 · 難易度 3 (上級) · 出力: Canvas, PDF - ジャンル: マニュアル・ガイド・リファレンス - 必要なもの postext ≥ 1.4.1, postext-pdf ≥ 1.4.1 · テスト環境 1.4.1, postext-pdf 1.4.1 ／テスト日 2026-09-25 - ページ: [1](https://postext.dev/cookbook/technical-datasheet/en/p01.webp?v=b0677359), [2](https://postext.dev/cookbook/technical-datasheet/en/p02.webp?v=b0677359), [3](https://postext.dev/cookbook/technical-datasheet/en/p03.webp?v=b0677359), [4](https://postext.dev/cookbook/technical-datasheet/en/p04.webp?v=b0677359) - PDF: https://postext.dev/cookbook/technical-datasheet/en/technical-datasheet.pdf?v=b0677359 - Sandboxで開く: https://postext.dev/ja/sandbox#recipe=technical-datasheet&lang=en (.postext: https://postext.dev/cookbook/technical-datasheet/en/technical-datasheet.postext) - 最終更新: 2026-09-25 - 他の言語: [en](https://postext.dev/en/cookbook/technical-datasheet.md), [es](https://postext.dev/es/cookbook/technical-datasheet.md), [ca](https://postext.dev/ca/cookbook/technical-datasheet.md), [zh](https://postext.dev/zh/cookbook/technical-datasheet.md), [ar](https://postext.dev/ar/cookbook/technical-datasheet.md) ## かんたんな説明 電子式の温度センサーの4ページの製品資料です。表計算のデータから表を作り、見出しを共有させ、長い表を次のページへ続ける方法を示します。 ## できあがり 架空のメーカーPyxis Microdevicesの温度センサーPX-7021の、4ページのデータシートです。大半は表で、見出しには結合したセルが多く、レジスターマップは1段より長くなります。表紙ページは、品番と3つの主要な数値を載せた紫の帯で始まります。2ページ目では1つの表がページ幅にまたがります。2行の見出しはValueをMin、Typ、Maxの上に置き、パラメーターのグループは第1列で縦に結合し、パラメーターは1つおきに灰色の地を敷きます。レジスターマップは3ページ目の地で切れ、4ページ目で見出しを繰り返して続き、型番の表の横、パッケージ図の上に置かれます。PostextはMarkdownの表を解析しないので、表は表計算のデータをTSVとして貼り付けたものです。 **このレシピが答える問い:** - 貼り付けたデータを、結合した見出し、列幅、セルごとのそろえを持つ表にするには？ - 長い表を、見出し行を繰り返し「続く」の表示を付けて、ページをまたいで分割するには？ - 1つの文書の中で、複数の表を異なるスタイル（塗り、縞模様のセル、角丸の枠）にするには？ - PDFで図表を鮮明に保ち、テキストを選択できるようにするには（SVG、印刷用マスター）？ - 画像や表を、Markdownの![]()ではなくコードから（リソースとして）追加するには？ ## 手短な答え ```js // script.js, 行 31–69 const at = (row, column) => ({ row, col: column }); const span = (r0, c0, r1, c1) => ({ start: at(r0, c0), end: at(r1, c1) }); const C = { group: 0, param: 1, symbol: 2, conditions: 3, min: 4, max: 6, unit: 7 }; // columns function electricalTable(tsv) { // In 1.4.1 parseTSV makes plain cells and leaves headerRowCount unset: the head is two rows. let m = Object.assign(parseTSV(tsv), { headerRowCount: 2, columnWidths: [22, 44, 16, 38, 15, 15, 15, 15] }); // weights: mm of the 180 mm measure // 'Parameter' covers two columns and two rows; 'Value' spans Min, Typ and Max. mergeCells // marks the covered cells hiddenBy, so no column shifts (gotcha: merged-cells-hiddenby). for (const range of [span(0, C.group, 1, C.param), span(0, C.symbol, 1, C.symbol), span(0, C.conditions, 1, C.conditions), span(0, C.min, 0, C.max), span(0, C.unit, 1, C.unit)]) { m = mergeCells(m, range); // 'Value' is centred over its three columns, the rest set left m = setAlignment(m, range.start, range.start.col === C.min ? 'center' : 'left', 'middle'); } // Min, Typ and Max go right, over their figures; setAlignment clears a vAlign it is not given. for (let c = C.min; c <= C.max; c++) m = setAlignment(m, at(1, c), 'right'); let zebra = false; for (let r = m.headerRowCount; r < m.rows.length; r++) { const row = m.rows[r]; if (row[C.param].content) zebra = !zebra; // a parameter keeps one fill over its conditions for (let c = 0; c < row.length; c++) { // An empty cell continues the one above: a group, or a parameter and its symbol. if (c <= C.symbol && row[c].content) { let end = r; while (m.rows[end + 1] && !m.rows[end + 1][c].content && (c === C.group || !m.rows[end + 1][C.param].content)) end++; m = mergeCells(m, span(r, c, end, c)); } // Figures flush right, as datasheets set them (no decimal tab: gap tab-stops). m = setAlignment(m, at(r, c), c >= C.min && c <= C.max ? 'right' : 'left', 'middle'); // A table style has no zebra rows, so they are filled cell by cell (gotcha: no-zebra). Each // helper returns a new model, cheap at 20 rows; for thousands, set the cell fields directly. if (c === C.group) m = setCellBackground(m, at(r, c), col('tint')); else if (zebra) m = setCellBackground(m, at(r, c), col('zebra')); } } return m; } ``` ## 材料 **学べること** - [データから作る表](https://postext.dev/ja/docs/document-format.md#ブロック埋め込み任意本文中への明示的な配置): ヘッダー行、結合セル、列幅の比率、セルごとの行そろえ、セル内のリストを持つ表のリソースです。パイプ記法の表は解析されません。 - [ページをまたぐ表](https://postext.dev/ja/docs/configuration.md#ページより高い表): 長い表は行と行のあいだで分割され、ヘッダーが繰り返されます。キャプションには「（続き）」が付き、「続く」の表示が入ります。rowspanの途中では分割しません。 **ほかに使うもの** - [セルの塗り](https://postext.dev/ja/docs/document-format.md#ブロック埋め込み任意本文中への明示的な配置) - [名前付きの表スタイル](https://postext.dev/ja/docs/configuration.md#名前付きの表スタイル) - [表スタイル](https://postext.dev/ja/docs/configuration.md#表スタイル) - [キャプションのスタイル](https://postext.dev/ja/docs/configuration.md#キャプションスタイル) - [見出しの属性](https://postext.dev/ja/docs/document-format.md#見出しの属性) - [上付きと下付き](https://postext.dev/ja/docs/document-format.md#インライン書式) - [インラインのチップ](https://postext.dev/ja/docs/configuration.md#チップスタイル) - [リソースとしての図と表](https://postext.dev/ja/docs/document-format.md#リソース) - [図の配置](https://postext.dev/ja/docs/document-format.md#配置) - [デザインした章扉](https://postext.dev/ja/docs/configuration.md#幅と詳細デザイン) - [段抜きの章見出し帯](https://postext.dev/ja/docs/configuration.md#幅と詳細デザイン) - [ページデザインの画像](https://postext.dev/ja/docs/configuration.md#画像要素) - [柱とノンブル](https://postext.dev/ja/docs/configuration.md#柱とノンブル) - [番号付き見出し](https://postext.dev/ja/docs/configuration.md#レベルごとの上書き) - [囲み](https://postext.dev/ja/docs/configuration.md#囲みスタイル) - [セマンティックカラーパレット](https://postext.dev/ja/docs/configuration.md#カラーパレット) - [PDFの書き出し](https://postext.dev/ja/docs/configuration.md#pdfの生成) - citations - [見出しスタイル](https://postext.dev/ja/docs/configuration.md#見出しスタイル) - [「図」と「表」を文書の言語で](https://postext.dev/ja/docs/configuration.md#リソースの種類) - [改ページと改段](https://postext.dev/ja/docs/document-format.md#pagebreak) - [ページの役割ごとの柱](https://postext.dev/ja/docs/configuration.md#テキスト要素) - [段落スタイル](https://postext.dev/ja/docs/configuration.md#段落スタイル) - [PDFに埋め込むフォント](https://postext.dev/ja/docs/configuration.md#なぜフォントプロバイダーが必要か) - [独自のリソースの種類](https://postext.dev/ja/docs/configuration.md#リソースの種類) **設定の一覧** - [`bodyText`](https://postext.dev/ja/docs/configuration.md#本文), [`calloutStyles`](https://postext.dev/ja/docs/configuration.md#囲みスタイル), [`captionStyle`](https://postext.dev/ja/docs/configuration.md#キャプションスタイル), [`chipStyles`](https://postext.dev/ja/docs/configuration.md#チップスタイル), [`colorPalette`](https://postext.dev/ja/docs/configuration.md#カラーパレット), [`footer`](https://postext.dev/ja/docs/configuration.md#柱とノンブル), [`header`](https://postext.dev/ja/docs/configuration.md#柱とノンブル), [`headingStyles`](https://postext.dev/ja/docs/configuration.md#見出しスタイル), [`headings`](https://postext.dev/ja/docs/configuration.md#見出し), [`layout`](https://postext.dev/ja/docs/configuration.md#レイアウト), [`page`](https://postext.dev/ja/docs/configuration.md#ページ), [`paragraphStyles`](https://postext.dev/ja/docs/configuration.md#段落スタイル), [`resourceTypes`](https://postext.dev/ja/docs/configuration.md#リソースの種類), [`tableStyle`](https://postext.dev/ja/docs/configuration.md#表スタイル), [`tableStyles`](https://postext.dev/ja/docs/configuration.md#名前付きの表スタイル), [`unorderedLists`](https://postext.dev/ja/docs/configuration.md#箇条書きリスト) **API** - [`buildDocument`](https://postext.dev/ja/docs/configuration.md#文書のビルド), [`clearMeasurementCache`](https://postext.dev/ja/docs/configuration.md#計測キャッシュ), [`decompressWoff2`](https://postext.dev/ja/docs/configuration.md#ブラウザー向けフォントプロバイダーfontsource--woff2), [`defaultResourceTypes`](https://postext.dev/ja/docs/configuration.md#リソースの種類), [`mergeCells`](https://postext.dev/ja/docs/document-format.md#ブロック埋め込み任意本文中への明示的な配置), [`parseTSV`](https://postext.dev/ja/docs/document-format.md#ブロック埋め込み任意本文中への明示的な配置), [`registerResourceImage`](https://postext.dev/ja/docs/architecture.md#apiの概要), [`renderPageToCanvas`](https://postext.dev/ja/docs/configuration.md#ページをビットマップに描画する), [`renderToPdf`](https://postext.dev/ja/docs/configuration.md#pdfの生成), [`setAlignment`](https://postext.dev/ja/docs/document-format.md#ブロック埋め込み任意本文中への明示的な配置), [`setCellBackground`](https://postext.dev/ja/docs/document-format.md#ブロック埋め込み任意本文中への明示的な配置) **書体** - Fira Sans (OFL-1.1), Fira Sans Condensed (OFL-1.1), Fira Mono (OFL-1.1) ## 作り方 ### 1 · データを貼り付け、表を整える コードは前の[手短な答え](#手短な答え)にあります。postext 1.4.1の`parseTSV`は`headerRowCount`を設定しないので、2行の見出しは手で宣言します。表が分割されれば、両方の行が各部分で繰り返されます。`columnWidths`の比率は合計180で、これは版面の幅をmmで表した数なので、各比率がそのままページ上の列幅になります。`mergeCells`は覆われたセルをすべてその場に残して`hiddenBy`の印を付けるので、列はずれません。`setAlignment`はセルごとに働き、縦方向のそろえを省くと消してしまうため、ほとんどの呼び出しで`'middle'`をもう一度渡します。灰色はパラメーター単位で交互に付けるので、Accuracyの2行は同じ地色になります。行単位で交互にすると、2行目は白になってしまいます。 ### 2 · 表と図はすべてリソースにする ```js // script.js, 行 492–521 const svgResource = (id, caption, altText, [w, h], placement) => ({ id, typeId: 'figure', kind: 'svg', caption, altText, placement, createdAt: 0, updatedAt: 0, svg: { fileId: `${id}.svg`, width: w * SCALE, height: h * SCALE } }); // fitted to its slot const table = (id, caption, model, { styleId, placement, note } = {}) => ({ id, typeId: 'table', kind: 'table', caption, note, placement, table: { model, styleId }, createdAt: 0, updatedAt: 0 }); // A float takes the first free slot after its first :ref; the logo is never cited, only drawn. const resources = [ svgResource('logo', '', 'Pyxis Microdevices', LOGO), svgResource('pinout', 'Pin configuration, 8-pin DFN, top view.', 'The package from above: ' + 'pins 1 to 4 down the left side, 5 to 8 up the right.', PINOUT), svgResource('circuit', 'Typical application, bus address 48h.', 'The sensor with a 100 nF ' + 'capacitor, address pins to ground, and SDA, SCL and ALERT pulled up to a host.', CIRCUIT), svgResource('outline', 'Package outline and land pattern, 8-pin DFN, in mm.', 'Top, bottom ' + 'and side views of the 2 × 2 mm body, and the land pattern with its two vias.', OUTLINE, { position: 'bottom', span: 'page' }), // a strip across the foot of a page table('electrical', 'Electrical characteristics, *V*~DD~ = 1.6 V to 5.5 V and *T*~A~ = −40 °C ' + 'to 125 °C unless noted', electricalTable(electrical), { styleId: 'electrical', placement: { position: 'top', span: 'page' }, note: 'Typical values at 3.3 V and 25 °C. ' + '^1^ Tested at 25 °C and 50 °C, the rest by characterization. ^2^ Characterized, not ' + 'tested in production. ^3^ One conversion a second, bus idle.' }), // No placement: these float, and only a floated table splits (gotcha: here-table-no-split). table('pins', 'Pin functions', groupedTable(pins, [9, 16, 10, 52]), { styleId: 'grouped', note: 'Types: P power, G ground, I input, O open-drain output, I/O open-drain input and ' + 'output.' }), table('registers', 'Register map', groupedTable(registers, [9, 17, 11, 50]), { styleId: 'grouped', note: 'Reset values apply at power-on and after a general-call reset.' }), table('ordering', 'Order codes', Object.assign(parseTSV(ordering), { headerRowCount: 1, columnWidths: [23, 29, 18, 17] }), { styleId: 'ordering', note: 'WLCSP-4: fixed address 48h, no ALERT output.' }), ]; ``` 各表と図はキャプションを持つリソースで、表にはさらに注記と名前付きのスタイルが付きます。キャプションと注記にはイタリック、下付き、上付きが使えます。電気的特性の表は、キャプションで`*V*~DD~`を使って試験条件を示し、注記では`^1^`で脚注に番号を振ります。フロートは最初の`:ref`のあとの、最初の空き位置に置かれます。表1は1ページ目で引用され、ページの頭にまたがって置かれるので、2ページ目の冒頭に来ます。外形図はページの地にまたがって置かれ、ほかの表は初期設定の配置、つまり1段幅のフロートのままです。`here`に置いた表はけっして分割されません。 ### 3 · 長い表は自分で分割させる ```js // script.js, 行 73–87 function groupedTable(tsv, columnWidths) { let m = Object.assign(parseTSV(tsv), { headerRowCount: 1, columnWidths }); const codes = [0, 2]; // Pin and Type, Addr. and Reset: short codes, centred, in a bare chip // A TSV cell holds no line break: the data writes \n, and a line opening with • is a list. m.rows = m.rows.map((row, r) => row.map((cell, c) => ({ ...cell, content: r > 0 && row[1].content && codes.includes(c) ? `:chip[${cell.content}]{style="code"}` : cell.content.replaceAll('\\n', '\n') }))); for (let r = 0; r < m.rows.length; r++) { const last = m.rows[r].length - 1; if (r >= m.headerRowCount && !m.rows[r][1].content) { // a lone first cell heads a group m = setCellBackground(mergeCells(m, span(r, 0, r, last)), at(r, 0), col('tint')); } else for (const c of codes) m = setAlignment(m, at(r, c), 'center'); } return m; // no split code: the engine cuts it between rows and repeats the head } ``` ピンの表とレジスターマップは、どちらも`groupedTable`から作ります。最初のセルだけが埋まった行は表の幅いっぱいに結合され、グループ見出しとして紫の地になります。TSVのセルは改行を持てないので、データには`\n`と書き、関数がそれを改行に変えます。`•`で始まる行は、さらにリスト項目として組まれます。短いコードは`code`チップスタイルで組みます。このスタイルは地色、枠、左右のパディングを持たず、Fira Monoの0.9 emで組みます。フロートした表が、割り当てられた空きの段に収まらないとき、エンジンは行の間で表を切り、残りを次の空き位置に、繰り返した見出しの下に置いて、キャプションのあとに`(continued)`を付けます。`continuesMarker`の行「Continued on the next page」は最初の部分の下に入り、注記は最後の部分まで待ちます（[ページより高い表](/ja/docs/configuration#ページより高い表)）。 ### 4 · 共通のスタイルと、表ごとの変種 ```js // script.js, 行 191–205 tableStyle: { headerBackground: col('brand'), headerColor: col('paper'), headerFontFamily: COND, headerFontSize: pt(8.5), bodyFontSize: pt(8), rules: 'horizontal', borderColor: col('rule'), borderWidth: pt(0.5), cellPadding: mm(1.3) }, tableStyles: [ // a resource picks one with table.styleId // White rules cut the fills apart and show where each merge and each group ends. { id: 'electrical', borderColor: col('paper'), borderWidth: pt(1.4), cellPadding: mm(1.1) }, // Written out although it is the default: 'clip' and 'hide' cut a table taller than the page. { id: 'grouped', overflow: 'split', continuedSuffix: '(continued)', continuesMarker: 'Continued on the next page' }, // A compact list in the condensed face, boxed by a rounded outer frame. { id: 'ordering', headerBackground: col('tint'), headerColor: col('brand'), rules: 'outer', borderRadius: mm(1.5), bodyFontFamily: COND }, ], captionStyle: { fontFamily: COND, fontSize: pt(9.5), labelColor: col('brand'), gap: mm(2), note: { fontSize: pt(7.5), color: col('muted') } }, ``` `tableStyle`はすべての表に共通する設定を持ちます。`tableStyles`の各項目は、その表が変える部分だけを設定し、リソースは`table.styleId`で1つを選びます。電気的特性の表は、灰色の細い罫を1.4 ptの白い罫に替えて地色を切り分け、各結合の終わりを見せます。型番の表は角丸の外枠とFira Sans Condensedを使い、4列を本文の1段に収めます。 ### 5 · PDFでテキストのまま残るラベル ```js // script.js, 行 525–539 // An SVG drawn as an image cannot use the page's fonts (gotcha: svg-no-webfonts): the PDF sets // its labels as real text in the faces it embeds; the canvas copy embeds the face itself. async function fontFace(family) { // the same TTF the PDF embeds, from the pdf kit block const ttf = await fontsourceProvider(family, 400, 'normal'); const base64 = btoa(Array.from(ttf, (b) => String.fromCharCode(b)).join('')); return `@font-face{font-family:'${family}';src:url(data:font/ttf;base64,${base64})}`; } async function loadDrawing(fileId, markup, face) { await loadSvg(fileId, markup); // registers the plain SVG and keeps its bytes for the PDF const img = new Image(); img.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent( markup.replace(/]*>/, (tag) => `${tag}`))}`; await img.decode(); registerResourceImage(fileId, img); // replaces the canvas copy only } ``` SVGは画像としてキャンバスに届き、画像はページのWebフォントを使えません。そのため、そのままではピン配置図、回路図、パッケージ外形図のラベルがシステムの書体に置き換わります。PDFは素のマークアップを受け取り、各``を、埋め込んだ書体で選択可能なテキストとして組みます。キャンバス用には、各図にFira Monoのファイルを内蔵させてもう一度登録します。このファイルは、キットのpdfブロックのフォントローダーで一度だけ取得します。 ### 6 · 扉、柱、フッター ```js // script.js, 行 96–147 const place = (to, edge, x, y, size) => ({ anchor: { to, edge }, offset: { x: mm(x), y: mm(y) }, ...(size && { size }) }); const inset = (edge, y, size) => // a page corner, moved in by the side margin place('page', edge, edge.endsWith('left') ? MARGIN.x : -MARGIN.x, y, size); const text = (id, content, family, size, color, placement, extra) => ({ kind: 'text', id, content, fontFamily: family, fontSize: pt(size), color: col(color), placement, ...extra }); const caps = (size, weight = 600) => ({ fontWeight: weight, letterSpacing: pt(size * 0.16), textTransform: 'uppercase' }); const badge = { ...caps(7.5, 700), box: { backgroundColor: col('hazard'), padding: { top: pt(1.6), bottom: pt(1.4), left: pt(4), right: pt(4) } } }; const mark = (size, edge, y) => ({ kind: 'image', id: 'mark', resourceId: 'logo', // by id placement: inset(edge, y, { width: mm(size) }) }); const maker = (size, color, y) => text('maker', 'Pyxis Microdevices', COND, size, color, place('#mark', 'right-of', size / 4, y), caps(size)); const keyFigure = (n, y) => [ // {attr.k1} over its label {attr.k1l}, flush right on the band text(`k${n}`, `{attr.k${n}}`, COND, 22, 'paper', inset('top-right', y), { fontWeight: 600 }), text(`k${n}l`, `{attr.k${n}l}`, COND, 7, 'tint', inset('top-right', y + 9), caps(7))]; const BAND = 84; // mm: the violet band across the head of page 1 // The band under the top margin and 9 mm or more of white, in whole grid lines (16 here). const OPENER_LINES = Math.ceil((BAND - MARGIN.y + 9) / (LEAD * 25.4 / 72)); const opener = { enabled: true, minHeight: pt(OPENER_LINES * LEAD), // so the columns under it start on the grid slot: { elements: [ { kind: 'box', id: 'band', style: { backgroundColor: col('brand') }, placement: { anchor: { to: 'bleed', edge: 'top-left' }, size: { width: 'fill', height: mm(BAND) } } }, mark(6, 'top-left', 12), maker(8.5, 'paper', 1.7), text('doc', 'Datasheet {subtitle} · {publishDate}', MONO, 7.5, 'tint', inset('top-right', 13.6)), text('kicker', '{attr.kicker}', COND, 9.5, 'tint', inset('top-left', 30), caps(9.5)), text('title', '{titleText}', COND, 64, 'paper', place('#kicker', 'below', 0, 0.5), { fontWeight: 700, lineHeight: 1 }), // A design text that overflows its width ends in '…' (gotcha: overflow-ellipsis-default). text('lead', '{attr.lead}', 'Fira Sans', 12, 'paper', place('#title', 'below', 0, 2.5, { width: mm(108) }), { lineHeight: 1.32, align: 'left', overflow: 'wrap' }), text('status', 'Preliminary', COND, 7.5, 'ink', place('#lead', 'below', 0, 4.5), badge), ...[1, 2, 3].flatMap((n) => keyFigure(n, 15 + 15 * n)), ] }, }; const header = { elements: [ // body pages only: the opener has its band text('running-title', '{chapterTitle}', COND, 9, 'brand', inset('top-left', 10.4), { fontWeight: 700, pages: 'body' }), text('flag', 'Preliminary', COND, 7.5, 'ink', inset('top-right', 10.2), { ...badge, pages: 'body' }), { kind: 'rule', id: 'hairline', pages: 'body', thickness: pt(0.5), color: col('rule'), placement: inset('top-left', 15.5, { width: mm(TRIM[0] - 2 * MARGIN.x) }) }, ] }; const footer = { elements: [ // every page: an image element works in a running slot too mark(4.5, 'bottom-left', -9), maker(7, 'ink', 1.2), text('folio', '{pageNumber}/{totalPages}', COND, 8, 'brand', inset('bottom-right', -9.6), { fontWeight: 700 }), text('doc', '{subtitle} ·', MONO, 7, 'muted', place('#folio', 'left-of', -1.5, 0.4)), ] }; ``` 品番は第1レベルの見出しで、そのデザインスロットが扉を描きます。塗り足しまで届く紫のボックス、ロゴ、そして見出しの属性から読む肩見出し、リード、3つの主要な数値です。画像要素は扉だけでなく柱やフッターのスロットでも使えるので、フッターはロゴのリソースを指定する画像要素で始まります。柱の要素は`pages: 'body'`を持つので、どれも表紙ページには刷られません。 ## レシピの全体 レシピのフォルダーから合成した1つのファイルで、サンプルのテキストとレシピ集の共通キットを埋め込んであり、自分でページを組み立てます。動かすには、空のページの`