CCエクステンションアイコン

AdobeCCのExtensionをBracketsで開発しよう 3/5

イ!「AdobeCCのExtensionをBracketsで開発しよう」の第3回です。
→第2回目  →第1回目

今回からはいよいよコーディングindex.html」です。

<!doctype html>
<html>
<head>
<meta charset="utf-8">       
<link rel="stylesheet" href="css/topcoat-desktop-dark.min.css"/>
<link  id="hostStyle" rel="stylesheet" href="css/styles.css"/>
<title></title>
</head>
<body class="hostElt">
    <div id="content">               
        <div>                
            <button id="btn_test" class="topcoat-button--large hostFontSize">Call ExtendScript</button>             
        </div>           
    </div>    
    <script src="js/libs/CSInterface.js"></script>
    <script src="js/libs/jquery-2.0.2.min.js"></script>
    <script src="js/themeManager.js"></script>
    <script src="js/main.js"></script>
</body>
</html>

<div id=”content”>タグ内にあるのが、パネルのインターフェースとなります。とりあえず今ある要素を消去し、必要な要素を追加していきましょう。今回作るのはスクリプトパネルなので、<select>タグを挿入し、リストにしてそこにscriptファイルを追加していきましょう。

<div id="content">       
   <select id="jsxList" size="10" style="width:200px;">
      <option>☆script再読込</option>
   </select>  
</div>  

こういう感じですね。スタイルとかはテキトーです、CSSとかキリがないので、、、。

1つ目の<option>タグに「☆scriptの再読み込み」をつけて(再読込すればIllustrator起動中にscriptファイルが追加できようになる、便利、。あとで、scriptフォルダからjQueryで要素を追加していきます。

スポンサーリンク

デバッグモード設定

では次にCCアプリでのデバッグモードの設定に移ります。まず、CCエクステンションのデバッグモードの許可をせねばなりません。使用しているOSがWindowsなら「regedit」で「HKEY_CURRENT_USER/Software/Adobe/CSXS.5」に「PlayerDebugMode」というキーを追加し、タイプをString 、バリューを1に設定して下さい。つってもわかりにくいんで、イメージ!

windowsなら「regedit」でこういう感じで追加する

上記のような感じでキーを追加してください。ちなみに使用OSがMacintoshならば「~/Library/Preferences/com.adobe.CSXS.5.plist」のファイルをエディタでがんばって編集してください。Mac環境のことはようわかりません。DTPサイトにはめずらしくWindows目線でやっとりますから。

ちなみに「Creative Cloud Extension Builder」で作成したものにははじめから「.debug」というファイルが作成されたおり、これによりデバックできるようになっておるのです。

↓ソース

<?xml version="1.0" encoding="UTF-8"?> 
<ExtensionList>
    <Extension Id="com.example.helloworld">
        <HostList>
            <!-- Comment Host tags according to the apps you want your panel to support -->
            <!-- Photoshop -->
            <Host Name="PHXS" Port="8088"/>
            <!-- Illustrator -->
            <Host Name="ILST" Port="8089"/>
	    <!-- InDesign -->
            <Host Name="IDSN" Port="8090" />
            <!-- Premiere -->
            <Host Name="PPRO" Port="8091" />
            <!-- AfterEffects -->
            <Host Name="AEFT" Port="8092" />
            <!-- PRELUDE -->
            <Host Name="PRLD" Port="8093" />
            <!-- FLASH Pro -->
            <Host Name="FLPR" Port="8094" />
        </HostList>
    </Extension>
</ExtensionList>

アプリケーションごとに設定されている「Port=”????”」の数字が重要になっております。

ブラウザでデバックできる

CC上でデバッグしてパネルを動かしたときに、このアドレスにブラウザでアクセスしてデバッグするのです!つまり上の例でいくとIllustratorは「http://localhost:8080/」をChromeなどのアドレスバーに打ち込むと詳細なデバッグが見れるのです(例えば「console.log(“honyahonya”)」等)。

これでデバッグ環境はととのいました!次回からはいよいよCC上でパネルを動かしてまいります!

スポンサーリンク

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です