Your SlideShare is downloading. ×
  • Like
第18回 ビギナー勉強会のサルでき補足資料(iPhoneアプリ開発超入門)
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 634 views
Published

"はっとまん"こと、服部貴俊です。 …

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

Published in Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
634
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
3
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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