ITごはん

ITを活用したい人、ITで何か作りたい人、そんなITでごはんを食べる人のためのブログ

【Objective-C】CSSを使う(Pixate freestyle)

Objective-Ccssが使えると噂のPixate freestyleを使ってみます。 導入は至って簡単です。(以前のバージョンより簡単になっていますね)

1. http://www.freestyle.org/ へ行く

f:id:HIDEKIT:20140528194653p:plain

2. DownloadボタンからPixateFreestyle-2.1.3.pkg をダウンロードする上記のpkgを実行すると、Documentに解凍されます。

※ ちなみに、cocoa pod使っている人は以下で一発です。この手順は飛ばして下さい。

pod 'PixateFreestyle'

3.通常のフレームワークを導入する手順と同じように、解答したファイルのPixateFreestyle.frameworkを、プロジェクト内のFrameworksフォルダにコピーします。

※今回は事前にPixateというSingleWindowApplicationを作っています。

4. Frameworkを使えるように、main.mに2行追加。

#import <PixateFreestyle/PixateFreestyle.h>
[PixateFreestyle initializePixateFreestyle];

上記を以下のような感じで追加。

f:id:HIDEKIT:20140528194742p:plain

5.Storyboardを使って、オブジェクトを配置。今回はボタンを配置してみます。

6.配置したボタンについて、Identity Inspectorを参照して、Key Pathを追加する。styleClassというKey Pathに、HTML/cssでいうところのクラス名ををセットする。

※KeyPathをstyleIdとすることで、同じようにidをセットできます。

f:id:HIDEKIT:20140528195634p:plain

7.default.cssを追加する。 ※default.cssとすることで、自動的に読み込まれます。default.cssの中に、先ほどのクラス名をcssの要領で指定。

f:id:HIDEKIT:20140528194757p:plain

8.実行!して画面を確認する。

細かいところは本家のドキュメントを参照下さい。 http://pixate.github.io/pixate-freestyle-ios/

css使って、どこまで出来るか色々調べてみます。 あと、Pixateを使った、デモアプリがあるのでそれを見ると、参考になりそうです。(ただし、iPad版しかないようです)