アプリの作成と起動
WebIDE の左側にあるサイドバーで、以下のことをできます:
- 新しいアプリを作成する
- パッケージ型アプリを開く
- ホスト型アプリを開く
新しいアプリ
"新しいアプリ..." を選択して、アプリを新規作成します。"HelloWorld"、"Privileged Empty App"、"Privileged App" の 3 つのテンプレートを選択できるダイアログが現れます。
いずれのテンプレートも Mozilla のアプリテンプレートコレクションから提供しており、アプリの作成に必要な基本構造を提供します。"Privileged App" は、アプリがクロスオリジンのコンテンツを読み込むために許可設定をどのようにすればよいかを示します。
テンプレートを選択すると、アプリの名称およびファイルを保存するディレクトリを問われます。そして、新規アプリをプロジェクトエディタで開きます。
パッケージ型アプリを開く
"パッケージ型アプリを開く..." を選択して、パッケージ型アプリを開きます。こちらを選択すると、アプリのマニフェストがあるディレクトリを求められます。そして、アプリをプロジェクトエディタで開きます。
ホスト型アプリを開く
"ホスト型アプリを開く..." を選択して、ホスト型アプリを開きます。こちらを選択すると、アプリのマニフェストを示す URL を求めらられます。そして、アプリをプロジェクトエディタで開きます。
アプリを編集する
プロジェクトエディタは、アプリを編集するための環境です。左側にアプリ内の全ファイルを表示するツリービューがあり、コンテキストメニューを使用してファイルの追加や削除が可能です。
ツリービューの右隣は、エディタペインです。
アプリの概要ページ
始めにアプリを開いたり新規作成したりすると、エディタペインに以下のような、アプリの概要を示すページを表示します:
左側のツリーのルートをクリックすることで、いつでもアプリの概要ページに戻れます。
マニフェストを検証する
WebIDE は自動的に、マニフェストでよく発生する問題点のいくつかを確認します。問題点を発見するとアプリの概要で、アプリが不正な状態であることと問題点の説明を表示します:
manifest.webapp ファイルもプロジェクトエディタで編集できます。
ソースエディタ
WebIDE では CodeMirror ソースエディタを使用しています。
ソースエディタのショートカット
以下の表は、ソースエディタのデフォルトのショートカットの一覧です。
開発ツールのオプションのエディタ設定で、キーバインドとして Vim、Emacs、Sublime Text を選択できます。
あるいは、about:config で設定項目 devtools.editor.keymap を選択して "vim"、"emacs"、または "sublime" を設定してください。この設定によりソースエディタを使用するすべての開発ツールで、選択したキーバインドを使用します。設定を反映させるには、エディタを開き直さなければなりません。
Firefox 33 よりキーバインドの設定を開発ツールのオプションのエディタ設定に配置しましたので、about:config に代わりここで設定できます。
| 操作 | Windows | OS X | Linux |
|---|---|---|---|
| 指定行へ移動 | Ctrl + J | Cmd + J | Ctrl + J |
| ファイル内を検索 | Ctrl + F | Cmd + F | Ctrl + F |
| 再検索 | Ctrl + G | Cmd + G | Ctrl + G |
| すべて選択 | Ctrl + A | Cmd + A | Ctrl + A |
| 切り取り | Ctrl + X | Cmd + X | Ctrl + X |
| コピー | Ctrl + C | Cmd + C | Ctrl + C |
| 貼り付け | Ctrl + V | Cmd + V | Ctrl + V |
| 元に戻す | Ctrl + Z | Cmd + Z | Ctrl + Z |
| やり直し | Ctrl + Shift + Z / Ctrl + Y | Cmd + Shift + Z / Cmd + Y | Ctrl + Shift + Z / Ctrl + Y |
| インデント挿入 | Tab | Tab | Tab |
| インデント削除 | Shift + Tab | Shift + Tab | Shift + Tab |
| 上の行へ移動 | Alt + ↑ | Alt + ↑ | Alt + ↑ |
| 下の行へ移動 | Alt + ↓ | Alt + ↓ | Alt + ↓ |
| 行のコメント化/コメント解除 | Ctrl + / | Cmd + / | Ctrl + / |
コード補完
CSS やJavaScript を編集する際は、エディタがオートコンプリートの候補を提示します。CSS のオートコンプリートは常に有効です:
JavaScript のオートコンプリート候補は Control + Space を押下すると表示されます:
ファイルを保存する
ファイルに施した変更点は、保存しなければ反映されません。未保存の変更点があるファイルはツリービューでファイル名の隣にアスタリスクが表示されており、メニューを使用するか Control+S (Mac OS X では Command+S) を押下して保存できます。
アプリを削除する
アプリの概要ページで "プロジェクトを削除" をクリックすると、WebIDE からアプリが削除されます。