イトウ先生のTipsnote AfterEffects CC 2014・HTML5パネルSDK(その1)

イマジカデジタルスケープ 短期集中クリエイティブ講座

イマジカデジタルスケープ・AfterEffects・Photoshop・HTML・CSS・JavaScript・1日トレーニング

Web・動画・映像・ゲーム・DTP・CG・Adobe Creative Cloud・キャリア・就活に

 
 
1 11月・12月・日曜開講のお知らせ
 

お客様index

企業・自治体のお客様に 業務効率化、コスト削減に
クリ博登録者・学生の方に 割引トレーニングはコチラ


イトウ先生のTipsnote


イトウ先生のTipsnote:目次

【 AfterEffects CC 2014の新機能:HTML5パネルSDK(その1)】 

今週は、AfterEffects CC 2014の新機能の中から、HTML5パネル開発キット(After Effecs CC 2014 Panel SDK)(その1)についてご紹介します。
AfterEffects CC 2014では、HTML5が解釈できるパネルを読み込んで、AfterEffects上で使用するためのCEP(Common Extensibility Platform)環境が搭載されました。これらのパネルを使用すると、特定のパネル内で、HTML、CSS、JavaScriptを使用できることに加え、AfterEffectsでのコンポジション作成や、レイヤーの作成など、AfterEffectsでのスクリプティングオブジェクトモデル全体にアクセスできるようになります。
なお、この仕組みをAfterEffects CC 2014で使用するには、【Adobe_After_Effects_CC_2014_Panel_SDK】という、HTML5パネル開発キット(After Effecs CC 2014 Panel SDK)のダウンロード及びインストール、及びAfterEffectsのプリファレンス設定を、デバック状態にしておく必要があります。
今週のブログでは、これらのHTML5パネル開発キットを使えるようにするまでのセッティングについてご紹介し、次回のブログでは、このキットの中身を少し掘り下げてご紹介していきます。

Aecc_html001

機能拡張の搭載(CC 2014)

AfterEffects CC 2014から、ウインドウメニューの中に機能拡張メニューが追加され、デフォルトの拡張機能として、AI・PS・ID等でおなじみのAdobe Kulerが搭載されました。

Aecc_html003

Aecc_html002

AfterEffects CC 2014に、HTML5パネル開発キットを入れることによって、この機能拡張メニューの中に新たなメニューが構築され、そのメニューからアクセスすることで表示されるパネルの中で、HTML、CSS、JavaScriptが使用できるようになります。

ダウンロード

まずは、この拡張キットをダウンロードする必要がありますが、ダウンロード先は以下のサイトになります。

After Effecs CC 2014 Panel SDK
http://www.adobe.com/devnet/aftereffects/panelsdk/cc2014.html

Aecc_html004

ZIPファイルになっているため、ページのトップにあるリンクからダウンロード及び解凍します。 解凍すると、以下のようにPDFのガイドと、Examplesというフォルダに解凍されます。 このExamplesというフォルダの中に、Barebonesフォルダ、Generate complex compフォルダ、iframe Sampleフォルダ、Simple scriptフォルダの4つのフォルダが入っているため、この4つのフォルダを所定の箇所にコピーし、少々プリファレンスの設定を変更することで、この開発キットが使用できるようになります。

Aecc_html005

使い方(Macintosh)

まずは、AfterEffects CC 2014をシャットダウンした状態から始めます。以下の手順の後、AfterEffects CC 2014を起動すると、機能拡張が使用できるようになっています。

手順1:解凍後、Examplesというフォルダの中に入っている、Barebonesフォルダ、Generate complex compフォルダ、iframe Sampleフォルダ、Simple scriptフォルダの4つのフォルダを、以下の場所にコピーします。

Macintosh HD>ライブラリ>Application Support>Adobe>CEP>extensionsフォルダの中にコピー

Aecc_html010

なお、CEPフォルダの中にExamplesというフォルダごとコピーすると機能しませんので、Examplesフォルダの中にある4つのフォルダを個々に入れる必要があります。
また、コピー先のファイルパスの中に「CEP」というフォルダ(ディレクトリ)が無い場合もあります。InDesignを使用している方は、InDesignの機能拡張でこのフォルダを使用するため、予めこのフォルダが出来上がっている方もいるかと思いますが、このCEPというフォルダが無い場合は、CEPという名前でフォルダを作成し、そのフォルダの中にさらにextensionsという名前でフォルダを作成し、その中に4つのフォルダをコピーします。

手順2:次に、Macintosh HD>ライブラリ>Preferenceの中に、com.adobe.CSXS.4.plistというファイルがあるため、このファイルを同じPreferenceフォルダ内に複製し、ファイル名を「com.adobe.CSXS.5.plist」に書き換えます。

Aecc_html007

手順3:次に、ターミナルを起動し、以下のコマンドを入力し、retuenキーをタイプします(以下のソースをターミナルにコピーペーストしてOKです)。

defaults write com.adobe.CSXS.5.plist PlayerDebugMode 1

プロパティリストのデバックモードを1にし、デバックモードで実行できるようにする、というコマンドです。retuenキーをタイプしても、ターミナルウインドウ内は何も表示されませんが、入力後、retuenキーを押した後、ターミナルは終了してかまいません。

Aecc_html009

以上で終了です。AfterEffects CC 2014を起動し、ウインドウメニュー>機能拡張の中に、CEPフォルダにコピーしたものが表示されていればOKです。

Aecc_html011

使い方(Windows)

Windowsの場合も、基本的にMacintoshと同様の手順です。まずは、4つのフォルダを以下の場所にコピーします。

C>Users>(ユーザー名)>AppData>Roaming>CEP>extensions(windows)

CEPフォルダ及びextensionsフォルダが無い場合には、Macintosh同様に自作し、その中に入れる必要があります。
次に、レジストリエディタを起動します。レジストリエディタの起動は、スタートメニューから「ファイル名を指定して実行」または「プログラムとファイルの検索」などで、「regedit」と入力することで起動します。
起動後、HKEY_CURRENT_USER>Software>Adobe>CSXS.5を選択し、右側のウインドウ内で右クリックして、新規>文字列値を選択、名前をPlayerDebugModeに設定します。そのPlayerDebugModeの値のデータを1に変更します。

Aecc_html012

変更後、レジストリエディタを終了し、AfterEffectsを起動し、機能拡張にメニューが表示されていればOKです。

iframe sample

それでは、どのような機能拡張があるのか、今週はiframe sampleをご紹介します。

Aecc_html012-1

機能拡張に追加された、iframe sampleを選択すると、iframe sampleパネルが表示されます。ここで表示されるパネルが、いわゆるブラウザと同じ役割をしており、iframe sampleパネルでは、iframe要素で指定したページを表示する、という機能を持っています。
パネル内に表示されているドキュメントはHTML5ベースで作られており、インストールしたてのデフォルトでは、AfterEffectsのDeveloperCenterにつながるようになっています。

Aecc_html013

もちろん、ソースを書き換えると、以下のようになります。

Aecc_html014

そもそもこのパネルは、Google Chromeの源流となる、Chromium(クロミウム)によるオープンソースWebブラウザブロジェクトでできているようで、Google ChromeはChromiumのソースを抜粋して作られたブラウザであることから、AfterEffectsでのこのパネルは、Google Chromeでできることはすべて行え、さらに拡張することも可能にもなっているようです。

今後はこのパネルを使用した、様々なAfterEffects上での開発が進むのではないかと考えられますね。
次回のブログでは、この機能拡張で搭載されたものを掘り下げてご紹介していきます。

関連講座

↑ページTOPへ

| カテゴリ | | Web | DTP・デザイン | CG・動画・映像 | キャリア・就活 |
| お客様 Index | | 企業・自治体のお客様に | 学生の方に |
| 目的別・状況別 Index | | Webデザイン入門セミナー | 映像編集入門セミナー | DTPデザイン入門セミナー | 魅力的なポートフォリオ作成 |
| Adobe CCを覚えたい方に | | Photoshop CC 2015の使い方・基本 | Illustrator CC 2015使い方・基本 |
| 画像をきれいに編集する方法 | 読みやすい文字の組み方 |
| HTML / XHTML / CSSの基礎知識 | HTML5 / CSS3の基礎知識 | JavaScriptの基礎知識 | jQuary・jQueryMobileの基礎知識 |
| Dreamweaver CC 2015の使い方・基本 | InDesign CCの使い方・基本 |
| AfterEffects CCの使い方・基本 | AfterEffects CC 2014の使い方・実践 |
| Premiere Pro CC 2014の使い方・基本 |
| Webの基本をマスターしている方 | | 棚橋弘季氏の直伝、ユーザー中心のWebサイト設計 | 益子貴寛氏が伝授するCSS実践テクニック |
| 矢野りんさんに学ぶ、”使える”デザイン基礎知識 | こもり氏のHTML+CSS基礎 | 平塚氏のマーケティング基礎 |
| 坂本氏のIA入門 | Webに関わるすべての人の「Webリテラシー」講座 | 神森勉氏に学ぶコーディング講座 |
| 森川眞行氏に学ぶ、大規模サイトの構築・運用マネジメント |
| 就職・転職・就活中の方へ | | 模擬面接セミナー(個別FB付) | エントリーシートブラッシュアップセミナー |
| 面接・職場で使えるビジネスマナー研修 | 職務経歴書添削セミナー |