鈴木メモ

Illustratorの練習メモとか、最近はフォントを作ったり。

*

OTEdit for Mac用のマクロの代わりを考えてみた(SVGインポートの活用)

      2026/02/27 フォント

マクロに頼らない効率化の検討その2です。今回はSVGインポートを使います。

前回記事、OTEdit for Mac用のマクロの代わりを考えてみた(一括コピーの活用)ではコピーが置き換えになってしまったので、もう一案考えました。
SVGファイルを使うことで、OTEdit for Macでも追加できる部首の点在コピーが可能になりました。(でも部首パーツの一括更新やパーツごとの削除はできません。)

SVGファイルのエクスポートとインポートとは?

TTEdit・OTEdit for Windows・OTEdit for Macに元からある機能です。基本的な使い方について。

SVGファイルとは

SVG=Scalable Vector Graphics(スケーラブル ベクター グラフィックス)です。パスの集合であるベクター形式ファイルです。拡張子は .svg。今回の手順はIllustrator不要ですが、Illustrator⇔OTEdit間でもやり取りでき、輪郭線を再現できます。

OTEditからSVGファイルのエクスポート(書き出し)

・「ファイル」-「エクスポート」-「SVGファイル」

OTEditから今開いている画面の1文字をエクスポート(書き出し)できます。全文字を一括でSVGエクスポート出来れば良いんですがこれはできません。毎回1文字ごとに自分で名付けが必要なため、大量書き出しは無理かも。

OTEditへSVGファイルのインポート(読み込み)

・「ファイル」-「インポート」-「SVGファイル」または「フォルダ内すべてのファイル」

「インポート」-「SVGファイル」では1文字を選択し、今開いている編集画面に入ってきます(ファイル名は無視)。

例.
U3046 → Unicode 3046
S82A6 → シフトJIS 82A6
C1000 → CID 1000
ファイル名が「あ.bmp」の場合は、文字「あ」にインポートされます。
ファイル名が「S82A2.bmp」なら、文字「い(シフトJIS 82A2)」にインポートされます。

「インポート」-「フォルダ内すべてのファイル」ではファイル名に応じたグリフにオブジェクトが自動で一気に配置されて便利です。ファイル名の付け方は公式のヘルプのインポートを確認(引用は.bmpについて)。
文字列での名付け(あ.svg)もできますが、ファイル名で表示できない縦書き文字や漢字の異体字、Macでファイル名に使えない記号( / :)、Windowsでファイル名に使えない記号(< > : ” / \ | ? *)などがあるため全文字は網羅できません。このようなグリフや、全文字インポートを前提にする場合は、OTEditではCID(C843.svg)で名付けたいところですが、CIDファイル名指定はインポートにバグがありそうなので(後述あり)文字列指定またはUnicode番号指定がおすすめです。

おまけ:IllustratorからSVGを書き出し

今回の部首パーツのSVGファイルはIllustratorからでも作れます。Illustratorで1ファイルに1グリフでも作れますが、1ファイルにアートボードを複数配置して複数グリフをデザインし(前作った時は1000×1000の100字分までできた)まとめて「ファイル」-「書き出し」することもできます。

新規作成時のドキュメントサイズには、 [単位]:ピクセル、[高さ]:1000px、[幅]:文字の幅(全角文字は1000px)、[裁ち落とし]:すべて0px を設定します。
[SVGプロファイル]はSVG 1.1 を選択し、他はデフォルトのまま保存してください。

その他詳しくはOTEditのヘルプ-目次を「SVG」で検索して下さい。

今回の点在コピーのポイント

今回の手順はコピーに当たる作業をOTEdit for Macでやらないのがポイントです。

①OTEdit for Macから1文字(部首パーツ)だけエクスポート(にんべん.svg)し、
②デスクトップ上で、Automatorでファイルを大量に複数&自動リネーム(仁.svg)(休.svg)(儘.svg)(健.svg)(働.svg)……、
③大量の複数ファイルをフォルダごとOTEdit for Macにインポートで戻して配置。

Macに標準で入っているAutomatorを使います。Automatorの基本的な使い方はTTEditとOTEditの繰り返し作業を自動化する(HiMacroEx・Automator)で説明してます。
TTEdit / OTEdit for Windowsユーザー:Windowsの場合は標準で入っているPowerShellで同様のファイルの複製とリネームができそうですが、自作マクロの点在コピーを利用するほうが楽だと思います。

《SVGファイルを複製して配置する》

部首パーツを点在コピー

今回の手順は追加コピーが出来るので偏と旁のオブジェクトを同居させることができます。

●OTEdit for Macで部首パーツをデザインし、増やしたい部首パーツをシフトJIS 8140(全角スペース)に避難させます。(漢字エリアにコピー元オブジェクトがあると点在コピー時にオブジェクトが2重になってしまうため。)

●「ファイル」-「エクスポート」-「SVGファイル」。エクスポートされたSVGファイルに(にんべん.svg)などの自由な名前を付けます。部首名である必要はないですが、次のリスト名もこれに合わせるので短い名前がおすすめ。SVGファイル保存後はシフトJIS 8140(全角スペース)にある部首パーツは削除して下さい。(SVGファイルを編集画面にドラッグドロップすればいつでも配置し直せます。)

●部首コピーリストを用意します。OTEdit for Macを起動し、にんべんのあるグリフを開け、関連文字パネルからテキストファイル一覧を取得できます。シフトJIS範囲までに文字数を減らし、設定横の▼から「一覧をテキストファイルに保存」。先程のSVGファイルと同じ名前.txtで保存します。(エンコードはデフォルトUTF-8のままでOK。)完全同名でないとこの後読み取りできないので(にんべん.svg)&(にんべん.txt)はOK。(にんべん.svg)&(人偏.txt)はNGです。

●関連文字パネルから取得したリストは、編集画面で開けていた1文字(伊)が欠けるので自分でコピペで補う(情報欄を右クリックでコピーできる)&関連文字パネルで旁の関連など今回不要な部分(君尹笋)を削除する必要があります。第一水準だけや第二水準だけに絞ってコピーしたい場合は総合漢字チェッカー by attosoft.infoで抜き出せます。OTEdit for Windows用のマクロを作ってみたの記事内にもリストの取得について書いています。リスト内に改行は不可。カンマの混入不可。

●デスクトップ上にフォルダを新規作成し、「SVG複製用」と名前を付けます。中に先程のSVGファイル(にんべん.svg)とコピーリスト(にんべん.txt)を入れます。

●Automatorを起動します。Automatorは白いロボアイコンで、MacのDockのLaunchpadアイコン、または[アプリケーション]フォルダに元々入ってます。


●「新規書類」をクリック。「ワークフロー」を選択し、「選択」をクリック。新規のワークフローが開きます。

●Automatorで左側[ユーティリティ]をクリック、アクションの一番上[AppleScriptを実行]をドラッグして右側グレーのワークフロー欄に入れる。すでに入ってるコードは不要なので、削除して以下のAppleScriptコードをコピペして入れる。ハンマーアイコンをクリックで数秒待つと、文法チェックされてカラフルな色付きに整形されます。今回のコードはOTEdit for Macと連携させずに単独で動きます。

on run {input, parameters}
	
	-- デスクトップ上の「SVG複製用」フォルダ
	set desktopPath to (path to desktop folder as text)
	set baseFolder to desktopPath & "SVG複製用:"
	
	tell application "Finder"
		if not (exists folder baseFolder) then
			display dialog "デスクトップに「SVG複製用」フォルダが見つかりません。" buttons {"OK"}
			return
		end if
	end tell
	
	-- 元SVGをダイアログで選択
	set srcFile to choose file with prompt "元になるSVGファイルを選択してください" of type {"public.svg-image"}
	set srcAlias to srcFile as alias
	
	tell application "Finder"
		set srcName to name of srcAlias
		set parentFolder to container of srcAlias
	end tell
	
	-- 拡張子除去(.svg)
	set baseName to text 1 thru ((length of srcName) - 4) of srcName
	
	-- 同名txtを探す(例:人偏.txt)
	set listFilePath to (POSIX path of (parentFolder as text)) & baseName & ".txt"
	
	try
		set rawText to do shell script "cat " & quoted form of listFilePath
	on error
		display dialog baseName & ".txt が見つかりません。" buttons {"OK"}
		return
	end try
	
	-- 出力フォルダ作成(例:「人偏」フォルダ)
	tell application "Finder"
		if not (exists folder baseName of parentFolder) then
			make new folder at parentFolder with properties {name:baseName}
		end if
		set targetFolder to folder baseName of parentFolder
	end tell
	
	-- リスト解析(カンマ区切りCID または 連続文字列)
	if rawText contains "," then
		set AppleScript's text item delimiters to ","
		set itemList to text items of rawText
	else
		set itemList to {}
		repeat with i from 1 to length of rawText
			set end of itemList to character i of rawText
		end repeat
	end if
	set AppleScript's text item delimiters to ""
	
	-- 複製とリネーム、カンマ区切りCID対応
	tell application "Finder"
		repeat with eachItem in itemList
			set itemText to eachItem as string
			
			if rawText contains "," then
				set newName to "C" & itemText & ".svg"
			else
				set newName to itemText & ".svg"
			end if
			
			set newFile to duplicate srcAlias to targetFolder
			set name of newFile to newName
		end repeat
	end tell

	
	return input
end run

●コード左上の「▶実行」ボタンを押します。コピー元にしたいSVGファイルの選択ダイアログが出てくるので、「SVG複製用」フォルダの中にある希望の.svgファイルを選択します。

●「SVG複製用」フォルダの中に、同名の「にんべん」フォルダが自動生成され、その中に230個のSVGファイルが一気に作成とリネームされました。(仁.svg)(休.svg)(儘.svg)(健.svg)(働.svg)、、、。

●OTEdit for Macを起動し、自作フォントを開きます。「ファイル」-「インポート」-「フォルダ内すべてのファイル」で「にんべん」フォルダを指定。SVGをまとめて取り込みます。

●部首パーツの点在コピーができました。手作業で人偏のある230個の点在画面を開いてコピペすることを考えるとすごく早いです。少ない数なら関連文字パネルから開いて手動でコピペ、100点以上あるものならこのやり方がおすすめです。

●関連文字パネルと同じ量のコピーができています。リストには人偏ではない(仄)のようなものも入っているのでコピー後に除いて下さい。(クリックしないと出てこない(花/貨/靴/囮/訛など)の高さ違いパーツはコピーリストに入ってません。)

●グリフ内に旁など他のオブジェクトがあっても追加コピーできます。インポートを2回繰り返すと完全同位置にオブジェクトが重ねコピーされてしまうので注意して下さい。OTEdit for macではマクロで重ねオブジェクトを検出することができないので、「一括コピー」の変形からフィルタの白抜きをかけると他と様子が異なるので目視で見つけられます。OTEdit for Mac用のマクロの代わりを考えてみた(一括コピーの活用)を読んで下さい。

●AutomatorのAppleScriptコードを保存しておきます。左上のファイル名クリックでこのコード入りのAutomatorワークフローを「SVG複製用」フォルダ内などに保存できます。

●他の部首についても繰り返します。SVGファイルと部首リストは「SVG複製用」フォルダにどんどん貯めていけます。部首リストは貯めておくと次のフォント制作でも使えるかも。自動生成された大量のSVG入りの「にんべん」フォルダは次回も再生成するので削除して大丈夫です。

2004字形168字へダミーオブジェクトをコピー

同じ手順で部首コピー以外の用途にも使えると思います。既存のオブジェクトを消さずに追加コピーできます。CIDリストはちょっと無理そうなので(後述)文字列指定がおすすめ。後からパーツの一括削除はできないのでオブジェクトは手作業で取り除く必要があります。

●OTEditで全角スペースにダミーオブジェクトとして丸オブジェクトなどを置き、1文字をSVGとしてエクスポート。(ダミー丸.svg)

●リストを2004字形168字(Wikipedia:JIS X 0213:2004の改正からコピペで書き換えて(ダミー丸.txt)保存。「SVG複製用」フォルダに(ダミー丸.svg)と(ダミー丸.txt)を入れる。

●Automatorを起動し前述のAppleScriptコードを実行。複製とリネームします。「ダミー丸」フォルダに(逢.svg)(芦.svg)(飴.svg)、、、が自動作成される。

●OTEditを起動し、「ファイル」-「インポート」-「フォルダ内すべてのファイル」で「ダミー丸」フォルダを取り込む。丸オブジェクトが点在追加コピーされます。

CID番号のファイル名、OTEdit for Macではインポートにバグがあるかも?

今回のAppleScriptコードはリストが文字列/カンマ区切りCIDの両対応できるように作りました。CIDカンマ区切り(23,56,895)でも記入できます。カンマ区切りCIDと文字列は混在できませんのでどちらかに揃えて下さい。テキスト内にカンマが1つでも含まれている場合は読み込み時に「カンマ区切りCID」と自動で判定のうえ、頭文字にCがついて複製&リネームされます(C843.svg)。

複製&リネームは正しく出来たのですが、OTEdit for Macで「インポート」-「フォルダ内すべてのファイル」をすると現在開いている画面にすべてが重なったコピーとして入ってきました。(使用バージョン:OTEdit for Mac V10.6.4 (2024年7月8日 無償バージョンアップ))試しにUnicode番号で名付けると、U3046.svgは正しく「う」に入ってきました。

また、試しにこのコードで生成されたフォルダ「CIDカンマ実験」をOTEdit for Windowsに持っていき、「インポート」-「フォルダ内すべてのファイル」をすると、C10.svgは正しくCID10のグリフに入ってきました。

つまりOTEdit for MacでCIDファイル名のインポートのみの問題である可能性が高いです。
とりあえず漢字の部首パーツは文字列指定ですることのほうが多そうだし、私が何か勘違いしてる可能性もあるし、インポートの動作がいずれ直るかもしれないし、AppleScriptコードはそのままにしておきます。

《SVGファイルをドラッグドロップで配置する》

SVGファイルはドラッグドロップでOTEditに配置することもできます。ファイル名は無視され、オブジェクトは枠に対する位置固定で入ってきます。

人偏などの部首パーツは幅違い(仁/休/儘/健/働など)で3~5種程度用意する必要がありますが、文字列リストの段階で細かく分類するのは面倒です。何段階に分けるのかはフォントによって異なる&リストを分割しただけ点在コピーを繰り返す動作が増えるので。

●幅違いをリストで分類せずに点在コピーで一気に配置
●部首パーツを幅違いで複数デザインし、それぞれSVGとしてエクスポート。(にんべん.svg、にんべん狭め1.svg、にんべん狭め2.svg、にんべん広め.svg)
●OTEditの横に幅違いのSVGを入れたフォルダをおいてドラッグドロップで入れて修正していく
だと手軽かもしれません。配置したオブジェクトは更新などの紐づけのない普通のオブジェクトなので、自由に動かして(花/貨/靴/囮/訛など)の高さ違いパーツづくりにも使えます。
(いつも通り関連文字パネルから複数タブで何文字が開いておいてコピペしても良いので、そんなに違わないかも。)

Illustratorスクリプトでも点在コピー(配置)できるかも?

Illustratorで複数アートボードでグリフを作成している場合、同様の点在コピーをIllustrator上で出来るような気もする。名刺データの流し込みスクリプトで画像配置とか見た気がするので。

Illustratorスクリプトは作ったことがないので分かりませんが、.svgファイル(か.aiでも良いような)で部首パーツを用意し、リストの文字列=アートボード名に一致させてリンク画像として一気に配置、みたいな感じでできるかも?複製は今回のようにAutomatorかPowerShellを挟むか、スクリプトで複製もできるかも?Illustrator上でリンク画像として配置できたらSVGファイルを修正すればデザインを後から修正して一括更新も出来そう。ただ一回限りのフォント制作ならアートボードテンプレート作成とリスト集め、スクリプト作成までやると事前準備の手間が大きすぎるかも。Illustratorスクリプトは今のところ作る予定はありません。