RubyMotionでPixate Freestyleを試してみた。

rubymotion

[2014/02/27追記]

motion-pixatefreestyleが公開されたので、より簡単に試すことができるようになりました。

最新の記事はこちら。

大分ブログを書いていませんでしたが、ひっそりとRubyMotionで遊んでいたりします。

先週、Pixateが名前をPixate Freestyleに変えてオープンソース化されたというニュースが公式ブログに投稿されていたので、さっそくRubyMotionから試してみたました。

これまでも個人利用であれば無料で利用することができましたが、オープンソース化されたことで利用しやすくなった＆利用者が増えそうでいい感じ。

Pixateが何者なのかはid:naoyaさんのエントリが詳しいです。

Pixate Freestyleのインストール

GithubのREADMEを読むと、CocoaPodsが使えるようなのでmotion-cocoapodsをGemfileに追加してbundle installしておく。

% vi Gemfile

source 'https://rubygems.org'

gem 'rake'
gem 'motion-cocoapods'

% bundle install

次にRakefileにPixate Freestyleの設定を追加して、bundle exec rake pod:installする。

pod:installしただけではPixate Freestyleのヘッダファイルが見つからず実行時エラーになったので、app.vendor_projectメソッドでヘッダファイルのパスを指定しています。

motion-pixateを使ってPixateをインストールしたときはあまり意識していなかったのでハマりました。

% vi Rakefile

# -*- coding: utf-8 -*-
$:.unshift("/Library/RubyMotion/lib")
require 'motion/project/template/ios'
require 'rubygems'
require 'motion-cocoapods'

begin
  require 'bundler'
  Bundler.require
rescue LoadError
end

Motion::Project::App.setup do |app|
  # Use `rake config' to see complete project settings.
  app.name = 'PixateFreestyleTest'

  # CocoaPodsでPixateFreestyleをインストール
  app.pods do
    pod 'PixateFreestyle'
  end

  # PixateFreestyleのヘッダファイルを指定
  app.vendor_project('vendor/Pods/PixateFreestyle/PixateFreestyle.framework',
                     :static,
                     :products => ['PixateFreestyle'],
                     :headers_dir => 'Headers')
end

% bundle exec rake pod:install

あとはapp_delegate.rbにPixateFreestyleを初期化するコードを追加すればPixateと同じ感じで使えます。

cssのセレクタに指定できるUIコンポーネントなどの情報は公式ドキュメントに詳しく載っています。

% vi app/app_delegate.rb

class AppDelegate
  def application(application, didFinishLaunchingWithOptions:launchOptions)
    # PixateFreestyleを初期化する
    autorelease_pool {
      PixateFreestyle.initializePixateFreestyle
    }
    
    @window = UIWindow.alloc.initWithFrame(UIScreen.mainScreen.bounds)
    @window.makeKeyAndVisible

    @view = UIView.alloc.initWithFrame(UIScreen.mainScreen.bounds)

    # idやclassを指定する場合
    # @view.styleId = 'hoge'
    # @view.styleClass = 'fuga'

    @window.addSubview(@view)
    
    true
  end
end

% vi resource/default.css

view {
  background-color: linear-gradient(to right, rgba(0,153,255,0.5), #009);
}

/*
#hoge { }
#fuga { }
*/

これでbundle exec rakeするとcssが適用されたアプリが実行されるはず。

cssで見た目を変更できるのはやっぱり便利です。

UITableViewでセルの高さを動的に計算しなければいけないところとかcssでできない部分とできる部分を考えて適用しないといけないとは思いますが、しばらく使ってみてノウハウを貯めていきたいと思います。