2010年11月19日 過去Blog
前回は、UITableViewを使って”HelloWorld”を表示しましたが、今回は、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」として保存。

2-1この時点で、いくつかのデフォルトファイルが追加されます。

その中にメインウインドウを起動するためのコードが含まれ、これを編集することが出来ます。

iPhoneの言葉では、各ウインドウはビューと呼ばれます。

iPhone シミュレータで確認

とりあえず、デフォルトのままの状態でビルドし、実行してみます。

すると以下の画像のような何も表示されない状態でシミュレータが起動すると思います。(実際にはウインドウが起動しています。)

2-2この状態では、あまり面白くありませんね。

それでは、少し面白くするためにUIコンポーネントをビューに追加してみましょう。そのためには、HelloWorldViewsViewController.xib を編集する必要があります。「.xib」の拡張子がついているファイルは「.nib」として知られているものです。これらのファイルは、Interface Builder で開くことが出来、あなたのアプリケーションの見た目を定義しています。

UIの要素をホーム画面に追加

HelloWorldViewsViewController.xib をクリックし、Interface Builderを起動します。すると、以下の画像のように、ウインドウ上部に「View」と書かれたiPhoneの形をしたウインドウ(画像内の中央上)や、ライブラリなど、4つのウインドウが現れると思います。
もし、Viewのウインドウが表示されてない場合は、File's Owner など
と書かれたファイルがあるウインドウ内の「View」をクリックしてください。
2-3iPhoneアプリを一度でも触ったことがある方なら見慣れているUIコンポーネントがたくさん並んだ「Library」という名前のウインドウがあると思います。 その中から、Labelを探してドラッグ&ドロップで配置してみてください。 他にも、いくつか適当に選んで「View」のウインドウの上にドラッグ&ドロップしてみてください。大きさなども自由に変更できます。 私は以下の画像のようにしました。 Label,Text Field,Search Bar,Toolbar の四つを置きました。 2-4Labelの追加が出来たら、Labelをクリックし、「Inspector」(最初に表示された4つのウインドウの一番右上)のAttributes(Inspector内の一番上にある4つのボタンの一番右)を表示してください。 このとき、「Inspector」の名前が「Label Attributes」となっていることを確認してください。
もし、Inspector が表示されていない場合は、Interface Builderメニューの
「Tools」>「Attributes Inspector」をクリックして表示させることも可能です。
「Label Attributes」のなかの「Text」の項目を編集し”HelloWorld”と入力します。 すると以下の画像のような感じになると思います。 2-5 Interface Builder 上の変更を保存します。 これで、今回のアプリケーションを実行する準備が出来ました。

コードを実行

Xcodeに戻り、ビルドして実行してみてください。 2-6これで今回の作業は完了です。 今回はコードも書かずに”HelloWorld” を表示するだけの本当に簡単なアプリでしたが、Interface Builder に触れることに少しずつ慣れていきましょう。(もちろん私もですが、、、) 次は、今回のように作ったインターフェースをコードを関連づけて動作させる方法について説明したいと思います。

この投稿へのコメント

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CAPTCHA


ピックアップ記事

PCのバックアップ

2010年10月05日 過去Blog
PCのバックアップ箇所のメモ デスクトップ マイドキュメント アウトルック(dbx,アカウント) ffftp hostsファイル IE,fireFox ブックマーク
「PCのバックアップ」をはてなブックマークに追加

xreaサーバ phpMyAdminへのログイン

2010年08月26日 過去Blog
二段階で認証があって毎回忘れてしまうので、メモ。。。 最初の認証は、xreaのデータベース画面下の方にある 「ページ入室の際はログ閲覧画面の認証パスワード(ユーザー名:****,パスワード:@@@@)をご利用下さい。」 の箇所の通り入力。 phpMyAdminの認証は使いたいデータベース名とそのパスワード。 ポップ認証 ユーザー名:userID,パスワード:wpec(4文字) ウェブ認証 …
「xreaサーバ phpMyAdminへのログイン」をはてなブックマークに追加

iPhoneからWordPressへの画像のアップロードに失敗する

2011年01月12日 過去Blog
Wi-Fi環境でエラーが連続したので、3Gにしてみると、一定のサイズまでは正常にアップロードされ、サイズが少し大きくなると途中でエラーになります。 Word Press側の問題なのか、なんなのか切り分け出来なかったので、いろいろ調べていると、Word Press 本体のバージョンアップをすれば、直るという記事を見つけたので、一度、試してみようと、WP管理画面上から、自動アップグレードを実行すると…
「iPhoneからWordPressへの画像のアップロードに失敗する」をはてなブックマークに追加

[6]:SQLiteを使ってToDoリストアプリを作成(1)

2010年12月01日 過去Blog
このブログのチュートリアルを順に読み進めてくださった方なら、このチュートリアルがUITableVIewを優先的に取り組んできたことをご存知かと思います。 この理由としては、多くのアプリケーションが、このシンプルなコントロールを使って開発されているからです。 今回はUITableViewの最後のチュートリアルとして、今までのチュートリアルで学んできたことをすべて使い、SQLiteの技術を追加し、ToDoリストを作成していきます。 また、多くの機能を持ったテーブルセルを追加し、iPhoneが提供している他のコントロールについても学んでいきます。 過去の記事を既読の方を想定していますので、まだの方は、そちらの記事に先に目を通されることをおすすめします。 このチュートリアルは、いくつかのシリーズから成り立つので、過去の記事に比べ少し長くなります。この最初のチュートリアルで学ぶことは以下です。 今回学ぶこと: Navigation-Based Application の新規作成 データベースの作成 プロジェクトにデータベースの追加 SQLite3のフレームワークを追加 ToDoクラスのオブジェクトの作成 データベースの初期化 …
「[6]:SQLiteを使ってToDoリストアプリを作成(1)」をはてなブックマークに追加

Drupal6でクリーンURL

2011年04月25日 過去Blog
.htaccessに以下を記述してルートに設置 # Various rewrite rules. <IfModule mod_rewrite.c>   RewriteEngine on   # Modify the RewriteBase if you are using Drupal in a subdirectory and   # the rewrite rules are n…
「Drupal6でクリーンURL」をはてなブックマークに追加
© graffiti on the web . All rights reserved. WordPress Theme by comfy