iPhoneアプリ開発
勉強会
㉛Xcodeを覚えよう！簡単なアプリを
作ってみよう！

プロジェクトを作ってみよう
• XCODEでプログラムを作るときは、プロ
ジェクトを作ります。
• プロジェクトには、プログラムのソース
ファイルの他に、設定ファイルや、画像
データとかも含まれます。

やってみよう①
• XCODEを立ち上げよう！
• New Projectをつくろう！

やってみよう②
• nikomorouという名前のプロジェクトを
作ろう！

やってみよう③
• デスクトップに保存しよう！

できた！
• フォルダができた

ちなみに
• 次回からは、フォルダの中の青いのを開く
とXCODEが立ち上がります！

おおまかなかいせつ
• XCODEについて、おおまかにかいせつし
ます。

おおまかなかいせつ①
• 左側のパネルがファイル一覧
• 上の方がタブになってるから、注意！

MEMO
• フォルダ一覧と実際のフォルダの構造は違
う。
• 実フォルダの他にGROUPというのでフォ
ルダ管理されてる。
• 基本的にファイル名で管理されているので、
違うフォルダだとしても、同じ名前のファ
イルを置かないこと。（おけるけどコンパ
イル時などにおかしくなる）

おおまかなかいせつ②
• プログラムを入れる
フォルダ、設定ファイ
ルを入れるフォルダ
等、あらかじめ決め
られてるのでなるべ
く守ろう！（そのく
せ変な場所に追加さ
れるので注意）

おおまかなかいせつ③
• 左上あたりで、プロ
グラムの実行と停止
や、シミュレーター
の選択ができる

やってみよう
• iPhoneとiPadそれぞれのシュミレーター
で動かしてみよう！
• 実機をつないでも、設定とかいるからエ
ラーになるので、今は我慢しよう！

できた！
• ちょっとだけたのしい！

おおまかなかいせつ④
• 右の方にあるEditorは、左
が通常、真ん中が画面分割
（通称ジェントルマン）、
一番右は、押してはいけな
いボタン（差分表示）
• ストーリーボードを開いて
いる状態で、一番右のボタ
ンを押すと、戻れなくなる
ので、おさないようにしよ
う！
• ジェントルマンを押しっぱ
なしで作業をしてるとおか
しくなることがあるので、
使い終わったら左のでもと
に戻すくせをつけよう！

おおまかなかいせつ⑤
• 真ん中のViewは、画
面に表示するViewを
選べます。
• ここは、押しても
OK！
• なぜか、実行時だけ
デバッグログのView
が自動に閉じるとか
の変な動作になるこ
とがあるけど、根気
よく毎回おそう！

おおまかなかいせつ⑥
• アプリの設定をする
画面
• なんだけど、ここを
いじっても、plistっ
ていう設定ファイル
に反映されたりされ
なかったりするから
注意しよう

XCODEのとくちょう（独自調べ）
• 設定したら反映されるが、削除しても反映
されるとは限らない。
• 削除したものを、もとにもどせるとは限
らない。
• XCODE自体の設定画面で、エディタの色
を変えられるが、おかしな現象が起きる
かもしれないので、できればさわらないで
おこう！

ストーリーボード
• ストーリーボードとは、XCODEのあたら
しめの機能の一つです。
• ビジュアル的に開発ができるのでとても便
利です。

やってみよう
• MainStoryboard.storyboardを左側の
ディレクトリみたいなところから探して選
択してみよう

こんなかんじ！

おおまかなかいせつ①
• 左側のエリアの、わ
くと、真ん中のエリ
アの画面みたいなの
がそれぞれ１対１で
対応しています。

おおまかなかいせつ②
• 左側と真ん中のエリ
アは、対応している
のでどちらかを編集
すると、もう片方に
も影響が出ます。
• 右側のエリアは、詳
細を表示する場所で
す。左側か真ん中で
選択中の情報が出ま
す。

おおまかなかいせつ④
• 右側のエリアのうえ
のとこは、タブみた
いになっています。

やってみよう
• とりあえず、全部削除して、きれいにしよ
う！

やってみよう
• 左のを選んでdeleteキー！
• 真ん中も！
• 右も！

できた！
• すっきり！

やってみよう
• ツリーのアイコンが灰色になってる！
• セーブされてないサイン！
• command+sで保存しよう！

ファイルを消そう
• つかわないファイルを消そう
• さっき消した画面用のプログラムを４個消
してみよう。

やってみよう
• 選択して右ボタン→Delete

やってみよう
• 右側のボタンをおそう！

注意事項
• 真ん中のボタンを間違えて押すと、ファイ
ルが消されずに、参照だけが消されます。

できた！
• すっきりした！

やってみよう①
ViewControlerをおいてみよ
う！

やってみよう②
• リソースを追加しよう！

ステータスバーを消そう
• ステータスバーを消して
みよう
• ストーリーボードのView
の設定も変更しよう！

がめんをつくってみよう①
• こんな感じで画面
を作ろう！

がめんをつくってみよう②
• ViewControlerを
となりにおいてみ
よう！
• こんな感じで画面
を作ろう！

つなごう
• よろこばせるのボタンからmodalで右の
ViewControlerにつなごう！

できた！
• ボタン押すと遷移する！

クラスを作ろう！
• MainViewControllerと
SubViewControllerをつくってそれぞれ
左右のViewControllerに設定しよう！

もどるぼたん
• もどるボタンを実装してみよう！

やってみよう
MainViewController.m
- (IBAction)mainViewReturnActionForSegue:
(UIStoryboardSegue *)segue{
NSLog(@"もどってきた！");
}

やってみよう
• controlをおしながら戻るボタンから
MainViewControllerの緑のExitに線をつなげよう！
• さっき作ったMainViewReturnActionFromSegueが
あるからそれを選ぼう！

かくにんしよう
• つなぐのに成功すると、Exit
にボタンのアクションが設定
されるから確認しよう

できた
• もどるぼたんでもどれた！
• もどるやつをUnwind Segue
といいます。

次の画面に値を渡す
• 台詞を次の画面に渡そう！

segueに名前をつけよう
• Identifierを
goSubViewSegueにしよ
う！

ふきだしをつくろう
• ふきだしの中にラベル
をおこう
• textLabelでOutletしよ
う

台詞を入れる変数
• SubViewControllerに台詞を入れる変数を
作ろう
• @property NSString *text;

台詞を渡そう
MainViewController.m
#import "SubViewController.h
-(void)prepareForSegue:(UIStoryboardSegue *)segue
sender:(id)sender{
if([[segue identifier]
isEqualToString:@"goSubViewSegue"]){
SubViewController *vc = (SubViewController*)[segue
destinationViewController];
vc.text = @ かっこいいね！";
}
}

かいせつ
• -(void)prepareForSegue:
(UIStoryboardSegue *)segue sender:
(id)senderを定義しておくと、segueで移
動する前に呼び出される！
• この時点では、画面は作られていないので、
SubViewControllerのtextLabelはつくら
れていない＞＜。なので変数に値を入れて
おこう！
• SubViewControllerは自分で作ったクラ
スなので、プログラムの先頭で#importし
ないと使えない！

台詞をもらおう
SubViewController.m
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the
view.
self.textLabel.text = self.text;
}

かいせつ
• self.textに入っている文字を、ラベルに設
定しよう

できた
• せりふがでた！

台詞をふやそう
• ランダムで３種類の台詞を出そう！

やってみよう①
-(void)prepareForSegue:(UIStoryboardSegue *)segue
sender:(id)sender{
if([[segue identifier]
isEqualToString:@"goSubViewSegue"]){
SubViewController *vc = (SubViewController*)
[segue destinationViewController];
int no = rand() % 3;

やってみよう②
switch (no) {
case 0:
vc.text = @"はなたかいね！";
break;
case 1:
vc.text = @"あかいのが素敵！";
break;
case 2:
vc.text = @"かっこいいね！";
break;
}
}
}

できた！
• まいかいちがう！

乱数の初期化
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after
loading the view.
srand(time(nil));
}

かいぞうしよう
• アプリに必要な設定をしてみよう！
• サイコロにしてみよう！１∼６まで台詞で
話すようにしよう！

まとめ
• プログラムすこしわかった！

とのさまラボ！
• 勉強会に参加した人どうしのコミニュティがほしい！
勉強会の開催日時の告知がほしい！
という意見をみなさまからいただいたので、
コミニュティを作成しました！
ぜひ「いいね！」をお願いします！
h,ps://www.facebook.com/TonosamaLabo

おわり
主催（共同開催）：
株式会社 gooya
http://www.gooya.co.jp/
メドレー株式会社
http://www.medley.co.jp/
講師：西田 寛輔 (Tonosamart)
http://www.facebook.com/tonosamart