「Adobe Bridge」のJavaScriptを使って画像処理を自動化する本シリーズも、今回でいよいよ最終回。今回は、BridgeのGUI（グラフィカルユーザーインターフェース）機能を扱います。前回作成した画像フィルターのサンプルに独自のGUIを追加し、プログラマーでなくても使いやすいプログラムに仕上げていきましょう。

Bridgeでダイアログを表示する

　BridgeでGUIを表示するには、座標を手動で指定してGUI部品を配置する方法と、自動的に配置する方法がありますが、今回は手動でGUI部品を配置します。

　はじめに、GUIのベースとなるダイアログウィンドウを表示します。ダイアログウィンドウはnew Window()を使って生成します。第1引数には"dialog"、第2引数にはダイアログウィンドウのタイトル（タイトルバーに表示する文字）を指定します。第3引数は画面上でのダイアログウィンドウの表示位置です。配列形式で[top,left,right,bottom]のように指定します。new Window()はダイアログウィンドウオブジェクトを生成するだけで表示はしませんので、show()メソッドを使って表示します。

　ここまでをまとめたものがサンプル01です。ダイアログはESCキーを押すと消えます。

モニタ画面上の指定した位置にダイアログウィンドウが表示されます

●サンプル01

#target "Bridge"
var dlg = new Window("dialog", "ランダムピクセル描画フィルタ設定ダイアログ", [100, 100, 400, 300]);
dlg.show();

ツイートする

この連載の記事

• 第53回  Mac用ウィジェットをHTML/CSSで自作
• 第52回  Web技術で作るDashboardウィジェット開発入門
• 第51回  iOS 4.2×localStorageで作るGPSレコーダー
• 第50回  HTML5 SVGで作るシューティングゲーム
• 第49回  HTML5のInline SVGをJavaScriptで操作
• 第48回  HTML5で注目！インラインSVGの使い方
• 第47回  iOS 4.2の新機能で作るHTML5+JSアプリ
• 第46回  JavaScriptでEPUBビューアーを自作してみた
• 第45回  Audio Data APIでブラウザーをシーケンサーに！
• 第44回  Firefoxでソフトシンセも作れるAudio Data APIの使い方
• この連載の一覧へ

この記事の編集者は以下の記事をオススメしています

• 古籏一浩のJavaScriptラボ

• JSでWeb制作を自動化するAdobe Bridge活用入門

• Adobe BridgeのJavaScriptでXMLを操作しよう

• JavaScriptでRSSからPhotoshop画像を生成！

• 画像の自動アップロードもJavaScriptにお任せ！

• 低Cd値エアロストリームおっぱい搭載のサイボーグ＆U-12系オッパイマウスパッド!?

• 29分でできる！ あのサイトの“技”を盗め

関連記事

• iBooks AuthorでHTML5の電子書籍作ってみた

• HTML5のゲーム開発を効率化！国産ライブラリー

• PhoneGapでiPhoneのコンパスアプリを再現

はてブ注目ランキング

1. 50代でも分かったHTML5の基礎知識728 users

2. 10分でわかる！ jQuery Mobileのキホン94 users

3. iBooks AuthorでHTML5の電子書籍作ってみた76 users

4. HTML5要素のブラウザー実装状況を調べてみた38 users

5. 本店と楽天を使い分け、ブランディングを強化23 users

6. 40分で覚える！jQuery速習講座2208 users

7. 絶対見ておきたい有名企業のスマホサイトまとめ2135 users

8. もう配色には困らない！「Adobe Kuler」1681 users

9. 30分でできる！Webサイトを高速化する6大原則1496 users

10. Web制作会社が作った！超使えるJavaScriptライブラリ1215 users

最新記事

• デル、メモリー／BDドライブ無償アップグレードキャンペーン

  

• AntecのPLATINUM電源は、回路やファンもプラチナ級！

  

• マザーとVGAとBF3がセットになった超豪華パックが限定出荷！

  

• Micro ATXで拡張性も高いモバイルSandy Bridge用マザー

  

• 真空管似のUSBサウンドアダプターがENERMAXから