自作フォントのSVGを書き出すためのIllustratorテンプレートを作り直した

次のフォントはパーツを使い回すタイプの漢字入りフォントの予定なので、久しぶりにSVGを書き出すためのIllustratorテンプレートを用意したのでその作業メモです。

私がIllustratorテンプレートでアートボード書き出しで書いたのはパンダベーカリーのみ。その後の手書きフォントはSVGを書き出さずコピペで作っていたのでテンプレートの利用は久しぶりです。

今までの自作フォント

私の自作フォントは毎回手順を変えてます。

・パンダベーカリーの時のTTEdit用のIllustratorテンプレートは500px.500pxの正方形を16個横並び×6段＝96文字。これは2014年当時のアートボード上限が100個だったため。フォントソフトの推奨は1000px.1000pxですが500pxでも私のデザインでは問題なかったです。
・TTEditとOTEdit for windowsはIllustratorからオブジェクトを直接希望の画面にコピペできます。花とちょうちょ、空とひこうき、うさみみはこれ。Illustratorでライブトレース＆コピペの時、オブジェクトが小さすぎると文字が崩れます。
・OTEdit for MacはIllustratorから直接コピペはできませんが、インポート用.svg（1文字）をイラレで常に開いておきここにコピペして保存。　OTEdit for Macの希望の画面にインポート用.svgのファイルアイコンをドラッグドロップ。でコピペ相当の動作にできます。「インポート用.svg」をひたすら上書き保存するので、ファイル名を書き換える必要がなく、アートボード名での書き出しは不要。波とかもめはこれで制作。

テンプレートを作り直してみたら、いまいち

パンダベーカリーの時のものはもう10年以上前なので、今の仕様で作り変えてみたんですが、これにちょっと苦戦しました。
まず、Illustratorのアップデートでアートボード上限は100個から1000個になっています。さらに通常カンバスにくわえ、100倍のサイズの「大きなカンバス」が使えるようになっています。
【参考】大きなカンバスでファイルを作成
【参考】大きなカンバスサイズ | FAQ と既知の問題
アートボード100個上限の時は7000字を70ファイルに分割ですが、
アートボード1000個上限なら7000字を7ファイルまでまとめられるはず。パーツをコピペするタイプの漢字制作ではなるべくまとまっていたほうが助かる。

しかし、

・「通常カンバス」では500px500pxでも横16個（シフトJIS文字一覧パネルの16個改行あわせ）×18段＝288文字程度でカンバスサイズがほぼいっぱいになり、そもそも1000個も置けない。1000px1000pxでは横縦13個＝169字くらいしか入らない。

・通常カンバスを途中で「大きなカンバス」にしたり、逆もできない。新規ファイルでサイズ：「プリント(大)」を選択すれば「大きなカンバス」で開ける。

・「大きなカンバス」ではスクリプトでアートボードやテキストオブジェクトを作成すると10倍のサイズになる。アートボード500pxなら5000pxが作られてしまう。今後の制作中に他のスクリプトで数値を扱うものは通常スクリプトと「大カンバス」用スクリプトを分ける必要あり。

・「大きなカンバス」で1000pxで1000個アートボードでダミーでテキストを配置していたが作業中にIllustratorが落ちやすい。保存や書き出しの動作もなんだか遅い気がする。

・カンバスに関わらず、アートボード数が100個以上だとアートボードパネルがバグりがち。四角オブジェクトを「アートボードに変換」後、アートボード数が重複していたり、アートボード名がアートボード1、アートボード2、のようなデフォルトの並びなのに300個目あたりで途中で一つ飛んだりする。⇒Illustratorをアップデートして再起動や、アートボードのリネームスクリプトなどで直った。

とりあえずこうなった

・「大きなカンバス」は信用できないので今回はパス。「通常カンバス」内でやることにする。1000px1000pxにしたかったけどあきらめる。500px500px、約500字に変更。

・シフトJIS並びは今回は使わず、Unicode並びにする。漢字が似た部品でまとまっているのでパーツの流用が楽そう。シフトJISでないので横16個並びの縛りもなくす。500字ジャストで埋めなくても良いので、パーツの集合単位でファイルを区切る。

・テンプレートは19ファイルになりました。元の70数ファイルの時よりは良いんじゃないかな。

とりあえずこれでやってみる。第二水準などUnicode番号があるものはひとまず全部作る、StdN相当までCID特有のものを埋めるかは後で考える。実際描いてみてやりにくかったらこの記事また書き換えるかもしれません。

テンプレートの自作の手順

通常のカンバスに四角オブジェクトを置く。アピアランスの変形コピーで横25と縦20にふやし、500文字分にしてアピアランスを分割。この四角は変形パネルで座標をピクセル整数になるようにあわせておきます。四角いオブジェクトを選択し、ChatGPTで自作した「四角形をそのままの位置でZ順に並べ替える.jsx」スクリプトで順番を修正（アートボード順になるため）。四角いオブジェクトを選択し、アートボードに変換。

Unicodeの文字一覧を用意する。OTEditで1-3新規ファイルを開き「文字一覧テキストファイルを作成」（文字コード：Unicode）で.txtを作り「メモ帳」などで開ける。（シフトJISでも作成OK）

カンバス上部に100px位の小さい文字で良いので500字分のエリアテキストを置く。（２つの自作スクリプトでカンバス最上部のテキストを読み込む設定のため）。自作した「アートボード名を1文字ずつ書き換える.jsx」スクリプトでアートボード名を付け直し。 自作した「アートボードに1文字ずつテキストを配置.jsx」スクリプトでアートボード上にサンプルテキストを1文字ずつ500pxで配置します。

アートボード名でSVGを書き出し時にファイル名にできないもの（半角スペースなど）は手動でUnicode番号でU◯◯のようにOTEditのSVGインポートの仕様に合わせてアートボード名を書き換えておく。

スクリプトは多分ChatGPTにきけばすぐ出るので配布はしません。今回必要だったのはこの３つ。
「四角形をそのままの位置でZ順に並べ替える.jsx」スクリプト（四角形のレイアウトが単純なら無くても良い。テキストを入れる前に「アートボードの再配置」すればOK。）
「アートボード名を1文字ずつ書き換える.jsx」スクリプト
「アートボードに1文字ずつテキストを配置.jsx」スクリプト

新規ファイルに対して四角オブジェクトを配置するところからスクリプトでやろうとするとカンバスからオーバーしたり、カンバスの中心にアートボード群が上手く収まりにくかったりしたので、四角形の配置は自力でやったほうが早かったです。1000px枠にしたいとか、50字や100字分でテンプレートにしたい場合も同じ手順で作れると思います。