以前の記事ではアプリ開発の勉強は
基本だけ勉強してすぐにアプリ開発に
取り掛かった方がいいと言いましたが…
自分がネットで検索するとあまりにも
初心者向けにわかりやすく解説しているサイトが無いので…^^;
私が初心者でもわかりやすいように説明したいと思います！
この基本的な流れは非常に重要なのでしっかり手順をマスターして欲しいと思います。
XcodeでiPhone開発のプロジェクトを作成する
iPhoneアプリは「プロジェクト」という単位で開発を行います。
Xcodeを起動して以下の画面が表示されたら
「Create a new Xcode project」を選択します。
他の選択肢にの意味についてはここを参考にしてください。
今回はシンプルなアプリをつくるので「Single View Application」を選択します。
作るアプリケーションのタイプによってここは選択していきます。
以下のように入力します。
■Product Name … アプリの名前を入力します。
■Organization Name … 組織名を入力します。省略可能です。
■Organization Identifier … アプリを公開する時に一意の値になるように入力します。
慣例では自分が持っているドメインを逆から入力します。
自分の場合は「t-higashi.com」のブログがあるので
「com.t-higashi」と入力しています。
自分のドメインが無ければ「jp.co.hogehoge」など
適当な値を設定してください。
■Language … 「Swift」を選択してください。今さら「Objective-C」はねぇ…
■Device … 「iPhone」を選択します。
最後に保存する場所を選択してプロジェクトを作成しましょう！
ちなみにXcodeを終了した後に再度作成したプロジェクトを
開く場合はXcodeのメニューから「File」→「Open」を選択して
保存したプロジェクトのフォルダを開き拡張子が
「xcodeproj」のファイルを選択するとプロジェクトが開きます。
オブジェクトを配置する
LabelとButtonを画面に配置してみましょう！
Xcodeの画面左側にある「ナビゲータエリア」から「Main.storyboard」を選択します。
すると中央に以下の画面が表示されます。
この画面を「Interface Builder(インターフェイスビルダー)」といいます。
この画面にLabelとButtonを配置してみます。
Xcodeの画面右側の「ユーティリティエリア」からLabelをドラッグして画面に配置します。
「Auto Layout」でLabelの位置を調整しましょう。
Labelを選択して画面下の左から2番めのアイコンを選択して
「Horizontally in Container」を選択して「Add 1 Constraint」をクリックします。
これでLabelはiPhone5、iPhone6、iPadなど画面サイズが
違っても常に左右中央にLabelが表示されます。
画面下左から3番目アイコンを選択して
上の赤い棒みたいなものをクリックして
数値は「100」と入力して「Add 1 Constraint」をクリックします。
これでLabelは画面サイズが違っても
常に画面上部から100ポイント下の座標ににLabelが表示されます。
ButtonもLabelと同じように貼り付けます。
Buttonの表示は「Helloworld」と表示させるように変更します。
Buttonの水平位置と垂直位置は以下のように設定しました。
Buttonは画面サイズが違っても左右中央に
上下は画面下から100ポイント上の座標にButtonが表示されます。
OutletとActionを設定する
次は「インターフェイスビルダー」で貼り付けたラベルと
ボタンをプログラムから操作できるように設定しますよ〜
まずはプログラムからラベルの表示を変更できるように設定します。
Xcode右上にある以下のボタンをクリックすると
「Interface Builder」と「エディタ」が2つ同時に表示されます。
Labelを選択しcontrolキーを押しながら「エディタ」にドラッグします。
Connectionが 「Outlet」になっているか確認し
Nameを「Label」と入力して「Connect」を選択します。
下の図では13行目に「Outlet」が作成されました
「Outlet」とはオブジェクトの設定などに
プログラムからアクセスできる窓口みたいなもので
この場合は上記で設定したLabelの設定内容に
プログラムから設定できるようになります。
「Outlet」の変数「Label」が作成されましたので
この変数を使用してLabelの設定内容を変更していきます。
ButtonもLabelと同じようにcontrolキーを
押しながら「エディタ」にドラッグすると
下図のように表示されConnectionを「Action」に選択し
Nameを「Button_Click」に設定
Eventが「Touch Up Inside」になっていることを確認して「Connect」選択します。
「エディタ」に「Action」が追加されました。
上記で設定したButtonがタッチされた時に「Button_Click」と
いう関数が実行されるようになります。
この関数にプログラムを記述してみましょう。
プログラムを記述するまえに下図の左のボタンをクリックして表示を元に戻しておきましょう。
プログラムを記述する
簡単なプログラムを記述したいと思います。「
ナビゲータエリア」から「ViewController.swift」を選択すると「エディタ」が表示されます。
先ほど作成した「Button_Click」の「Action」に以下のコードを記述します。「
Outlet」で設定したLabelにアクセスしLabelの設定情報「text」を「Hello World!」という文字に変更しています。
// Buttonをタップした時の処理
@IBAction func Button_Click(sender: AnyObject) {
self.Label.text = "Hello World!" // Labelのテキストを「Hello World!」に変更する
}
プログラムを実行する
いよいよプログラミングを実行してみましょう。
Xcode左上にある三角のボタンを押します。
「シミュレータ」が表示されます。
「シミュレータ」の画面が大き過ぎる場合は
「シミュレータ」のメニューから
「Window」→「Scale」→「50%」あたりを選択します。
「Hellworld」というボタンを押すと…
Labelの表示が「Hello World!」になれば成功です！お疲れ様でした〜
まとめ
- Xcodeは「プロジェクト」単位で開発を行いiPhoneアプリを開発するには「Create a new Xcode project」を選択する。
- Labelやボタンなどの配置は「Main.storyboard」を選択すると表示される「Interface Builder(インターフェイスビルダー)」で行う。
- iPhone5、iPhone6、iPhone6 Plusなど画面サイズ違う端末でも同じように表示させるために「Auto Layout」を利用してLabelやボタンなどの位置を設定する。
- Labelなどの設定情報をプログラムからアクセスするには「Outlet」を設定する。
- Buttonをタップした時の動作などのプログラミングしたい場合は「Action」を設定し「Action」で作成された関数の中に行いたい処理を記述する。
- プログラムから「Outlet」でLabelに設定した変数にアクセスするとLabelの設定内容を変更することができる。
この開発の流れはXcodeの基本かつ重要な部分なので
理解できるまでプログラムをいろいろ変更するのもいいですね〜
