graffiti on the web ウェブページは、ヘッダー、サイドメニュー、コンテンツ、フッターなど様々な要素から成り立ってる場合が多いと思います。
全てがページ内のキーワードと関連が深い場合はいいのですが、広告や、お問い合わせ欄、アクセスマップ、会社概要など、特にサイトのテーマとは関係ないページや関係ない箇所が散財すると思います。
ページ内に広告が表示されてる場合などはサイト内のテーマと関係が薄い場合も多々あると思います。
…
前回は、UITableViewを使って”HelloWorld”を表示しましたが、今回は、Interface Builderを使って、コードを書かずに”HelloWorld”を表示させてみます。
非常に簡単なアプリではありますが、Interface Builderを理解する最初のステップです。
iPhoneアプリを一度でも触ったことがある方なら見慣れているUIコンポーネントがたくさん並んだ「Library」という名前のウインドウがあると思います。
その中から、Labelを探してドラッグ＆ドロップで配置してみてください。
他にも、いくつか適当に選んで「View」のウインドウの上にドラッグ＆ドロップしてみてください。大きさなども自由に変更できます。
私は以下の画像のようにしました。
Label,Text Field,Search Bar,Toolbar の四つを置きました。
Labelの追加が出来たら、Labelをクリックし、「Inspector」(最初に表示された４つのウインドウの一番右上)のAttributes(Inspector内の一番上にある４つのボタンの一番右)を表示してください。
このとき、「Inspector」の名前が「Label Attributes」となっていることを確認してください。
Interface Builder 上の変更を保存します。
これで、今回のアプリケーションを実行する準備が出来ました。
これで今回の作業は完了です。
今回はコードも書かずに”HelloWorld” を表示するだけの本当に簡単なアプリでしたが、Interface Builder に触れることに少しずつ慣れていきましょう。（もちろん私もですが、、、）
次は、今回のように作ったインターフェースをコードを関連づけて動作させる方法について説明したいと思います。
今回の流れ：
- View Based Projectの新規作成
- iPhone シュミレータで確認
- UIの要素をホーム画面に追加
- コードを実行
目次
View Based Projectの新規作成
Xcodeを起動し、「新規プロジェクト」を選択します。
以下のようなウインドウが表示されたら、左ペイン内のiOS > Application が選択されているのを確認、「View-based Application」を選んで、「選択」ボタンを押す。(Use Core Data for storage のチェックは不要。)
その後に表示されるプロジェクト名は「HelloWorldViews」として保存。
この時点で、いくつかのデフォルトファイルが追加されます。
その中にメインウインドウを起動するためのコードが含まれ、これを編集することが出来ます。
iPhoneの言葉では、各ウインドウはビューと呼ばれます。
iPhone シミュレータで確認
とりあえず、デフォルトのままの状態でビルドし、実行してみます。
すると以下の画像のような何も表示されない状態でシミュレータが起動すると思います。(実際にはウインドウが起動しています。)
この状態では、あまり面白くありませんね。
それでは、少し面白くするためにUIコンポーネントをビューに追加してみましょう。そのためには、HelloWorldViewsViewController.xib を編集する必要があります。「.xib」の拡張子がついているファイルは「.nib」として知られているものです。これらのファイルは、Interface Builder で開くことが出来、あなたのアプリケーションの見た目を定義しています。
UIの要素をホーム画面に追加
HelloWorldViewsViewController.xib をクリックし、Interface Builderを起動します。すると、以下の画像のように、ウインドウ上部に「View」と書かれたiPhoneの形をしたウインドウ（画像内の中央上）や、ライブラリなど、４つのウインドウが現れると思います。もし、Viewのウインドウが表示されてない場合は、File's Owner など
と書かれたファイルがあるウインドウ内の「View」をクリックしてください。
iPhoneアプリを一度でも触ったことがある方なら見慣れているUIコンポーネントがたくさん並んだ「Library」という名前のウインドウがあると思います。
その中から、Labelを探してドラッグ＆ドロップで配置してみてください。
他にも、いくつか適当に選んで「View」のウインドウの上にドラッグ＆ドロップしてみてください。大きさなども自由に変更できます。
私は以下の画像のようにしました。
Label,Text Field,Search Bar,Toolbar の四つを置きました。
Labelの追加が出来たら、Labelをクリックし、「Inspector」(最初に表示された４つのウインドウの一番右上)のAttributes(Inspector内の一番上にある４つのボタンの一番右)を表示してください。
このとき、「Inspector」の名前が「Label Attributes」となっていることを確認してください。
もし、Inspector が表示されていない場合は、Interface Builderメニューの
「Tools」>「Attributes Inspector」をクリックして表示させることも可能です。
「Label Attributes」のなかの「Text」の項目を編集し”HelloWorld”と入力します。
すると以下の画像のような感じになると思います。
Interface Builder 上の変更を保存します。
これで、今回のアプリケーションを実行する準備が出来ました。
コードを実行
Xcodeに戻り、ビルドして実行してみてください。
これで今回の作業は完了です。
今回はコードも書かずに”HelloWorld” を表示するだけの本当に簡単なアプリでしたが、Interface Builder に触れることに少しずつ慣れていきましょう。（もちろん私もですが、、、）
次は、今回のように作ったインターフェースをコードを関連づけて動作させる方法について説明したいと思います。
この投稿へのコメント