Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

【ADC MEETUP 06】オープンソースのWeb制作用コードエディタ「Brackets」

ADC記事 『ADC MEETUP 06 – CREATE THE WEB TOUR – SESSION4 :Brackets Web をコーディングせよ!』

  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

Bracketsの提供機能

 (03:15)「しかし今日はBracketsの話です」と話題を戻して、再びBracketsの位置づけについて説明しました。Bracketsの主目的はエディタの提供ではなく、サンドボックスの開発、すなわちコーディングに関連するいろんな新しいアイデアを試す土俵を作ることだそうです。

クイック編集

 (04:00)具体的に、試したアイデアの1つは「クイック編集」と呼ばれています。Bracketsではコードを表示するだけの画面を提供することをとても大事に考えているため、コード上に別のパネルを開くような構成にはなっていません。クイック編集では、Ctrl+Eを押すと、カーソルの置かれたタグに関連づけられているCSSの一覧がインラインで表示されます。これにより、いくつものファイルを行ったり来たりすることなくCSSを直接編集することができます。

 (05:50)また、複数のタグに対するCSSを同時に表示するすることもできます。その際も、Bracketsのように開発者からコードを隠さないことが重要だとLehma氏は指摘しています。

ビジュアルツール

 (06:50)とはいえ、一部ではビジュアルツールも用意されています。例えば色の編集などは、数字だけで実際の色を想像することは難しいため、カラーピッカーが使えるようになっています。

 (07:30)Bracketsは、ブラウザーをデザイン用の画面として利用できます。これは、ファイルを「保存」してブラウザーを「再読み込み」して「確認」するという従来のワークフローを置き換えるものです。Bracketsでは、ブラウザーとエディタが直接通信するため、エディタでプロパティを変更すると、即座にブラウザー内の表示に反映されて結果を確認できます。

 (09:00)「Bracketsはみんなで実験する場所だと考えている」とLehma氏は改めて強調しました。BracketsのコードはGitHub上にMITライセンスに基づいて公開されています。自由に商用利用することができ、大勢でコードを共有したり変更したりすることも簡単に行えます。

 (11:00)また、Bracketsのコード自身がJavaScriptとHTML、CSSで記述されているため、エディタの開発にもWeb開発以外のスキルを必要としないそうです。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • アドビ システムズ株式会社(アドビ システムズ カブシキガイシャ)

    アドビ システムズ社は、時間や場所、利用するメディアや機器を問わず、あらゆるユーザーの、アイデアや情報との関わり方に変革をもたらしています。アドビ システムズ 株式会社はその日本法人です。同社に関する詳細な情報は、Webサイト(http://www.adobe.com/jp)に掲載されています。...

バックナンバー

連載:Adobe Developer Connection

もっと読む

おすすめ記事

All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5