※この記事は「古籏一浩のJavaScriptラボ」の第13回です。過去の記事も合わせてご覧ください。
Mac OS Xに付属するビジュアルプログラミングツール「Quartz Composer」には数多くのプログラムの部品が用意されており、適当にマウスで部品をつなぐだけで、豪華なモーショングラフィックスが作れます。前回の記事（関連記事）で紹介したように、Quartz Composer上でのJavaScriptは補助的な役割を果たすだけの地味な存在です。
しかし、Quartz Composerで条件に応じて処理を細かく制御するプログラムを作るには、JavaScriptを使う必要があります。今回はそんなJavaScriptの特徴を生かして、時間の秒数に合わせて処理を変えるスクリプトを2つ作成します。1つは、前回作成したリアルタイムで時刻を表示するサンプルを改造し、背景色を刻々と変更するプログラムです。もう1つは、連載第11回で作成したRSSリーダーに、JavaScriptで表示するフィードを時間経過で自動変更する機能を追加します。
背景が変わるリアルタイムクロックを作ろう
はじめに、前回作った「リアルタイムクロック」の背景色を変更するプログラムを作成しましょう。
リアルタイムクロックの実行画面（Viewer）を確認すると、時刻を示す文字の背景にはグレーと白の市松模様が敷き詰められています。この市松模様の部分は、Photoshopなどの画面と同じく、実際には透明であることを表しています。
前回作成した時計。時刻が表示されている部分は白と黒色に、それ以外は透明になっています
まずはこの透明部分の背景色を好みの色に変更しましょう。背景色を指定するには、指定した背景色で画面を塗りつぶす部品「Clear」を新たに追加します。Clearをドラッグ＆ドロップでEditor画面上に配置してください。
Clearを選択しEditor画面にドラッグドロップします
すると、Viewer画面が真っ黒に塗りつぶされ、表示されていた時刻の文字が見えなくなりました。
Viewerが真っ黒になってしまう
Quartz Composerには、Photoshopなどと同様に「レイヤー」の概念があり、配置した部品はそれぞれ別々のレイヤー上に描画されます。Viewerが真っ黒になって時刻が見えなくなったのは、「時刻表示」のレイヤー上に「背景色で全面表示」の部品が重なったためです。レイヤーは描画部品の右上にある番号が大きい順に上から重なっています。
先ほどの画面を確認すると、「Billboard」部品が「1」、「Clear」部品が「2」になっているので、この順序を逆にすれば時刻が見えるようになるはずです。レイヤーの重ね順は、レイヤー番号の右側にある▲をクリックして表示されるメニューで変更します。たとえばClear部品のレイヤー番号を「レイヤー1」にすると、Clearが1、Billboardが2に変わります。
重なり順序を指定します
Viewerで確認すると今度は期待通り、背景色の上に時刻が表示されました。
今度は背景色の上に時刻がリアルタイムで表示されます
背景色が黒色だと地味なので、次は好みの色を付けてみましょう。最終的にはJavaScriptで色を指定しますが、その前に手動で設定する方法を紹介します。Clearの部品に表示されている「●Clear Color」の●をダブルクリックしてください。すると、次のようなカラーピッカーが表示されます。
カラーピッカーが表示されます
カラーピッカーで色を選択し、不透明度（Opacity）をスライダーで調整したら「Done」ボタンをクリックします。
不透明度（Opacity）も忘れずに指定しないと色が反映されません
Viewerで実行結果を確認すると、カラーピッカーで指定した背景色の上に、時刻が表示されるはずです。
背景色の上に時刻が表示されます
ただ、この状態だと文字のまわりだけが黒いマットになっていて、あまり綺麗ではありません。黒い部分を消して背景と合成するには、Billboard部品の「●Blending」の●をダブルクリックし、ポップアップメニューから「Over」を選択します。このOverは透明情報であるαチャンネルも考慮して描画します。
Overを選択します
背景色になじんで表示されます
手動で色を設定する手順は以上のとおりです。次は、JavaScriptで色を指定してみましょう。
