第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の雛形を選びます。chapter3-14 Storyboardを使ってみよう

19

TestClassViewControllerと打って、UIViewControllerをリストから選択

作成するクラスの名前と、何クラスを継承するかを決めます。


20

プロジェクトに追加します。chapter3-14 Storyboardを使ってみよう

21

ヘッダーと実装ファイルが出来ました。変な所にできたら、上下にドラッグして

位置を変更できます。

ソースファイルの存在を確認します。chapter3-14 Storyboardを使ってみよう

22

絵とコードを紐付けします。

どちらかで、絵のViewControllerを指定して


クラスのソースコードを選択します

ViewController選択時は枠が青いことに注目

23

黒いところか、外枠をクリック

コードにLabel参照用のポインタ変数を定義します。


24

IBOutlet (?) って戸惑う人がいるかもしれません。これは変数型とかでなく、Xcodeで絵のパーツと

変数を紐付ける目印にすぎません。コンパイル時にvoid型に変換されるようです。

◯をラベルまで引っ張ります※

変数と画面上のラベルを接続します。


25※この作業10回ぐらいやれば慣れます。

ソース側でも、接続を確認できます。ここが、黒になってれば、何かを参照してます。

クリックすると、Labelと接続していることが分かります。

接続を確認します。


26

みなさん、動きましたか？

それでは、RUNしてみましょう。chapter3-14 Storyboardを使ってみよう

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アプリ開発超入門)

Education

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