Webクリエイター向けにHTMLやJSの記述をObjective-Cに置き換えてみた（UILabel編）

kosuke — Mon, 30 May 2011 08:20:01 +0000

Web系の人でiPhoneアプリ作ってみたいなーと思ってる人って多いのかな？どうなんだろ？

個人的には、HTML5技術とか進んでて、Webアプリでもかなりのものが作れるようになってきてますけど、やっぱりまだまだネイティブの方が有利な部分が多いと思ってます。あと、iPhoneの仕様を深く知る上でもいいんじゃないかなーと。

ちょっとしたアプリ作るなら、Titanium Mobileとかで全然いいと思うんですが、Titanium MobileのAPIに無いことをやろうとするとObjective-Cしかありません。

Objective-C自体はそんなに難しくないと思うんですよ。どちらかというと、APIやら仕様やらの情報がわかりにくい。それさえ調べ調べやれば、Web系の人でもアプリ作れます。

ということで、Web系の人でObjective-C学んでみたいという人向けに、ちょっとまとめてみました。
ただし、超基本な部分をすっ飛ばして書いてるので、その辺はご自身で学習を。

今回は、viewという基本的なオブジェクトを組み立てていくお話。
（webの記述を置き換えてますが、webViewの話しではないですよ）

ビューにテキストを書く

これはHTMLだったらなんてことはない。

たとえば、
[html]

テキスト

[/html]

説明をわかりやすくするため、divで囲って座標系をインラインで加えます。
[html]

テキスト

[/html]

というHTMLの場合、Objective-Cで書くとこうなる。

[cpp]
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 100, 20)];
label.text = @"テキスト";
[self.view addSubView:label]:
[/cpp]
みたいな感じ。
（※座標系とサイズはCSSと同じ数値ですが、実際のサイズは異なります。あくまで説明用です。）

まぁ、これくらいだったらInterface BuilderのGUIによる組み立てができるんだけど、
Objective-Cのビューの組み立ては、基本的にパーツを担うオブジェクトを初期化・用意して親となるビューに貼付けていく感じなのです。

HTMLもDOMっていうオブジェクトモデルをインターフェースとしてるので、上記のコードだと、bodyっていうオブジェクトにテキスト込みのdivオブジェクトを貼付けてるようなもの（…と、説明のため極端な言い方させてもらいます）と考えてみて、JavaScriptによるDOM操作の方がイメージしやすいかなと。

最近はピュアなJS書くよりも、jQuery記述の方が分かる人の方が多いだろうからjQueryで書くとこうなる。

jQuery
[javascript]
label = $(‘
テキスト
’);
label.css({position:’absolute’, top:’10px’,left:’10px’, width:’100px’, height:’20px’});
$(‘body’).append(label);
[/javascript]

↓↓↓↓↓

Objective-C
[cpp]
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 100, 20)];
label.text = @"テキスト";
[self.view addSubView:label];
[/cpp]

１行目：テキストを入れるUILabelっていうオブジェクトを、X座標、Y座標、横幅、高さとともに初期化および用意する。
[c]
[[UILabel alloc] initWithFrame:CGRectMake(X座標, Y座標, 横幅, 高さ)];
[/c]
２行目：テキストの内容を定義。@っていうのは、そういう文法なので深く気にしない。
[c]
label.text = @"テキスト";
[/c]
３行目：そのラベルを親ビューに貼付け。
[c]
[貼付ける先のオブジェクト addSubView:貼付ける対象のオブジェクト];
[/c]

上記を踏まえて、テキスト周りの装飾を他にも紹介すると下記みたいな感じ。

テキストカラー

jQuery
[javascript]
label.css({color:’#000′});
[/javascript]

↓↓↓↓↓

Objective-C
[c]
label.textColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.0f];
[/c]
もしくは
[c]
label.textColor = [UIColor blackColor];
[/c]

フォントサイズ

jQuery
[javascript]
label.css({fontSize:’12px’});
[/javascript]

↓↓↓↓↓

Objective-C
[c]
label.font = [UIFont systemFontOfSize:12.0f];
[/c]

（※座標系とサイズはCSSと同じ数値ですが、実際のサイズは異なります。あくまで説明用です。）

他にも、UILabel系のAPIやプロパティがありますが、大体上記と似たような感じですよ。

ちなみに、ここの説明だとaddSubViewしたあとに、テキストカラーやサイズのプロパティを変えてるような感じですが、実際はプロパティを設定したあとに、addSubViewしてください。
誤りなどありましたら、突っ込み入れていただければです。

※【2011.5.30　追記】HTML＝DOMと書いたつもりではなかったのですが、そのように受取られるご意見がありましたので、その辺を修正させていただきました。

他の人気エントリ

iPhoneアプリを開発中

kosuke — Thu, 12 May 2011 15:41:15 +0000

開発中のiPhoneアプリ

画像は仮デザインのものですが、iPhoneアプリ作り中です。最初は開発スピード重視でTitanium Mobileでの開発を考えていたのですが、アプリ内課金のことなど考えるとObjective-Cの方がいいなーと。（Titaniumに、アプリ内課金を後付けする手法もあるみたいですが、なんだか調べるのがめんどかったのでパス…）

でも、著作権フリー音楽をダウンロードできるアプリを作ってるのですが、今のところ世の中的に同じタイプのアプリが出てないみたいなので、実際審査パスするかどうかがわからないです。
（着信音ダウンロードアプリはあるみたいですので、名目としては着信音ダウンロードアプリになるかもです…）

ということで、ブログでのお役立ち情報の更新がやや滞ると思われます（笑）

Web系の方で、なんとなくアプリ開発やってみたいなーと思ってらっしゃる方多いと思うのですが、Objective-C慣れれば簡単ですよ。
とにかくXcodeが優秀です。XcodeがiOSアプリ開発の敷居を下げてくれてますね。
クラスのプロパティとかコード補完してくれるので、仕様やAPIを全て知らなくても勘で行けることも多いです。

ネイティブアプリはダウンロードされてなんぼというところがありますが、やっぱり出来ること多いしWebには無い魅力がありますよ。

あと、アプリのネタが無いもんな〜と思ってらっしゃる方も多いと思うんですが、やっぱりなにか作ってみることかも知れませんね。作ってると、いろいろネタが思い浮かんでくるものです。