My Apps List

 

現在、App Storeで公開中の作品です。
こんな感じのものを作ってます。お気に召したら、ぜひどうぞ。

 

 

キッチンタイマーアプリの作りかた Step8 プログラミング その2

Step8 プログラミング その2

「SettingViewController」のプログラミングが完了したので、

次は、「KitchenTimerViewController」のプログラミングしていきます。

 

以下の4つのファイルにプログラミングします。

・SettingViewController.h

・SettingViewController.m

・KitchenTimerViewController.h

・KitchenTimerViewController.m

 

「KitchenTimerViewController」のプログラミングです。


App_02_01_008a

 

「KitchenTimerViewController」には、4つオブジェクトがあります。

・start Button

・reset Button

・timer Label

・progress Image View

 

・KitchenTimerViewController.h

「SettingViewController.m」のprepareForSegueからの受け取り用のプロパティを2つ追加します。

・intPickerMin

・intPickerSec


・KitchenTimerViewController.m






「KitchenTimerViewController」のプログラミングはこれで完了です。

 

キッチンタイマーアプリの作りかた Step7 プログラミング その1

Step7 プログラミング その1

IBOutletやIBActionなどの設定が完了したので、

次は、コードをプログラミングしていきます。

 

以下の4つのファイルにプログラミングします。

・SettingViewController.h

・SettingViewController.m

・KitchenTimerViewController.h

・KitchenTimerViewController.m

 

まず、「SettingViewController」のプログラミングです。


App_02_01_007a

「SettingViewController」には、2つオブジェクトがあります。

・set Button

・timer Piker View

 

・SettingViewController.h

「timer Piker View」のプログラミングをしていきます。

以下のint型のプロパティを2つ追加します。

・intPickerMin

・intPickerSec

あと、「KitchenTimerViewController.h」をインポートしておきます。

・SettingViewController.m




「set Button」のプログラミングです。

ボタンを押すと画面遷移をします。

これは、「Step5 IBOutletやIBActionなどの設定 その1」 で、Storyboardでセグエ(segue)の設定を行ってます。

あとは、データの受け渡しのプログラミングしていきます。


4、5行目は、この時点ではまだエラーになります。

「KitchenTimerViewController」のプログラミングを行うとエラーが消えます。

 

「SettingViewController」のプログラミングはこれで完了です。

 

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

Step4 Storyboardの編集 その3

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

「SettingViewController」にオブジェクトの配置はしたので、

「KitchenTimerViewController」にオブジェクトの配置をしていきます。

 

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


App_02_01_004a

 

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

・start Button

・reset Button

・timer Label

・timer View

・progress Image View

・background Image View

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

 

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

まず、background Image View から。

こちらは、「SettingViewController」での手順と全く同じです。

 

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

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

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

 

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

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

 

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

1. Button を選択します。

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

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

Title:start

Font:System Bold 36.0

Text Color:Black Color

Background:button_green01.jpg

 

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

1. Button を選択します。

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

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

X:70

Y:100

Width:180

Height:70

Autoresizing:以下の通り


App_02_01_004b

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

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

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

 

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

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

 

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

1. Button を選択します。

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

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

Title:reset

Font:System Bold 36.0

Text Color:Black Color

Background:button_red01.jpg

 

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

1. Button を選択します。

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

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

X:70

Y:190

Width:180

Height:70

Autoresizing:以下の通り


App_02_01_004c

 

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

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

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

 

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

1. timer Label を選択します。

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

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

Title:00:00

Font:System 60.0

Text Color:White Color

Alignment:中央揃え

 

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

1. timer Label を選択します。

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

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

X:70

Y:283

Width:170

Height:50

Autoresizing:以下の通り


App_02_01_004d

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

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

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

 

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

1. Timer View を選択します。

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

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

X:30

Y:363

Width:260

Height:105

Autoresizing:以下の通り


App_02_01_004e

 

同様に progress Image View を配置します。

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

2. KitchenTimerViewController の Timer View の中にドラッグアンドドロップする。

 

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

1. progress Image View を選択します。

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

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

X:7

Y:6

Width:247

Height:94

Autoresizing:以下の通り


App_02_01_004f

 

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

 

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

Step2 Storyboardの編集 その1

 

プロジェクトを作成したら、次はStoryboardの編集をしていきましょう。

 

最終的には、こんな感じになるようにStoryboardを作成していきます。

App_02_01_002a

 

でわ、Storyboardを見てみましょう。

エディターエリアの左下端のボタンを押して「Document Outline」を表示しましょう。

App_02_01_002b

 

プロジェクトを新規作成するときに、「Single View Application」を選択したので、

Storyboardには、1つだけ、View Controller があります。

 

まず、Navigation Controllerを追加しましょう。

追加の方法は、こちらにまとめています。

Navigation Controllerを追加する方法

 

それから、View Controllerをもう1つ追加しましょう。

1. ユーティリティエリアを表示。

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

3. Storyboardの余白の箇所にドラッグアンドドロップする。

App_02_01_002c

 

わかりやすくするために、View Controller のクラスファイル名を変えます。

 

まず、元からある View Controller のクラスファイル名から変えましょう。

1. Storyboard で、元からある View Controller を選択。

2. ユーティリティエリアで、アイデンティティインスペクタを選択。

3. 「Custom Class」セクションの「Class」が「ViewController」となっていることを確認。

App_02_01_002d

 

これを「SettingViewController」に変更します。

変更の方法は、こちらにまとめています。

クラスファイル名を変更する

変更後は、「Custom Class」セクションの「Class」が「SettingViewController」となっていることを確認。

App_02_01_002d

 

次は、先ほど追加した View Controller のクラスファイル名を変えましょう。

1. Storyboard で、先ほど追加した View Controller を選択。

2. ユーティリティエリアで、アイデンティティインスペクタを選択。

3. 「Custom Class」セクションの「Class」が空欄となっていることを確認。

4. Xcodeのメニューから、「File」->「New」->「File」を選択。

App_02_01_002e

 

5. 左側は「iOS Source」を選択、右側は「Cocoa Touch Class」を選択し、「Next」ボタンを押下。

App_02_01_002f

 

6. 「Class」に「KitchenTimerViewController」を入力。

「Subclass of」は「UIViewController」を選択し、「Next」ボタンを押下。

App_02_01_002g

 

7. 生成場所を聞かれるので、そのままで「Create」ボタンを押下。

App_02_01_002h

 

8. Storyboard に戻り、「Custom Class」セクションの「Class」に「KitchenTimerViewController」を選択。

 

これで、「SettingViewController」と「KitchenTimerViewController」の

2つの ViewController を作成しました。

 

キッチンタイマーアプリの作りかた Step1 プロジェクト新規作成

Step1 プロジェクト新規作成

まずは、プロジェクトを新規作成します。

Xcodeを起動し、メニューから File -> Project を選択します。

App_02_01_001a

 

次に、テンプレート選択画面が現れます。

ここでは、 画面の左側から「iOS Application」をクリックして、

画面の右側は、「Single View Application」を選択します。


App_02_01_001b

 

次に、プロジェクト情報の入力画面が現れます。

ここでは、以下のように入力し、「Next」ボタンを押下します。

Product Name:KitchenTimerTutorial

Organization Name:個人名または会社名

Organization Identifier:edu.self

Bundle Identifier:(自動で設定される)

Language:Objective-C

Devices:iPhone

Use Core Data:チェックをはずす

Include Unit Tests:チェックを入れる

Include UI Tests:チェックを入れる


App_02_01_001c

 

最後に、保存場所の選択画面が現れます。

好きな場所を選んでください。

App_02_01_001d

 

プロジェクトの設定を少し変更します。

1. ナビゲーターエリアでプロジェクトを選択。

2. エディターエリアの上端でターゲットを選択し、「General」を選択。

3. 「Deployment Info」セクションの「Deployment Target」を6.0に変更します。

 

Deployment Target が何かというのは、こちらにまとめています。

「Deployment Target」と「Base SDK」の違い

App_02_01_001e

 

「Auto Layout」を使わないようにします。

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

2. ユーティリティエリアで、ファイルインスペクタを選択。

3. 「Interface Vuilder Document」セクションの「Use Auto Layout」のチェックを外します。

App_02_01_001f

 

「Size Layout」を使わないようにします。

1. 「Keep size class data for」で「iPhone」を選択します。

2. 「Disable Size Classes」ボタンを押下します。


App_02_01_001g

 

My Apps

現在、App Storeで公開中の作品です。
こんな感じのものを作ってます。お気に召したら、ぜひどうぞ。

  • 株番 from 2016/03/18
  • StarCruise 3D from 2014/11/10
  • Touch Earth from 2014/11/03
  • 3D Brick from 2014/10/17
  • Rotation Cube from 2014/10/11
  • PostIts Paid Edition from 2014/10/09
  • Handy Word Cards Paid Edition from 2014/09/07
  • Web Translator from 2014/10/10
  • Copy & Paste Manager Paid Edition from 2014/02/22
  • Copy & Paste Manager Free Edition from 2014/02/09
  • Rainbow Clock Free Edition from 2014/01/03
  • StarCruise Free Edition from 2013/10/07
  • World Heritage Viewer from 2013/10/19
  • Rabbit Mark Diary from 2013/10/09
  • Handy Word Cards from 2013/10/01
  • Attachment Map from 2013/07/31
  • Easy Kitchen Timer from 2013/06/18