SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Adobe Developer Connection(AD)

JavaScriptとHTML/CSSで行う、軽量エディタ「Adobe Edge Code」の拡張機能開発

「Adobe Edge Code CC」徹底入門(4)

  • X ポスト
  • このエントリーをはてなブックマークに追加

サイドのツールバーにボタンを追加する

 前セクションまでの工程で、コマンドをメニューに追加できるようになりました。次は下図のように、サイドのツールバーにコマンドのショートカットアイコンを追加する方法を見ていきます。よく使うコマンドは、このツールバーに登録しておくと便利です。

  • このセクションのサンプルはこちらです。

 サイドバーにボタンを追加する工程は下記の5つです。

  1. ボタン用のアイコンを用意する
  2. ボタン用のHTMLテンプレートとCSSを用意する
  3. テンプレートと外部CSSを読み込むためのモジュールを読み込む
  4. 読み込んだHTMLをjQueryオブジェクトにする
  5. ボタンを追加する

1. ボタン用のアイコンを用意する

 ここではiconmonstrからハートのアイコンを使用することにします。24x24のサイズでimg/toolbar-icon.svgとして保存します。アイコンのカラーは#bbbbbbにしておくと他のアイコンと同じ色になります。

2. ボタン用のHTMLテンプレートとCSSを用意する

 ボタンを表示するためのaタグを1つ用意します。ボタンの画像はCSSの背景画像で指定します。titleはボタンにマウスをホバーした際に表示されるツールチップのために指定します。下記のコードをhtmlContent/custom_toolbar.htmlとして保存します。

<a href="#" id="custom-toolbar" title="Show dialog">

 上記のHTMLに対してCSSを適用してボタン化します。下記のコードをstyle/style.cssとして保存します。1で用意したアイコンファイルを背景画像で指定します。

#custom-toolbar {
  background: no-repeat url("../img/toolbar-icon.svg");
  display: inline-block;
  width: 24px;
  height: 24px;
}

3. テンプレートと外部CSSを読み込むためのモジュールを読み込む

 外部CSSを読み込むためにExtensionUtilsというモジュールを読み込みます。また、ダイアログのテンプレートと同様に1のテンプレートをrequireメソッドで読み込みます。今回の読み込みのコードは全体で下記のようになります。

var CommandManager          = brackets.getModule("command/CommandManager"),
    Menus                   = brackets.getModule("command/Menus"),
    ExtensionUtils          = brackets.getModule("utils/ExtensionUtils"),
    Dialogs                 = brackets.getModule("widgets/Dialogs"),
    Strings                 = brackets.getModule("strings"),
    CustomToolbarHtml       = require("text!htmlContent/custom_toolbar.html"),
    SimpleDialogTemplate    = require("text!htmlContent/simple_dialog.html");

4. 読み込んだHTMLをjQueryオブジェクトにする

 Bracketsの開発ではjQueryが利用できます。2で読み込んだテンプレートをjQueryオブジェクト化します。Bracketsの拡張機能開発のコード規約として、jQueryオブジェクトを入れる変数には$をつけることが推奨されていますのでそのようにします。

var $toolbarIcon    = $(CustomToolbarHtml);

5. ボタンを追加する

 サイドのツールバーは#main-toolbar .buttonsというノードになっているので、$toolbarIconをappendToで追加します。

$toolbarIcon.appendTo("#main-toolbar .buttons");
$toolbarIcon.on('click', showDialog);

 最後にExtensionUtils.loadStyleSheetを使用して、2で用意したCSSを読み込みます。

ExtensionUtils.loadStyleSheet(module, "style/style.css");

 ここまでの工程でツールバーにボタンが追加され、ボタンからダイアログを表示することができました。

次のページ
コンテキストメニューから選択テキストを操作する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Adobe Developer Connection連載記事一覧

もっと読む

この記事の著者

又村 洋史(マタムラ ヒロフミ)

株式会社イノーヴWEBクリエイター。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。 土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。日々学ぶことばかり。...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/7452 2013/10/21 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング