Tips

【解決】スクリプトで合成フォントの内訳のPostScript名を取得したい!

Illustrator合成フォントPostScript名取得 アイキャッチ図版

Illustratorには合成フォント機能があり、漢字・ひらがな・アルファベット・数字などの種類ごとに別々のフォントを指定し合成した単一のフォントを作れます。

単一のフォントになっているため、それをテキストに割り当てるだけで自動的に文字の種類ごとに意図通りの見た目に変わってくれます。自力で個別に指定するよりずっと確実で、ヒューマンエラーを減らすのに効果的です。

Illustratorの合成フォント機能は、残念ながらスクリプトでの操作に対応していません。せめて情報の取得だけでもできればよかったのですが、XMPメタデータを通じて内訳のフォントファイル名を取得するところまでが限界でした。フォントファイル名からPostScript名を求める部分は、外部のデータベースかFont Bookなど外部アプリの機能が必要です。惜しいですね。

調べたところ、合成フォントファイルを読むことで内訳のPostScript名が得られそうでした。

そこで今回は、ExtendScriptでIllustratorの合成フォントの内訳のPostScript名を取得する例 を紹介します。

続きを読む

【解決】Figmaにもテキストばらしがほしい!

FigmaプラグインSplit Rows for Figma アイキャッチ図版

Figmaでレイアウト・図版・スライドなどを作る際には,1行程度のテキストを大量に用意することになります。

通常ですと,テキストエディタなどで入力した改行区切りのテキストを1行ずつコピペして分割していきます。ただこれはかなり疲弊する作業です。幸いなことに,Figmaではそれを実現するプラグインがすでにいくつか公開されています。

定番なのはNisa Textのようです。しかしスタイルが1文字目で統一されたり,位置が変わったりしてしまうところに改善の余地があります。見つけた中ではSplit textが比較的便利でしたが,完璧ではありません。

しかし,既存の機能やプラグインに満足できなければ自分で作ってしまえばいいのです。

そこで今回は,テキストを行ごと/文字ごとに分割したり,区切り文字で分割・結合するFigma用プラグイン,Split Rows for Figma を紹介します。

続きを読む

【解決】Photoshopにアートボード用変形パネルがほしい!

Photoshop用UXPプラグインArtboardPanel アイキャッチ図版

Photoshopのアートボードのサイズは,プロパティ(属性)パネルにて数値入力で変更できます。その場合変形基準点は常に左上です。もし中央や右下を基点として拡大・縮小したい場合,バウンディングボックスを手動で動かす必要があります。少々不便ですね。

その問題は以前の記事「基準点を指定してアートボードをリサイズする Photoshop スクリプト」でも取り上げ,スクリプトを使って解決しました。

しかし,このスクリプトは次のような不満が出ていました。

  • 使うとき毎回モーダルダイアログが出るのが面倒くさい。その場で画面切り替えなしで操作したい
  • そもそもPhotoshopへのインストールが難しい。簡単に使えるようにしたい

そこで今回は,パネルで変形基準点と数値を指定してアートボードをリサイズ・移動するPhotoshop用プラグイン,ArtboardPanel を紹介します。

続きを読む

【解決】MoI 3DのショートカットをKeyboard Maestroで管理したい!

MoI 3DのショートカットをKeyboard Maestroで管理したい アイキャッチ図版

MoI 3Dは3D CADモデリングアプリの一種です(モアイMoiであってモルMoLではありません)。

操作性が何となくAdobe Illustratorに似ていて,Illustratorに慣れたかたなら比較的簡単にモデリングできます。あまり絵の才能がなくても,物体や視点を回転したり,パスファインダー的に物体を削ったりできて便利です。

しかもMoI 3DとIllustratorの間では,コピペや書き出し機能を通じてベクターデータのやりとりが可能です。ベクター絵描きにとってはとても頼りになります。ぜひ使ってみてください。

それはそれとして,今回はキーボードショートカットの話です。

MoI 3Dでは,アプリ内の環境設定でショートカットをカスタマイズできます。しかし次の理由によりKeyboard Maestroで管理したくなりました。

  1. 現在ほとんどのアプリのショートカットをKeyboard Maestroで管理しているため,MoI 3Dもそうしたい
  2. スクリプトにショートカットを割り当てるには,スクリプトの内容を強制的に1行に収めて書くか,所定のフォルダにファイルを入れて適切な命名をする必要があり,手間がかかる
スクリプトの内容を強制的に1行に収めて書いた状態の画像
  1. Boolean(パスファインダー的なもの)など類似する機能のバリエーションが複数ある場合に,同じショートカットを押した後Keyboard Maestroのパレットで分岐したい
Keyboard Maestroのコンフリクトパレットの画像

そこで今回は,MoI 3DのショートカットをKeyboard Maestroで管理する方法 を紹介します。

続きを読む

【解決】画面にOCRをかけて文字を抽出したい!(3)

【解決】画面にOCRをかけて文字を抽出したい!(3) アイキャッチ図版

前回の記事【解決】画面にOCRをかけて文字を抽出したい!(2)では,スクリーンショットにGoogle Cloud Vision APIのOCRをかけてテキストを取り出しました。もうこの時点で大した手直しが必要ないほど認識精度が高く,日常的なテキスト入力を高速化してくれます。それに最近は,Google レンズのアプリやmacOS自体が画像からテキストを取り出す機能を備えていますね。

しかし,最近はMicrosoft Azureの画像認識(Computer Vision API)がすごいと噂です。特に日本語の手書き文字認識に強いとか。

せっかくなのでそのすごいAPIを呼び出すものを紹介します。ただし,今回もAPI Key(利用者パスワードみたいなもの)を自力で取れるかたが対象です。我こそはという方は続きをどうぞ。

続きを読む

【まとめ】キーオブジェクトに整列・分布を実現するしくみ(Figmaプラグイン)

キーオブジェクトの推察 概念図

こちらはFigma 開発 Advent Calendar 2022,23日目の記事です。

2022年12月に,キーオブジェクトに整列・分布するFigma/FigJam用プラグイン「Singari」を公開しました。すでにFigmaコミュニティの次のページからアクセス可能です。

FigmaプラグインSingari イメージ画像

Adobe Illustratorの同機能と似た,キャンバス上で追加選択したアイテムをキーオブジェクトとして扱う操作にこだわって開発しています。ぜひ使ってみてください。

使用方法など詳細は,別記事【解決】Figmaでもキーオブジェクトに整列・分布したい!にまとめました。興味があるかたはそちらをどうぞ。

今回の記事では開発者向けに,プラグインAPIでは不可能に見える 「キャンバス上で追加選択したアイテムをキーオブジェクトとして扱う操作」を実現した,そのしくみを解説します。

というのも,Figmaでは「こう考えて,こう開発しました」という内容の記事が公開されていて面白いのです。それに倣ってみようと思います。

続きを読む

【解決】Figmaでもキーオブジェクトに整列・分布したい!

FigmaプラグインSingari アイキャッチ図版

使うアプリが何であれ,レイアウトやデザインを扱っていれば整列は毎日することでしょう。

したたか企画ではこれまで,次のような手段で整列の生産性を向上させてきました。

そして現在Figmaを使うようになり,またしても本体機能として存在しないキーオブジェクトに整列・分布をしたくなっています。

そこでまた丸ごと機能を作りました。最後に選択したアイテムをキーオブジェクトとして扱い,整列や分布を実行するFigma/FigJam用プラグイン,Singari(しんがり) を紹介します。

続きを読む

【解決】全アートボードを中身に合わせてフィットさせたい!

全アートボードを中身に合わせてフィット アイキャッチ図版

Illustratorで作業していると,中身にぴったり合うようアートボードの寸法を変えたくなるときがあります。その際は[オブジェクト > アートボード > 選択オブジェクトに合わせる]などを使うと実現可能です。

この機能は,1つ2つくらいのアートボードをフィットさせるのに向いています。書類上のアートボードすべてに適用するには,それらすべてに対して実行を繰り返さなくてはいけません。一括で処理したくなりますね。

そこで今回は,全アートボードを中身に合わせてフィットさせるIllustrator用スクリプト を紹介します。

続きを読む

【解決】XDにも文字の検索・置換がほしい!

XDプラグインFindReplaceSession アイキャッチ図版

Adobe XDにはテキストの検索・置換機能がありません。FigmaやSketchにも本体には文字列検索・置換機能は見当たりませんね。プロトタイピングツールには存在しないのが当たり前なのでしょうか(追記:Figmaは2022/10/07に公式の検索・置換機能がつきました)。

ではどうするかと言うと,ユーザーの誰かが開発したプラグインを入れて解決します。例えばFigmaにはFind and Replaceのような名前のツールがいくつか公開されていて,実際に使えます。ありがたいですね。

Adobe XDでは次のプラグインが近い機能を持っています(ほかにもあるかもしれません)。

ただ全般的に,スタイルをキープしたまま置換すること,テキストフレーム内の一部分を置換すること,ドキュメント全体で検索・置換することなどが苦手です。これはAdobe XDプラグインの仕組み上,そういった機能を作るのがとてもとても難しいから仕方ありません。

今回はそれらの問題を解決したプラグインを開発しました。テキストを検索・置換するAdobe XD用プラグイン,FindReplaceSession を紹介します。

XDプラグインFindReplaceSession イメージ画像
続きを読む

【履歴】infoVector 2.3

infoVector 2.3 アイキャッチ図版

特定の形式のテキストを,日本語/英語でXMP(IPTC)メタデータに書き込み,ai・eps・jpg・pngファイルとして書き出すIllustrator用ドロップレットinfoVector 2.3のページです。3.0.0で仕様が変わったため,旧バージョンの情報を残しておきます。

続きを読む

【まとめ】infoVectorでICC プロファイルを扱う

infoVectorでICC プロファイルを扱う アイキャッチ図版

infoVectorは,各ストックイラストサイト用に日本語/英語のIPTC情報を埋め込んで画像を書き出す Illustrator&Photoshopスクリプト(アプリ) です。バージョン3.0.0から,書き出す画像にICC プロファイル(カラープロファイル)を埋め込めるようになりました。

ただ残念ながら「infoVectorでICC プロファイルを埋め込む設定にすれば,あとはすべてお任せ」という訳にはいきません。あなた自身が,複数の場所で適切な指定をする必要があります。

そこで今回は,infoVectorで書き出す画像にICC プロファイルを埋め込みたいときの設定方法を紹介します。

続きを読む

【解決】Photoshopにも移動ダイアログがほしい!

PhotoshopプラグインTranslateLayers アイキャッチ図版

Photoshopでレイアウト作業をしていると,指定したピクセル数だけ選択レイヤーを移動することがよくあります。そんなときは次のようにするでしょう。

  • プロパティパネルにて,XやY座標に移動したい距離の分だけ数値を足す(引く)
  • メニューの編集 > 自由変形にて,XやY座標に移動したい距離の分だけ数値を足す(引く)

ただ,毎回X座標などのテキストフィールドをクリックして+や-などを入力するのは無駄に感じます。Illustratorのようにダイアログで移動距離を入力し,returnキーで移動・option(Alt)+returnキーで複製移動,の流れにしたくなりますね。

そこで今回は,ダイアログで距離を指定して選択レイヤーを移動するPhotoshop用プラグイン,TranslateLayers を紹介します。

続きを読む

【解決】Illustratorでもテキストを行ごとに分割したい!

IllustratorスクリプトSplit Rows for Ai アイキャッチ図版

したたか企画では,テキストを行ごとに分割する機能をAdobe XD用Photoshop用にそれぞれ公開しています。しかしIllustrator用はまだでした。というのも,テキストばらしテキストばらしAIなど実用的な定番スクリプトがすでにあるからです。

ただもうXDとPhotoshop用に2つも提供しましたし,せっかくなのでIllustrator用も公開するしかないでしょう。それが今回紹介する 複数行のテキストを1行ごとに分割するIllustrator用スクリプト,Split Rows for Ai です。

既存スクリプトでも特に困っていないと思いますが,Split Rows for Ai.jsxのいいところは次の通りです。ぜひお試しください。

  • もとのフォントやサイズ,色などを保持
  • 横書き・縦書き両方に対応
  • 自動行送りや段落前後のアキありでも見た目をキープ
  • エリア内文字にも対応
  • 選択したのがグループでも,配下のテキストを自動取得して実行
  • テキストの中身を編集状態のときは,その親のテキストフレームに対して実行
続きを読む

【解決】Figmaでも⌘+spaceで範囲ズームしたい!

AreaZoom for Figma アイキャッチ図版

macOS版のFigmaデスクトップアプリでは,command+space+スクロールで画面表示の拡大・縮小ができます。しかし普段からAdobeアプリを使用しているかたは,command+space+範囲ドラッグで指定位置を拡大するくせがついていることでしょう。

Figmaでも一応その操作でズームできるときもあるのですが,タイミングがずれると発動しなかったり,何か別の機能になっていたりします。不安定で頼れません。

幸いなことに,Zキーを押しながらドラッグをすると安定して範囲ズームが可能です。つまり,Karabiner-Elementsなどのアプリを使ってcommand+spaceをZキーに変換すれば,目的の動作を実現できるわけです。

そこで今回は Karabiner-Elementsを使い,Figmaデスクトップアプリでcommand+space+ドラッグの範囲ズームを使えるようにする方法 を紹介します。

続きを読む

【解決】Photoshopでテキストを分割・結合したい!

PhotoshopプラグインSplit Rows for PS アイキャッチ図版

Photoshopでは大抵レイヤースタイルを使って見た目のデザインを指定します。そのためテロップを作るときなどは,テキストを行ごとにバラしたり,デザインの変わり目でレイヤーを分けたりします。

また1文字ずつ順番に動くアニメーションを作るため,各文字ごとに分解したい状況もあるでしょう。しかし,それを手動でやろうと思うとあまりにも手間がかかります。レイヤーを複製し,関係ない部分を削除,その後位置を揃えるという動作を延々とすることになります。

分割したあとやっぱり繋げようと思っても,複数のテキストを選択してカット&ペーストでは済みません。1つずつ中身をコピーしてペースト,いらなくなったレイヤーは削除,という流れの繰り返しです。このような作業はぜひ機械に代行してもらいたいですね。

そこで今回は,テキストを行ごと/文字ごとに分割したり,区切り文字で分割・結合するPhotoshop用プラグイン,Split Rows for PS Pro を紹介します。

続きを読む

【解決】Photoshopでもテキストを行ごとに分割したい!

PhotoshopプラグインSplit Rows for PS アイキャッチ図版

Photoshopでテロップなどを作る際,1行程度のテキストレイヤーが多く必要になります。その場合テキストエディタで入力した改行区切りのテキストを,コピペして1行ずつに分割することになるでしょう。

ただこれはかなり疲弊する作業です。Photoshopではcommand(Ctrl)+Jでレイヤーの位置はそのままに複製できますが,いったい何回繰り返せばいいのか途方に暮れます。

もしIllustratorでする場合には,テキストばらしという定番スクリプトがあります。名前の通りテキストを一瞬で1行ずつにばらしてくれます。Adobe XDならプラグインSplit Rows(【解決】XDにもテキストばらしがほしい!が定番です。

Photoshopにもこんな機能があったら嬉しいですね。

そこで今回は,複数行のテキストレイヤーを1行ごとに分割するPhotoshop用プラグイン,Split Rows for PS を紹介します。

続きを読む

【解決】XDのパネルに計算式とその結果を表示したい!

XDプラグインOfuda アイキャッチ図版

Adobe XDでは,よく使うものの直接取得できない数値があります。例えばline-heightやletter-spacingなどです。インターネットを検索すると,それらの算出方法・式を紹介しているサイトがたくさんヒットします。それだけ困っているかたがいるわけですね。

この問題はExcelやGoogleスプレッドシートなどで関数を作ればある程度解決します。単純な計算ならSpotlightやAlfredに式を入力するのも良いでしょう。

しかし,毎回Adobe XDのプロパティインスペクターから数値をコピーし,別の何かにペーストするのは手間がかかります。次のような流れにできたら最高ですよね。

  1. Adobe XDの中で式を書いておく
  2. アイテムを選択したとき,自動でそのアイテムの情報を利用して式が計算される
  3. 結果がXDのプラグインパネルに表示される

そこで今回は,リアルタイムに式を計算するプロパティパネル的Adobe XD用プラグインOfuda(おふだ) を紹介します。

続きを読む

【解決】XDで線に合わせてアイテムを回転したい!

XDプラグインAdjustAngle アイキャッチ図版

Adobe XDでフローチャートや図版を作る際,斜めに傾いているアイテム同士の角度を合わせるのに苦労します。というのも,Adobe XDでは回転軸が常に中心になり,回転しながらアンカーポイントや見た目をスナップできないからです。アイテムを近くに寄せ,目視で傾きを確認しながら何となく回転させることになります。

しかしこういった角度は,少しの違いが目立つものです。せっかくデジタルなのだから,数値で角度を取得して正確に一致させたくなりますね。

そこで今回は,直線の角度に合わせてアイテムを回転するAdobe XD用プラグイン AdjustAngle を紹介します。

続きを読む

【まとめ】Illustratorスクリプトの開発資料

【まとめ】Illustratorスクリプトの開発資料 アイキャッチ図版

プログラムの開発をしていると,技術や経験は個人に蓄積していきます。役立つ資料や道具のありかもしかりです。しかし自分の頭の中にあるだけの状態より,誰でもその情報にアクセスできたほうが世界はもっと良くなるでしょう。

そこで今回は,普段IllustratorでExtendScriptなどのスクリプトを書くときに使っている資料やWebサービスを公開します。

続きを読む

【解決】リアルファブリック用画像書き出しを一気に済ませたい!

Fabricantアプリ アイキャッチ図版

リアルファブリックは,オリジナルの布をデザインしたり販売したりできるサービスです。パターンデザインをIllustratorで制作しているかたも多いでしょう。

過去の記事「アートボードとパターンのタイルをフィットさせるリアルファブリック用 Illustrator スクリプト」により,Illustratorのパターンデザインをアートボードに揃える工程が素早く正確になりました。しかし,最も面倒なのは画像書き出しです。

リアルファブリックのデザイン登録には,次の2種類の画像がいります。

  1. デザイン提出用画像(以降,デザイン用画像と呼ぶ)
  2. サムネイル用画像(希望者のみ。なくても可)

デザイン用画像の決まりはこちらのようになっています。

形式:JPEG

カラーモード:RGB

解像度:200ppi

サムネイル用画像は特に指定がありませんが,常識的に考えるとこんなところでしょう。

形式:JPEG

カラーモード:RGB

解像度:72ppi

もうこの時点で大変そうですね。Illustratorファイルの中にデザイン用とサムネイル用アートボードが混在する場合,それぞれ解像度を変えて書き出す必要があります。

さらに言えば,デザイン用画像の解像度200ppiがくせ者です。Illustratorで普通に書き出すだけだと,パターンの継ぎ目に白い隙間ができてしまうことが多いのです。

そのため一旦隙間が出にくい解像度で書き出し,規定通りに200ppiに変更,その後Photoshopでパターンに登録して目視確認する,といった複雑な手順を辿ることになります。

つまり,リアルファブリックの決まりに基づいた形式・解像度で,白い隙間ができないよう画像を書き出し,実際隙間ができるか確認するための画像も追加で生成しなければいけません。

今回紹介するのはまさにそのためのPhotoshop & Illustrator用スクリプト, Fabricant(ファブリカント) です。

続きを読む