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

850 views

Published on

"はっとまん"こと、服部貴俊です。
名古屋のiPhoneアプリ開発勉強会の資料です。
https://www.facebook.com/iDevNagoya

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
850
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. ビギナー勉強会資料 13.7.27 Sat. 第18回名古屋iPhone開発者勉強会 リード役:はっとまん
  2. 2. はっとまんの自己紹介 本名:服部貴俊(はっとりたかとし) 名古屋市南区在住 似てる有名人 トム・クルーズ、ディカプリオ等※ twitter : @tatsujinbomber facebook :「服部貴俊」で登録してます。 ぜひ、お友達になりましょう。 2※ すいません。ウソつきました。
  3. 3. 教科書はいつもの UI設計ではInterface Builder 使わず、コードでバリバリ作る 硬派な本を使って勉強です。 項目は独立。 どこから手を付けてもOK。 毎回2∼3テーマ進めています。 3
  4. 4. 今日のお題は chapter3-14  Storyboardを使ってみよう iPhoneアプリ開発塾の著者 カワサキ タカシさんの特別授業 所要時間30分 4 所要時間60分
  5. 5. chapter3-14 Storyboardを使ってみよう Storyboard上で、UIViewController、 ボタン、ラベルを加えて、画面遷移を 設定します。 オリジナルのUIViewControllerクラス (TestClassViewController)を作ります。 TestClassViewControllerとStoryboard上で 加えたUIViewControllerの絵を紐付けします。 TestClassViewControllerのコードに、 Labelの表示を変えるコードを書きます。 コード量は、なんと1行 但し、画面上の設定多し!(残念でしたw) 【目標】 30分以内 コードで 文字変更 簡単な 画面遷移 5
  6. 6. まず、Xcode起動 chapter3-14 Storyboardを使ってみよう 6
  7. 7. Single View Applicationを選択 chapter3-14 Storyboardを使ってみよう 7
  8. 8. Projectのオプションを設定 この2つチェック まさに、Storyboardの出番です chapter3-14 Storyboardを使ってみよう 8 名前は適当に iPhoneで そのままでOK
  9. 9. プロジェクトを 保存したい フォルダに移動 chapter3-14 Storyboardを使ってみよう 保存場所決めます 9
  10. 10. chapter3-14 Storyboardを使ってみよう 開発画面が登場します。 慣れればここまで10秒以下 10
  11. 11. 駆け足で開発環境を確認しておきます。 11 プログラムのソース。
  12. 12. 12 右上のViewボタンは、モニターの小さなMacでは良く使います。 適宜ON/OFFを切り替えながら作業しましょう。 ナビゲータ エリア ユーティリティ エリア デバッグエリア
  13. 13. 13 Editorボタンの中央、アシスタントエディターは関連ソースを並べてみるとき便利。 やめる時は、左のスタンダードエディターを押します(右のボタンはまた今度)。 アシスタント エディターが登場 Counterparts設定では、メインに対応する .h /.mファイルが即座に表示されます。 こっちがメインの エディター
  14. 14. 14 アシスタントエディターの配置も変更可能。いじってみましょう。 ここのボタンでアシスタント エディタの追加/削除ができます
  15. 15. 15 アシスタントエディター側の表示ファイルを固定したい場合は、Manualモードへ Counterpartsをクリック。 リストのManualから、固定表示させる ファイルを指定できます。 アシスタントエディターは、 常に同じファイルを表示可能。 storyboardとソースを並べる際にも有用です。
  16. 16. 16 Xcodeには、タブ表示もあります。 この辺、ダブルクリックか、右クリックからNew Tabで。
  17. 17. 17 この辺りの細いところを クリックし、 {∼} を折り畳んで、 コードを俯瞰しやすく できます。 ファイルの閲覧履歴を ◀戻る 進む▶ ことができます。
  18. 18. それでは、まず教科書のP.148∼P.152まで実施して、 画面の遷移ができることを確認してください (ここは簡単なので省略します)。 TestClassViewContrller(UIViewControllerクラスを継承) を作ります。 ソースファイルの追加は、適当な位置で 右クリックして、New Fileを選択 chapter3-14 Storyboardを使ってみよう 18
  19. 19. Objective-C Classの雛形を選びます。 chapter3-14 Storyboardを使ってみよう 19
  20. 20. TestClassViewControllerと打って、 UIViewControllerをリストから選択 作成するクラスの名前と、何クラスを継承するかを決めます。 chapter3-14 Storyboardを使ってみよう 20
  21. 21. プロジェクトに追加します。 chapter3-14 Storyboardを使ってみよう 21
  22. 22. ヘッダーと実装ファイルが出来ました。 変な所にできたら、上下にドラッグして 位置を変更できます。 ソースファイルの存在を確認します。 chapter3-14 Storyboardを使ってみよう 22
  23. 23. 絵とコードを紐付けします。 どちらかで、 絵のViewControllerを指定して chapter3-14 Storyboardを使ってみよう クラスのソースコードを 選択します ViewController選択時は 枠が青いことに注目 23 黒いところか、 外枠をクリック
  24. 24. コードにLabel参照用のポインタ変数を定義します。 chapter3-14 Storyboardを使ってみよう 24 IBOutlet (?) って戸惑う人がいるかもしれません。 これは変数型とかでなく、Xcodeで絵のパーツと 変数を紐付ける目印にすぎません。 コンパイル時にvoid型に変換されるようです。
  25. 25. ⃝をラベルまで 引っ張ります※ 変数と画面上のラベルを接続します。 chapter3-14 Storyboardを使ってみよう 25※この作業10回ぐらいやれば慣れます。
  26. 26. ソース側でも、接続を確認できます。 ここが、黒になってれば、何かを参照してます。 クリックすると、Labelと 接続していることが分かります。 接続を確認します。 chapter3-14 Storyboardを使ってみよう 26
  27. 27. みなさん、動きましたか? それでは、RUNしてみましょう。 chapter3-14 Storyboardを使ってみよう 27
  28. 28. Xcodeの各種設定 & Tips 過去にご紹介した 28
  29. 29. Xcodeの各種設定(その1) エディタの行番号の表示 29 行番号が登場。
  30. 30. Xcodeの各種設定(その2) エディタの背景色、フォントの大きさ 既存の項目から 選んだり +ボタンで自分の 定義も作成可能 30
  31. 31. Coding:強力な補完機能を活用しよう! 小文字でも大文字でもいいので、タイピングしつつ 候補が出たらTab連打か、Returnで確定しましょう。 自分で付ける変数名以外で、候補が出ない時は要注意。 上下キーで移動 これだと思ったらReturnで確定 値を入力しては、次の要素にtabキーで移動 例 31
  32. 32. #import <UIKit/UIKit.h> @interface ViewController : UIViewController <UIScrollViewDelegate> { UIImageView *customImageView; } -(void)configureView; @end 実際に打ってる箇所は、ピンクの所ぐらい。 途中で上下キー、tab、Returnで補完すれば、 打つ量はもっと少ないはずです。 実際に打ち込んでる箇所(ヘッダーファイルの例) Xcodeはエラー箇所と修正候補を教えてくれます。 エラー印 エラー出たらその都度修正(後回しにしてもいいことないです。多分) クリックで修正候補が出ます。候補で良ければFix-it行ダブルクリックで置換できます。 ※変数等は、大文字小文字を区別するようです。 32
  33. 33. ありがとうございました。 また、次回もお付き合いください。

×