このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ第13回

Quartz Composer×JavaScriptでRSSリーダーを作ろう

2009年09月29日 15時01分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷

※この記事は「古籏一浩のJavaScriptラボ」の第13回です。過去の記事も合わせてご覧ください。

Quartz Composer

 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画面にドラッグドロップします
Clearを選択しEditor画面にドラッグドロップします

 すると、Viewer画面が真っ黒に塗りつぶされ、表示されていた時刻の文字が見えなくなりました。

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を選択します
Overを選択します
背景色になじんで表示されます
背景色になじんで表示されます

 手動で色を設定する手順は以上のとおりです。次は、JavaScriptで色を指定してみましょう。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く