Previewの内容をもとに執筆したものです。今後の開発において、機能や操作方法が変更となることがあります。Cloudから入手でき、無償メンバーでも利用できます。Code)基本操作について網羅していきたいと思います。CodeのUIは直感的に使えるようシンプルに削ぎ落とされており、洗練された印象を与えます。ファイル間の移動を極力感じない操作感は、軽量エディタのイメージを変えてくれるでしょう。本稿では、各UIの役割やコーディングを高速化するために便利なショートカットなどを紹介していきます。解説はMacベースで行います。Windowsの方は適宜commandをCtrlに、optionをAltに読み替えてご覧ください。controlとされているところはWindowsでもそのままCtrlとなります。CodeのUIは上図のように4つのエリアで構成されています。各部の名称が定まっているわけではありませんが、本稿では下記のように定義させていただきます。Files(作業中ファイルのナビゲータ)通常のタブエディタと違い上部のタブはなく、サイドバーに現在開いているファイル名が縦に並んでいき、タブの役割も兼ねるUIで見やすくまとめられています。個人的にはスッキリしていて、使い勝手がいいと感じます。タブ間はcontrol+tabで移動可能です。Codeには、プロジェクトファイルなどの独自ファイルは特にありません。その代わり、過去に開いたフォルダが記憶され、いつでも直近に開いたフォルダをプロジェクトのように開きやすくなっています。フォルダ名をクリックすると過去に開いたフォルダ一覧とフォルダを開くメニューが表示され、選択すると該当のフォルダメニューへすぐに切り替わります。一度に開けるウィンドウは1つのみです。Codeのコードエリアには魔法が備わっています。画面遷移を減らした使い勝手は感動すら覚えます。後ほどショートカットの節で、魔法の詳細とそのためのショートカットをご紹介します。Managerの起動がボタンとして用意されています。それぞれ先進的な機能を備えたボタンで、ショートカットも用意されていますが、直感的に扱えるようにボタンエリアが設けられているようです。機能の詳細を見ていきます。Chrome(以下Chrome)とのリアルタイム連動機能が備わっています。ボタン一つで簡易サーバーが起動し、Chromeとの連動が始まります。ファイルを保存すると自動でChromeがリロードされます。これはうれしいですね。簡易サーバー上でプレビューされるため、/images/などのルートパスで記述してもしっかりプレビューが可能です。Codeが立ち上げてくれますが、別のローカル開発環境をターゲットサーバーにすることも可能です。現在はChromeのみ対応していますが、今後すべてのメジャーブラウザに対応できるようにする予定とのことです。これほど手軽にライブプレビューが始まるというのは、Web制作者の強い味方になりそうです。Fontsは、世界中の商用Webフォントへのアクセスを提供するTypekitを使った無償のWebフォントサービスです。サイトにWebフォントを組み込むためのJavaScript/CSSのコードを提供してくれます。Typekitとの連携がエディタからシームレスに行えます。Fontsを利用することでローカルのフォントを選ぶような感覚で扱うことが可能になります。Fonts..という項目が表示されます。Fontsを選択するダイアログが現れます。Fontsの読み込み手順の解説が表示されます。Fonts用スクリプトの編集ダイアログが表示されます。いずれの設定パネルも別ウィンドウが立ち上がるわけでなく、すべてエディタ内で完結するようになっており、HTMLベースのアプリケーションらしさを感じます。ローカルのサクサクの操作性を持った、Webアプリケーションといった印象です。Inspectは、同Wi-Fiネットワーク上のデバイスと連動してリアルタイムプレビューを可能にするためのアプリケーションです。PC上でリロードすると即座にデバイスもリフレッシュされるため、モバイルサイトの開発にはもはやなくてはならないツールと言えます。無償のプランでは1デバイスのみ接続可能ですが、有料プランにすると複数のデバイスを同期することができるため、確認のためのコストが圧倒的に軽減されます。Inspectを連動させることが可能なため、迅速なモックアップ開発ツールとしてはもちろん、日常的な開発確認環境としても重宝します。Code上から、接続しているモバイルデバイスのリロード、フルスクリーンモードの切り替え、スクリーンショットの撮影管理が可能です。Code用のプラグインとしてBrackets用のものがそのままインストール可能です。ManagerにgithubのURLを貼り付け、インストールボタンを押せばすぐに拡張機能が使用可能になります。UIが分かりやすく、削除も簡単にでき、管理のしやすさを意識して作られています。Codeで快適にコーディングするためにいくつか抑えておくととても便利で感動するショートカットがあります。そんなに多くはないので、試しに使ってみることをおすすめします。Codeの最大の魅力という表現をすると大げさかもしれませんが、私はこれを初めてみた時にとても感動しました。HTMLファイルを開き、スタイルを確認したいタグにカーソルを合わせて、command+Eを押すと、タグのすぐ下に対応するCSSが表示されます。複数にスタイルが分けられている場合は、該当のファイル一覧のナビゲーションと共にスタイルが表示されます。ここでの編集は直接ファイルへ反映されます。「command+E」CSS編集と同じように、JavaScriptの関数宣言もまったく同じショートカットで同じようにインライン編集が可能です。呼び出している関数名の上にカーソルを合わせ、command+Eを押すと定義元が真下に展開されます。ビルトイン関数は表示されませんが、ソースの研究や、引き継いだソースコードの編集時に重宝します。色を指定している箇所で、command+Eを押すと、真下にカラーピッカーが現れます。Kulerとも連動し、コードを書きながらモックを作るワークフローを想起させてくれます。KulerはAdobeが提供するカラーパレットを共有するコミュニティサイトで、カラーパレットをストックしたりダウンロードして、いくつかのAdobeツールとも連携できるサービスです。プレビュー5の時点で日本語環境ではバグがあるため、うまく連動されていないようです。連動させる方法は下記で詳しく解説されています。「command+K」CSSプロパティの上でcommand+Kを押すことで、WebPlatform.orgのドキュメントを見ることができます。「command+shift+O」フォルダ内のファイルをインクリメンタルサーチで絞込みをしながら、クイックオープンできます。「command+T」ファイル内の関数をインクリメンタルサーチで絞込みをしながら、定義へ移動できます。Toolsにおける要素の検証に似た機能が備わっています。ライブプレビュー中にCSSファイルの定義にカーソルを合わせるとブラウザ内の該当箇所がハイライトされます。Codeではその手間が省け、かなりの開発効率向上につながります。projectをベースに作られています。ProjectはオープンソースのJavaScriptコードサポートエンジンです。CodeはRequireJSやjQueryの標準サポートやキャメルケースのサポートもサポートしています。地味に嬉しい機能が、画像パスを記述したコードの上にカーソルを合わせるだけでコード上に直接サムネールが表示される機能です。別のイメージが入っていないか分かりやすい上に、正しいパスが挿入されているかどうかを確認できるので、重宝する機能です。相対パスのコードヒント地味に嬉しいシリーズでもう一つ、相対パスの候補をコードヒントで出してくれる機能が便利です。CSSやJavaScriptで使うのと同じように、imgのソース指定やaタグのリンク指定などでcontrol+spaceを押すと、パスの一覧を候補で表示してくれます。Codeの機能を駆け足で見てきましたが、いかがでしたでしょうか。軽量にリッチな機能を備えているため、さまざまな活用シーンが想定されます。何よりも気軽にモバイルサイト開発向けの環境が整うことはAdobeのエディタならではの優位性だと感じます。Codeをより便利に使うために入れておきたい拡張機能を紹介します。キャンペーンサイト・コーポレートサイト・ECサイトを中心に手がける。土日はWEBの学校クスールで非常勤講師としてJavaScriptなどを教えています。圧縮・解凍UNIX基本講座@CodeZine『CodeZine(コードジン)』の公式アカウントです。【NEW】デブスト2019デブサミ2019福岡・関西デブサミ2019夏デブスト関西デブサミ2019×ログインEメールパスワード※旧SEメンバーシップ会員の方は、同じ登録情報(Eメール&パスワード)でログインいただけます。イラストの無断転載を禁じます。記載されているロゴ、システム名、製品名は各社及び商標権者の登録商標あるいは商標です。