テンプレートの作り方
テンプレートの種類
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属性を除いてテンプレート化に対応していません。その他セキュリティ等の関係で意図したとおりにならない事があります。
フィールド名とオプション
二重波括弧で囲った部分に書く内容によって、いくつか細かい動作の指定ができます。
{{ 名前 }}
のように二重波括弧の中に入ってる文字列がラベル(入力欄の上に表示される文字列)になります。{{ 名前((太郎)) }}
とすると二重の丸括弧内がデフォルト値になり、テンプレートページを開いた時に最初から太郎
が入力された状態になります。{{ 名前""name"" }}
とするとname
が別名として式(後述)で参照できるようになります。{{ 性別[[男,女,その他]] }}
のように二重の角括弧を使うと入力欄が選択式になります。{{ 性別[[男->man,女->woman,その他->other]] }}
のように選択肢で->
を使うと、左側が選択肢として表示されるもの、右側がテンプレートに実際に表示される内容になります。{{ 宛名::email }}
のようにラベルの後に2つのコロンをつけ、その後にデータ型の指定をすると、入力欄の種類が指定できます。指定できるのは、text
,email
,tel
,url
,number
,date
,datetime-local
,month
,week
,time
,color
,multiline
です。multiline
にすると、入力欄が複数行入力できるようになり、表示上も改行されるようになります。{{ =値段 * 数量 }}
のように最初に=
をつけると式として処理されます。{{ 合計 = 値段1 + 値段2 +値段3 }}
のように式の前にラベルを指定すると、式を計算した結果にラベルをつけ、別の式などで参照することができるようになります。{{ 合計 = sum(値段) }}
のように関数を使うことができます。{{ 作成日 | date('Y-m-d') }}
のようにするとフィルタが使えます(後述)
フィルタ
{{ 日付 | date('YYYY-MM-DD')}}
のように、フィールドのラベル部分の後に「|
」を書き、その後に以下のフィルタを書くことで、たとえば数字にカンマを入れたり、計算結果の小数点を切り捨てたりといった後処理ができます。
date('YYYY-MM-DD')
→日付をフォーマットして表示します。フォーマットの指定はfechaの「Formatting Tokens」を参照addComma
→数値の場合カンマ足すfloor
→0以下を切り捨てて整数round
→0以下を四捨五入して整数ceil
→0以下を切り上げて整数abs
→絶対値capitalize
→大文字にするlower
→小文字にするappend('str')
→値が設定されている時、後ろにstrを追加するprepend('str')
→値が設定されている時、前にstrを追加するsubstr(start, length)
→start
からlength
の長さを抜き出すswitch('A','B')
→値のbool値を元にAとBのどちらかを表示するdefault('A')
→値がfalseの場合にAを表示するrandom('A','B','C','D')
: 引数のうちのどれかの値をランダムに出力する。入力値が同じなら必ず同じ出力になります。toPageTitle
→入力された内容を、ページのタイトルとして設定する(印刷ダイアログ経由でPDFファイルに出力する時などに便利です)empty
→入力された内容をカラにする(toPageTitle
でタイトルは設定したいが、何も表示したくない場合などに)
関数
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
」を指定すると、入力欄が複数行になり、出力結果も改行が反映されるようになります。