iOS

My First RubyMotion App: Very Simple Web Browser

Japanese Version

I try to development my fisrt RubyMotion App.
It’s a very simple web browser.

The following is snapshot of finished product.

Let’s start.

Creating Project


Create and Run “Browser” project.
Still blank, black background app.

No problem.

White Background ViewController


Next, add white background ViewController.
Wrap by NavigationController for easy using NavigationBar.

Here is AppDelegate.

Here is BrowserViewController.
Now, only setting backgroundColor.

Showing Toolbar and NavigationBar


NavigationBar is displayed by default.
So, I just set Toolbar’s hidden to false in BrowserViewController#viewDidLoad.

Loading Google by WebView


Adding UIWebView.
And defining “loadRequest” method for loading webpage.

delegate is set to self.

OK.

Adding LocationBar


Creating TextField for inputting URL.
Adding to NavigationBar and call “loadRequest” in textFieldShouldReturn.
(delegate is self)

Ref: NavigationBarにテキスト欄を表示させる | nk-z.memo

Forward, Back, Refresh, Stop


Adding buttons to toolbar, and set action for calling webView’s methods.

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

Adjustment for Usability


Showing indicator when loading, and switch Enable/Disable buttons in Delegate methods of webView.

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

Conclusion


That’s all. Did you have fun?

Full source code is available on GitHub.
I’ll add other samples soon.
RubyMotionApps/Browser at master · tnantoka/RubyMotionApps · GitHub

Enjoy iOS Development by Ruby :-)

Sorry for my English.

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

English Version

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

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

完成品はこんなの。

では、さっそく。

プロジェクトの作成


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

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

真っ白なViewController


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

AppDelegateはこんな感じ。

BrowserViewControllerは背景色の設定のみ。

ToolbarとNavigationBarを表示


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

BrowserViewControllerのviewDidLoadでやります。

WebViewでGoogleを読み込む


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

OKですね。

ロケーションバー


URL入力欄をつくります。

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

進む、戻る、更新、中止


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

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

最後に微調整


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

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

おしまい


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

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

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

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

 

RubyMotionのサンプルアプリ一覧

自分で作り始める前にどんな風にやるのか掴むために、サンプルを覗いてみた。

でクローン。

プロジェクト名 概要
Beers Mapアプリ。
NavigationController, TabBarControllerを使ったサンプル。
GestureTable Clear(斬新なUIで話題となったTODOアプリ)のクローン
Hello タッチした回数を数えるHello, world。
touchesMoved時に超チカチカして目に悪そう。
Locations 位置情報アプリ。
CoreData、TableViewControllerを使ったサンプル。
Mustache Matzさん他いろんな人に髭をつけるサンプル
(CIDetectorによる顔認識)
Paint お絵描きサンプル
Timer ストップウォッチサンプル
Trollify 画像合成アプリ。
写真の好きなところにお面?をつけて保存する。キモい。
Tweets Twitter検索。
HTTP通信(dispatch_asyncで処理)のサンプルになってる。

 

こんな感じだった。

何か全体的にsprintf(”%d” % num)が動いてない気がしたけど、僕の環境のせいかな??

RubyMotion HelloWorld〜実機転送まで…行きたかったけどiOS4に対応してなかったので断念

真っ黒画面


本家の
Welcome to RubyMotion
をそのままやってみる。

こんな感じで真っ黒な画面がシミュレータで立ち上がる。
終了は、

でいいのかな。

古いXcodeを入れたままにしている人はRubyMotion1.2以降だと、

っていうエラーが出て、デフォルトでiOS5.0が使われちゃう(あといろいろバグあるらしい)ので、
$ sudo xcode-select -switch /Applications/Xcode.app/Contents/Developer
しておきましょう。

と思ったけど、これやったら、

っていうエラーと共にアプリのステータスバーが消えて起動できなくなっちゃったので、

で戻した。
すぐ修正されるだろうから、とりあえずですね。

2012-05-08 23:20 追記

ダメ元で今日同じ手順でxcode-selectしたら問題なく動くようになってた。
何だったんだろ??

アラート表示


次はお馴染みのHello, world!
ドキュメントの通り、

とすれば問題なく表示された。

実機転送(断念)


ってやれば実機転送出来るって書いてあったので、Provisioning Profileとかどうすんの?と思いながらやってみた。

手元のiPhoneがiOS4.3だったorz。
RubyMotion Project Management Guideに従って、

な感じでdeployment targetを指定してやる。(ちなみに、おんなじ要領でprovisioning profileも変更できるっぽい。)
いざ!!

まじすか…。

ちょっと手元の4.3の環境を失いたくないので一旦実機転送は諦める方向で。

だいぶわかってきたので(本当か?)次はもうちょいちゃんとしたアプリを作ってみよう。

RubyMotionのインストール

RubyMotion Store から買う。
フォームが使いにくいことに一抹の不安を覚えるけど、気にしないことにする。

すると、「HipByte Support <mailer at fastspring.com>」から、
「お客様のご注文: RubyMotion [HIPXXXXXX-YYYY-ZZZZZ]」なるメールがくる。
が、これは単なる注文確認なので気にしない。

次に「Your RubyMotion License – Order HIPXXXXXX-YYYY-ZZZZZ」っていうメールが来る。
こっちが本命。
僕の場合は逆転して届いたぐらいだから、ほぼリアルタイムに来るはず。

このメールに、zipファイルのダウンロード先が書いてあるので落とします。
そして、ライセンスキーも載っているのでコピーしておきましょう。

ダウンロードが終わったら解凍してIntstrallerを起動。
ライセンスを入力して進めば、特につまずくこともなく終わるはず。

それではターミナルを起動してみます。

おぉ、無事入ってるみたいですね。

一応アップデートしとこう。

元々最新の1.1だったので、これ以上のアップデートは現時点ではない、と。

めでたしめでたし。

というわけで、次はHello, world!

2012-5-7 22:06 追記

他の作業してたら、

ってわりとけたたましく怒られたので、sudo motion updateした。
最新版は1.2ですね。いくつかバグ修正があったみたい。

特に問題なくupdateできてよかった。

1 2 3 4 5  Scroll to top