第18回ビギナー勉強会のサルでき補足資料(iPhoneアプリ開発超入門)

ビギナー勉強会資料
13.7.27 Sat.
第18回名古屋iPhone開発者勉強会
リード役：はっとまん

はっとまんの自己紹介
本名：服部貴俊（はっとりたかとし）
名古屋市南区在住
似てる有名人
トム・クルーズ、ディカプリオ等※
twitter : @tatsujinbomber
facebook :「服部貴俊」で登録してます。
ぜひ、お友達になりましょう。
2※ すいません。ウソつきました。

教科書はいつもの
UI設計ではInterface Builder
使わず、コードでバリバリ作る
硬派な本を使って勉強です。
項目は独立。
どこから手を付けてもOK。
毎回2∼3テーマ進めています。
3

今日のお題は
chapter3-14
Storyboardを使ってみよう
iPhoneアプリ開発塾の著者
カワサキタカシさんの特別授業
所要時間30分
4
所要時間60分

chapter3-14 Storyboardを使ってみよう
Storyboard上で、UIViewController、
ボタン、ラベルを加えて、画面遷移を
設定します。
オリジナルのUIViewControllerクラス
(TestClassViewController)を作ります。
TestClassViewControllerとStoryboard上で
加えたUIViewControllerの絵を紐付けします。
TestClassViewControllerのコードに、
Labelの表示を変えるコードを書きます。
コード量は、なんと1行
但し、画面上の設定多し！(残念でしたw)
【目標】
30分以内
コードで
文字変更
簡単な
画面遷移
5

まず、Xcode起動
6

Single View Applicationを選択
7

Projectのオプションを設定
この２つチェック
まさに、Storyboardの出番です
8
名前は適当に
iPhoneで
そのままでOK

プロジェクトを
保存したい
フォルダに移動
保存場所決めます
9

開発画面が登場します。
慣れればここまで10秒以下
10

駆け足で開発環境を確認しておきます。
11
プログラムのソース。

12
右上のViewボタンは、モニターの小さなMacでは良く使います。
適宜ON/OFFを切り替えながら作業しましょう。
ナビゲータ
エリア
ユーティリティ
エリア
デバッグエリア

13
Editorボタンの中央、アシスタントエディターは関連ソースを並べてみるとき便利。
やめる時は、左のスタンダードエディターを押します(右のボタンはまた今度)。
アシスタント
エディターが登場
Counterparts設定では、メインに対応する
.h /.mファイルが即座に表示されます。
こっちがメインの
エディター

14
アシスタントエディターの配置も変更可能。いじってみましょう。
ここのボタンでアシスタント
エディタの追加/削除ができます

15
アシスタントエディター側の表示ファイルを固定したい場合は、Manualモードへ
Counterpartsをクリック。
リストのManualから、固定表示させる
ファイルを指定できます。
アシスタントエディターは、
常に同じファイルを表示可能。
storyboardとソースを並べる際にも有用です。

16
Xcodeには、タブ表示もあります。
この辺、ダブルクリックか、右クリックからNew Tabで。

17
この辺りの細いところを
クリックし、
{∼} を折り畳んで、
コードを俯瞰しやすく
できます。
ファイルの閲覧履歴を ◀戻る進む▶ ことができます。

それでは、まず教科書のP.148∼P.152まで実施して、
画面の遷移ができることを確認してください
(ここは簡単なので省略します)。
TestClassViewContrller(UIViewControllerクラスを継承)
を作ります。
ソースファイルの追加は、適当な位置で
右クリックして、New Fileを選択
18

Objective-C Classの雛形を選びます。
19

TestClassViewControllerと打って、
UIViewControllerをリストから選択
作成するクラスの名前と、何クラスを継承するかを決めます。
20

プロジェクトに追加します。
21

ヘッダーと実装ファイルが出来ました。
変な所にできたら、上下にドラッグして
位置を変更できます。
ソースファイルの存在を確認します。
22

絵とコードを紐付けします。
どちらかで、
絵のViewControllerを指定して
クラスのソースコードを
選択します
ViewController選択時は
枠が青いことに注目
23
黒いところか、
外枠をクリック

コードにLabel参照用のポインタ変数を定義します。
24
IBOutlet (?) って戸惑う人がいるかもしれません。
これは変数型とかでなく、Xcodeで絵のパーツと
変数を紐付ける目印にすぎません。
コンパイル時にvoid型に変換されるようです。

⃝をラベルまで
引っ張ります※
変数と画面上のラベルを接続します。
25※この作業10回ぐらいやれば慣れます。

ソース側でも、接続を確認できます。
ここが、黒になってれば、何かを参照してます。
クリックすると、Labelと
接続していることが分かります。
接続を確認します。
26

みなさん、動きましたか？
それでは、RUNしてみましょう。
27

Xcodeの各種設定 & Tips
過去にご紹介した
28

Xcodeの各種設定（その１）
エディタの行番号の表示
29
行番号が登場。

Xcodeの各種設定（その2）
エディタの背景色、フォントの大きさ
既存の項目から
選んだり
+ボタンで自分の
定義も作成可能
30

Coding：強力な補完機能を活用しよう！
小文字でも大文字でもいいので、タイピングしつつ
候補が出たらTab連打か、Returnで確定しましょう。
自分で付ける変数名以外で、候補が出ない時は要注意。
上下キーで移動これだと思ったらReturnで確定
値を入力しては、次の要素にtabキーで移動
例
31

#import <UIKit/UIKit.h>
@interface ViewController : UIViewController <UIScrollViewDelegate>
{
UIImageView *customImageView;
}
-(void)configureView;
@end
実際に打ってる箇所は、ピンクの所ぐらい。
途中で上下キー、tab、Returnで補完すれば、
打つ量はもっと少ないはずです。
実際に打ち込んでる箇所（ヘッダーファイルの例）
Xcodeはエラー箇所と修正候補を教えてくれます。
エラー印
エラー出たらその都度修正（後回しにしてもいいことないです。多分）
クリックで修正候補が出ます。候補で良ければFix-it行ダブルクリックで置換できます。
※変数等は、大文字小文字を区別するようです。
32

ありがとうございました。
また、次回もお付き合いください。

第18回ビギナー勉強会のサルでき補足資料(iPhoneアプリ開発超入門)

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Semelhante a 第18回ビギナー勉強会のサルでき補足資料(iPhoneアプリ開発超入門)

Semelhante a 第18回ビギナー勉強会のサルでき補足資料(iPhoneアプリ開発超入門) (6)

Mais de Takatoshi Hattori

Mais de Takatoshi Hattori (14)

Último

Último (6)