無料になったのでiPhoneのUIをCSSでデザインできるPixate使ってみた

題名の通りiPhoneのUIをCSSでデザインできるPixateが7月1日より無料になったのでどんなものかと思い使ってみました。

一言でいうと『これはすごい』につきますね。

導入

Pixateのホームページの右上のダウンロードに行くと名前、メールアドレス、電話番号(オプション)、会社名(オプション)、プレミアムサポートを受けるかのチェック、アップデートやニュースをメールで受け取るかのチェック、住所を入力するだけの簡単な登録を行います。

上の登録を済ませると登録したメールアドレスにライセンス情報とダウンロードリンクが付いたメールが届きますのでダウンロードします。

 ダウンロードしたファイルを解凍してどこか自分で決めている位置などに置きましょう。

「Use Automatic Reference Counting」にチェックを入れたプロジェクトを新しく作ります。(すでに存在するプロジェクトに使う場合はARCで作ってあるとFrameworkの追加だけで大丈夫なはず)

先ほどダウンロードしたPixateの「Framework/PXEngine.framework」を追加します。

Build Settingsの「Other Linker Flags」に『-ObjC』を追加し、「main.m」にPixateEngineのライセンス情報を設定するコードを追加します。

 main.m

「default.css」というCSSファイルをプロジェクトに追加します。

これでとりあえずの導入設定は完了です。

実装

準備が終わったので実装です。

とりあえずはUIButtonとUITextFieldのみのプロジェクトを用意しました。

それぞれの要素に独自プロパティ(User Defined Runtime Attributesから)のstyleIdもしくはstyleClassを設定します。

ここではviewに「styleClass=gbViewClass」、UITextFieldに「styleId=fieldId」、ボタン1というUIButtonに「styleId=buttonId、styleClass=buttonClass」、ボタン2には「styleClass=buttonClass」を設定しています。

ボタン3には設定していません。

とりあえずこの状態で実行したらこんな感じなります。

面白みもない画面ができあがりました。

この状態にdefault.cssに書き込んでいきます。

これで実行すると

おお、カラフルになりましたね。

でもボタン3だけ残念なのでこちらはコード内でスタイルクラス名を指定して実行すると

この通りスタイルが適応されました。

コード内で追加した要素などにスタイルを適応する際に使えばいいのかなって感じですね。

この他にもelement名(UIButtonならbutton、UIActionSheetならaction-sheetなど)で指定することもできますし、コード内でstyleCSSでスタイルを指定することもできます。

失敗編

なかなか発生しないとは思うのですが、UIViewをとりあえず全部白にするかと思ってviewにbackground-color:white;って設定した時にUIActionを表示すると本来半透明の黒色で表示される部分まで真っ白に表示されてしまいました。

とりあえずとは言え、element名で設定することはかなりリスクがあるので止めたほうがいいのかなーって感じました。

まとめ

かなり簡単なものしか書いていないのですがいかがでしたか。

私の美的感覚が残念なのであまり綺麗とは言いがたいのですが、アプリのコーディングもデザイナーさんに頼むこともできそうなのでかなりいいのかなーって感じです。

まだまだ、いろいろ触ってみないと分からないところがありますがとりあえずどこかで使ってみたいと思えるようなものでした。

iOSプログラミング入門[iOS 6/Xcode 4 対応版] -Objective-C + Xcodeで学ぶ、iOSアプリ開発の基礎 -