最もシンプルなアプリを作る

iPhoneの画面に「ボタン」と「ラベル」を配置して、ボタンを押したらラベルに文字列「hello world」と表示するアプリを作ってみましょう。

上のように動くアプリを作るためには、↓このようなプログラムが必要です。

難しそう！　と思ったかもしれませんが大丈夫です。

なぜなら自分で打ち込むプログラムは、このうちのたった1行だけですから。

1．プロジェクトを作る

まずアプリケーションフォルダに入っているXcodeを起動してください。

Xcodeを起動したら「Create a new Xcode project」をクリックしてください。
「Xcodeのあたらしいプロジェクトを作る」という意味です。

もしくは、Xcodeのメニューの「File」→「New」→「Project」をクリックしてもプロジェクトを作れます。

選択画面が開いたら、上から「iOS」「App」を選んで、右下の「Next」を押してください。

必要な情報を入力します。入力するのはすべて英数字にしてください。

日本語を入力するとエラーのもとになります。

・Product Name（アプリ（製品）の名前）
今回は「helloWorld」にします。

・「Team（開発チーム）」
初めての方は「Add an Acount…」を選んでAppleIDでログインしてください。2回目からはAppleIDを選ぶだけでOKです。

なお、レンタルの場合は変更しなくて大丈夫です。

Add accountをしたら、自分のAppleIDとパスワードを入力してください。

Descriptionは説明です。適当に入れておいてください。

↑このようになったらOKです。左上の赤い「閉じるボタン」を押してウインドウを閉じてください。

Team欄をクリックすると、AppleIDの設定が成功していたら自分の名前が出てくるので選んでください。

・Organization Name（組織の名前）
会社名などを入力しますが、自分個人の名前で大丈夫です。

・Organization Identifier（組織の識別子）
jp.yamadaなど、「jp.」を頭に付けて、後ろは組織名や名字などを入れます。

・Language（言語）
Swiftを選んでください。

・User Interface
Storyboardを選んでください。

・チェックボックスは全部はずしてください。

入力が終わったら「Next」を押して次の画面に進んでください。

作ったアプリを保存する場所を決めます。

「Documents」などで大丈夫です。アプリ開発用のフォルダに入れたい時はフォルダを作って、そこを選んでください。

「Create（作成）」を押すと、アプリの開発画面が起動します。

では、アプリの画面デザインを作っていきましょう。

2.スマホの画面にラベルとボタンを配置する

開発画面の左には「ファイルの一覧」が表示されています。
ファイル一覧の「Main.storyboard」をクリックすると、スマホのデザイン画面が真ん中に表示されます。

中央にiPhoneのデザイン画面が出てきます。最初は真っ白です。

デザイン画面の右上にある「＋」のアイコンをクリックすると、ボタンやテキストを表示するラベルなどの「部品リスト」が出てきます。

リストの中にはボタン（Button）やラベル(Label)、文字入力欄（Text Field）などの部品があり、デザイン画面にドラッグすることで配置できます。

最初に部品リストを開いた時は、下のように部品の説明画面が大きく表示されることが多いようです。

右上のアイコンをクリックすると説明画面が隠れてコンパクトに表示されます。

まずは「Button」をドラッグしてデザイン画面に移動させてください。

すると、新しいボタンが配置されます。

3.ボタンのタイトルを変える

青い文字で「button」と表示されているのが配置したボタンです。

「button」をクリックすると、Xcodeの右側にボタンの設定が表示されます。

「Title」のところにある「button」という文字を「ボタンその１」に書き換えてください。

入力してreturnキーを押すと、デザイン画面のボタンのタイトルが変わります。

デザイン画面のボタンの枠にマウスカーソルを重ね、ドラッグして広げることでボタンのサイズを変更できます。

ボタンのフォントも変更できます。「Font」の右にある上下ボタンを押すとフォントのサイズが変わります。

Tボタンを押すとフォントの種類も変えられます（今はそのままでOK）。

4.ラベルを追加する

部品一覧にある「Label」をボタンと同じ要領でデザイン画面に置いてください。

ラベルの幅もボタンと同じように広くできます。

ラベルの文字を中央揃えにしてみましょう。

ラベルの設定にある「Alignment」で中央揃えをクリックすると、「Label」という文字が中央揃えになります。

5.ボタンとラベルをプログラムに接続（Connect）する

次は、画面とプログラムを接続する（関連付けする）作業をします。

アプリは、さっき作った見た目の「デザイン」と背後で動く「プログラム」に分かれています。

デザインとプログラムを結び付けないと、アプリらしい動作を作っていくことができません。

中央にあるデザイン画面の右上にあるアイコンを押すと、デザイン画面が2つに分かれます。

最初は2画面の両方にMain.storyboardが表示されます。

2つに分かれた右側の画面に「ViewController.swift」というファイルを開きましょう。

これには2通りのやり方があります。

ひとつは画面上部のフォルダから表示したいファイルを選んでいく方法。

もうひとつは下図のように一度右画面をクリックした後に、ファイル一覧で表示させたいファイルをクリックする方法です。

2画面にするとデザイン画面にiPhoneのキャンバスが見えなくなりますが、部品一覧（ドキュメントアウトライン）で「View」をクリックすると、デザイン画面の中央にキャンバス全体が見える大きさで自動的に配置されます。

これで左にデザイン画面、右にプログラム画面が表示されました。

それでは、まず「ボタンをタップしたら」という動作をプログラムに結びつけます。

「Ctrlキー」を押しながら「ボタンその１」をクリックすると黒いポップアップウィンドウが現れます。

リストの下から1/3くらいのところに「Touch Up Inside」（タッチアップインサイド）という項目があるので、右端の○をドラッグしてプログラム画面に引っ張ってください。

プログラム画面に青いガイドラインが現れたら離します。

成功するとグレーのポップアップウィンドウが現れます。「Name」の部分に「tapButton」と入力してください。

名前を入力して右下の「Connect（接続）」を押すと、ボタンのアクションがプログラム画面に追加されます。