日々の記録。

プログラミングのメモや感じた事などを記録。

その2 "Hello world!"を表示してみよう 前編

その1 夏休みにMacでメトロノームアプリを作ってみよう!!へ戻る

今回は、画面を作成して"Hello world!!"という文字列を表示してみたいと思います。

まずは実行!!

MetrnomeAppプロジェクトを作成すると、次のような画面が表示されます。

スクリーンショット 2014-08-04 22.02.42.png

まずはとにかく実行してみよう! 実行するにはキーボードのCommand+Bを押すと、ビルドという処理が行われ、実行ファイルが作成されます。そのあと、Command+Rを押すと、iOSシミュレータが起動してアプリが起動されます。

スクリーンショット 2014-08-04 22.06.35.png

はい、真っ黒です。何もしていないから空の状態のアプリが動きました。

ビルドって?

プログラムは、ソースコードを記述することによって作成します。ソースコードは、左側にあるAppDelegate.hやAppDelegate.mなどのファイルを選択すると見ることができます。またソースコードを書いたファイルをソースファイルと呼びます。

スクリーンショット 2014-08-04 22.24.10.png

この右側の文字の羅列がソースコードです。ソースコードを見たりしたり編集するためのツールをエディタと呼びます。

ソースコードは人が読める文字列ですが、コンピュータはソースコードを処理する事はできません。これをコンピュータで処理できるように変換する処理をビルドと呼びます。ビルドを行うと、ソースコードから実行ファイルを作成します。

画面を表示してみよう

大きな流れとしては、ViewControllerという画面用のソースファイルを作成し、それを表示してみましょう。

ViewControllerファイルの作成

1 Command+Nを実行して、ファイルの新規作成画面を表示し、Objective-C classを選択してNextをクリックします。

スクリーンショット 2014-08-04 22.31.31.png

2 クラス名に、MetronomeViewController、SubclassにUIViewController、Also create XIB fileにチェックを入れ、iPhoneを選択して、Nextをクリックします。(下図参照)

スクリーンショット 2014-08-04 22.35.31.png

3 ソースファイルの作成場所選択ダイアログが表示されるので、デフォルトのままCreateをクリックします。

スクリーンショット 2014-08-04 23.15.27.png

クリックすると

  • MetronomeViewController.h
  • MetronomeViewController.m
  • MetronomeViewController.xib

という3つのファイルが生成されます。

スクリーンショット 2014-08-04 23.31.36.png

MetronomeViewController.hなど、.hのファイルをヘッダーファイル、.mのファイルをソースファイル、.xibファイルを一般的にXIBファイルと呼びます。

画面の編集

1 XIBファイルを選択すると、インターフェースビルダーという画面が表示されます。この画面で、MetronomeViewControllerの画面を作成できます。

スクリーンショット 2014-08-04 23.37.29.png

中央に表示されている、白いパネルにラベルやボタンを貼り付けて、画面の見た目を作成できます。ちなみにこの白いパネルをここではビューと呼びます。

2 画面に文字列を表示するには,Labelと表示されたコントロール(ボタンやラベルなど画面に貼り付けられる部品をここではコントロールと呼びます。)をビューへドラッグアンドドロップします。

スクリーンショット 2014-08-04 23.45.09.png

右下のLabelを・・・ビューへドラッグアンドドロップ!!

スクリーンショット 2014-08-04 23.46.09.png

3 ビューに貼り付けたラベル(Labelと表示された部分)をダブルクリックすると、文字列を変更できるので、Hello world!!と入力します。

スクリーンショット 2014-08-04 23.49.42.png

若干中央からずれてしまったので、ラベルをドラッグアンドドロップして、画面中央に移動します。

スクリーンショット 2014-08-04 23.50.39.png

さて、これでCommand+B、Command+Rを押してビルドと実行をしてみましょう。。

・・・黒い画面のままですね。 なぜでしょう?

答えは、MetronomeViewControllerでHello world!!を表示する画面を作成しましたが、「この画面を表示する」という処理がありません。このようにiPhoneやコンピュータは、プログラミングで指示していない事を行いません。行う事は一つ一つ指示する必要があります。面倒ですね。 けどその指示を組み合わせる事で新しいゲームや、アプリケーション、サービスが生まれています。凄いですね!

今回はHello world!!を表示する画面の作成までです。 次回はこれを表示してみましょう!!

その3へ