Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

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

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

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

 『ADC MEETUP Round 06「CREATE THE WEB TOUR』のセッション4は、アドビシステムズの製品マネージャーを務めるAdam Lehma氏から、HTML/CSS/JavaScript向けのコードエディタ「Brackets」についての紹介が行われました。

 以下、講演の経過時間とともにダイジェストを紹介しますので、ぜひセッションムービーと併せてご確認ください。

(この記事は、アドビ システムズ 株式会社発行の「Adobe Developer Connection」から許可を得て転載したものです)

Bracketsはオープンソースのコードエディタ

 (00:40)最初に口にした言葉は、Bracketsはオープンソースのコードエディタと位置づけているということです。同氏は「テキストエディタではないという点が重要」だと強調しました。

 (01:20)既にたくさんのエディタがある中で、Bracketsの特徴としては、Web開発に特化したエディタであること、利用者に対するツールカスタマイズや制御の制限が無いこと、最新のWeb標準に準拠し続けていること、の3点が挙げられました。

 (02:40)先日Edgeツール&サービスの一員として発表された「Edge Code」は、アドビが提供するBracketsのディストリビューションという位置づけの製品であり、他のEdgeツール&サービスとの統合が特徴だそうです。現時点では、Webフォントの統合、PhoneGapサービスとの連携機能の統合などが実現されています。

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開発以外のスキルを必要としないそうです。

スターターバグ、スターターフィーチャーについて

 (11:50)簡単に始められるように、スターターバグがGitHubに、スターターフィーチャーがTrelloに公開されています。スターターバグとスターターフィーチャーの説明は以下の通りです。

  • スターターバグ:簡単に修正できるバグ。エディタの構造を学ぶのに最適
  • フィーチャー:製品バックログとしてリストされている。それぞれ誰が作業しているかわかるようになっている。アドビが何をしているかも確認できる。

 スターターフィーチャー:比較的簡単に実現できる機能。コミュニティーからの参加がしやすい。実際に対応が増え始めている。

 日本語対応も始まったので期待して欲しいとのことでした。

 (15:30)Bracketsには拡張機能用のAPIも用意されています。これは、実験用の機能を実装するための専用のAPIです。拡張機能という形にすることによって、標準機能の外側で動作させることができるため、より大胆な実験や実装が可能になるとのことです。

Bracketsの開発と今後

 (16:30)アドビ社内のチームには7名のBrackets専任の開発者がおり、Freenode、Googleグループ、Rrackathons(集まって新機能の開発にトライする)などにおいてコミュニティを支援しているそうです。

 (17:20)Bracketsはアジャイル方式で開発が行われています。毎日全てのリクエストをレビューして、2.5週間ごとに新しいリリースを公開します。さらに、外部からの貢献を内部で開発する機能よりも重視するというポリシーも持っているとのこと。

 (19:25)公開して最初の4ヶ月で、既に20名の外部開発者がBracketsに取り組み始めたそうです。また、Edge製品を開発している他のチームもBracketsを使用して日々フィードバックを提供しています。

 (20:35)当面のゴールは、日々の仕事に必要な機能を提供することだとLehma氏は語りました。そして将来的にはクラウドとの連携機能なども視野に入れているとのことです。それが実現すれば、クラウド上でどこでもBracketsを使える環境が手に入るかもしれません。

 最後に「皆さんからの貢献を期待しています」という言葉でセッションを締めくくりました。

ADC(Adobe Developer Connection)

 この連載は、ADC(Adobe Developer Connection)にて紹介されているものです。Adobe社製品の最新技術情報は、ADCをご覧ください!

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

著者プロフィール

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

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

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