テンプレートの作り方

テンプレートの種類

10plateでは3種類のテンプレートを作ることができます。

HTML+CSS
HTMLとCSSを使って作るテンプレートです。印刷用や、それ以外のWeb共有用のちょっとしたジェネレータなど、アイデアしだいで色々なテンプレートを作ることができます。

SVG
SVGを活用したテンプレートです。SVGファイルをアップロードしてテンプレート化します。
主に印刷用のものや、印刷データからコンバートしてテンプレート化したい場合、画像を埋め込みたい場合などに便利です。
もし、SVGコードを直接書きたい場合は、HTML+CSSテンプレートのほうで作ることができます。

テキスト
文字のみのテンプレートです。個人的によく使うメールの文章をテンプレート化しておく、コピペ用ジェネレータ、登場人物の名前を書き換えられる小説などに使えます。

テンプレートの作りかた

テンプレートは、テンプレート新規作成ページから作れます。

最初にテンプレートの種類を選ぶと、種類に応じたテンプレートの作成画面が開きますので、そこにテンプレートの中身を入力(SVGの場合はファイルをアップロード)します。

テンプレートは、下のようなルールで「編集できるようにしたい箇所」を作ることにより、テンプレートとして機能させることができます。

編集できる部分(フィールド)を作る

二重の波括弧({{ }})でくくった部分を作ると、その部分が書き換えできるようになり、その部分のための入力欄が自動で生成されます。

たとえば

hello, world

という文字列をテンプレート化して、「world」の部分を書き換えられるようにしたい場合は、

hello, {{ world }}

と書くと、{{world}}の部分が書き換えできるようになり、{{world}}の部分に入る内容を書くための入力欄が自動で作られます。

サンプル:https://10plate.io/t/BDrLdxrRJVW

現状、HTML/SVGのタグの属性値については、class属性を除いてテンプレート化に対応していません。その他セキュリティ等の関係で意図したとおりにならない事があります。

フィールド名とオプション

二重波括弧で囲った部分に書く内容によって、いくつか細かい動作の指定ができます。

フィルタ

{{ 日付 | date('YYYY-MM-DD')}} のように、フィールドのラベル部分の後に「|」を書き、その後に以下のフィルタを書くことで、たとえば数字にカンマを入れたり、計算結果の小数点を切り捨てたりといった後処理ができます。

関数

sum('prefix')

prefixで指定したものがラベルの頭についているものの合計を計算します。 たとえば

{{ 値段1 }}
{{ 値段2 }}
{{ 値段3 }}
{{ =sum('値段') }}

というテンプレートの場合、{{ =sum('値段') }}のところには値段1値段2値段3を足した合計が表示されます。

now()

今の時間をISO8601形式の文字列で返します。
通常のテンプレートで使うのは推奨しません(入力済みのものを保存した場合も含め、常に見た時の日付が出力されるため)。
random()フィルタを使って占いのようなものを作る場合に、{{ =now()+name | random('1','2','3')}}のようにすることで結果を常にランダムにできます。

today()

今日の0:00をISO8601形式の文字列で返します。
now()と同様、通常のテンプレートでの使用は非推奨です。
random()フィルタと組み合わせて{{ =today()+name | random('1','2','3')}}のようにすることで、出力結果を日替わりにできます。

テンプレート FAQ & Tips

Q. 入力欄/出力結果で改行したい
テンプレートで{{ description::multiline }} のように「::multiline」を指定すると、入力欄が複数行になり、出力結果も改行が反映されるようになります。