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

On 2011年5月30日, in iPhone, iPhone, JavaScript, Web制作, スマートフォンアプリ関連, by kosuke

この記事のURLをスマートフォンに送る

Check

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

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

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

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

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

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

ビューにテキストを書く

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

たとえば、

<body>
テキスト
</body>

説明をわかりやすくするため、divで囲って座標系をインラインで加えます。
<body>
<div style="position:absolute;top:10px;left:10px;width:100px;height:20px;">
テキスト
</div>
</body>
というHTMLの場合、Objective-Cで書くとこうなる。
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 100, 20)];
label.text = @"テキスト";
[self.view addSubView:label]:
 
みたいな感じ。
（※座標系とサイズはCSSと同じ数値ですが、実際のサイズは異なります。あくまで説明用です。）

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

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

最近はピュアなJS書くよりも、jQuery記述の方が分かる人の方が多いだろうからjQueryで書くとこうなる。
jQuery
label = $('<div>テキスト</div>');
label.css({position:'absolute', top:'10px',left:'10px', width:'100px', height:'20px'});
$('body').append(label);
↓↓↓↓↓
Objective-C
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 100, 20)];
label.text = @"テキスト";
[self.view addSubView:label];
 

１行目：テキストを入れるUILabelっていうオブジェクトを、X座標、Y座標、横幅、高さとともに初期化および用意する。

[[UILabel alloc] initWithFrame:CGRectMake(X座標, Y座標, 横幅, 高さ)];

２行目：テキストの内容を定義。@っていうのは、そういう文法なので深く気にしない。

label.text = @"テキスト";

３行目：そのラベルを親ビューに貼付け。

[貼付ける先のオブジェクト addSubView:貼付ける対象のオブジェクト];

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

テキストカラー

jQuery

label.css({color:'#000'});

↓↓↓↓↓

Objective-C

label.textColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.0f];

もしくは

label.textColor = [UIColor blackColor];

フォントサイズ

jQuery
label.css({fontSize:'12px'});
↓↓↓↓↓
Objective-C
label.font = [UIFont systemFontOfSize:12.0f];
（※座標系とサイズはCSSと同じ数値ですが、実際のサイズは異なります。あくまで説明用です。）

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

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

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