This repository has been archived by the owner on Sep 6, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #8962 from adobe/release
Merging Release into Master
- Loading branch information
Showing
20 changed files
with
967 additions
and
157 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -28,7 +28,7 @@ h2 { | |
| } | ||
|
|
||
| a { | ||
| color: #0083e8; | ||
| color: #0083e8; | ||
| } | ||
|
|
||
| b, strong { | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | ||
| <title>BRACKETS をはじめる前に</title> | ||
| <meta name="description" content="An interactive getting started guide for Brackets."> | ||
| <link rel="stylesheet" href="main.css"> | ||
| </head> | ||
| <body> | ||
|
|
||
| <h1>BRACKETS をはじめる前に</h1> | ||
| <h2>まずはこのガイドからスタート</h2> | ||
|
|
||
| <!-- | ||
| MADE WITH <3 AND JAVASCRIPT | ||
| --> | ||
|
|
||
| <p> | ||
| プレビュー版 Brackets に関心をお持ちいただきまして、誠にありがとうございます。Brackets は次世代の Web に向けて新開発されたオープンソースのエディターです。アドビでは標準規格を重視しており、JavaScript、HTML、CSS 用の優れたツールや、それに関連するオープンな Web テクノロジーの構築を目指しています。このプレビュー版 Brackets は、それに向けてのささやかな第一歩といえます。 | ||
| </p> | ||
|
|
||
| <!-- | ||
| WHAT IS BRACKETS? | ||
| --> | ||
| <p> | ||
| <em>Brackets は、新しいタイプのエディターです。</em> | ||
| これまでのエディターと大きく異なる点は、JavaScript、HTML、CSS で記述されているということです。 | ||
| つまり、ほとんどの Brackets ユーザーは、習得済みのスキルを使って、このエディターそのものを変更したり拡張したりできるということになります。 | ||
| 実際、アドビ社内の開発チームも、毎日 Brackets を使用して Brackets の構築を進めています。また、Brackets にはクイック編集やライブプレビューなど、他のエディターにはないユニークな機能が備わっています。 | ||
| こうした機能の使用方法について、下記で詳しくご説明します。 | ||
| </p> | ||
|
|
||
|
|
||
| <h2>新しいアイデアを実装</h2> | ||
|
|
||
| <!-- | ||
| THE RELATIONSHIP BETWEEN HTML, CSS AND JAVASCRIPT | ||
| --> | ||
| <h3>CSS と JavaScript のクイック編集</h3> | ||
| <p> | ||
| いくつものドキュメントを行ったり来たりして、コードの文脈を見失うようなことはもうありません。HTML ファイルの編集中にショートカットの <kbd>Command + E キーまたは Ctrl + E キー</kbd>を使用すると、クイック編集用のインラインエディターが開き、関連する CSS がすべて表示されます。 | ||
| ここで CSS を調整して <kbd>Esc キー</kbd>を押せば、HTML の編集に戻ることができます。また、CSS ルールを開いたままにしておけば、HTML エディターの一部として使用できます。カーソルがクイック編集用インラインエディターの外にあるときに <kbd>Esc キー</kbd>を押すと、CSS ルールはすべて折りたたまれます。 | ||
| </p> | ||
|
|
||
| <samp> | ||
| この機能を実際に使用するには、上部の <!-- <samp> --> タグにカーソルを合わせた状態で <kbd>Command + E キーまたは Ctrl + E キー</kbd>を押します。すると、上部に CSS クイック編集エディターが開き、適用する CSS ルールが表示されます。クイック編集は、クラスおよび id 属性にも使用できます。 | ||
|
|
||
| 新規ルールも同じように作成できます。上部の <!-- <p> --> タグのいずれかをクリックし、<kbd>Command + E キーまたは Ctrl + E キー</kbd>を押します。そのとき既存のルールがなければ、「新規ルール」ボタンをクリックして <!-- <p> --> に新規ルールを追加できます。 | ||
| </samp> | ||
|
|
||
| <a href="screenshots/quick-edit.png"> | ||
| <img alt="CSS クイック編集のスクリーンショット" src="screenshots/quick-edit.png" /> | ||
| </a> | ||
|
|
||
| <p> | ||
| 同じショートカットを使用して、JavaScript の関数、カラー、アニメーションタイミング機能など、他のエレメントも編集できます。アドビでは、この機能を継続して強化していきます。 | ||
| 現時点ではインラインエディターをネストすることはできませんので、クイック編集を使用できるのは、カーソルが「フルサイズ」のエディター内にある場合に限られています。 | ||
| </p> | ||
|
|
||
| <!-- | ||
| LIVE PREVIEW | ||
| --> | ||
| <h3>HTML および CSS の編集結果をブラウザーでライブプレビュー</h3> | ||
| <p> | ||
| 私たちはずっと、保存とリロードの繰り返し作業に煩わされてきました。エディターで編集して保存し、ブラウザーに切り替えて更新してから、ようやく結果を確認できるという、あの作業です。 | ||
| Brackets では、もうあの作業を行う必要はありません。 | ||
| </p> | ||
| <p> | ||
| Brackets では、HTML や CSS のコード編集を行いながら、ローカルブラウザーに<em>ライブ接続</em>し、編集結果をリアルタイムでプレビューできます。ブラウザーベースのツールの中には、現時点でもこれと似たことが可能なものもありますが、Brackets の場合は最終的にコードをエディターにコピー＆ペーストする必要がありません。コードが実行されるのはブラウザー上ですが、コードがある場所は最初からずっとエディター内なのです。 | ||
| </p> | ||
|
|
||
| <h3>HTML エレメントと CSS ルールのライブハイライト</h3> | ||
| <p> | ||
| Brackets では、HTML や CSS の編集内容がどのようにページに反映されるかを、簡単に確認することができます。Brackets で CSS ルール上にカーソルを置くと、ブラウザー上でそのルールに対応するエレメントがすべてハイライト表示されます。これと同じように、HTML ファイルを編集しているときも、ブラウザー上でそれに対応する HTML エレメントがハイライト表示されます。 | ||
| </p> | ||
|
|
||
| <samp> | ||
| お使いのコンピューターに Google Chrome がインストールされていれば、これを実際にお試しいただくことができます。Brackets ウィンドウの右上にある稲妻アイコンをクリックするか、<kbd>Command + Alt + P キーまたは Ctrl + Alt + P キー</kbd>を押します。HTML ドキュメントでライブプレビューが有効になっていれば、リンクされている CSS ドキュメントはすべてリアルタイムで編集可能です。 | ||
| Brackets でローカルブラウザーとの接続が確立されると、アイコンがグレーから金色に変わります。 | ||
|
|
||
| この状態で、上部の <!-- <img> --> タグにカーソルを合わせます。すると、Chrome 上で画像の周囲が青くハイライト表示されます。次に、<kbd>Command + E キーまたは Ctrl + E キー</kbd>を押して、定義済みの CSS ルールを開きます。 | ||
| 枠のサイズを 10 ピクセルから 20 ピクセルに変更するか、背景色を「透明」から「ホットピンク」に変更してみてください。Brackets とブラウザーが同時に動作していれば、この変更内容が瞬時にブラウザーの表示に反映されるのを確認できます。 | ||
| </samp> | ||
|
|
||
| <p class="note"> | ||
| 現時点で Brackets のライブプレビューが対応しているのは、HTML と CSS のみです。JavaScript ファイルの場合、現行バージョンでは、編集内容を保存した時点で自動的にリロードされます。現在アドビでは、JavaScript のライブプレビュー対応を進めています。また、ライブプレビューの可能なブラウザーは Google Chrome のみですが、将来的には主要なブラウザーすべてでこの機能を利用できるようにしたいと考えています。 | ||
| </p> | ||
|
|
||
| <h3>クイックビュー</h3> | ||
| <p> | ||
| まだ 16 進数値または RGB 値に対応するカラーコードを覚えていなくても、Brackets なら使用されているカラーを正確に、しかもすばやく簡単に確認できます。CSS でも HTML でも、カラー値またはグラデーション上にカーソルを重ねるだけで、そのカラーやグラデーションが自動的に表示されます。画像の場合も同様で、Brackets エディターで画像リンク上にカーソルを重ねると、その画像のプレビューがサムネイルで表示されます。 | ||
| </p> | ||
|
|
||
| <samp> | ||
| クイックビューを実際に使ってみるには、このドキュメントの上部にある <!-- <body> --> タグにカーソルを合わせます。その状態で <kbd>Command + E キーまたは Ctrl + E キー</kbd>を押すと、CSS クイック編集エディターが開きます。あとは、CSS 内でカラー値のどれかにカーソルを重ねるだけです。また、グラデーションに対してこの機能を使ってみるには、<!-- <html> --> タグで CSS クイック編集エディターを開き、背景画像の値にカーソルを重ねます。画像のプレビューを試す場合は、このドキュメントの前半に掲載されているスクリーンショット画像にカーソルを重ねてみてください。 | ||
| </samp> | ||
|
|
||
| <h3>拡張機能でさらに補強</h3> | ||
| <p> | ||
| Brackets に組み込まれた優れた機能に加え、拡大を続ける大規模なコミュニティで、デベロッパーらが 100 種類以上の便利な拡張機能を構築しています。Brackets にない機能を必要としたとき、ほぼ確実に構築済みの拡張機能が見つかります。使用可能な拡張機能の一覧を参照または検索するには、<strong>ファイル／Extension Manager</strong> を選択し、「入手可能」タブをクリックします。使用する拡張機能が見つかったら、その横の「インストール」ボタンをクリックします。 | ||
| </p> | ||
|
|
||
| <h3>Brackets のプロジェクト</h3> | ||
| <p> | ||
| Brackets を使用して独自のコードを記述するには、自分のファイルを格納したフォルダーを開きます。現時点で開いているフォルダーが Brackets によって「プロジェクト」として処理され、そのフォルダー内のファイルのみがコードヒント、ライブプレビュー、クイック編集などの機能で使用されます。 | ||
| </p> | ||
|
|
||
| <samp> | ||
| このサンプルプロジェクトを終了し、コードを編集する準備ができたら、左側のサイドバーのドロップダウンを使用してフォルダーを切り替えます。この時点で、ドロップダウンには「はじめに」が表示され、現在表示されているファイルが格納されたフォルダーが選択されています。ドロップダウンで「フォルダーを開く...」を選択して、使用するフォルダーを開きます。 | ||
| ドロップダウンを使用して、このサンプルプロジェクトが含まれるフォルダーなど、以前に開いたフォルダーに切り替えることもできます。 | ||
| </samp> | ||
|
|
||
| <!-- | ||
| LET US KNOW WHAT YOU THINK | ||
| --> | ||
| <h2>Brackets プロジェクトに参加</h2> | ||
| <p> | ||
| Brackets はオープンソースのプロジェクトです。世界中の Web デベロッパーが、優れたコードエディターの構築に貢献しています。さらに多くの人々が、Brackets の拡張機能の構築に携わっています。 | ||
| ぜひ、このプロジェクトについてご意見・アイデアをお寄せください。プロジェクトへの直接的なご参加もお待ちしております。 | ||
| </p> | ||
| <ul> | ||
| <li><a href="http://brackets.io">Brackets.io</a></li> | ||
| <li><a href="http://blog.brackets.io">Brackets チームのブログ</a></li> | ||
| <li><a href="https://github.com/adobe/brackets">GitHub の Brackets ページ</a></li> | ||
| <li><a href="https://brackets-registry.aboutweb.com">Brackets 拡張機能レジストリ</a></li> | ||
| <li><a href="https://github.com/adobe/brackets/wiki">Brackets Wiki</a></li> | ||
| <li><a href="https://groups.google.com/forum/#!forum/brackets-dev">Brackets デベロッパーのメーリングリスト</a></li> | ||
| <li><a href="https://twitter.com/brackets">Twitter @brackets</a></li> | ||
| <li><a href="http://webchat.freenode.net/?channels=brackets&uio=d4">Freenode の IRC</a> で、Brackets 開発者と #brackets についてチャット</li> | ||
| </ul> | ||
|
|
||
| </body> | ||
| </html> | ||
| <!-- | ||
| [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [::::::[[[[[[[: :]]]]]]]::::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ CODE THE WEB ]:::::] | ||
| [:::::[ http://brackets.io ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [:::::[ ]:::::] | ||
| [::::::[[[[[[[: :]]]]]]]::::::] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [:::::::::::::: ::::::::::::::] | ||
| [[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]] | ||
| --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| html { | ||
| background-color: #e6e9e9; | ||
| background-image: -webkit-linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
| background-image: linear-gradient(270deg,rgb(230,233,233) 0%,rgb(216,221,221) 100%); | ||
| -webkit-font-smoothing: antialiased; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0 auto; | ||
| padding: 2em 2em 4em; | ||
| max-width: 800px; | ||
| font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| font-size: 16px; | ||
| line-height: 1.5em; | ||
| color: #545454; | ||
| background-color: #ffffff; | ||
| box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); | ||
| } | ||
|
|
||
| h1, h2, h3, h4, h5, h6 { | ||
| color: #222; | ||
| font-weight: 600; | ||
| line-height: 1.3em; | ||
| } | ||
|
|
||
| h2 { | ||
| margin-top: 1.3em; | ||
| } | ||
|
|
||
| a { | ||
| color: #0083e8; | ||
| } | ||
|
|
||
| b, strong { | ||
| font-weight: 600; | ||
| } | ||
|
|
||
| samp { | ||
| display: none; | ||
| } | ||
|
|
||
| img { | ||
| -webkit-animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1; | ||
| animation: colorize 2s cubic-bezier(0, 0, .78, .36) 1; | ||
| background: transparent; | ||
| border: 10px solid rgba(0, 0, 0, 0.12); | ||
| border-radius: 4px; | ||
| display: block; | ||
| margin: 1.3em auto; | ||
| max-width: 95%; | ||
| } | ||
|
|
||
| @-webkit-keyframes colorize { | ||
| 0% { | ||
| -webkit-filter: grayscale(100%); | ||
| } | ||
| 100% { | ||
| -webkit-filter: grayscale(0%); | ||
| } | ||
| } | ||
|
|
||
| @keyframes colorize { | ||
| 0% { | ||
| filter: grayscale(100%); | ||
| } | ||
| 100% { | ||
| filter: grayscale(0%); | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.