その2 "Hello world!"を表示してみよう 前編
その1 夏休みにMacでメトロノームアプリを作ってみよう!!へ戻る
今回は、画面を作成して"Hello world!!"という文字列を表示してみたいと思います。
まずは実行!!
MetrnomeAppプロジェクトを作成すると、次のような画面が表示されます。
まずはとにかく実行してみよう! 実行するにはキーボードのCommand+Bを押すと、ビルドという処理が行われ、実行ファイルが作成されます。そのあと、Command+Rを押すと、iOSシミュレータが起動してアプリが起動されます。
はい、真っ黒です。何もしていないから空の状態のアプリが動きました。
ビルドって?
プログラムは、ソースコードを記述することによって作成します。ソースコードは、左側にあるAppDelegate.hやAppDelegate.mなどのファイルを選択すると見ることができます。またソースコードを書いたファイルをソースファイルと呼びます。
この右側の文字の羅列がソースコードです。ソースコードを見たりしたり編集するためのツールをエディタと呼びます。
ソースコードは人が読める文字列ですが、コンピュータはソースコードを処理する事はできません。これをコンピュータで処理できるように変換する処理をビルドと呼びます。ビルドを行うと、ソースコードから実行ファイルを作成します。
画面を表示してみよう
大きな流れとしては、ViewControllerという画面用のソースファイルを作成し、それを表示してみましょう。
ViewControllerファイルの作成
1 Command+Nを実行して、ファイルの新規作成画面を表示し、Objective-C classを選択してNextをクリックします。
2 クラス名に、MetronomeViewController、SubclassにUIViewController、Also create XIB fileにチェックを入れ、iPhoneを選択して、Nextをクリックします。(下図参照)
3 ソースファイルの作成場所選択ダイアログが表示されるので、デフォルトのままCreateをクリックします。
クリックすると
- MetronomeViewController.h
- MetronomeViewController.m
- MetronomeViewController.xib
という3つのファイルが生成されます。
MetronomeViewController.hなど、.hのファイルをヘッダーファイル、.mのファイルをソースファイル、.xibファイルを一般的にXIBファイルと呼びます。
画面の編集
1 XIBファイルを選択すると、インターフェースビルダーという画面が表示されます。この画面で、MetronomeViewControllerの画面を作成できます。
中央に表示されている、白いパネルにラベルやボタンを貼り付けて、画面の見た目を作成できます。ちなみにこの白いパネルをここではビューと呼びます。
2 画面に文字列を表示するには,Labelと表示されたコントロール(ボタンやラベルなど画面に貼り付けられる部品をここではコントロールと呼びます。)をビューへドラッグアンドドロップします。
右下のLabelを・・・ビューへドラッグアンドドロップ!!
3 ビューに貼り付けたラベル(Labelと表示された部分)をダブルクリックすると、文字列を変更できるので、Hello world!!と入力します。
若干中央からずれてしまったので、ラベルをドラッグアンドドロップして、画面中央に移動します。
さて、これでCommand+B、Command+Rを押してビルドと実行をしてみましょう。。
・・・黒い画面のままですね。 なぜでしょう?
答えは、MetronomeViewControllerでHello world!!を表示する画面を作成しましたが、「この画面を表示する」という処理がありません。このようにiPhoneやコンピュータは、プログラミングで指示していない事を行いません。行う事は一つ一つ指示する必要があります。面倒ですね。 けどその指示を組み合わせる事で新しいゲームや、アプリケーション、サービスが生まれています。凄いですね!
今回はHello world!!を表示する画面の作成までです。 次回はこれを表示してみましょう!!
その3へへ