群馬県地域経済発展のためのプロジェクト | iPhoneアプリ開発講座 | コワーキングスペース | エンジニアの就業支援 | 企業誘致 | 地域活性化

ぐんまちゃんタイマー on Swift

はじめに

初めてのアプリ開発ということで「このページ」では、出来る限り丁寧に解説をしています。先に進んで解らなくなったら「このページ」を見返してみましょう。

このアプリでは「変数」「タイマー機能」について学びます。

2015.11.12 Xcode7.1 & iOS9.1 対応版サンプルコード追加

ダウンロード

サンプルプログラム

完成したアプリのサンプルコードです。ZIPで圧縮したファイルです。解凍してご利用ください。

素材データ

新規プロジェクトの作成

Xcodeを起動した後「新規プロジェクト」を作成します。

File > New > Project

timer_01

「Single View Application」を選択して「Next」をクリック

timer_02

次の通り入力してを選択して「Next」をクリック

  • Product Name:「プロジェクト名」を指定(これがフォルダ名になります)
  • Organization Name:「組織名」を指定(個人の場合は氏名)
  • Company Identifier:「会社識別名」を指定(ドメイン名を逆にしたものが推奨されます)
  • Language:「Swift」を選択
  • Devices:「iPhone」を選択
  • Use Core Data:チェックなし

timer_03

ソースコードなどの変更履歴を残しておく場合は「Git」にチェックを入れる

本講座では、特に必要ないので「チェックなし」で「Create」をクリック

timer_04

プロジェクトの設定

利用するiPhone画面の「向き」を設定します

今回のアプリは「縦向き」のみとします。

  • Portrait:縦
  • Upside Down:上下反転の縦
  • Landscape Left:左回転の横
  • Landscape Right:右回転の横

timer_05

ステータスバーの表示・非表示を設定します

今回のアプリはステータスバーを「非表示」にします。この設定はつい忘れがちなので注意しましょう。

  • Generalタブをクリック >「Status Bar Style」の「Hide status bar」をチェックする。

timer_06

  • Infoタブをクリック >「Status bar is initially hidden」を「YES」にする
  • 「+」をクリックして「View controller-based status bar appearance」の項目を追加して「NO」にする

timer_07

使用するイメージの設定

使用するベクター画像のインポート

Xcode6からベクター画像が使用できるようになりました。保存形式はPDFのみです。

画像はこちらからダウンロードしてください
ぐんまちゃんの画像(PDF):gunmachan512x930.pdf

Timerフォルダを選択した状態で、左下の「+」をクリックして「Add Files to “Timer”」を選択する

timer_08

取り込む画像を選択して「Copy items if needed」をチェックして「Add」をクリックする
※チェックを入れると「コピーした画像」を使用することになります。忘れずに!

timer_09

画像がプロジェクトに取り込まれました。

timer_10

ベクター画像を使用できるように設定する

ベクター画像を使用するには「Images.xcassets」の設定が必要です。

Images.xcassetsを選択する。「+」をクリックして「New Image Set」を選択する。

timer_11

名前を「Gunmachan」に変更する。「Attributes Inspector」タブをクリックする。「Types」は「Vectors」を選択する。

timer_12

「gunmachan512x930.pdf」を「点線の四角」にドラッグ&ドロップする
※クリックすると画面が変わってしまうので注意!

timer_13

画面のデザイン&レイアウト

Image View(ぐんまちゃん) を配置する

「Main.storybord」を選択する。「Object Library」をクリックして「Image View」をドラッグ&ドロップ。

timer_14

「Image View」が配置されます。

timer_15

「Image View」を選択した状態で、「Attributes Inspector」タブをクリックする。「image」は「Gunmachan」を選択する。「Mode」は「Aspect Fit」を選択する。

timer_16

Image View のレイアウトの制約を設定する

今回、Image View(ぐんまちゃんの画像)は、違う端末の画面サイズの場合でも、画面いっぱいに表示するようにします。

「Image View」を選択した状態で、右下の「Pin」をクリックすると「Add New Constraints」ダイアログが表示される。

timer_17

上下左右の「赤い点線」をクリックして全て「赤い線」にする。上下左右の値を全て「0」にする。「Add 4 Constraints」をクリックする。

timer_18

エラーがでます。これは「設定した制約」と「配置されている位置」がズレていることを表します。

timer_19

下のアイコンの右から2番目「Resolve Auto Layout Issue」を表示させる。「Update Frames」をクリックする。

timer_20

青い線になり、エラーが消えます。

timer_21

Button(1分ボタン・3分ボタン・5分ボタン)を配置する

「Object Library」をクリックして「Button」をドラッグ&ドロップ。「3個」配置します。

timer_22

一番左の「Button」を選択した状態で、「Attributes Inspector」タブをクリックする。「Title」を「1分」と入力。「Font」の▲をクリックして「System 30.0」のフォントサイズにする。

timer_23

「3分ボタン」「5分ボタン」も同様に設定する。

Button(1分ボタン)のレイアウトの制約を設定する

「1分」ボタンを選択した状態で、「Pin」をクリックする。

「左」「下」の「赤い点線」をクリックして「赤い線」にする。「左」の値を「20」にする。「下」の値を「100」にする。
その際に「下」の▼をクリックして「View(current distance = xxx)」のチェックをする。忘れずに!

最後に「add 2 Constraints」をクリックする。

timer_24

エラーが出ているので、下のアイコンの右から2番目「Resolve Auto Layout Issue」を表示させる。「Update Frames」をクリックすると、エラーが消えます。

timer_24-2

Button(3分ボタン)のレイアウトの制約を設定する

「3分」ボタンを選択した状態で、「Align」をクリックする。「Horizontal Center in Container」にチェックを入れる。「Add 1 Constraint」をクリックする。

timer_26

「3分」ボタンを選択した状態で、「Pin」をクリックする。

「下」の「赤い点線」をクリックして「赤い線」にする。▼をクリックして「View(current distance = xxx)」をチェック。「下」の値を「100」にする。

「add 1 Constraint」をクリックする。

timer_27

エラーが出ているので、下のアイコンの右から2番目「Resolve Auto Layout Issue」を表示させる。「Update Frames」をクリックすると、エラーが消えます。

Button(5分ボタン)のレイアウトの制約を設定する

「1分」ボタンと同様に「制約」の設定をする。

timer_29

Button(スタートボタン)を配置する

「Object Library」をクリックして「Button」をドラッグ&ドロップする。

timer_30

「Button(スタートボタン)」を選択した状態で、「Attributes Inspector」タブをクリックする。「Title」を「スタート」と入力。「Font」の▲をクリックして「System 30.0」のフォントサイズにする。

timer_31

Button(スタートボタン)のレイアウトの制約を設定する

「スタート」ボタンを選択した状態で、「Align」をクリックする。「Horizontal Center in Container」にチェックを入れる。「Add 1 Constraint」をクリックする。

timer_32

「スタート」ボタンを選択した状態で、「Pin」をクリックする。

「下」の「赤い点線」をクリックして「赤い線」にする。▼をクリックして「View(current distance = xxx)」をチェック。「下」の値を「20」にする。

「add 1 Constraint」をクリックする。

timer_33

エラーが出ているので、下のアイコンの右から2番目「Resolve Auto Layout Issue」を表示させる。「Update Frames」をクリックすると、エラーが消えます。

Label(00:00.00)を配置する

「Object Library」をクリックして「Label」をドラッグ&ドロップします。

timer_34

「Label」を選択した状態で、「Attributes Inspector」タブをクリックする。「Title」を「00:00.00」と入力。「Font」の▲をクリックして「System 30.0」のフォントサイズにする。「Alignment」は「中央揃え」を選択する。

timer_35

「Label(00:00.00)」を選択した状態で、「Align」をクリックする。「Horizontal Center in Container」と「Vartical Center in Container」にチェックを入れる。「Add 2 Constraints」をクリックする。

timer_36

エラーが出ているので、「Resolve Auto Layout Issue」の「Update Frames」をクリックしてエラーを消す。

View の Background(背景色)を変更する

「View」を選択した状態で、「Background」の「Other…」を選択する。

timer_37

カラーパレットが表示されるので、左から2番目の「Color Sliders」タブをクリックする。
「RGB Sliders」を選んで、RGBの値を「Red:255」「Green:225」「Blue:45」とする。

timer_38

これで、画面のデザインとレイアウトが完成しました。

「プログラム」と画面に配置した「UIオブジェクト」との関連付け

さて、いよいよプログラムを書いて行くのですが、その前に。今配置した「UIオブジェクト」を「プログラム」と関連付ける必要があります。

Assistant editor の2画面で作業する

右上にある蝶ネクタイのマークの「Assistant editor」ボタンをクリックする。2画面になるので、左は「Main.storybord」、右は「ViewController.swift」を表示させる。

timer_39

「赤わく」の部分にコードを書きます。分かりやすいように、コードを書く行に「改行」を少し入れましょう。

timer_40

button(1分)の関連付け

「1分」ボタンを「control」キーを押しながらドラッグすると、青い線が出ますので、右画面の任意の箇所でマウスのボタンを離します。

timer_41

出てきたダイアログの「Name」に「button1」と入力して、「Connect」ボタンをクリックします。

timer_42

「@IBOutlet weak var button1: UIButton!」とコードが書かれました。左側にある「黒まる」は関連づけができている印です。(※関連づけされていないと「白まる」となります)

timer_43

button(3分・5分・スタート)の関連付け

「1分」ボタンと同様の手順で、「3分」「5分」「スタート」ボタンも関連づけします。それぞれの「Name」は「button3」「button5」「buttonStart」としましょう。

timer_44

「Label(00:00:.00)」を「control」キーを押しながらドラッグすると、青い線が出ますので、右画面の任意の箇所でマウスのボタンを離します。

timer_45

出てきたダイアログの「Name」に「timerLabel」と入力して、「Connect」ボタンをクリックします。

timer_47

「@IBOutlet weak var timerLabel: UILabel!」とコードが書かれました。

timer_48

これで、UIオブジェクトとの関連付けは終わりです。次から、いよいよプログラムを書いて行きます。

プログラム(コード)を書く

Standard editer に戻して1画面で作業する

右上にある「Standard editer」ボタンをクリックする。1画面になるので「ViewController.swift」を表示させる。

timer_49

コメントの書き方

これからどんどんコードを書いて行くのですが、コードが増えれば増える程、プログラムが見にくくなってきます。後で見た時にわかりるように日本語で「コメント」を入れておきましょう。

「コメント」の入れ方は、行頭に「//」を入れます。

timer_50

button(1分)を押したとき

「1分」ボタンを「control」キーを押しながらドラッグすると、青い線が出ますので、右画面の任意の箇所でマウスのボタンを離します。

timer_50

出てきたダイアログの「Connection」を「Action」を選択します。「Name」に「pushedButton1」と入力して、「Connect」ボタンをクリックします。

timer_51

「@IBAction func pushedButton1(sender: AnyObject) {}」とコードが書かれました。これを「メソッド」と呼びます。この後、1分ボタンを押したときの処理をメソッドの{}の中に書いて行きます。

timer_52

まずは、カウント用の「変数」つくります。@IBActionメソッドの外に「var countNum = 0」と入力してください。

次に1分ボタンを押した時、変数に「6000」(6000ミリ秒=1分)が代入されるようにします。

関数の定義(ラベルをアップデートをする関数)

下記の通り、ラベルをアップデートをする関数を定義します。

関数の呼び出し(ラベルをアップデートをする関数)

先ほど定義した関数を呼び出すには、@IBActionメソッドの中に「labelUpdate(countNum)」と書きます。

プログラムをビルドしてシミュレーターでの確認

ここまで出来ましたら、プログラムをビルドしてシミュレーターで確認しましょう。

動作確認するデバイスを選択します。ここでは「iPhone5S」とします。次に「▶」Runボタンをクリックします。

timer_53

ビルドに成功すると「Build Success」とメッセージがでて、暫くするとシミュレーターが起動します。(シミュレーターの起動には時間がかかります)

1分ボタンをタップした時にラベルが「01:00.00」になることを確認してください。

timer_54

今後もこまめにビルドして、シミュレーターで確認しましょう。

プログラム(コード)を書く【続き】

button(3分・5分)を押したとき

1分ボタンと同様の手順でプログラムを書きます。現段階のプログラム「全体」は以下の通りです。

NSTimerオブジェクトの実装

先ほどの1分・3分・5分ボタンと同様の手順で、button(スタート)を押したときのメソッドを用意します。
メソッドの中に下記の通り「NSTimerオブジェクト」を実装します。

シミュレーターで確認しましょう。1分ボタンをタップした後、スタートボタンをタップすると「カウントダウン」されれば成功です。

timer_55

ただ「00:00.00」になってもマイナスの表示になりカウントは止まりません。

タイマー停止の処理

タイマーを停止する為に、条件分岐(if文)を書き加えます。「もし0より大きければタイマーを進める。でなければタイマーを止める。」という処理を加えます。

タイマー動作中は「スタート」ボタンを「ストップ」ボタンに変更します

タイマーが動いているかどうかは「myTimer.valid」で判断します。動作中は「true」を返します。反対に停止中は「false」を返します。

タイマー動作中は「1分・3分・5分」ボタンをタップできなくする

1分ボタンをタップできなくするには「button1.userInteractionEnabled = true」と書きます。

アラートの設定

アラートの設定は下記の通りです。

timer_56

「0」になったら、アラートが表示されるように以下の場所に書きます。

「ぐんまちゃんタイマー」アプリ完成

最初のアプリが完成しました。お疲れ様でした。出来上がったプログラムは以下の通りです。間違いがないかシミュレーターで動作確認しましょう。

iPhoneアプリ「ぐんまちゃんタイマー on Swift」が完成しました。お疲れ様でした!

  • Facebook
  • Hatena
  • twitter
  • Google+
PAGETOP
Copyright © 2013 - 2018 Cross-i Project BrainFarm Inc. All Rights Reserved.