いつも訪問して頂きありがとうございます。

これまで、ExtendScript Toolkitを用いてIllustratorスクリプトの開発を行ってきたが、Adobeのサービスが終了した為、新しいテキストエディタを探している人も多いと思います。

Macには「テキストエディタ」が標準装備されていますが、これを使ってもスクリプトの開発は可能です。ただし、最適な作業効率を求めるならば、他のテキストエディタを考えるべきかもしれません。

そこで、今回ご紹介するテキストエディタは【VS Code(Visual Studio Code)】です。
これはMicrosoft社が無料で提供しているテキストエディタで、言語に応じたキーワードの色分けなど開発に便利な機能を備えています。

また、WEB上には豊富な情報が掲載されており、Adobe社が提供している拡張機能も利用できるため、Illustratorスクリプトの開発環境を整えることも可能です。

現在、Illustratorスクリプトを効率的に開発できるテキストエディタをお探しの方は、ぜひこの記事を最後まで読んで【VS Code(Visual Studio Code)】を試してみてください。
それでは、どうぞ。

※この記事では、主にMac OSでの画面を使って説明していきます。

Profile
この記事を書いている私は、DTPデザイナーとして15年以上わたりIllustratorを使い名刺やチラシ・ポスターなど制作してきました。スクリプトも自分の業務で必要になったものを自ら作成し、デザイン作業の効率化を図っています。
最近では、当ブログで自作スクリプトを無料で公開しています。
関連記事：「完全無料」で作業の効率化！Illustratorスクリプト特集！

・給付金活用で受講料金が最大70％OFF！
・学びたいスキルをオーダーメイド 出来る自由なカリキュラム！
・さまざまなランキングでNo.1を獲得！

簡単30秒！予約
公式サイトをみる　▶

まず、VS Code（Visual Studio Code）について簡単に解説します。Visual Studio Code（通称：VS Code）は、Microsoft社が開発するオープンソースのテキストエディターです。

オープンソースなので、誰でも無料で利用できます。また、Windows、Mac、Linuxなど、さまざまなオペレーティングシステムに対応しています。
VS Codeの特徴をまとめると

1. オープンソース：誰でも無料で利用できます。
2. 軽量な動作：余計な機能が省かれており、ストレスなく開発を行えます。
3. クロスプラットフォーム対応：Windows、Mac、Linuxなど、さまざまなOSで利用できます。
4. 拡張機能が豊富：さまざまな目的に合わせて拡張機能を追加でき、最適な開発環境を構築できます。

ここからは、VS Codeをインストールする方法について４ステップに分けて解説していきます！

1. 公式サイトへアクセス

最初に、Webブラウザーを開いて、Visual Studio Codeの公式サイトにアクセスします。

2. ダウンロード

公式サイトにアクセスしたら、「Download for Mac」ボタンをクリックして、VS Codeのインストーラーをダウンロードします。

3. インストール

ダウンロードが完了したら、ダウンロードしたインストーラーをダブルクリックして開きます。すると、インストールウィンドウが表示されるので、指示に従ってインストールを進めます。

Macの場合、ドラッグ＆ドロップでアプリケーションフォルダーに移動するだけでインストールが完了します。

4. 起動と設定

インストールが完了したら、LaunchpadやFinderからVisual Studio Codeを起動します。
初回起動時には、いくつかの初期設定が表示されることがありますが、基本的にはデフォルトのまま進めて問題ありません。

これでVS CodeがMacに正しくインストールされ、使用できるようになります。

VS Codeインストールが完了したらIllustratorスクリプトの開発環境を構築していきましょう。

日本語化

VS Codeをインストールした時点では、メニューなどが英語表示になっていますので、日本語の拡張機能を追加して日本語表示に変更します。

1. VS Codeを起動する
2. サイドメニューのアイコンをクリックする
3. 検索ボックスに「Japanese Language Pack for Visual Studio Code」と入力し、Enterキーを押す
4. 表示されたリストから「Japanese Language Pack for Visual Studio Code」を選択
5. Installボタンを押してインストールします。
6. インストールが終わったらVS Codeを再起動すれば、日本語表示になります。

「ExtendScript Debugger」のインストール

「ExtendScript Debugger」は、Adobe公式が提供しているVS Code用の拡張機能です。
インストールすることで、VS Codeからスクリプトを実行できなるなど便利な機能が使えるようになります。

インストールの手順は以下の通りです。

1. VS Codeを起動する
2. サイドメニューのアイコンをクリックする
3. 検索ボックスに「ExtendScript Debugger」と入力し、Enterキーを押す
4. 表示されたリストから「ExtendScript Debugger」を選択
5. Installボタンを押してインストールします。
6. インストールが終わったらVS Codeを再起動すれば、完了です。

拡張機能までインストールが完了したら早速、VS Codeを操作してみましょう。
基本的な操作は以下のとおりです。

1. 新しいフォルダーの作成: Illustrstorスクリプトのための新しいプロジェクトフォルダーを作成します。
2. 新しいExtendScriptファイルの作成: ファイルメニューから「新しいファイル」を選択し、拡張子が .jsx の新しいファイルを作成します。これがIllustratorスクリプトのファイルとなります。
3. スクリプトの記述: 作成した.jsxファイルに、Illustratorのスクリプトを記述します。Javascriptの文法とIllustratorのオブジェクトモデルに基づいてスクリプトを記述します。
4. デバッグの実行: 画面下の青い帯に「ターゲットアプリケーションを指定」をクリック
   コマンドパレットが開くので使用しているIllustratorを選択することで実行されます。

なお次の記事では、Illustratorスクリプトを開発する方法についてサンプル事例を交えながら解説しているのでよければ参考にしてください。

関連記事：デザインを自動化する！Illustratorスクリプトの作り方

今回は、Illustratorスクリプトの開発に便利なVS Codeについて紹介しました。

VS Codeは、OSを選ばず利用でき、多彩な拡張機能が提供されています。
操作方法に疑問が生じた場合でも、インターネットで簡単に情報を調べることができます。

また、ExtendScript Debuggerの導入により、VS CodeはExtendScript Toolkitと同等の機能を提供し、Illustratorスクリプトの効率的な開発が可能になります。

なおIllustratorスクリプトを開発するには、テキストエディタだけでなく、Illustratorの操作知識とJavaScriptの知識が必要です。これらの知識は自己学習で身につけることもできますが、スクールを活用することで効率的に学習できます。

WEBブラウザさえあれば利用できるスクールもあるので、休日やすきま時間などで効率的な勉強が可能です。ただ、学べるない内容や料金体系はスクールごとに異なるため、必ず確認しましょう。

最後におすすめのスクールを３つ紹介します。
無料体験講座などもあるのでおすすめです。

・Adobeマスター講座
・Techスクールオンライン
・侍エンジニア塾　無料体験レッスン

というわけで、今回は以上です。
『無料で使えるVS CodeでIllustratorスクリプトの開発環境を整えよう』を最後までお読みいただきありがとうございました。

ガネメ現役サラリーマン

投稿者の過去記事

◇このブログでは、１５年以上DTPデザイナーとして、学んできたデザインやパソコンのセキュリティ知識・参考になった書籍などを紹介しています。
たまに、脇道にそれることもあります。

◇このブログはアフィリエイト広告を利用しています

◇取得資格
・情報セキュリティマネジメント
・ITパスポート
・色彩検定　２級
・色彩検定　UC級
・屋外広告士
・第２種電気工事士
その他・・・・