Hatena::ブログ(Diary)

s.h’s page

2012-01-15

Tree-likeUI.js と jsLinb UI Builder hack

f:id:shspage:20120115200306p:image:w360

Christopher Greenさんが、拙作「木のようなものを描く」スクリプトにUIをつけてくれました。

そう、以前にも、つけてくれた方がいるのですが、Greenさん版の面白いところは、UIを作るのにjsLinbというWebアプリケーション用のフレームワークGUIビルダーを使っているところです! これは少しの下準備で、ダイアログの作成が本当に簡単に行える優れものです。


なにはともあれ、こちらが送っていただいたスクリプトです。

Tree-likeUI.zip


あと、スクリプトの実行オプションを再利用できる仕組みが取り入れられています。具体的には、作成した木(グループ)に、実行オプションの値を列記した名前がついていて、この名前のついた木を選択した状態でもう一度スクリプトを実行すると、その値が既定値になってダイアログが開くというわけです。


さて、GUIビルダーの話ですが、ただしjsLinbのものがそのまま使えるわけではなく、ちょっとした下準備が要ります。

以下が、ダイアログをイラレで表示するまでの手順です。

  1. Bethosのページに行きます。BethosはGreenさんが作成したjsLinb UI Builderの機能拡張です。
  2. ページの下の方のGo to the codeからJavaScriptのコードのページに行きます。
  3. 移動先でページ全体のテキストをコピーします。
  4. jsLinb UI Builderに行きます。
  5. ウィンドウ左上のCodeタブをクリックし、コードをすべて選択、さきほどコピーしたコードに置き換えます。
  6. Design Viewに戻ると、図のような画面になります。f:id:shspage:20120115200302p:image:w360
  7. 右上のScript Windowというタイトルのあるダイアログが、これから編集するものです。赤い説明文を選択して、右クリックで Delete を選んで削除します。
  8. 左のTool Boxのすべてが使えるわけではありません。使える項目と、ScriptUIの何に対応するかが、ダイアログの左にあるQuick Referenceに書いてあります。普通の項目ではなく、Advanced 〜を使うものが多いですね。Tool Box からダイアログの上にドラッグして配置していきます。
  9. Advanced CheckBoxは、checkboxとradiobuttonに対応しており、themeにradioと入れることでradiobuttonになります。Bethosのページの、Q: "What potential problems should I be aware of?" に、その他の注意が書いてありますのでご一読ください。f:id:shspage:20120115200304p:image:w360
  10. ページ右上の大きい緑色の矢印をクリックすると、プレビューページが開きます。f:id:shspage:20120115200303p:image:w360
  11. dialogを選んで(その他はまだ試していません)、プレビューされているダイアログの右上の×をクリックすると、CSで使えるJavaScriptコードが表示されます。
  12. これを拡張子jsのファイルに保存し、スクリプトとして実行すると、図のようなダイアログになります。(WindowsXP/Illustrator CS5f:id:shspage:20120115200305p:image

ダイアログから値を取得するには、ScriptUIの知識が少し要ります。win.checkbox1.value, win.textedit1.text みたいな感じです。

私はScriptUI for dummies | Peter KahrelPDFアンチョコにして勉強中です。他にわかりやすいものがあったら、ぜひ教えてください!

kamisetokamiseto 2012/01/15 22:12 人それぞれですね。おもしろいです。
僕は、イラストレーターのアートボードにシンボルを配置してUIつくったりしてます。
http://f.hatena.ne.jp/kamiseto/20101007232124

shspageshspage 2012/01/15 23:53 なるほど!それでスクリプトでコードまで書き出すのですね?
やっぱり使いやすいUIがついてたほうが便利ですよね。勉強しよう。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/shspage/20120115/1326627040