初めてのRubyMotionアプリ：超シンプルなWeb Browser

Pocket

English Version

ようやく自分で何か作ってみる。

文字表示するだけ、とかつまらないのでWebViewを使ったシンプルなウェブブラウザを作ってみよう。

完成品はこんなの。

では、さっそく。

プロジェクトの作成

まずはプロジェクトを作成して動かしてみるところまで。

$ motion create Browser
    Create Browser
    Create Browser/.gitignore
    Create Browser/Rakefile
    Create Browser/app
    Create Browser/app/app_delegate.rb
    Create Browser/resources
    Create Browser/spec
    Create Browser/spec/main_spec.rb

$ cd Browser

$ rake
     Build ./build/iPhoneSimulator-5.1-Development
   Compile ./app/app_delegate.rb
    Create ./build/iPhoneSimulator-5.1-Development/Browser.app
      Link ./build/iPhoneSimulator-5.1-Development/Browser.app/Browser
    Create ./build/iPhoneSimulator-5.1-Development/Browser.app/Info.plist
    Create ./build/iPhoneSimulator-5.1-Development/Browser.app/PkgInfo
    Create ./build/iPhoneSimulator-5.1-Development/Browser.dSYM
  Simulate ./build/iPhoneSimulator-5.1-Development/Browser.app

$ motion create Browser

Create Browser

Create Browser/.gitignore

Create Browser/Rakefile

Create Browser/app

Create Browser/app/app_delegate.rb

Create Browser/resources

Create Browser/spec

Create Browser/spec/main_spec.rb

$ cd Browser

$ rake

Build ./build/iPhoneSimulator-5.1-Development

Compile ./app/app_delegate.rb

Create ./build/iPhoneSimulator-5.1-Development/Browser.app

Link ./build/iPhoneSimulator-5.1-Development/Browser.app/Browser

Create ./build/iPhoneSimulator-5.1-Development/Browser.app/Info.plist

Create ./build/iPhoneSimulator-5.1-Development/Browser.app/PkgInfo

Create ./build/iPhoneSimulator-5.1-Development/Browser.dSYM

Simulate ./build/iPhoneSimulator-5.1-Development/Browser.app

うん、特に何も問題ないですね。

真っ白なViewController

お次は、カスタムViewControllerを作って背景を白にするところまで。
ViewControllerを直接RootViewControllerにはせず、NavigationControllerでWrapします。（NavigationBarを使いたいだけ）

AppDelegateはこんな感じ。

class AppDelegate
  def application(application, didFinishLaunchingWithOptions:launchOptions)
    @window = UIWindow.alloc.initWithFrame(UIScreen.mainScreen.bounds)
    @window.rootViewController = UINavigationController.alloc.initWithRootViewController(BrowserViewController.alloc.init)
    @window.makeKeyAndVisible
    true
  end
end

class AppDelegate

def application(application, didFinishLaunchingWithOptions:launchOptions)

@window = UIWindow.alloc.initWithFrame(UIScreen.mainScreen.bounds)

@window.rootViewController = UINavigationController.alloc.initWithRootViewController(BrowserViewController.alloc.init)

@window.makeKeyAndVisible

true

end

BrowserViewControllerは背景色の設定のみ。

class BrowserViewController < UIViewController
  def viewDidLoad
    view.backgroundColor = UIColor.whiteColor
  end
end

class BrowserViewController < UIViewController

def viewDidLoad

view.backgroundColor = UIColor.whiteColor

end

ToolbarとNavigationBarを表示

ナビゲーションバーはデフォルトで出ているはずなのでツールバーのHiddenをfalseにすればOK。

BrowserViewControllerのviewDidLoadでやります。

    navigationController.setToolbarHidden(false, animated:false)

1	navigationController.setToolbarHidden(false, animated:false)

WebViewでGoogleを読み込む

UIWebViewを追加。loadRequestというメソッドを定義してGoogleを読み込んでみます。
delegateはselfにしておきます。

class BrowserViewController < UIViewController
  def viewDidLoad
    view.backgroundColor = UIColor.whiteColor
    navigationController.setToolbarHidden(false, animated:false)

    @webView = UIWebView.alloc.initWithFrame(
      CGRectMake(
        0,
        0,
        view.frame.size.width,
        view.frame.size.height - navigationController.toolbar.frame.size.height - navigationController.navigationBar.frame.size.height
      )
    )
    view.addSubview(@webView)

    loadRequest('http://google.com/')
  end

  def loadRequest(urlString)
    url = NSURL.URLWithString(urlString)
    request = NSURLRequest.requestWithURL(url)
    @webView.delegate = self
    @webView.loadRequest(request)
  end

end

class BrowserViewController < UIViewController

def viewDidLoad

view.backgroundColor = UIColor.whiteColor

navigationController.setToolbarHidden(false, animated:false)

@webView = UIWebView.alloc.initWithFrame(

CGRectMake(

view.frame.size.width,

view.frame.size.height - navigationController.toolbar.frame.size.height - navigationController.navigationBar.frame.size.height

)

view.addSubview(@webView)

loadRequest('http://google.com/')

end

def loadRequest(urlString)

url = NSURL.URLWithString(urlString)

request = NSURLRequest.requestWithURL(url)

@webView.delegate = self

@webView.loadRequest(request)

end

OKですね。

ロケーションバー

URL入力欄をつくります。

NavigationBarにテキスト欄を表示させる | nk-z.memo を参考にNavigationBarに埋め込みました。
Enterされた時にloadRequestを実行するため、selfをdelegateに設定し、textFieldShouldReturnメソッドを定義しています。
（以下のコード内のViewDidLoadは抜粋）

  def viewDidLoad

    @urlField = UITextField.alloc.initWithFrame(CGRectMake(0, 0, 300, 31))
    @urlField.font = UIFont.systemFontOfSize(14)
    @urlField.borderStyle = UITextBorderStyleRoundedRect
    @urlField.backgroundColor = UIColor.whiteColor
    @urlField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter
    @urlField.autocorrectionType = UITextAutocorrectionTypeNo
    @urlField.keyboardType = UIKeyboardTypeURL
    @urlField.returnKeyType = UIReturnKeyDone
    @urlField.delegate = self
    @urlField.text = 'http://google.com/'
    navigationItem.titleView = @urlField

  end

  # - (BOOL)textFieldShouldReturn:(UITextField *)textField
  def textFieldShouldReturn(textField)
    urlString = textField.text
    if urlString.length > 1
      loadRequest(urlString)
    end
    textField.resignFirstResponder
    true
  end

def viewDidLoad

@urlField = UITextField.alloc.initWithFrame(CGRectMake(0, 0, 300, 31))

@urlField.font = UIFont.systemFontOfSize(14)

@urlField.borderStyle = UITextBorderStyleRoundedRect

@urlField.backgroundColor = UIColor.whiteColor

@urlField.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter

@urlField.autocorrectionType = UITextAutocorrectionTypeNo

@urlField.keyboardType = UIKeyboardTypeURL

@urlField.returnKeyType = UIReturnKeyDone

@urlField.delegate = self

@urlField.text = 'http://google.com/'

navigationItem.titleView = @urlField

end

# - (BOOL)textFieldShouldReturn:(UITextField *)textField

def textFieldShouldReturn(textField)

urlString = textField.text

if urlString.length > 1

loadRequest(urlString)

end

textField.resignFirstResponder

true

end

進む、戻る、更新、中止

ツールバーにそれぞれのボタンを追加し、対応するWebVIewのメソッドをアクションに設定します。
ViewDidLoadに以下を追加。

参考
ツールバーのボタン (UIBarButtonItem) の隠し API – 24/7 twenty-four seven

    @backItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(101, target:@webView, action:'goBack')
    @forwardItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(102, target:@webView, action:'goForward')
    @relaodItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(UIBarButtonSystemItemRefresh, target:@webView, action:'reload')
    @stopItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(UIBarButtonSystemItemStop, target:@webView, action:'stopLoading')
    @stopItem.enabled = false

    toolbarItems = [
      @backItem,
      @forwardItem,
      UIBarButtonItem.alloc.initWithBarButtonSystemItem(UIBarButtonSystemItemFlexibleSpace, target:nil, action:nil),
      @relaodItem,
      @stopItem
    ]
    toolbarItems.each do |item|
      item.style = UIBarButtonItemStyleBordered
    end
    setToolbarItems(toolbarItems, animated:false)

@backItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(101, target:@webView, action:'goBack')

@forwardItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(102, target:@webView, action:'goForward')

@relaodItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(UIBarButtonSystemItemRefresh, target:@webView, action:'reload')

@stopItem = UIBarButtonItem.alloc.initWithBarButtonSystemItem(UIBarButtonSystemItemStop, target:@webView, action:'stopLoading')

@stopItem.enabled = false

toolbarItems = [

@backItem,

@forwardItem,

UIBarButtonItem.alloc.initWithBarButtonSystemItem(UIBarButtonSystemItemFlexibleSpace, target:nil, action:nil),

@relaodItem,

@stopItem

]

toolbarItems.each do |item|

item.style = UIBarButtonItemStyleBordered

end

setToolbarItems(toolbarItems, animated:false)

最後に微調整

ローディング中にIndicatorを表示したり、ボタンを押せる時だけ有効にしたりします。
BrowserViewControllerで以下のようなWebViewのDelegateメソッドを追加すればOK。

参考
UIWebView下で、UIButtonの活性／不活性にする: iPhoneアプリ開発備忘録

  # - (void)webViewDidStartLoad:(UIWebView *)webView
  def webViewDidStartLoad(webView)
    UIApplication.sharedApplication.networkActivityIndicatorVisible = true
    @stopItem.enabled = true
  end

  # - (void)webViewDidFinishLoad:(UIWebView *)webView
  def webViewDidFinishLoad(webView)
    UIApplication.sharedApplication.networkActivityIndicatorVisible = false
    @backItem.enabled = @webView.canGoBack
    @forwardItem.enabled = @webView.canGoForward
    @stopItem.enabled = false
  end

  # - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error
  def webView(webView, didFailLoadWithError:error)
    webViewDidFinishLoad(webView)
  end

# - (void)webViewDidStartLoad:(UIWebView *)webView

def webViewDidStartLoad(webView)

UIApplication.sharedApplication.networkActivityIndicatorVisible = true

@stopItem.enabled = true

end

# - (void)webViewDidFinishLoad:(UIWebView *)webView

def webViewDidFinishLoad(webView)

UIApplication.sharedApplication.networkActivityIndicatorVisible = false

@backItem.enabled = @webView.canGoBack

@forwardItem.enabled = @webView.canGoForward

@stopItem.enabled = false

end

# - (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error

def webView(webView, didFailLoadWithError:error)

webViewDidFinishLoad(webView)

end

おしまい

ちょっと眠くてやっつけ感がでましたが、思ったよりはまらず動きました。
（IBじゃなく）コーディングベースでiOS開発したことある人なら、難なくいけるでしょう。

ただ、この程度だとXCodeの方がはるかにお手軽ですねー。
テキストとか配列とか日付とかバリバリ処理するようなアプリになるとRubyのメリットが生きてくるのかな？

ソースはGitHubで公開しています。
RubyMotionApps/Browser at master · tnantoka/RubyMotionApps · GitHub

しばらくはいじるので、サンプルは適宜追加されるはずです。

tobioka.net

You Ain't Gonna Need It