参考サイト集

プログラミング時にお世話になった参考サイト集です。

 

C言語:

ポインタ関連の説明が斬新で、とてもわかり易いです。

Open GL:

iPhoneの3Dものアプリを作成時にとても参考にさせてもらいました。

Objective-C:

クラスのメソッドとプロパティの例文がコンパクトにまとまってます。

コピペして使いまわせるので、大変重宝しました。

Git

分散型バージョン管理システムGitについてわかりやすくまとめられたサイトです。

 

キッチンタイマーアプリの作りかた Step6 IBOutletやIBActionなどの設定 その2

Step6 IBOutletやIBActionなどの設定 その2

「SettingViewController」のIBOutletやIBActionなどの設定をしたので、

次は、「KitchenTimerViewController」の設定をしていきます。

 

「KitchenTimerViewController」の以下のオブジェクトの設定をします。

・start Button

・reset Button

・timer Label

・progress Image View

・timer View

 

start ButtonのOutlet設定

1. ナビゲーターエリアでStoryboardを選択。

2. StoryBboardの「KitchenTimerViewController」を選択。

3. ツールバーのアシスタントエディタを押し、分割画面を表示。

4. 分割画面右側の上端のファイルが表示されている箇所が「KitchenTimerViewController.h」になっていることを確認。


App_02_01_006a

 

5. 分割画面左側の Storyboard の KitchenTimerViewController の start Button を選択。

6. start Button 上で Controlキーを押しながら、分割画面左側の「KitchenTimerViewController.h」の

@interface と @end の間にドラッグアンドドロップする。


App_02_01_006b

7. 吹き出しが表示されるので、以下の通り設定し、Connectボタン を押下する。

Connection:Outlet

Name:startPauseButton

Type:UIButton

Storage:Weak


App_02_01_006c

8. 分割画面右側の「KitchenTimerViewController.h」に Outlet が作成されていることを確認。

以下の赤丸の箇所にカーソルを合わせると、分割画面左側の Storyboard の KitchenTimerViewController で

Outlet接続された start Button が青みがかって浮き出て表示されることでも確認できます。


App_02_01_006d

9. 分割画面左側の Storyboard の KitchenTimerViewController の start Button 上で右クリックし、

Outlet が作成されていることを確認。


App_02_01_006e

 

次は、start ButtonにActionを設定します。

 

start ButtonのAction設定

1. 分割画面左側の Storyboard の KitchenTimerViewController の start Button を選択。

2. start Button 上で Controlキーを押しながら、分割画面左側の「KitchenTimerViewController.h」の

@interface と @end の間にドラッグアンドドロップする。

3. 吹き出しが表示されるので、以下の通り設定し、Connectボタン を押下する。

Connection:Action

Name:pushStartPause

Type:id

Event:Touch Up Inside

Storage:Sender


App_02_01_006f

4. 分割画面右側の「KitchenTimerViewController.h」に Action が作成されていることを確認。

5. 分割画面左側の上端のファイルが表示されている箇所を「KitchenTimerViewController.m」に変更。


App_02_01_006g

6. 分割画面左側の「KitchenTimerViewController.m」に Action が作成されていることを確認。


App_02_01_006h

同様にreset ButtonのOutletも設定します。

reset ButtonのOutlet設定

Connection:Outlet

Name:resetButton

Type:UIButton

Storage:Weak

 

同様にreset ButtonのActionも設定します。

reset ButtonのAction設定

Connection:Action

Name:pushReset

Type:id

Event:Touch Up Inside

Storage:Sender

 

同様にtimer LabelのOutletも設定します。

timer LabelのOutlet設定

Connection:Outlet

Name:timerLabel

Type:UILabel

Storage:Weak

 

同様にprogress Image View のOutletも設定します。

progress Image ViewのOutlet設定

Connection:Outlet

Name:progressImageView

Type:UIImageView

Storage:Weak

 

同様にtimer View のOutletも設定します。

timer ViewのOutlet設定

Connection:Outlet

Name:timerView

Type:UIView

Storage:Weak

 

「KitchenTimerViewController」の設定はひとまずここまで。

 

キッチンタイマーアプリの作りかた Step5 IBOutletやIBActionなどの設定 その1

Step5 IBOutletやIBActionなどの設定 その1

「SettingViewController」と「KitchenTimerViewController」の2つの ViewController を作成し

それぞれにオブジェクトを配置しました。

こんな感じになりました。


App_02_01_005a

次は、IBOutletやIBActionなどの設定をしていきます。

 

「SettingViewController」の以下のオブジェクトの設定をします。

・set Button

・timer Piker View

 

timer Piker ViewはOutletの設定と、delegate と dataSource の設定をします。

 

timer Piker ViewのOutlet設定

1. ナビゲーターエリアでStoryboardを選択。

2. StoryBboardの「SettingViewController」を選択。

3. ツールバーのアシスタントエディタを押し、分割画面を表示。

4. 分割画面右側の上端のファイルが表示されている箇所が「SettingViewController.h」になっていることを確認。


App_02_01_005b

5. 分割画面左側の Storyboard の SettingViewController の timer Piker View を選択。

6. timer Piker View 上で Controlキーを押しながら、分割画面左側の「SettingViewController.h」の

@interface と @end の間にドラッグアンドドロップする。


App_02_01_005c

7. 吹き出しが表示されるので、以下の通り設定し、Connectボタン を押下する。

Connection:Outlet

Name:timerPicker

Type:UIPickerView

Storage:Weak


App_02_01_005d

8. 分割画面右側の「SettingViewController.h」に Outlet が作成されていることを確認。

以下の赤丸の箇所にカーソルを合わせると、分割画面左側の Storyboard の SettingViewController で

Outlet接続された timer Piker View が青みがかって浮き出て表示されることでも確認できます。


App_02_01_005e

9. 分割画面左側の Storyboard の SettingViewController の timer Piker View 上で右クリックし、

Outlet が作成されていることを確認。


App_02_01_005f

timer Piker Viewの delegate と dataSource の設定

1. 分割画面左側の Storyboard の SettingViewController の timer Piker View を選択。

2. timer Piker View 上で Controlキーを押しながら、「SettingViewController」の

上端の黄色の丸いアイコンにドラッグアンドドロップする。


App_02_01_005f01

3. ポップアップ画面が表示されるので、「delegate」を選択。

4. 同じ操作で「dataSource」も選択。


App_02_01_005f02

 

次は、set Button です。set Button にはセグエ(Segue)の設定をします。

set Buttonの設定

1. ツールバーのスタンダードエディタを押し、分割画面を閉じる。

2. ナビゲーターエリアでStoryBboardを選択。

3. StoryBboardの「SettingViewController」set Button を選択。

4. timer Piker View 上で Controlキーを押しながら、分割画面左側の

「KitchenTimerViewController」までドラッグアンドドロップする。


App_02_01_005g

5. ポップアップ画面が表示されるので、「Push」を選択。


App_02_01_005h

6. 「SettingViewController」と「KitchenTimerViewController」が矢印でつながったことを確認。


App_02_01_005i

7. 「SettingViewController」と「KitchenTimerViewController」の間の丸いアイコンを選択

8. ユーティリティエリアのアトリビュートインスペクタを表示し以下の通り設定。

Identifier:toKitchenTimer


App_02_01_005j

 

「SettingViewController」の設定はひとまずここまで。

 

キッチンタイマーアプリの作りかた Step3 Storyboardの編集 その2

Step3 Storyboardの編集 その2

「SettingViewController」と「KitchenTimerViewController」の2つの ViewController を作成しました。

次は、それぞれにボタンやラベルなどのオブジェクトを配置していきます。

 

まずは、「SettingViewController」から。

最終的に、「SettingViewController」はこんな感じになります。


App_02_01_003a

「SettingViewController」には、以下のオブジェクトを配置します。

・minute Label

・seconde Label

・set Button

・timer Piker View

・background Image View

App Storeに公開したアプリには、AD Bannar View も配置されていますが、こちらについての説明は省略します。

 

でわ、実際にこれらのオブジェクトを配置していきましょう。

まず、background Image View から。

1. ユーティリティエリアの下側の「Object Liblary」から「Image View」を選択。

2. SettingViewController にドラッグアンドドロップする。


App_02_01_003b

 

Image View を View Controller 全体を覆うようにサイズを変更。


App_02_01_003c

 

この Image View に表示するファイルをプロジェクトに追加します。

「backgraund01.png」を追加します。

1. ナビゲーターエリアで「Supporting Files」フォルダを選択。

2. Finder等から、「backgraund01.png」を上記の場所にドラッグアンドドロップする。

 

この時、ファイル追加のオブションダイアログが出ますが、以下のように選択してください。

Destination:「Copy items if needed」にチェックを入れる。

Added folders:「Create groups」を選択。

ファイル追加時の注意は、こちらにまとめています。

プロジェクトに既存ファイルをコピーする時の注意


App_02_01_003d

 

Image View 表示するファイルを設定します。

1. Image View を選択します。

2. ユーティリティエリアのアトリビュートインスペクタを表示。

3. 「Image View」セクションで以下の通り設定。

Image:backgraund01.png


App_02_01_003e

 

Image View のサイズを調整します。

1. Image View を選択します。

2. ユーティリティエリアのサイズインスペクタを表示。

3. 「View」セクションで以下の通り設定。

Autoresizing:以下の通り


App_02_01_003f

 

同様に set Button を配置します。

1. ユーティリティエリアの下側の「Object Liblary」から「Button」を選択。

2. SettingViewController にドラッグアンドドロップする。

 

この set Button の背景に表示するファイルをプロジェクトに追加します。

「button_green01.jpg」を追加します。

 

set Button の表示を設定します。

1. Button を選択します。

2. ユーティリティエリアのアトリビュートインスペクタを表示。

3. 「Button」セクションで以下の通り設定。

Title:set

Font:System Bold 36.0

Text Color:Black Color

Background:button_green01.jpg

 

set Button のサイズを調整します。

1. Button を選択します。

2. ユーティリティエリアのサイズインスペクタを表示。

3. 「View」セクションで以下の通り設定。

X:70

Y:400

Width:180

Height:60

Autoresizing:以下の通り


App_02_01_003g

同様に Picker View を配置します。

1. ユーティリティエリアの下側の「Object Liblary」から「Picker View」を選択。

2. SettingViewController にドラッグアンドドロップする。

 

Picker View の表示を設定します。

1. Picker View を選択します。

2. ユーティリティエリアのアトリビュートインスペクタを表示。

3. 「View」セクションで以下の通り設定。

Background:White Color

 

Picker View のサイズを調整します。

1. Picker View を選択します。

2. ユーティリティエリアのサイズインスペクタを表示します。

3. 「View」セクションで以下の通り設定。

X:70

Y:115

Width:180

Height:216

Autoresizing:以下の通り


App_02_01_003h

 

同様に minute Label を配置します。

1. ユーティリティエリアの下側の「Object Liblary」から「Label」を選択。

2. SettingViewController にドラッグアンドドロップする。

 

minute Label の表示を設定します。

1. minute Label を選択します。

2. ユーティリティエリアのアトリビュートインスペクタを表示。

3. 「Label」セクションで以下の通り設定。

Title:minute

Font:System Bold 17.0

Text Color:White Color

Alignment:中央揃え

 

minute Label のサイズを調整します。

1. minute Label を選択します。

2. ユーティリティエリアのサイズインスペクタを表示。

3. 「View」セクションで以下の通り設定。

X:78

Y:81

Width:66

Height:21

Autoresizing:以下の通り


App_02_01_003i

 

同様に second Label を配置します。

1. ユーティリティエリアの下側の「Object Liblary」から「Label」を選択。

2. SettingViewController にドラッグアンドドロップする。

 

second Label の表示を設定します。

1. second Label を選択します。

2. ユーティリティエリアのアトリビュートインスペクタを表示。

3. 「Label」セクションで以下の通り設定。

Title:second

Font:System Bold 17.0

Text Color:White Color

Alignment:中央揃え

 

second Label のサイズを調整します。

1. second Label を選択します。

2. ユーティリティエリアのサイズインスペクタを表示。

3. 「View」セクションで以下の通り設定。

X:175

Y:81

Width:68

Height:21

Autoresizing:以下の通り


App_02_01_003j

 

「SettingViewController」の設定はひとまずここまで。