こんにちは、イマジカデジタルスケープの伊藤和博です。

今回は、先日Dreamweaver Meetup Round 02でも紹介された、Adobe Edge (Preview版)での、実際のファイル作成についてご紹介します。


Adobe Edge を使えば、HTML5、JQuery、CSS3などをベースとしたアニメーションやインタラクションを簡単に作成することができます。自分でスクリプトを書かなくても、新規ファイルを作成して矩形ツールや角丸長方形ツールなどでデザインし、テキストを載せてアニメーションを作成したり、既存のHTMLファイルを素材に、JQueryでアニメーションをつけたり、ということが可能になります。

全体のインターフェイスは、Adobe Production Premium製品群のインターフェイスを使用しており、タイムラインを使って作業を進めるところは、AEやPrなどの操作感そのものです。

また、DWやFLにあるプロパティパネルで設定を行い、FWのレイヤーパネルに近い、エレメントパネルで、idやクラス、divなどの各構造を確認しながら作業を進めることができるようになっています。

Adobe Edgeは、2010年の秋に、Adobe MAXでプロトタイプが紹介されましたが、いよいよプレビュー版の形になってでてきました。



さっそくインストール


まずは、以下のページにアクセスし、【Download Now】からダウンロードしましょう。

・Adobe Edgeのダウンロード(Adobe Labs/英語)
http://labs.adobe.com/technologies/edge/


インストールはいたって簡単。3ステップで終了です。ナビゲーションにあわせてOKで進めます。




新規ドキュメントの作成


Adobe Edgeは、既存のHTMLファイルにJQueryで振る舞いをつけることと、新規でドキュメントを作成する、ということが可能ですが、今回は、新規ドキュメントを作成し、タイムラインで編集した後、HTML5で書き出す、というところまでをご紹介します。

まず、起動すると、AE・Prではおなじみの、真っ黒い画面が登場します。このインターフェイスは、慣れていないと何からどのように手をつけていいかよくわからない、ということもあるかもしれませんが、AEやPrを使ったことがあればおなじみのインターフェイスです。


では早速、アプリアイコンをドッグに入れて、起動しましょう。初回の起動時には、以下のようにプレリリース期間の終了を促すアラートを出がでます。日数から計算すると、このプレリリース版は今年の12月31日まで、ということになりますね。



最初の起動時には少々時間がかかりますが、2回目以降の起動はむちゃくちゃ早いですよ。



起動後は、GetStarted...というパネルにある「Create New」をクリックするか、Fileメニュー→NewでOKです。

この新規ドキュメントとは、「HTML5」ファイルになります。



ドキュメントパネル(というのかわかりませんが・・)の上には、プロパティパネルで設定してあるサイズの「ステージ」が開きます。FLでおなじみのステージです。ステージサイズやカラー等はプロパティパネルで変更可能です。




ページの作成


ツールパネルには、Rectangle Tool(長方形ツール)とRounded Rectangle Tool(角丸長方形ツール)が用意されています。Rounded Rectangle ToolなんかはCSS3ですね。これらのツールは、AIやFWで作図する感覚と同じで、ステージ上でドラッグすると矩形ができ、プロパティパネルでこの矩形のプロパティを設定します。



なお、FWを使ったことがある方はお分かりかもしれませんが、作図したこの矩形はFWの長方形ツールと同様、divタグの領域として定義されます。タイムラインパネル上では長方形の位置とwidth、heightが、エレメントパネル上ではdivの階層を確認することが可能です。




画像のインポート


JPEG、GIF、PNG、SVGはFileメニュー→Import…で取り込むことが可能です。SWFやFLV、MP4などのビデオファイルは取り込めないようですが、既存のHTMLファイルにすでにSWFやFLVが入っているページは、Edgeでも見ることが可能です(SWFはアニメーションしますが、FLVは再生されず表示だけ可能です)。




タイムラインの操作


このEdgeのタイムラインパネルは、AEでの操作に非常によく似ています。AEは、動作の最初にキーフレームを設定し、時間軸インジケーターを動作完了時にあわせて、最後の動作を設定で自動キーフレーム、という方法ですが、EdgeはAEでいうところの時間軸インジケーターのようなものに、トグルマークという、動作の終了を設定するインジケーターがセットでついています。

Edgeのタイムラインは以下のように行います。


1:時間軸インジケーターを動作の最初にあわせる。
2:ステージ上にあるdiv枠を「最終的にこうなっていたい」という状態にあわせておく。
3:動作にかかる時間の箇所までトグルマークを移動する。
4:div枠を動かす。




動作の確認


実際にどのような動きになるのかは、タイムライン上にある再生ボタンをクリックするとEdge上で確認でき、ブラウザ上で確認する場合は、Fileメニュー→Preview In Browser(ショートカットはcommand【Ctrl】+リターン)で確認することが可能です。



保存


保存はFileメニュー→Saveで、htmlファイルとhtmファイルが選択できるようになっています。できあがったファイルのソースを確認すると、JQueryおよびCSSでデザインされていることがわかると思います。



このアプリケーションは?


JQueryを使った動作ですので、iPadなどでの動作も期待できることと、操作感としてはAE、FL、FWなどを使っていると、直感的にすぐ使えるのではないか?と思います。

現時点ではPreview版ですので、今後どのようになるかわかりませんが、現時点ではソースをガリガリ編集するようなソフトではなく、JQueryでの振る舞いを設定する、という部分に限定されているため、役割が明確で使いやすい、と思います。

みなさんも、ぜひ使ってみてください。プレビュー版は、12月31日までのようですよ。




おススメ講座のご紹介!


◎HTML・XHTML・CSSの基礎知識
◎Flash Professional CS5の使い方・基本トレーニング
◎Fireworks CS5の使い方・基本トレーニング
◎AfterEffects CS5の使い方・基本トレーニング



イトウ先生が、Twitterを始めました!
みなさんもぜひ、フォローしてくださいね!

http://twitter.com/itoh_sensei




■■イトウ先生のTipsNote(実践・新機能コンテンツ)アーカイブ■■


基本トレーニングの受講後に、さらに学習しておきたい内容やTips、新機能を、隔週1回(月2回)で公開しています。


●Macintosh基本操作編(意外と知らない操作も多い!?)
○入力モードや変換のショートカット
○デスクトップで使えるショートカット
○階層やファイルパスの把握に便利な機能

●Illustrator(AI)
○アウトライン化と孤立点の削除について
○データを軽く作る方法について
○シンボルの親子関係について・その1
○編集モード
○シンボルの親子関係について・その2
○カラーパネルの「使えるショートカット」
○カラー一括変換のグローバルスウォッチとは
○配置した画像のすばやい編集方法
○CS5新機能01:すべてのアートボードにペースト
○CS5新機能02:内側描画と背面描画
○CS5新機能03:Web・インタラクション用のデザイン
○CS5新機能04:遠近描画
○CS5新機能05:線パネルと線幅ツール

●Photoshop(PS)
○消しゴムツールの活用
○ななめの画像をまっすぐにする方法
○自然な合成テクニック・角版
○自然な合成テクニック・切り抜き画像
○画像合成後の便利なショートカット
○調整レイヤー
○レイヤーパネルの不透明度と塗りについて
○不透明度のショートカット
○CS5新機能01:「コンテンツに応じる」機能
○CS5新機能02:絵筆ブラシと混合ブラシ
○CS5新機能03:人の記憶に近い画像・HDRについて
○CS5新機能04:パペットワープ
○CS5新機能05:3Dオブジェクトとアニメーション

●FLASH(FL)
○Illustratorだけでできる、Flashアニメ
○CS5新機能01:IKボーンスプリングでバネアニメ
○CS5新機能02:コードスニペットパネルで簡単ActionScript3.0
○CS5新機能03:パターン描画ツール

●InDesign(ID)
○CS5新機能01:マルチステートを使った、IDからFlashアニメの作り方
○CS5新機能02:アニメーションパネルとタイミングパネルを使った、IDのモーションプリセット
○CS5新機能03:キャプションの自動作成機能
○CS5新機能04:オブジェクトの間隔と配置
○CS5新機能05:画像一括貼り替え

●Dreamweaver(DW)
○CS5新機能01:新しいサイト定義と、CSSスターターレイアウト
○CS5新機能02:HTML5 Pack
○CS5新機能03:スマートフォン検証・CSS3のメディアクエリー
○CS5新機能04:ブラウザ検証便利ツール・Adobe BrowserLabについて

●AfterEffects(AE)
○CS5新機能01:ロトブラシ
○CS5新機能02:新しい便利なショートカット
○CS5 パペットアニメーションと、時間反転キーフレーム
○CS5 ビデオや画像の型抜きについて「トラックマットとステンシルアルファ」
○CS5 動画の動きを捕らえて、他のレイヤーに適用する「モーショントラック」

●FireWorks(FW)
○CS5新機能01:Device Centralと連携した、スマートフォンのプロトタイプ
○CS5新機能02:divのタイル背景の強化

●その他
○Adobe Edge(Preview版)