<p data-line="1" class="code-line">どーも！clameyes (<a href="http://twitter.com/clameyes39" target="_blank" rel="nofollow noopener noreferrer">@clameyes39</a>)です！</p>
<p data-line="3" class="code-line">Adobeソフト（PhotoshopやInDesignなど）をプログラムで自動化する場合は、Adobe ExtendScriptを使うのが一般的です。</p>
<p data-line="5" class="code-line">Adobe ExtendScriptの実行環境をVSCodeで用意する場合は、拡張機能であるAdobe Script Runnerが便利です。</p>
<p data-line="7" class="code-line">今回はそのAdobe Script Runnerの設定と使い方について解説します。</p>
<h2 id="adobe-script-runner%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="9" class="code-line"><a class="header-anchor-link" href="#adobe-script-runner%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> Adobe Script Runnerの設定</h2>
<p data-line="10" class="code-line">使い方の前にAdobe Script Runnerの設定について解説します。設定が済んでいる方は使い方に進んでください。</p>
<h3 id="vscode%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="12" class="code-line"><a class="header-anchor-link" href="#vscode%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> VSCodeのインストール</h3>
<p data-line="13" class="code-line">Adobe Script Runnerを使うにはVisual Studio Code (VS Code) が必要なので下記リンクからインストールしてください。</p>
<p data-line="15" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://azure.microsoft.com/ja-jp/products/visual-studio-code/" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<h3 id="adobe-script-runner%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="17" class="code-line"><a class="header-anchor-link" href="#adobe-script-runner%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> Adobe Script Runnerのインストール</h3>
<p data-line="18" class="code-line">VS Codeの準備ができたら、拡張機能をインストールします。</p>
<h4 id="%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" data-line="20" class="code-line"><a class="header-anchor-link" href="#%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB" aria-hidden="true"></a> 拡張機能のインストール</h4>
<p data-line="21" class="code-line">VS Codeを開いて、左側のバーから拡張機能をクリックします。<br />
<img src="https://i.gyazo.com/a66b1f9e902e61e9b6fd96625cb581ff.png" alt="Image from Gyazo" /><br />
<em>拡張機能をクリックする</em></p>
<p data-line="25" class="code-line">次に「Adobe Script Runner」と入力し、インストールをクリックします。<br />
<img src="https://i.gyazo.com/3d5d7bc1dcd5d334eb2b7d23377751ac.png" alt="Image from Gyazo" /><br />
<em>Adobe Script Runnerをインストール</em></p>
<p data-line="29" class="code-line">注意ダイアログが出てくるので、「ワークスペースを信頼してインストール」をクリックします。<br />
<img src="https://i.gyazo.com/e32b38b9b73d266dde40e4a4367055be.png" alt="Image from Gyazo" /><br />
<em>ワークスペースを信頼してインストール</em></p>
<h4 id="%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%AE%E8%A8%AD%E5%AE%9A" data-line="33" class="code-line"><a class="header-anchor-link" href="#%E6%8B%A1%E5%BC%B5%E6%A9%9F%E8%83%BD%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 拡張機能の設定</h4>
<p data-line="34" class="code-line">インストールが完了したら、設定（歯車アイコン）をクリックし「拡張機能の設定」を選択します。<br />
<img src="https://i.gyazo.com/b26ca0ea947e746597259c5cea21def2.png" alt="Image from Gyazo" /><br />
<em>「拡張機能の設定」を選択</em></p>
<p data-line="38" class="code-line">使用するAdobe製品の入力欄に、exeファイルが保存されている場所を記入します。<br />
<img src="https://i.gyazo.com/7a13b07269cc277fe2627ca10c45d92a.png" alt="Image from Gyazo" /><br />
<em>exeファイルのアドレスを入力</em></p>
<p data-line="42" class="code-line">デフォルトの設定だと、Adobe Creative Cloudで何も設定せずにインストールした場合の保存先になっているので、特に弄っていない人はそのままで大丈夫です。</p>
<aside class="msg alert"><span class="msg-symbol">!</span><div class="msg-content"><p data-line="45" class="code-line">ただし、Adobe製品のバージョン（年度）については異なる場合があるので確認しましょう。私はこの時の最新版(2022)が入っていたので、特に変更なしでした。</p>
</div></aside>
<p data-line="48" class="code-line">これでAdobe Script Runnerの設定は完了です！</p>
<h2 id="adobe-script-runner%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" data-line="50" class="code-line"><a class="header-anchor-link" href="#adobe-script-runner%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" aria-hidden="true"></a> Adobe Script Runnerの使い方</h2>
<p data-line="51" class="code-line">設定が完了したので、実際に使ってみましょう。</p>
<h3 id="%E7%B7%B4%E7%BF%92%E7%94%A8%E3%81%AE%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" data-line="53" class="code-line"><a class="header-anchor-link" href="#%E7%B7%B4%E7%BF%92%E7%94%A8%E3%81%AE%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%82%92%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8B" aria-hidden="true"></a> 練習用のスクリプトを作成する</h3>
<p data-line="54" class="code-line">VS Codeを開いて、「ファイル」 &gt;&gt;「 新しいテキストファイル」をクリックします。<br />
<img src="https://i.gyazo.com/ffe22134bb3f3bbeaad22510b2050195.png" alt="Image from Gyazo" /><br />
<em>「新しいテキストファイル」をクリック</em></p>
<p data-line="58" class="code-line">「Control + S」を押して、「practice.jsx」というファイル名で保存します。</p>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content"><p data-line="61" class="code-line">「.jsx」という拡張子でファイルが保存できれば、ファイル名についてはどんな名前でもOKです。</p>
</div></aside>
<p data-line="64" class="code-line"><img src="https://i.gyazo.com/05a8a7a6b219ab0557eb986789d3f2a6.png" alt="Image from Gyazo" /><br />
<em>「practice.jsx」というファイル名で保存</em></p>
<p data-line="67" class="code-line">「alert("練習です");」という文を入力し、「Control + S」で保存します。<br />
<img src="https://i.gyazo.com/f1f7c137e4e9cc00c739aeda7190ea53.png" alt="Image from Gyazo" /><br />
<em>練習用コードを作成</em></p>
<p data-line="71" class="code-line">alert() 関数を書くと、()内に記入した文字列をAdobeソフトでエラー（警告）として出力します。JavaScriptをやっている方だったら、DOM操作で使うalert()と同じです。</p>
<h3 id="%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B" data-line="73" class="code-line"><a class="header-anchor-link" href="#%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%97%E3%83%88%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%99%E3%82%8B" aria-hidden="true"></a> スクリプトを実行する</h3>
<p data-line="74" class="code-line">「Control + Shift + P」を押すと、検索バーが出てくるので、Adobeソフトの名前を入力します。</p>
<p data-line="76" class="code-line">私の場合は今回Photoshopを使おうと思ったので「Adobe Photoshop」と入力し、出てきた結果を選択しました。<br />
<img src="https://i.gyazo.com/f68558e49080597f2d6e209b66ed269e.png" alt="Image from Gyazo" /><br />
<em>VS CodeからAdobeソフトを起動</em></p>
<p data-line="80" class="code-line">実行するとAdobeソフトが起動し、ポップアップが出るので許可を出します。<br />
<img src="https://i.gyazo.com/b776d661d9644131717a17a0bdd9f697.png" alt="Image from Gyazo" /><br />
<em>practice.jsxを実行する</em></p>
<p data-line="84" class="code-line">今後スクリプトをVS Codeから起動すると、上記警告ポップアップが毎回出ることになります。</p>
<p data-line="86" class="code-line">非表示に設定したい場合は、下記のリンク通りにするとポップアップが表示されなくなります。</p>
<p data-line="88" class="code-line">
    <iframe 
      class="hatenablogcard" 
      style="width:100%;height:155px;max-width:680px;" 
      src="https://hatenablog-parts.com/embed?url=https://clameyes.com/posts/file-jsx-script-alert-hidden/" 
      width="300" 
      height="150" 
      frameborder="0" 
      scrolling="no">
    </iframe>       
    </p>
<p data-line="90" class="code-line">ポップアップを許可すると、コードで記入した警告が出力されます。<br />
<img src="https://i.gyazo.com/44a7977399d1f2fb8170e14b88ce870e.png" alt="Image from Gyazo" /><br />
<em>警告が出力</em></p>
<p data-line="94" class="code-line">上記のような警告用のポップアップが出力されれば、動作確認は完了です！</p>
<p data-line="96" class="code-line">これでVS CodeからスクリプトでAdobeソフトが呼び出せます！あとは好きなスクリプトを書くだけ！</p>


Adobe Script Runnerの設定と使い方: VSCodeの拡張機能でExtendScriptを使う