rubymotionでstorybordの使い方/使った方が良い理由 #RubyMotion

rubymotionで開発をしていると、どうしてもstorybordは使わずに全て手で書いてしまいがちですが、rubymotionでstorybordを使うと超便利だったので、使い方と良いと思った理由を明記したいと思います。

1 インストール方法

参考：
RubyMotionアプリでStoryboardを使う（ibを使う）
第八回 RubyMotion で Interface Builder を使うには？

このgemを使うと簡単に設定できます。


・・・
gem 'ib'

$ bundle install

これでokです。
試しに、下記を実行すると、

rake -T

この2つが追加されているかと思います！

・・・
rake ib:open
rake ib:project

下記を実行するとxcodeが立ち上がるので、

rake ib:project

上部のメニューより、
File > New > File をクリック
下記の通りにstorybordを選択。

保存先をプルダウンで選択できると思うのでresource以下に設定。
これで設定は完了です。

xcode(storybord)の使い方は下記を参考にしてください。

参考：
[iOS] StoryboardでUITableViewを実装し理解する [4月からはじめるiPhoneアプリ #1]

実際にrubymotionとlinkさせていきます。

1.まずは、app_delegeteにstorybordを使う宣言を書きます。

app/app_delegate.rb


class AppDelegate                                                                                                                                                            
  def application(application, didFinishLaunchingWithOptions:launchOptions)
    @window = UIWindow.alloc.initWithFrame(UIScreen.mainScreen.bounds)
    storyboard = UIStoryboard.storyboardWithName('Storyboard', bundle: nil)
    @window.rootViewController = storyboard.instantiateInitialViewController
    @window.makeKeyAndVisible
    true
  end 
end

2.Outletを登録。
こうする事で、storybord上でOutletと紐付けが可能です。

app/controllers/select_controller.rb

class SelectController < UIViewController

  extend IB
  #以下outletの宣言
  outlet :selectA_view, UIView
  outlet :userA_photo_view, UIImageView

  outlet :selectB_view, SelectorView #自作クラスも勿論使えます。
  outlet :userB_photo_view, UIImageView
  outlet :question_label, UILabel

  def viewDidLoad
    super
  end
end

app/views/selector_view.rb


class SelectorView < UIView
  attr_accessor :question_id
end

3.outletも定義したらrake ib:openを実行。

ibが先程宣言したoutletをStubs.hに展開してくれています。
素敵ですねw

4.紐付けて実装していきます。

下記のように、storybord上にoutletを紐付けて、

app/controllers/select_controller.rb


class SelectController < UIViewController

  extend IB
  outlet :selectA_view, SelectorView
  outlet :userA_photo_view, UIImageView
  outlet :selectB_view, SelectorView
  outlet :userB_photo_view, UIImageView
  outlet :question_label, UILabel

  def viewDidLoad
    super
    tapGesture = UITapGestureRecognizer.alloc.initWithTarget(self, action: "tap:")
    userA_photo_view.image = UIImage.imageNamed('images/test.jpg')
    selectA_view.addGestureRecognizer(selectA_tapGesture)
  end
end

こんな感じでさっきの紐付けたUIViewに画像の追加とtapイベントを追加してみました。
凄く簡単ですね。

ちなみにこれでUITableViewを設計すると、下記のようにstorybordを作って設定するだけでいい感じのやつになりました。※パフォーマンスとかは特に調べてないです。

2 cocoapodsのライブラリを使用

参考：
iOS JASidePanelsをstoryboardで実装

結論使う事は可能です。
※後ほど使い方はuploadします。

3 使った方が良い理由

全体の見通しが良い！

一連の流れがstorybordを見るだけで分かるので、見通しが断然UP！
これぞstorybordの醍醐味ですね！

分担作業◎

デザイナーさんとの共同作業は圧倒的にやりやすいですね。

view関連の設定が楽になった

今迄はbackgroundColor、separatorColor等のプロパティ、位置の設定等手で書いていたがstorybordを使うととても簡単にできるようになった。
これによって動きの部分や動作の部分に集中的に取り組めるようになった！

今後はstorybordを使った方が楽になっていくと思う・・・w

ios7対応の時もそうだったが、storybordを使って作っていた方が後々の互換性は確実に良さそう。auto-layoutとかも実際storybordを使った方が簡単ですしね。
やはりお前らのiOS7対応は間違っている(解説編)

だったらrubymotionじゃなくてxcodeでやれよ？

(´・ω・｀)