Illustrator スクリプトで世界71カ国の路線図運用を効率化

2023年2月21日 10:00

こんにちは、ロメスコです。ナビタイムジャパンで海外の時刻表データの運用、改善を担当しています。

当社の『NAVITIME Transit』アプリは、路線図を見ながら世界中の乗り換え経路を探索できます。位置情報から今いる場所の最寄り駅を調べたり、路線図を眺めてどこまで行こうか計画を立てたり、海外旅行や出張の頼もしい味方になります。

現在は世界 71 カ国、200都市以上の路線図を掲載しています。こちらの路線図をどのように作っていったのか、に関しては下記の記事もぜひご覧ください。

『NAVITIME Transit』に欠かせない路線図ですが、200都市もあると運用コストが膨大です。初期の頃は全てデザイナーの手作業で作成をしており、リリースまでに非常に時間がかかっていました。

そこで、エンジニアとデザイナーでタッグを組み、Illustrator を自作スクリプトで操作することで作業の効率化を進めています。
今回は、Illustrator を自作スクリプトで操作する方法と、どんなスクリプトを作って効率化しているのか、をご紹介します。

Illustrator を自作スクリプトで操作する

Illustrator Scripting

Illustrator は UI 上で実行できるほとんどの操作をスクリプトからも呼び出せるようになっています。

サポート言語
・AppleScript
・JavaScript または ExtendScript
・VBScript

ExtendScript は Adobe が用意している独自言語です。
ほとんど JavaScript なのですが、特殊なオブジェクトや独自関数を呼び出すことができ、Mac でも Windows でも動作するのでお勧めです。

開発

ExtendScript を使う場合は、Visual Studio Code の拡張機能「ExtendScript Debugger」が便利です。簡単に Illustrator と疎通でき、ブレイクポイントを貼ってデバッグが可能です。

コマンドパレット上で「ExtendScript: Evaluate Script in Attached Host」を選択

起動している Illustrator が表示され、選択すると今開いている .jsx が実行される

上記で使用したサンプルコードは下記です。
Illustrator 上の要素（アートボード、図形等）が公式ドキュメントの、どのオブジェクトに相当するのかを把握できれば、処理自体はとても簡単に書けます。

if (documents.length > 0){
    main();
}

function calcCenterPoint(rect) {
    var x = (rect[0] + rect[2]) /2;
    var y = (rect[1] + rect[3]) /2;
    return [x, y];
}

function main () {
    var layers = activeDocument.layers;

    var SampleLayer = layers.add();
    SampleLayer.name = "SAMPLE";

    var artboard_center = calcCenterPoint(activeDocument.artboards[0].artboardRect);
    // debug には独自オブジェクトの $ が便利です
    $.writeln('【Debug】center x: ' + artboard_center[0] + ' y: ' + artboard_center[1]);

    var starColor = new RGBColor;
    starColor.red = 38;
    starColor.green = 198;
    starColor.blue = 218;

    // 「スターツールで星を追加する」など、GUI 上でできることは大抵関数が用意されています
    var test_star = SampleLayer.pathItems.star(artboard_center[0], artboard_center[1]);
    test_star.fillColor = starColor;  
   
    // レイヤーの制御（ロック、非表示など）も簡単
    SampleLayer.locked = true;
 
    alert("【SAMPLE レイヤー作成完了】");

    return;
}

配布

完成したコードは、使用者の PC の任意の場所に配置して Illustrator メニューの「ファイル／スクリプト／その他のスクリプト」から呼び出すことができます。よく使うスクリプトは、SPAi などのショートカットアプリなどですぐに起動できるようにすると便利です。

https://helpx.adobe.com/jp/illustrator/using/automation-scripts.html

ExtendScript の注意ポイント

公式情報が少ない

公式ドキュメントはあるのですが、あまり細かな情報は乗っていません。
例えば図形の位置取得に必要な visibleBounds ですが、とてもシンプルな仕様説明です。
4つの値が何を指すのか、よく似た geometricBounds、controlBounds、との違いは何なのか、等はデバッグで取れる値から学ぶ必要がありました。（先に Illustrator を使う経験があるとピンと来るのかもしれません）

また、稀にGUI 上でできる操作が現在の公式ドキュメントに載っていないこともあります。
「スクリーン用に書き出し」を実現する関数 exportForScreens() は、現在の公式ドキュメントには載っておらず、古い記事や「Scripting Dictionaries CC」フォルダの中のオブジェクト定義ファイル（omv.xml）を直接見て引数を確認する必要がありました。

実際に路線図運用で使っているスクリプト

見やすく統一感のある路線図を作るために、ナビタイムジャパンでは独自の細かなデザインルールを決めています。しかし、それを数百の駅に適応していくのは非常に骨が折れ、Illustrator の標準機能を駆使しても限界があります。また、ひたすら反復作業になってしまう工程もあり、デザイナーの負担となっていました。

そこでデザイナーの要望をもとに下記のようなスクリプトを作成し、路線図効率化を図っています。

駅名の配置

駅の丸アイコンに対して、駅名パーツを好きな位置（上下左右、斜めの8通り）に整列配置するスクリプトです。

駅アイコンの整列

駅アイコンを一番近くの路線上に載せたり、等間隔に並べるスクリプトです。

タップ領域作成

アプリ上で路線図をタップできる領域を作るスクリプトです。
駅アイコンと駅名（英語、現地語）のパーツサイズに合わせて、rect を作成します。

駅アイコン、駅名のどちらをタップしても同じ駅 ID に紐づくようグルーピングされる

チェック機能

後続作業に影響するミスが無いか、チェックするスクリプトです。
必要なレイヤーが抜けていないか、アートボードのサイズは仕様通りか、タップ領域に駅 ID 以外のものが紐づいていないか、などをチェックします。

ファイル一括出力

路線図が完成した後、必要なファイルを一括で出力するスクリプトです。
アプリで持つ路線図画像の他、検証用の pdf、タップ領域の svg、など用途によって 6 種類のファイルを出力する必要がありますが、それらを一括で出力します。

スクリプトの効果

駅名の配置は、手作業で実施すると1駅ごとに2～3秒かかります。複数駅まとめて実施することができないので、新路線の開通や新しい鉄道に対応すると、数十～数百の駅でこれを繰り返すことになります。
改善後は複数の駅を一気に選択しても1秒程度で正しく配置できるようになりました。

ファイル出力は、時間はそこまでかかりませんが手作業で 30 ステップぐらいの工程がありました（必要なレイヤーの表示切り替えや、ファイルのリネーム、細かな出力形式設定など）。
オペレーションミスも起こりやすく面倒でしたが、改善後はスクリプトを起動して出力サイズを選ぶ、という 2 ステップで作業が終わるようになりました。

デザイナーの意見を取り入れながらコツコツとスクリプトを増やしていき、以前だとリリースまで2ヶ月以上かかっていたような規模の路線図更新も、現在は3週間前後でリリースできるようになりました。

最後に

Illustrator を操作できると知ってからは、デザイナーに時折ヒアリングをして、時間がかかるところ、手間に感じている部分を教えてもらうようになりました。
また、開発のために Illustrator ライセンスを手に入れたことで、ちょっとした駅名修正などは開発者側でもデザイナーのお手伝いができるようになった、という副次効果もありました。実際に作業してみると、エンジニアとして改善できるポイントが見えてくることもあります。

作ったものをいち早くユーザーに届けたい、という思いはデザイナーもエンジニアも同じだと思います。役割を決めすぎず、何か困っていること、時間がかかっている部分はお互いの得意分野を持ち寄って対話し、できる部分から協力していけたら良いなと思っています。

なかなか海外旅行に行けない日々が続いていましたが、最近は少しづつ緩和されています。
旅行の計画や現地滞在時には、ぜひ『Navitime Transit』をご利用ください！