Swiftで作るToDoアプリ開発チュートリアル
Swift と Xcode を使っての iOS 開発で、ToDo アプリを作ってみる開発のチュートリアルです。ちょっと長いですが、スクリーンショット付きで Xcode の操作方法を解説して、必要となる Swift のソースコードも全て掲載しています。以下画像のような、オーソドックスな ToDo アプリを作っていきます。
Todo アプリを操作するデモ動画を YouTube に上げました。以下から確認できます。
Swift/iOS Todo App demo | YouTube
私は Swift と Xcode に取り組み始めて1ヶ月程度の iOS 開発の入門者です。iOS 開発を始めて感じたのは、Swift の文法よりも Xcode の操作が難しいことでした。特に Storyboard で UI を組み立てる作業でつまづきが多かったですので、このチュートリアルでは Xcode / Storyboard のスクリーンショットを豊富に掲載して、GUI 画面での操作が分かりやすくなるように心がけました。間違った記載などがありましたら、ご指摘頂けると助かります！
これから Swift / iOS 開発に取り組み始められる方に参考になれば幸いです。基本的な操作・作業を忘れないように、自分用の備忘録でもあります。Swift の文法や Xcode の基本的な操作法、Storyboard, Auto Layout の基本的な使い方などについては、詳しくは触れていません。初心者の方は、前もってドットインストールなどで学習されておくと分かりやすいかと思います。
iPhoneアプリ開発入門 (全13回) – プログラミングならドットインストール
— このチュートリアルの対象読者 —
Swift / iOS 開発の入門者〜中級者
— 詳しく説明しないこと —
Swift の文法
Xcode の基本的な操作方法
Storyboard の基本的な使い方
— 動作検証の環境 —
Mac OS X Yosemite 10.10.3
Swift 1.2
Xcode 6.3.1 および 6.3.2
Xcode iOS Simulator 8.3
MagicalRecord 2.2
UI は Storyboard を使って組み立てていきます。また、CoreData（iOS 用 SQLite データベースを使うフレームワーク）のラッパーライブラリである MagicalRecord を使用します。
— 目次 —
・Xcode 新規プロジェクトの作成
・MagicalRecord のインストール
・Swift から MagicalRecord を使うための設定
・Todo リスト一覧の画面を作成する
・Table View の delegate と dataSource の設定
・Navigation Controller の追加と Navigation Item の設定
・Todo タスク追加の画面を作成する
・Cancel, Save ボタンの Action と Text Field の Outlet を作成
・Todo タスク用のモデルを作成
・UITableViewDelegate, UITableViewDataSource のメソッドを実装
・動作確認のためにビルドしてみる
・Todo タスクを追加できるようにメソッドを実装
・スワイプで Todo タスクを削除できるようにする
・Todo List 一覧 → Todo Item の詳細＆編集への画面遷移
・Todo Item の Text Field に選択されたタスクを表示
・Todo タスクを編集できるようにする
・遭遇したエラー達
それでは、チュートリアル開始です！
Xcode 新規プロジェクトの作成
まず最初に Xcode 用新規プロジェクトの作成です。
Xcode を起動して Create a new Xcode project をクリックします。
あるいは、File → New → Project から新規プロジェクトを作成します。
続いて、iOS Application → Single View Application を選択して Next。
プロジェクト名などを入力します。
Product Name: TodoApp
Organization Name: 自分の名前や所属する組織名など
Organization Identifier: 所有するドメイン名を逆さにしたもの
Language: Swift
Devices: iPhone
use CoreData: チェック
Organization Name, Organization Identifier は任意に入力します。また Swift で開発するので Language は Swift を選択し、CoreData を使用するので use CoreData にもチェックを入れる。
プロジェクトの場所を選択して作成。
プロジェクトを保存する場所を選択します。Source Controle にチェックを入れて、「Create Git repository on My Mac」として Create をクリック。
以上で Xcode の新規プロジェクト作成は完了です。ここで一旦、Xcode を終了させておきます。
MagicalRecord のインストール
次に CocoaPods を使って MagicalRecord をインストールします。CocoaPods の使い方については以下を参照。
CocoaPodsの使い方、iOSライブラリの管理ツール | EasyRamble
MagicalRecord は、CoreData を Rails の ActiveRecord のように扱いやすくするライブラリです。CoreData は iOS 開発で sqlite などデータベースを使う際の OR マッパー的なフレームワークなのですが、そのままでは操作がやや煩雑ですので MagicalRecord を通して利用します。
MagicalRecordをSwiftで使う導入〜設定までの手順 | EasyRamble
コマンドラインから以下の手順で、CocoaPods で MagicalRecord をインストールします。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
$ cd /path/to/XcodeProject/TodoApp
$ pod init
$ vi Podfile
platform :ios, '8.3'
target 'SwiftToDo' do
pod 'MagicalRecord'
end
target 'SwiftToDoTests' do
end
$ pod install
|
TodoApp.xcworkspace が生成されますので、以降は Xcode でこれを利用するようにする。TodoApp.xcworkspace を Xcode で開きます。コンソールから開くには以下。
|
1
2
3
|
$ open TodoApp.xcworkspace
|
TodoApp.xcworkspace を開いて Xcode を起動しますと、ファイル・グループの横に ?（はてな）マークが付いています。
これは Git で add されていないものなので、Git の管理下にすれば ? マークが消える。Pods フォルダは MagicalRecord などライブラリが置かれるフォルダなので、Git 管理から除外します。
|
1
2
3
4
5
|
$ echo "Pods" >> .gitignore
$ git add .
$ git commit -m "pod install MagicalRecord"
|
以上の作業で、はてなマークが消えるはずです。以降説明には含めていませんが、作業の折り目で Git でコミットすると良いかと思います。Xcode の Source Control を使うと、GUI で Git の操作を行えます。私はコマンドラインのほうが慣れているので、コマンドで Git 操作しています。
【追記 2015/07/02】
Xcode を使った iOS 開発での .gitignore の詳細については、以下 Qiita の記事をご参照お願いします。
XCodeを使用する場合の.gitignoreの内容及び、その解説 – Qiita
上で説明したコマンドでは、私は Rails の gem 管理（/vendor/bundle 以下）と同じ感覚で、Pods ディレクトリを .gitignore に追加したのですが、Pods ディレクトリを git 管理するかどうかは、プロジェクトのワークフローによるそうです。
あと後日に、*.xccheckout というファイルが原因で、ブランチを merge できないという問題に遭遇しました。上記のエントリーを参考にして、*.xccheckout を .gitignore に含めたら問題なく merge できるようになりました。
なので、本格的な開発時には .gitignore を適切な内容にしておくことが必要かと思われます。
【追記ここまで】
Swift から MagicalRecord を使うための設定
次に Swift から MagicalRecord を利用するための設定です。MagicalRecord は Objective-C 製のライブラリなので、Swift から利用するためには、Bridging Header という設定を行う必要があります。まずは、Bridging Header 用のファイルを作成します。
TodoApp グループを右クリック → New File を選択。
iOS → Source → Header File を選択して Next。
ファイル名を TodoApp-Bridging-Header.h にして Create。
作成した TodoApp-Bridging-Header.h を以下の通りに編集します。
TodoApp-Bridging-Header.h
|
1
2
3
4
5
6
|
#ifndef TodoApp_TodoApp_Bridging_Header_h
#define TodoApp_TodoApp_Bridging_Header_h
#import "CoreData+MagicalRecord.h"
#endif
|
続いて、作成した TodoApp-Bridging-Header.h を Objective-C Bridging Header として利用できるように、ファイルへのパスを Xcode の指定の箇所で設定します。
TodoApp プロジェクトを選択 → Targets で TodoApp を選択 → Build Settings → All → Swift Compiler – Code Generation → Objective-C Bridging Header に先ほど作成した TodoApp-Bridging-Header.h のフルパスを入力します。
Objective-C Bridging Header の右横 TodoApp の下をダブルクリックすると、入力用フィールドが表示されます。
あるいは、Bridging Header の設定は以下ページの手順で行うと、若干簡略化されます。
Bridging Headerのファイル作成と設定を簡単に行う手順 | EasyRamble
続いて、MagicalRecord を利用するために、AppDelegate.swift を以下のように編集します。編集するメソッドは2つ。
AppDelegate.swift
|
1
2
3
4
5
6
7
8
9
10
|
func
application
(
application
: UIApplication
,
didFinishLaunchingWithOptions
launchOptions
:
[
NSObject
: AnyObject
]
?
)
->
Bool
{
// for magical record - initialize coredata
MagicalRecord
.
setupCoreDataStackWithAutoMigratingSqliteStoreNamed
(
"TodoApp.sqlite"
)
return
true
}
func
applicationWillTerminate
(
application
: UIApplication
)
{
// for magical record - clean up coredata
MagicalRecord
.
cleanUp
(
)
}
|
以上で、Swift から MagicalRecord を使うための設定は終了です。
以降、Storyboard を使って UI を作成していきます。
Todo リスト一覧の画面を作成する
Xcode で既に作成されている ViewController.swift を選択して、TodoListViewController.swift にリネームします。
↓
TodoListViewController.swift は、Todo リスト一覧画面のコントローラー用のファイルとなります。
ファイル名の変更に合わせて、クラス名も ViewController → TodoListViewController に変更。
TodoListViewController.swift（元の ViewController.swift）
|
1
2
3
|
class
ViewController
: UIViewController
{
// ...
}
|
↓
|
1
2
3
|
class
TodoListViewController
: UIViewController
{
// ...
}
|
続いて、Main.storyboard を選択して Storyboard を表示させます。
View Controller を選択して、Identity Inspector の Class を TodoListViewController に変更します。
次に、Todo List View Controller に Table View を配置していきます。
右下のオブジェクト・ライブラリの検索ボックスに「table」と入力して、Table View オブジェクトを選択します。
選択した Table View オブジェクトを、中央の Main.storyboard のエディタエリアの Todo List View Controller にドラッグ・アンド・ドロップする。
上下左右方向の中心を表すグリッド線が表示されるので、それを頼りに真ん中に Table View を配置します。上記のような位置になればOK。
次に Table View Cell オブジェクトを選択し、Table View の中にドラッグ・アンド・ドロップする。
上部に Prototype Cells という表示が現れます。
続いて、追加した Table View Cell オブジェクトに対応するクラスファイルを作成します。
Todo フォルダを選択して右クリック → New File。
iOS → Source → Cocoa Touch Class を選択して Next。
Subclass of をドロップダウンメニューから選び、Class の名前を入力します。
Class: TodoListItemTableViewCell
Subclass of: UITableViewCell
Language: Swift
として Next。
TodoApp の Group に作成。
上記画像のようになっていることを確認して Create。Table View のセルに表示する内容を色々と編集する場合は、ここで作成した TodoListItemTableViewCell.swift のファイルを編集します。今回はそのままです。
作成した TodoListItemTableViewCell クラスを、Storyboard 上の Table View Cell に割り当てます。Main.storyboard を開く。
Table View Cell を選択後、Identity inspector の Class に TodoListItemTableViewCell を選択。
同様に Attribute inspector の Identifier に TodoListItem と入力。
以上で、Todo List View Controller の中に Table View および Table View Cell を配置できました。
Table View の delegate と dataSource の設定
続いて、Table View を利用するために delegate と dataSource の設定を行います。View Controller から Table View を利用するためには、UITableViewDelegate プロトコルと UITableViewDataSource プロトコルを View Controller で継承して、プロトコルであらかじめ決められたメソッドを実装する必要があります。
まずは、Table View から delegate と dataSource を設定するために、Main.storyboard を開きます。
Table View を選択し Control キーを押しながら、Todo List View Controller にドラッグ・アンド・ドロップする。
以下画像のように表示されるので delegate を選択する。
同じ作業をもう一度繰り返し、dataSource を選択します。
続いて、TodoListViewController クラス に Table View の Outlet を作成します。Outlet は Storyboard 上のオブジェクトを、ソースコード上の変数として使えるようにするための仕組み（と理解しています）。Todo List View Controller を選択して、アシスタントエディタに TodoListViewController.swift を表示させる。
Table View を Control キーを押しながら、TodoListViewController クラスのソースコードにドラッグ・アンド・ドロップ。
Outlet の Name に tableView と入力。
Connection: Outlet
Name: tableView
Type: UITableView
Storage: Weak
として Connect ボタンをクリック。
TodoListViewController.swift のソースコード上では以下のようになりました。
TodoListViewController.swift
|
1
2
3
4
5
6
|
class
TodoListViewController
: UIViewController
{
@
IBOutlet
weak
var
tableView
: UITableView
!
override
func
viewDidLoad
(
)
{
// ...
}
|
ここまでの作業で、Table View の Connections inspector が次のとおりになっていることを確認する。
TodoListViewController.swift を開いて、UITableViewDelegate, UITableViewDataSource を使用（継承）することをソースコードにも追加します。
TodoListViewController.swift
|
1
2
3
4
5
6
|
class
TodoListViewController
: UIViewController
{
@
IBOutlet
weak
var
tableView
: UITableView
!
// ...
}
|
↓
|
1
2
3
4
5
6
|
class
TodoListViewController
: UIViewController
,
UITableViewDelegate
,
UITableViewDataSource
{
@
IBOutlet
weak
var
tableView
: UITableView
!
// ...
}
|
TodoListViewController.swift に UITableViewDelegate, UITableViewDataSource の継承を追記すると、エラーが表示されるかと思います。
|
1
2
3
|
Type 'TodoListViewController' does not conform to protocol 'UITableViewDataSource'
|
これは UITableViewDataSource の protocol 継承で、実装すべきメソッドを実装していないのが原因です。とりあえず、先に Storyboard での UI 作りを先に終えたいので、これらのメソッドの実装は後に回します。
Navigation Controller の追加と Navigation Item の設定
画面遷移のための Navigation Controller を追加します。Main.storyboard を開く。
Todo List View Controller を選択した状態で、上部メニューの「Editor → Embed In → Navigation Controller」をクリックして、Navigation Controller を選択。
Storyboard エディタエリアが以下の状態になります。
Todo List View Controller → Navigation Item を選択し、Attributes Inspector の Title に「Todo List」と入力。
Navigation Item の表示が Todo List に変わり、また Todo List View Controller の上部に Todo List とタイトルが表示される。
次に、新しいタスクを追加する時に押すための ＋ ボタンを作ります。右下オブジェクト・ライブラリの検索ボックスに「bar button」と入力して Bar Button Item を選択。
Bar Button Item を Todo List（Navigation Item）の右端（バッテリー表示のすぐ下）にドラッグ・アンド・ドロップ。
Bar Button Item を選択した状態で、Attributes Inspector の Identifier を Add に変更。
表示が Item から ＋ に変わったのを確認します。
Todo タスク追加の画面を作成する
次に、Todo リスト一覧の画面の +（Add）ボタン（Bar Button Item）を押した後に遷移する、Todo タスク追加の画面を作成していきます。この画面は後で作成する、Todo 詳細＆編集画面と共通のビューとなります。
Main.storyboard でオブジェクト・ライブラリから View Controller を見つけて、Storyboard にドラッグ・アンド・ドロップ。
Todo List View Controller の「＋ボタン」を選択して、Control キーを押しながら、追加した View Controller の上にドラッグ・アンド・ドロップします。
Action Segue の show を選択。
Todo List View Controller と View Controller が + ボタンを介してつながりました。
オブジェクト・ライブラリから Navigation Item を View Controller にドラッグ・アンド・ドロップ。
Navigation Item（Title）を選択し、Attributes inspector で Title を「Todo Item」に変更。
Bar Button Item を Todo Item の左端にドラッグ・アンド・ドロップして、Identifier を Cancel に変更。
同様に Bar Button Item を Todo Item の右端にドラッグ・アンド・ドロップして、Identifier を Save に変更。
この Save ボタンが Todo タスクを追加して保存するためのボタンとなります。続いて、Todo タスクを文字で入力するためのフィールドを作る。
オブジェクト・ライブラリから Text Field を View Controller（Todo Item）にドラッグ・アンド・ドロップ。
Text Field のサイズと位置は適当に調整しておきます。
ここで、Auto Layout の設定を行いますが、今回は Xcode が提案する Auto Layout の自動設定を行います。1つずつの部品に対して、細かく Auto Layout を手動で設定することもできますが、このチュートリアルでは Auto Layout の詳細には触れません。Auto Layout の詳細については、冒頭で紹介したドットインストールを参照。
Todo List View Controller（Todo 一覧リスト）を選択した状態で、Editor → Resolve Auto Layout → Reset to Suggested Constraints をクリックします。
Todo タスク追加/詳細ページ用の View Controller（Title）についても同じ作業を行う。
続いて、Todo タスク追加/詳細ページの View Controller に対応する TodoItemViewController.swift ファイルを作成します。
TodoApp グループから New File。
iOS → Source → Cocoa Touch Class を選択して Next。
UIViewController のサブクラスとして、TodoItemViewController クラスを作成します。
TodoApp グループに Create。
Main.storyboard を選択して、Todo タスク追加/詳細ページ View Controller の Identity inspector で、Class に TodoItemViewController を指定する。
Cancel, Save ボタンの Action と Text Field の Outlet を作成
Main.storyboard で Todo Item の View Controller を選択し Asistant Editor を開く。Cancel, Save ボタンが押された時に対応する action を設定します。
Cancel ボタンを、Control キーを押しながら TodoItemViewController のソースコードにドラッグ・アンド・ドロップ。
cancel という名前の Action を作成。
Connection: Action
Name: cancel
Type: UIBarButtonItem
として、Connect ボタンをクリック。
同様に Save ボタンを、Control キーを押しながら TodoItemViewController にドラッグ・アンド・ドロップ。
save という名前の Action を作成。
Connection: Action
Name: save
Type: UIBarButtonItem
として、Connect ボタンをクリック。
TodoItemViewController.swift に追加された @IBAction で始まる行を確認して、コードを以下のように編集します
TodoItemViewController.swift
全部评论
专题导读
上一篇：Swift实战-小QQ(第2章):QQ侧滑菜单发布时间：2022-07-13下一篇：[Swift]LeetCode795.区间子数组个数|NumberofSubarrayswithBoundedMaximum发布时间：2022-07-13热门推荐
热门话题
阅读排行榜
|
请发表评论