Interface Builderのかんたん取扱説明書

サルでき.jp > 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) > Interface Builderのかんたん取扱説明書

2009/08/07 09:00 投稿先 11.サルにもできるiPhoneアプリの作り方(旧アメブロ記事) 投稿者 カワサキ タカシ

は、iPhoneアプリ開発ツールの中でも見た目を担当するInterface Builderのお話です。

Xcodeのお話がまだの方は、先にこちらをお読みください。
Xcodeのかんたん取扱説明書

アプリケーションにとって見た目は命です。
特にiPhoneのような画面上いっぱいに広がるようなアプリケーションの場合、
使い勝手も全て見た目(レイアウト、配置、構造も含め)に依存します。

超大事ですから。
納得いくまで「作っては直し作っては直し」という作業をする必要があります。

見た目を直すんだから、見たままの画面で直せた方が「わかりやすいし簡単」で良いじゃないか。
それがGUI(グラフィカル・ユーザー・インターフェース)エディタの役割です。

ホームページを作ったことがある人なら雰囲気をつかみやすいと思いますが、
このブログも、実はプログラム言語(のようなもの)でできています。
HTML(ハイパーテキスト・マークアップ・ランゲージ)って言います。
(見てみたい人は、画面を右クリックして「ソースを表示」でご覧ください)

文字の色や大きさ、あっちこっちにくっついている画像の場所。
そういう「付加情報」を細かく指定することで、ホームページは今見ているような姿になるわけです。

でも、そんなことを普通の人が全部理解してプログラミングするのは大変ですし、
慣れてる人でも文字の羅列だけ見て実際の画面を想像するのは大変です。

ということで、ホームページを作るときにもHTMLエディタというものが用意されています。
DreamWeaverとか、ホームページビルダーとかがその代表選手です。

文字書いて画像貼付けて、見た目をちゃんとしたら後は機械が勝手にHTMLにしてくれる。
視覚的にわかりやすいし、修正もらくちん、というわけです。建前上は。

だいぶ横道にそれたので戻りましょう。
Interface Builderのかんたん取扱説明書
<クリックで拡大>

これがInterface Builderです。
主要機能だけで4つもウィンドウが開きます。

1.Xibウィンドウ
2.ビュー編集ウィンドウ
3.インスペクタ
4.ライブラリ

迷子にならないように1つずつ見ていきましょう。

おっと。忘れてました。

ここに辿り着く為には、Xcodeの「グループとファイル」の中の
拡張子がxibになっているファイルを開いて下さい。
Interface Builderのかんたん取扱説明書

1.Xibウィンドウ
Interface Builderのかんたん取扱説明書

さぁ出てきました。
意味不明なウィンドウ。
File’s OwnerとかFirst Responderとか書いてあります。

とりあえず無視しましょう。
パッと見てわからないものは、言葉で説明されてもわからないの法則です。

作ってるうちに必要になりますので、
そのときに実際に何に使われているのかを見て理解しましょう。

2.ビュー編集ウィンドウ
Interface Builderのかんたん取扱説明書

これこれ。
こういうのです。パッと見てわかるもの。
画面をいじるエディタです。iPhoneアプリだけに縦長ですね。

ボタンを貼付けたり、テキストのサイズを変えたり。
この画面を真ん中に置いて作業します。

「ビュー」って言葉が出てきました。何でしょう?
「ビュー」と「ウィンドウ」についてはまた別の回にお話ししますので、
今は地球を見ながらボロ儲けに思いを馳せておきましょう。

3.インスペクタ
Interface Builderのかんたん取扱説明書

Windowsをお使いの方には馴染みが無いかと思いますが、
属性情報をまとめてコントロールする機能を、Macでは「インスペクタ」といいます。

文字の大きさを変えたり、グラフの見た目を変えたり、ページ送りの効果を選んだり、
小さなポップアップウィンドウの中に様々な設定変更機能が入っています。

Interface Builderのインスペクタ、というわけです。
文字サイズ、文字配置、文字色、さまざまな設定項目が見えてますね。

4.ライブラリ
Interface Builderのかんたん取扱説明書

最後はこちら。
ライブラリ。直訳すれば図書館ですね。

何の図書館?
プログラムの図書館です。

例えばあなたがアプリを作るとして、
いくつかボタンを用意することになったとしましょう。

ボタンのプログラムコードを書いて、
ボタンの画像を作って、
設置して、
動くかどうかを確認する。

こういう作業が「ボタン数分」必要です。

でも、ボタンなんですよね。
押したら反応すれば良いんです。

「どこかで他の人が作ったものでいいから、借りて簡単に設置できないかなー。」
って思いますよね?ラクしたいじゃないですか。

人間だもの。

そんなあなたのためにあるのが、このiPhone図書館です。
あらかじめよく使う機能について、用意してくれているんです。
しかも、iPhoneらしいイカしたデザインで。

パクりまくりましょう。
ボタンで画面を埋めつくしてやりましょう。

さてさて。
長々と薄い内容で書いてきましたが、
iPhoneアプリは、ここまでのXcodeとInterface Builderを使えば作れちゃいます。

え?これだけで?

いえいえ。
今まで紹介した部分はほんの序の口。逆に言えばこの先は魔境、
仕様制限とバグと英語と魑魅魍魎が渦巻くワンダーランドです。

あっさり挫折しないためにも、
入口で装備できる知識はしっかり身につけて乗り込みましょう!

今一度Xcodeの確認をしたい方はこちらからどうぞ。
Xcodeのかんたん取扱説明書

関連する記事:


Advertisement