（この記事は、アドビ システムズ 株式会社発行の「Adobe Developer Connection」から許可を得て転載したものです）
CSS FilterLab
CSS FilterLabはブラウザーベースのツールで、CSSフィルターを使用した再生、CSSフィルターの調整、リアルタイムでのエフェクトの確認を行うことができます（図1を参照）。このツールを使用して、複数のフィルターを組み合わせたり、アニメーション化したりして、高度な映画のようなエフェクトを作成できます。
この記事の執筆時点では、これは本当に最先端のテクノロジーであるため、サポートされているのは数種類のブラウザーのみです。したがって、使用しているブラウザーでCSS FilterLabを開いたときに、最適なエクスペリエンスを実現するための手順が表示されます。アドビでは、この手順をできるだけ簡単でわかりやすいものにすることに注意を払いました。
最初の手順
CSS FilterLabの機能を試してみるのは簡単です。ブラウザーでCSS FilterLabを開いたら、Add Filter（フィルターを追加）メニューからフィルターを追加できるようになります。
組み込みフィルターまたはカスタムフィルターを適用することを選択できます。
幸い、CSS FilterLabには、カスタムフィルターとその基になるシェーダーの優れた例がいくつかバンドルされています。このような例の1つがFoldです。この例は、HTML要素に折りたたまれた紙のような3Dの外観を提供します（図2を参照）。
- 組み込みフィルターは、デフォルトでブラウザーに付属しているフィルターです。グレースケール、セピア、彩度、コントラストなどの基本的なカラーエフェクトを実現します。
- カスタムフィルターは、まったく新しいレベルのエフェクトを提供します。作成済みのいくつかの例には、焼き込み、カール、フォールド、ディゾルブ、エクスプロード、その他多くのエフェクトが含まれています。カスタムフィルターはブラウザーには付属していません。開発者自身が作成するものです。カスタムフィルターでは、カラーやジオメトリを細かく制御できるようにする、シェーダーと呼ばれる小さなプログラムが使用されます。シェーダーはハードウェアアクセラレーションを利用し、一般的にゲームのビジュアルエフェクトで使用されます。CSS開発者にとって、シェーダーはなじみが薄いものであるかもしれません。また、シェーダーを使用するには、一般的に数学を十分に理解している必要があります。
フィルターを適用すると、そのパラメーターコントロールが表示されます。これによって、非常に簡単にフィルターを微調整して、探し求めているエフェクトを得ることができます。さらに、複数の組み込みフィルターやカスタムフィルターを組み合わせて適用し、すばらしい結果を実現できます。
この結果に満足したら、変更内容をプリセットとして保存します。これにより、同じ設定を後で再利用できます。
エフェクトのアニメート
エフェクトは単に発生するだけではありません。エフェクトは発生して、ある状態から別の状態に遷移します。これによってエフェクトに豊かな表現力が生まれます。
CSS FilterLabには、基本的なアニメーションコントロールのセットが用意されており、フィルターのパラメーター値の間で滑らかなトランジションを作成できます。
タイムラインとコントロールは画面の下部にあります。タイムラインの任意の位置をクリックすると、アクティブなフィルターのパラメーターが変更されます。これにより、タイムライン上で新しいキーフレームが作成されます。再生ボタンをクリックすると、アニメーション全体が再生されます（図3を参照）。
キーフレームは、タイムライン上で追加、ドラッグ、削除することができ、アニメーションを思ったとおりに微調整できます。
アニメーションのデュレーションは、タイムラインの右側にある入力から変更できます。デュレーションの設定は秒単位です。
CSS FilterLabで折りたたみのアニメーションを作成する簡単な手順。（0:19）
コードの構文
CSS FilterLabを使用すると、高度なビジュアルエフェクトを作成できます。これがプレーンなCSS（最先端のCSSではありますが）によって実現されていることを理解しておく必要があります。
アドビでは、パートナー様とも協力しながら、このテクノロジーをオープンなWebの世界にもたらすことができるように取り組んできました。テクノロジーをツールで覆い隠そうとしているわけではありません。
CSS FilterLabでは、アニメーションのエフェクトを実現するために使用されているコードをそのまま表示します。タイムラインのすぐ上にある、CSS SyntaxパネルとCSS Animation Syntaxパネルには、開発者が期待しているものが表示されます。このコードを独自のプロジェクトにコピーすることによって、エフェクトを利用できます。CSS Filtersはブラウザーで利用できるようになったばかりであることを忘れないでください。
新しいカスタムフィルターの作成
ここまでくると対応が難しくなってきます。しかしながら、複雑な数学演算とシェーダーの作成に特に関心を持っている場合、CSS FilterLabに本格的なシェーダーエディターが含まれているので安心です（図4を参照）。
新しいカスタムフィルターを作成するには、最初にAdd Filterメニューに表示されるカスタムフィルターから既存のカスタムフィルターをフォークします。フォークしたフィルターは、メニューの「Forked」タブに表示されます。カスタマイズアイコンをクリックすると、カスタムフィルターのコアが表示されます。
これで、使用するパラメーター、パラメーターの型およびフラグメントシェーダーや頂点シェーダーのソースを細かく制御できます。変更内容は、ブラウザー内で自動的に保存され、ローカルに格納されます。
シェーダーはOpenGLシェーディング言語（GLSL）で記述されています。シェーダーの作成に関するトピックはこの概要では触れませんが、詳しくはGLSLのドキュメントを参照してください。シェーダーを最大限に活用するには、この言語の型、メソッドおよび機能に目を通しておいてください。
エラーパネルでは、シェーダーコードに関する問題点がリアルタイムにハイライト表示されます。開発とプレビューを同じコンテキストで行うことができるので、これは非常に便利です。また、シェーダーコードの結果はリアルタイムに表示されます。
カスタムフィルターの共有と読み込み
作成したカスタムフィルターを共有するには、CSS FilterLabからGitHubにgistとしてパブリッシュします。この操作を行うためのコントロールは、シェーダーエディターパネルにあります。
パブリッシュすると、リンクを他のユーザーと共有できます。他のユーザーは共有されたカスタムフィルターをCSS FilterLabで読み込んで、独自のコンテンツで使用できます。カスタムフィルターを読み込むには、Add Filter（フィルターを追加）メニューで「Import（読み込み）」を選択し、gistのURLを指定します。
オープンソース
CSS FilterLabのコードはすべて、Apache License v2の下で、自由にGitHubで入手できます。アドビでは、このプロジェクトに対する皆様からのご意見、ご感想、ご提案をお待ちしております。
CSS FilterLabで配布したいシェーダーを作成する場合は、ぜひこのプロジェクトに投稿してください。コードをチェックインする前に、GitHubで説明されている投稿のガイドラインをよくお読みください。
次のステップ
CSSフィルターおよびカスタムフィルターは、Webコンテンツに充実した創造的なエフェクトをもたらします。CSS FilterLabは、できるようになることのヒントを示しているに過ぎません。実際の価値は開発者の手と、このテクノロジーを使って作成するものにあります。
フィルター、ジオメトリの操作、映画のようなエフェクトが作品にもたらすインタラクションや表現力の新しい可能性を考えてください。このことが、大画面、モバイルデバイス、その他の多くの新しいコンテキストにおいて、コンテンツにどのような意味を持つかを考えてみてください。
CSS FilterLabを使用して最新のグラフィカルなWebの機能について学習し、ご意見やご感想をお寄せください。CSS FilterLabを使って作成したものについても、ぜひお知らせください。
アドビのAlan Greenblatt氏が、短いCSS FilterLabでの手順のビデオを作成しました。詳しく学習したい場合は、その第一歩としてこのビデオが役立ちます。
Web環境の向上に対するアドビの取り組みについて詳しくは、html.adobe.comを参照してください。
