カスタムテンプレート
iA Writer のテンプレートを使えば、あなたらしいスタイルで PDF を作成し、文書を印刷できます。
テンプレートは Web ページで構成されます。HTML、CSS、JavaScript を使って文書の見た目を整えられます。Web サイトの作り方を知っていれば、iA Writer のテンプレートも簡単に作れます。
iA Writer のテンプレートは bundles です。テンプレートファイルをひとまとめにしたディレクトリのことです。Bundle は macOS と iOS でネイティブにサポートされています。中身を見るには、Finder で右クリックして “Show Bundle Contents” を選びます。
Example.iatemplate/
Contents/
Info.plist
Resources/
document.html
title.html
header.html
footer.html
style.css
テンプレートのインストール
サンプルテンプレート（iatemplate）は GitHub からダウンロードできます。
macOS
- Finder でテンプレートをダブルクリックする
- Dock の iA Writer アイコンへドラッグする
- Settings → Templates から追加する
Note: テンプレートバンドルはインストール時にコピーされます。元のバンドルを変更しても、その変更は iA Writer には反映されません。インストール済みのバンドルは変更できます。インストール先を見つけるには、Preferences で対象を右クリックして “Show in Finder” を選びます。
iOS
iOS では、テンプレートバンドルだけでなく ZIP アーカイブも追加できます。1 つのアーカイブにつきテンプレートは 1 つです。
- AirDrop で送る
- Safari、Mail、iCloud Drive、または他の同期サービスから “Copy to iA Writer” を選ぶ
Windows (v. 1.2+)
テンプレートをダウンロードしたら、iA Writer のメニューで File → Install Template → ‘TemplateName.iatemplate.zip’ を選びます。
テンプレートフォルダ
HTML ファイル
iA Writer のテンプレートでは、タイトルページ、本文、ヘッダー、フッターをそれぞれ別の HTML ファイルでレイアウトします。
テンプレートのプロパティ
テンプレートページやその他のプロパティは Info.plist で定義します。plist に触れたことがないなら、まずはサンプルバンドルから始めるのがおすすめです。XML の property list ファイルは任意のテキストエディタで編集できます。
| キー | 値 | 必須/任意 | 説明 |
|---|---|---|---|
CFBundleName |
String | Required | iA Writer に表示されるテンプレート名。 |
CFBundleIdentifier |
String | Required | テンプレートを一意に識別します1。 |
IATemplateDocumentFile |
String2 | Required | 本文をレイアウトします。 |
IATemplateTitleFile |
String2 | Optional | 書き出し時のタイトルページをレイアウトします。 |
IATemplateHeaderFile |
String2 | Optional | 書き出し時に各ページ上部を描画します。 |
IATemplateFooterFile |
String2 | Optional | 書き出し時に各ページ下部を描画します。 |
IATemplateHeaderHeight |
Number | Optional | ヘッダーの高さ。CSS ピクセル単位（≤400）。 |
IATemplateFooterHeight |
Number | Optional | フッターの高さ。CSS ピクセル単位（≤400）。 |
IATemplateDescription |
String | Recommended | テンプレートを説明する 1 文。 |
IATemplateAuthor |
String | Recommended | テンプレートを作成した人（または会社）。 |
IATemplateAuthorURL |
String | Recommended | テンプレート作者へのリンク。 |
IATemplateSuportsSmartTables |
Boolean | Optional | Smart Tables を処理するかどうか。指定がなければ YES が既定です。 |
IATemplateSupportsMath |
Boolean | Optional | TeX 数式を MathML に変換するかどうか。指定がなければ YES が既定です。 |
IATemplateTitleUsesHeaderAndFooterHeight |
Boolean | Optional | NO にすると、タイトルページのヘッダーとフッターの高さを 0 にします。指定がなければ YES が既定です。 |
- iA Writer はバンドル識別子を使ってテンプレートと文書をひも付けます。各テンプレートには一意の識別子が必要です。識別子には英数字（A-Z, a-z, 0-9）、ハイフン（-）、ピリオド（.）のみを使えます。文字列は reverse-DNS 形式にしてください。たとえば会社のドメインが
example.comなら、com.example.templateをバンドル識別子にできます。 - HTML ファイル名は拡張子を除いた名前です。実際のファイルは
html拡張子である必要があります。
コンテンツ
iA Writer は JavaScript を使って HTML にコンテンツを流し込みます。あらかじめ定義された複数の data 属性を持つ要素に対し、innerHTML を置き換えます。
たとえば <span data-date></span> は、ページ読み込み時に <span data-date>June 22, 2016</span> に置き換わります。
iA Writer は、コンテンツを更新した要素に ia-writer-change イベントを送ります。
Document
document ページは、Preview、印刷文書、PDF で本文をレイアウトします。
| 属性 | 説明 |
|---|---|
data-document |
HTML としての本文テキスト。 |
iA Writer は、いくつかの追加要素を加えた MultiMarkdown を使って Markdown を HTML に変換します。Markup.txt には、iA Writer でよく使うマークアップの例がまとめられています。Markup.html は、data-document に対応する HTML 版です。
Title Page, Header and Footer
タイトルページ、ヘッダー、フッターは、印刷文書と PDF でのみ使われます。
| 属性 | 説明 |
|---|---|
data-page-count |
書き出した文書の総ページ数。 |
data-page-number |
現在のページ番号。1 |
data-page-numberはタイトルページでは使えません。タイトルページを含めても含めなくてもページ番号の連番を保つためです。
All Pages
| 属性 | 説明 |
|---|---|
data-title |
文書タイトル。文書ファイル名から取得します。 |
data-author |
Preferences で指定した場合の文書作者。 |
data-date |
現在の日付。属性値で日付形式1を指定できます: data-date="MMMM yyyy"。日付形式のパターンは Unicode Technical Standard #35 に記載されています。Windows では Microsoft の標準形式 を使います。 |
data-dateの出力は、属性値で指定した要素と完全に一致しない場合があります。たとえばロケール固有の 調整 が適用され、yMMMMdが米国ではMMMM d, y、英国ではd MMMM yになることがあります。
Preview
テンプレート作者は、Preview で見栄えをよくするために少し時間を取り、ナイトモードや iOS のシステム全体のフォントサイズへの対応を加えることをおすすめします。
iA Writer は環境データとして <html> 要素の class 属性を使います。テンプレートが読み込まれるとこの要素は置き換えられるので、カスタムクラスは追加しないでください。
| Class | 説明 |
|---|---|
night-mode |
ナイトモードが有効です。1 |
ios |
iOS での Preview。2 |
mac |
macOS での Preview。 |
- macOS の Settings でナイトモードを反転するユーザーもいます。
- テンプレートをレスポンシブにするには、標準の media query を使うことを強くおすすめします。ただし、iOS と macOS を区別することが重要な場合もあります。たとえば、標準テンプレートはプラットフォームごとに少し異なる配色です。
テンプレート開発
macOS の Preview で現在表示中のテンプレートを完全に再読み込みするには、Shift Command R を押します。
Preview で Web Inspector を有効にするには、次のコマンドを Terminal に貼り付けます。
defaults write pro.writer.mac WebKitDeveloperExtras -bool true
Windows では、Ctrl J で Chromium inspector を有効にできます。
Vertical Margins
document ページでは、上下方向の余白や padding を避けてください。
- iA Writer は Preview で
<html>要素の padding を Editor（web mode）に合わせて調整します - 印刷と PDF 書き出しの上下余白は、
Info.plistのヘッダーとフッターの高さで制御します
Toolbar Color
iA Writer は、macOS で現在表示中のテンプレートに合わせて Preview のツールバー色を調整します。<html> 要素には color と background-color を設定してください。
Font Size on iOS
iA Writer は iOS のシステム全体のフォントサイズをサポートしています。ユーザーは Settings > Display & Brightness > Font Size で調整できます。ほとんどのテンプレートでは、この設定に合わせてフォントサイズを調整する必要があります。
| Class | 説明 |
|---|---|
content-size-xs |
極小のフォント。 |
content-size-s |
小さめのフォント。 |
content-size-m |
中くらいのフォント。 |
content-size-l |
既定値。大きめのフォント。 |
content-size-xl |
さらに大きいフォント。 |
content-size-xxl |
かなり大きいフォント。 |
content-size-xxxl |
最大のフォント設定。 |
一部のユーザーは Settings > General > Accessibility > Larger Text でアクセシビリティ用サイズを有効にする場合があります。
| Class |
|---|
content-size-accessibility-m |
content-size-accessibility-l |
content-size-accessibility-xl |
content-size-accessibility-xxl |
content-size-accessibility-xxxl |
プレビュー 
