本文へスキップ

章 13 · 部 III · 実践

テンプレートページで作る本

Sandboxで、テンプレートページでできた小学校の教科書を作る手順:ページテンプレートを作り、Markdownから内容を流し込み、地図にラベルを付け、ページを翻訳し、収まらない枠を直し、ページとテキストの両方で選択する

更新日 2026-10-1712分enescadefritptzhjaar

かんたんな説明

このページでは、Sandboxで小学校の教科書の1ページを作る手順を、順を追って説明します。作るのは、見出しの帯と本文と色付きの囲みを持つページです。出来上がっている例の本を開き、そこへ1ページ足していきます。最初にページをテンプレートとして描き、次にMarkdownから文章を流し込み、そのあと地図の地名に名前を付けてページを別の言語に翻訳します。最後に、文章が囲みに入りきらないときの直し方と、ページとテキストのあいだを行き来する方法を確かめます。

教科書の1ページをテンプレートから作り、Markdownで中身を入れ、地図にラベルを付け、ページを翻訳し、収まらない枠を直します。

小学校の教科書のページは、いくつかの箱の集まりです。見出しの帯、本文、定義の箱、活動の箱、地図などです。Postextは、こうしたページを、箱(枠)を持つページテンプレートから組みます。Markdownには、どの言葉をどの枠に入れるかだけを書きます。このページでは、すでにある本を使って、1ページを足すまでの作業をSandboxで通して行います。各フィールドやMarkdownの各行が何をするかは、リファレンスのページにあります。ここでは一つずつ順に実行して、何が変わるかを見ていきます。Markdownについてはテンプレートページ、テンプレートについては設定:テンプレートページ、画面についてはSandbox:テンプレートページを参照してください。

必要なものはブラウザだけです。作業はすべてSandboxの中で行い、変更はお使いのブラウザに残ります。

#1. 本を開く

使う本はOur riverです。Year 3 向けの教科書の1単元で、レシピ集にレシピ Nº 156 として載っています。川も町も絵も、この本のために作った架空のものです。全部で9ページあり、向かい合う2ページにまたがる地図が入っています。スペイン語、カタルーニャ語、英語の三つの版があります。

Sandboxで開く。最初に開くと、本に自分の本として追加されるので、自由に変更できます。リンクの lang=es や lang=ca に変えると、ほかの版が開きます。あとで同じリンクをもう一度開くと、自分のコピーを開くか、公開されている本に置き換えるかをSandboxが尋ねます。

触る前に、二つのことを知っておいてください。

  • プレビューの上のバーに、内容とデザインのスイッチがあります。内容モードでは、本文パネルかページの上で言葉を編集します。デザインモードでは、ページテンプレートとスタイルを編集し、本文は読み取り専用になります。Alt+Shift+M(Macでは⌥⇧M)で切り替えられます。
  • 本文パネルには、1章分のMarkdownが出ます。テンプレートページは、::::page{template="…"} で始まり、コロン4つで終わるブロックです。プレビューのページで言葉をクリックすると、Markdownのその位置にカーソルが移ります。

#2. ページテンプレートを作る

新しいページは復習のページにします。見出しの帯、その下の短い文章、そして学んだことを思い出す箱と試してみる箱の二つです。必要なのは、四つの枠を持つテンプレートです。

  1. プレビュー上のスイッチをデザインにして、左のデザインパネルを開きます。ページと段組みからページテンプレートを選びます。一覧には、この本のテンプレートが、枠の図とともに並びます。
  2. 新規を押します。新しいテンプレートが開くので、IDを review(Markdownがこの名前で指定します)、名前を Review page(このパネルに表示される名前です)にします。IDには、小文字、数字、ハイフンが使えます。
  3. テンプレートには、ページの本文を受け取る枠 text が最初から一つあります。これを見出しの帯にします。名前(スロット)を title、囲みのスタイルを portada(この本が見出しに使っている青い帯)にし、ページの本文を受け取るをオフにして、最初の見出しを受け取るをレベル 1にします。この枠が、ページの最初の # 見出しを受け取ります。
  4. 枠を追加を押します。新しい枠が、枠の一覧の下に開きます。名前(スロット)を text にして、ページの本文を受け取るをオンにします。ページの中で枠の外に書いたものは、ここに入ります。
  5. 枠をもう一つ追加します。名前(スロット)は remember、囲みのスタイルは dato-campo(タブの付いた緑の箱)にします。最小の高さは30 mmにします。文章が短くても、箱が十分な大きさを保ちます。
  6. 最後の枠を追加します。名前(スロット)は try、囲みのスタイルは actividad-sol、最小の高さは30 mmにします。
  7. text、remember、try の三つで、幅を端まで、高さを内容に合わせるにします。これで、枠はページの幅いっぱいに広がり、高さは中の文章に合わせて決まります。
  8. グループの下のグループを追加を押します。名前を column とし、縦に積むのままにして、枠の間隔を6 mmにします。グループの枠(ページ順)で四つの枠すべてにチェックを入れます。グループは、枠の一覧の順に枠を並べるので、見出しが先頭になります。グループは枠を上から下へ並べ、枠が大きくなると下の枠を押し下げます。そのため、最初の箱の文章が長くなっても、二つ目の箱に重なることはありません。
デザインパネルのページテンプレートに表示された Review page テンプレート。四つの枠とグループの設定があり、ページ上には同じ枠が破線の輪郭で描かれている。 (新しいタブで開きます)
テンプレートは四つの枠と一つのグループでできています。ページ上の破線の箱が枠で、緑のラベルが各枠の大きさの決まり方を示します。

テンプレートには、言葉が一つも入っていません。見出しが何か、箱に何を入れるかは、どの設定にも書かれていません。箱のスタイルが枠の見た目を決め、グループが順序を決めます。同じテンプレートは、ほかの方法でも作れます。デザインモードでは、テンプレートページの何もない所をマウスでドラッグして枠を描いたり、既存の枠を動かしたりサイズを変えたりできます(Sandbox:テンプレートページを参照)。複製は、テンプレートをコピーして手を入れるときに使い、レイアウトをテンプレートとして保存は、気に入ったテンプレートページを新しいテンプレートにします。

#3. Markdownからページを埋める

  1. プレビュー上のスイッチを内容にして、本文パネルを開き、Ctrl+End(MacではCmd+↓)で章の末尾へ移ります。
  2. 本文パネルのツールバーでテンプレートページを押します。ページテンプレートを選択の一覧に、この本のページテンプレートが、空の枠の図とともに並びます。Review pageを選びます。
  3. Sandboxが、スロットごとに空の枠を一つずつ置いたページを書き、見出しの title という語を選択状態にします。その上から見出しを入力します。
::::page{template="review"}
# Check what you have learned
 
A river changes as it runs from the mountains to the sea. Read the boxes, then answer them in your own words.
 
:::frame{slot="remember" label="Remember"}
A spring gives a trickle, streams join into a river, and the river widens as it nears the sea.
:::
 
:::frame{slot="try" label="Try it"}
Draw a river from its spring to the sea. Write the names of the three courses on your drawing.
:::
::::

見出しはレベル1を受け取る枠に、続く段落はページの本文を受け取る枠に入ります。:::frame は、それぞれ slot が同じ枠に入ります。label は、箱のタブに書かれる言葉です。ページはキャンバスの10ページ目に出ます。単元の9ページの次です。テンプレートページは、必ず新しいページから始まります。

本文パネルに新しいページのMarkdownがあり、その隣に、青い見出しと段落とタブ付きの箱二つを持つ出来上がったページが表示されている。 (新しいタブで開きます)
Markdownとキャンバスに表示されたページ。

Markdownに書かれていないものに注目してください。位置も、大きさも、色もありません。それらはテンプレートが持っていて、同じMarkdownでも別のテンプレートで組めば見た目が変わります。

#4. 地図にラベルを付ける

6ページと7ページには、見開きにまたがる地図の絵があります。地図の上の言葉は、絵の一部ではありません。それぞれの名前は、地図の :::figure の中にあるMarkdownの1行です。

:::figure{resource="mapa" slot="mapa"}
::label[Spring]{at="nacimiento"}
::label[Molinar]{at="molinar"}
::label[Lower course]{at="bajo"}
:::

at はアンカーを指定します。アンカーは絵の上の1点で、絵のリソースに一度だけ定義し、すべての言語で共有します。Molinarの石橋を足してみます。

  1. 本文パネルで地図の図へ移り(at="bajo" で検索できます)、最後のラベルの下に次の行を足します。::label[Stone bridge]{at="bridge"}
  2. 検査を開きます。6ページについて存在しないアンカーのラベルというエントリが出ています。絵に bridge というアンカーがないためです。エントリのピンのボタン(アンカー bridge を画像に配置)を押します。
  3. ダイアログに、アンカーが付いた地図が出ます。アンカーのないラベルの下で、bridge という名前が選ばれています。絵の上の橋がある場所をクリックします。
  4. 新しいアンカーのラベルスタイルを、町の名前に使っているスタイルの pueblo にして、保存を押します。
アンカーのダイアログ。点の付いた地図と、選択された新しいアンカー bridge、そのラベルスタイルの欄が表示されている。 (新しいタブで開きます)
新しいアンカーは、絵の上のクリック1回で付きます。ラベルスタイルを選ぶと、町の名前と同じ見た目になります。
6ページと7ページにまたがる地図。橋の位置に新しいラベル Stone bridge があり、そばに町の名前のラベルが並んでいる。 (新しいタブで開きます)
ラベルは、クリックした位置に、この本のフォントで置かれます。

Stone bridgeという語はMarkdownにあり、点は絵に属します。ページを翻訳するときは、同じアンカーに別の言葉を付けます。

#5. ページを翻訳する

翻訳は、同じテンプレートに別の言葉を入れることです。Sandboxには、それを持つ方法が二つあります。一つは、複数の言語を同時に持つ本にすることです。.postext ファイルに版を一つずつ入れておくと、キャンバスの上のバーで版を切り替えられ、検査パネルはすべての版を読みます(本の版を参照)。ファイルが要らない簡単な方法は、本を別の言語でコピーすることです。

  1. 本を開き、自分の本の⋯を押して複製を選びます。または新規を押して開いている本の複製を選びます。コピーを開きます。コピーは元の本と同じ名前なので、同じメニューの名前を変更…で別の名前にします。
  2. デザインパネルで表記体系を開き、言語と書字方向の文書の言語を設定します。ハイフネーション、引用符、エンジンが自分で書く語(囲みの切れ目に出るContinuedなど)は、この設定に従います。
  3. 本文パネルで言葉を翻訳し、それ以外はそのままにします。
翻訳するものそのままにするもの
見出し、段落、リストの文章コロン4つ、page という語、フェンスの template="…"
枠の label="…"枠の slot="…"
::label[…]、::alt[…]、::caption[…] のかっこの中の文章ラベルの at="…" と図の resource="…"

絵、アンカー、箱、箱の色はコピーに付いてくるので、作業は要りません。復習のページをスペイン語にしたコピーは、次のようになります。

::::page{template="review"}
# Repasa lo aprendido
 
Un río cambia mientras baja de las montañas al mar. Lee los recuadros y respóndelos con tus propias palabras.
 
:::frame{slot="remember" label="Recuerda"}
Un manantial da un hilo de agua, los arroyos se unen en un río y el río se ensancha al acercarse al mar.
:::
 
:::frame{slot="try" label="Inténtalo"}
Dibuja un río desde su manantial hasta el mar. Escribe en tu dibujo el nombre de los tres cursos.
:::
::::
別の言語にした本のコピー。翻訳したページを表示した本文パネルと、翻訳した見出し、本文、タブが付いたキャンバス上のページ。 (新しいタブで開きます)
翻訳したページです。テンプレートは同じで、言葉だけが違います。

#6. 収まらないものを直す

言葉の長さは言語によって違い、英語の文章が入っていた箱にスペイン語の文章が入らないことがあります。そうした枠は、検査パネルが見つけてくれます。確かめるには、翻訳したページの remember 枠に、適当な文章を3、4段落貼り付けて、ページに入る量より多くします。

ページには、赤く囲まれた枠と、その下端の下に不足量を示す帯(26 mm 不足)が出ます。検査のテンプレートページの下に、枠に収まらないテキストというエントリが出ます。ここには、レイアウトが諦める前に試したこと(周りの枠から場所をもらう、文字を小さくする)と、打てる手がボタンで並びます。

  • 文字を82.5 %まで縮められるようにする(fit.minScale)は、この枠の文字をその大きさまで小さくできるようにします。数行あふれるだけのときに向いています。
  • 次のページへ続ける(overflow.continueIn)は、収まらない分を、このページの後ろに足したページへ送ります。もっと長い文章に向いています。
  • 約495文字削るは、何も変えません。枠の文章を選択し、削る量を教えてくれます。

テンプレート(それで組んだすべてのページ)を変えるボタンは、先に設定の名前を挙げて確認を求めます。変更するを押します。ページが組み直され、箱は切れ目の語(Continúa)で終わり、残りは足されたページの先頭に続きます。変更はCmd/Ctrl+Zで元に戻せます。キャンバスの上のバーにある再配置を押すと、動いたものとその理由が開きます。内容に合わせて大きさや位置が変わった枠が、理由とともに言葉で示されます。

検査パネルに「枠に収まらないテキスト」のエントリと、三つの対処のボタン。ページでは最初の箱が赤く囲まれ、26 mm 不足と書かれた帯が付いている。 (新しいタブで開きます)
収まらない枠と、レイアウトが用意した対処です。

#7. ページとテキストで選択する

ページとMarkdownは、互いに連動します。

  • ページからテキストへ。 枠の言葉をクリックすると、本文パネルのその段落にカーソルが移り、プレビューの下のパスに今いる場所が出ます(10ページ › column › try › 段落 1)。デザインモードでは、同じクリックでテンプレートエディタ用にその枠が選ばれます。
  • テキストからページへ。 段落にカーソルを置くと、それを収めた枠と段落そのものがページ上で囲まれ、同じパスに位置が出ます。
  • 検査から。 検査パネルのエントリをクリックすると、Sandboxがそのページへ移り、枠を選んで、その文章にカーソルを置きます。複数の版がある本では、問題のある版に切り替わります。
  • 箱のタブで。 ダブルクリックすると、タブの上に label の入力欄が開きます。Enterで変更を確定し、Escで閉じます。
二つ目の箱がオレンジで囲まれたページと、選択された枠のMarkdownを示す本文パネル。 (新しいタブで開きます)
ページをクリックすると、そのMarkdownにカーソルが移り、プレビューの下のパスがどの枠かを示します。

#次に読むもの