読者です 読者をやめる 読者になる 読者になる

Septeni Engineer's Blog

セプテーニエンジニアが綴る技術ブログ

QuartzComposerの導入 + qc-mobile

Quartz Composer

こんにちは、@joytomoです。

Xcode5はもう試しましたか?
Xcode5をインストールしたら古いバージョンのQuartzComposerが消えました。
容赦ないですね。

というわけで、Xcode5におけるQuartzComposerのインストール方法(Xcode4でも方法同じですが...)と動作確認までを簡単にご紹介します。

それに加えて、kluiversさんが制作した、qtzファイルをiOSで実行することのできるフレームワークであるqc-mobileを試してみました。

QuartzComposerのインストール

QuartzComposerは、Xcode3まではディフォルトで付属してきました。
しかしXcode4以降では、Xcode4、5では、Xcode本体とは別途で、QuartzComposerを以下のようにインストールする必要があります。

まず、dmgファイルをこちらからダウンロードしてください。
f:id:septeni-original:20150722145631p:plain
下にスクロールしていくとGraphics Tools for Xcode というものがあります。

これをクリックするとダウンロードボタンが現れる。

ダウンロードしたらそのファイルを適当なところで開いてください。
f:id:septeni-original:20150722145701p:plain

右の辺りにQuartzComposerがありますね。
これを適当なところ(/Applicationsなど)にドラッグすれば完了です。

簡単な映像を作ってみる

初めてQuartz Composerを触る方は、
さっそくQuartzComposerを使って何か作成してみましょう。
まず、先程インストールしたQuartzComposerを開く。

最初は何もウインドウが開いたり。

f:id:septeni-original:20150722145730p:plain

画面上部のメニューバーから、「File 」-> 「New from Template」 をクリック。

f:id:septeni-original:20150722145749p:plain

左上の「Patch LIberary」を開き、
「Sprite」「Interpolation」「Image」辺りをエディタ上にドラッグ&ドロップしましょう。
するとパッチがエディタ上に現れるので、両端の丸を適当にドラッグ&ドロップして紐付け。

パッチにカーソルを合わせてcommand + iすると、各パッチのパラメータの編集画面が現れる。
適当に編集していればなんとなく分かります。それがQuartzComposerのすごいところ。
f:id:septeni-original:20150722145800p:plain

ビューワーに作成した映像が出てきます。

qc-mobile

ではkluiversさんが制作したフレームワーク、qc-mobileを試してみましょう。
ソースはこちら
とはいっても、zip downloadなどですると別途ライブラリのダウンロードが必要だったりします。
ですので、以下の手順で行いましょう。まず、ターミナルを開いて/Desktopなど適当な場所に移動し、

$ git clone https://github.com/kluivers/qc-mobile.git

$ cd qc-mobile

$ git submodule init
$ git submodule update


するとなにやらダラダラーっと文章が出てきて、準備完了。

Finderからqc-mobileを開き、Demos/QCDemosと開いていき、QCDemos.xcodeprojファイルをXcodeで開きます。

開いてそのまま、左上の▷ボタンを押してRun実行。シミュレータで何かでます。

なにやら出てきたものの一番上をタップしてみると...

f:id:septeni-original:20150722150113p:plain

なにやらいろいろサンプルが入っているので試してみてください。

Demos/QCDemos/QCDemos/Compotions/内にqtzファイルを置き、
XcodeでもSupoting FIles/Compotions内に追加すれば、先程作った映像もiOSで実行できます!これはすごい。

f:id:septeni-original:20150722145843p:plain

qc-mobileは今のところ、qc-mobile/Source/Pathes内にあるパッチしか対応してない模様です。

今後がたのしみですね。