はじめての「Pixate」

2013.07.17crossnodeCSS | iOS


iOSアプリの画面表示をCSSで制御できる「Pixate」を使ってみました。XcodeでiOSアプリを開発する際に使えるフレームワークで今なら無料ですので、MacユーザーはXcodeと合わせてお試しあれ。
※いつまで無料かは明らかにされていませんが、開発者の方が「オープンソースにする予定はないよ」とサポートページで回答していたのでそのうち有料に戻るかもしれません。

用意されているドキュメントや動画は全て英語なので、日本語ドキュメントがないとなかなか踏み出せないという人のためにも今回は公式サイトのチュートリアルに沿って進めていきたいと思います。

ちなみに、「Pixate」の発音は日本人的に言えば「ピクセイト」ですかね。ネイティブの方々はほぼ「ピクセイ」に近いくらい語尾は強く発音してません。古来より外来語をスペル度外視でおかしな発音つけるケースがみられるのでせめて大幅に外れない範囲の発音で認知されるといいですね。などと勝手に余計な心配してみました。

公式サイトはこちら
【Pixate】
http://www.pixate.com/

丁寧なチュートリアルページはこちら(英語)
【Getting Started】
http://cdn.pixate.com/docs/engine/ios/latest/Getting%20Started.html

「DOWNLOAD PIXATE」ボタンをクリックするとユーザ登録画面に進みます。無料ライセンスに登録して利用するというスタイルなので、手続きを進めてダウンロードしましょう。

ダウンロードしたファイルを展開すると下のようになりますので「Pixate」ディレクトリを好きな場所へドラッグします。これでもうローカルにデータがコピーされてPixateを使える状態になりました。

ではさっそくチュートリアルにしたがって使ってみましょう。

1. 新規プロジェクトを作成


まずはXcodeを起動して「File > New > Project」または「Shift + Command + N」で新規プロジェクトを作成します。今回は「Single View Application」を選択してあとは各種設定を入力して進めてください。

2. Pixateを取り込む



展開したPixateディレクトリ内のFramework内にある「PXEngine.framework」ディレクトリを、XcodeのProject Navigatorウインドウの「Frameworks」ディレクトリへドラッグして取り込みます。

3. Objective-C定義


プロジェクトファイルを選択してBuild Settingタグに切り替えます。
「Other Linker Flags」という項目を見つけて「-ObjC」と入力します。

4. PXEngineのインポート/ライセンスキーの記載


Project Navigatorウインドウのアプリ名のディレクトリ内にあるSupporting Filesディレクトリ内の「main.m」ファイルのimport文の先頭に

#import <PXEngine/PXEngine.h>

と書いてPixateをインポートします。
さらに、return文の上の行に

「[PXEngine licenseKey:@"License Serial Number" forUser:@"License Name"]

というかたちでライセンスキーとユーザー名を記載します。
ライセンスキーとユーザー名は登録完了メールを確認すれば分かります。

以上で下準備は完了です。
ではいよいよPixateを使ってみよう

1. xibファイルにボタンを設置


「◯◯ViewController.xib」ファイルを開いて、「Round Rect Button」を画面内にドラッグします。

2. IDの設定


メニューから「View > Utilities > Show Identity Inspector」を選んでIdentity Inspectorウインドウを表示します。(「User Defined Runtime Attributes」と書いてあるウインドウ)
画面上のボタンを選択した状態で、同ウインドウの「+」ボタンを押して設定を追加します。
Typeを「String」に切り替えて、Key Pathは「styleId」と入力します。これでValueに任意の文字列を入力すればCSSのID名として使うことができるようになります。

3. CSSファイルの作成


「Command + N」で新規ファイル作成の「Empty」を選びます。Pixateで使用するCSSファイル名として既定されている「default.css」として保存します。

4. CSSの記述


ボタンに「button1」というID名をつけてあるので、下記のようにCSSを記述してボタンの色を黄色にしてみましょう。

#button1 {
    background-color: yellow;
}

5. 実行


「Command + R」またはRunボタンで実行します。
シミュレーターの画面中央に黄色いボタンが表示されましたね。

使ってみて

下記に挙げた参考サイトのリファレンスページで要素名とプロパティを確認しながら色々いじってみましたが、適宜ID名とClass名を設定して制御したほうが良さそうですね。
それと、リファレンスページに載っているプロパティ等でも簡単に試した範囲では動作しないものもありました。他の方も言っていましたが指定の仕方が悪いのかバージョンの問題等なのかもっと検証してみないとなんともいえない感じでした。

参考サイト

まずはこの動画を見ながら一緒に操作していけば使い方が分かると思います。(英語)
【Pixate 0.1.0 Getting Started】
http://www.youtube.com/watch?v=jXHHfPxP98

Pixateのコファウンダーであるポールのチャンネル。Pixate関連の動画が充実してます。(もちろん全て英語)
【Paul Colton – YouTube】
http://www.youtube.com/user/PixateInc/videos?shelf_index=0&sort=dd&view=0&tag_id=

要素名とプロパティの一覧
【Pixate Engine for iOS Styling Reference】
http://cdn.pixate.com/docs/engine/ios/latest/Pixate%20Engine%20for%20iOS%20Styling%20Reference.html


ページトップへ