この記事を書いた人:

ToDoリストiPhoneアプリを作成してみよう(Part1)

iPhoneアプリ開発

みなさんこんにちは。Yuta Fujii(@HofuCamera)です。

今回から数回に渡って「ToDoリストiPhoneアプリ(Part1)」を開発していきたいと思います。

この章は、どのようにプログラムを組んでいくかを説明したあと、必要なパーツと画面を揃えていきたいと思います。これが今回のゴールです。

《前回までの講座》


iPhoneアプリ開発の環境を整えよう
iPhoneアプリ開発に必要なこと
プログラムなしで、 レッドカードiPhoneアプリを開発してみよう
プログラムなしで、カラフルカードアプリを開発してみよう
お気に入りのサイト集アプリを開発してみよう
ノートメールアプリを開発してみよう(Part1)
ノートメールアプリを開発してみよう(Part2)
10秒で止める「ジャストタイムiPhoneアプリ」を開発してみよう(Part1)
10秒ジャストで止めるゲーム、ジャストタイムアプリを開発してみよう(Part2)
嘘電話アプリを開発してみよう
パスワードiPhoneアプリ作成してみよう(Part1)
パスワードiPhoneアプリ作成してみよう(Part2)


プロジェクトを作成する

今回は「TodoList」としてプロジェクト名を決めてあげましょう。
プロジェクトの作成方法はこちらに記載されています。

基本的な構成

Todoリストをどのように作っていくか

まず、今回のTodoリストをどのように開発していくかをはじめに説明します。

前回までの流れで、NSUserDefaultsの使い方や、配列の使い方、画面遷移の方法、画面とクラスが対であることなどを学びました。また、それらの要素を使って構築していきます。

今回のTodoリストには、2つの画面が存在します。

Todoリストを表示する画面

1つ目は「Todoリストを表示する画面」、2つ目は「Todoリストを登録する画面」です。

はじめに「Todoリストを表示する画面」について説明します。

この画面に表示する内容は主に、3つあります。

1つは、「Todoリストを登録する画面」で登録された日時を表示する箇所、2つ目は登録されたタイトル、そして本文(内容)です。これからの内容を「表示する」ということを行います。

それでは、どのように表示するのでしょうか。それは、「Todoリストを登録する画面」で登録された情報を取り出すことで表示します。言い換えると、NSUserDefaultsで登録されたものを取り出して表示するということを行います。

また、右上のプラスボタンでTodoリストを登録する画面への画面遷移を行います。Todoリストを見る際は、次へボタンと前へボタンでそれぞれ閲覧できるようにします。

Todoリストを登録する画面

続いて「Todoリストを登録する画面」について整理していきます。

ここで行うことは、タイトルの登録、本文の登録、現在日時の登録です。これらをタイトルの入った配列、本文の入った配列、現在日時の入った配列へそれぞれ入れていき、その配列をNSUserDefaultsへ登録していきます。

基本的な画面を構築する

Todoリスト表示画面の構築

それでは画面を構築していきましょう。
まず、今回は縦のみに対応したいと思うので、下記の赤い部分のチェックを外します。
xcode_todo1
xcode_todo2
そして、iPhone6にシミュレーターをセットします。
xcode_todo3

左側のMain.storyboardを選択し、画面の赤い部分をクリックしたあと右上への赤い部分を選択します。
xcode_todo4
xcode_todo5
Sizeと書かれたところを選択してiPhone4.7-Inchを選択します。
xcode_todo6
続いて、ToolBarを画面にセットします。ここではTodoリストを登録する画面へ画面遷移させるためのボタンを設定します。
xcode_todo7
まず左側のItemをクリックした後、右側の赤い部分を選択します。
xcode_todo8
また、下記のようにAddを選択します。
xcode_todo9
すると+マークにボタンが変更されたのがわかるかと思います。
xcode_todo10
次にボタンを右端に設定したいのですが、Toolbarの場合、下記のパーツを置くことで簡単に右へよせることができます。
xcode_todo11

また、ViewContollerの色をお好きな色へ変更してください。
xcode_todo12
次に登録した日時を表示するラベルを設定していきます。
図のようにViewを設定したあと、
xcode_todo13
ラベルを設定してください。また、ここでのラベルは何も変更の起こらないラベルになります。
xcode_todo15
さらにその右隣に日時が反映されるラベルを置きます。これは、値を取り出して反映していくラベルになるので、プログラムに認識させてあげる必要があります。
xcode_todo16
続いて、本文を表示するUITextViewを設定します。
こちらも表示を行うのでプログラムに認識させてあげる必要があります。
xcode_todo17
さらにこのUITextViewをクリックして、右側の文字をすべて消去します。
xcode_todo18
最後にタイトルを表示するラベルを、登録した日時を設定するラベルと同じように設定します。
xcode_todo22

下部にはTodoを見ていくボタンをおいておきます。
xcode_todo23
右上の赤い部分をクリックしたあと、プログラムで変更を加えなければならないUILabelなどをつなげていきます。
xcode_todo24
ラベルをクリックしたあとcommandを押しながらプログラムの方へドラッグ&ドロップしていきます。
xcode_todo25
はじめのラベルはdateLable、
xcode_todo26
タイトルを表示するラベルはtitleLable、
xcode_todo28
本文を表示するUITextViewはtoDoTextViewと名づけてそれぞれプログラムに反映していきます。
xcode_todo30
xcode_todo31

Todoリスト登録画面の構築

次にTodoリスト表示画面の構築を行っていきます。
右側のViewControllerを選択して、Storyboard内にドラッグ&ドロップをしてください。
xcode_todo32
また、以前の画面と同じようにSizeをiPhone4.7-inchにします。
xcode_todo33
今回は、+ボタンを押したら遷移したいので、赤い部分からcommandを押しながらドラッグ&ド
ロップをして遷移先として設定します。
xcode_todo34
Present Modallyを選択します。
xcode_todo35
また、こちらも同様にToolbarとラベルを設定します。
xcode_todo36
このラベルに関してはプログラムで変更する必要がないので、そのまま「Todoを登録してください」とします。また左のItemは消去します。
xcode_todo37
xcode_todo38

また、登録する際にどこが登録する場所なのかを明記しておきたいので、ラベルをドラッグ&ドロップして「タイトル」、「本文」と名付けます。
xcode_todo39
xcode_todo40

そして、データを入力するため、UITextFieldをそのラベルの横に置いておきます。
xcode_todo41
本文も入力するので、下記のように設定したあと、
xcode_todo42
はじめから入っている文字を消去します。
xcode_todo43
xcode_todo44
また、今回もViewControllerの色を少し変更しておきます。
xcode_todo46
これで完成です。

Todoリスト登録画面のファイル設定

次に、ファイルを設定していきます。
現在作成したViewController(画面)にはプログラムファイルがありません。

なのでそれを作成していきたいと思います。
下記のように、File→New→Fileと進んでください。
xcode_todo48
次にCocoa Touch Classを選択してNextをクリックします。
xcode_todo49
ファイルにInputViewControllerという名前をつけてNextをおします。
xcode_todo50
これでファイルの作成は完了です。

次に、画面とファイルを一体化させます。

下記のように、画面を選択したあと、右側のClassという箇所にInputViwControllerと入力します。もし、うまくいっている場合予測で出てきます。
xcode_todo51
次に、この画面のプログラムファイルを見てみます。
画面の赤い部分をクリックしたあと、右上のマークを選択してください。
xcode_todo52
すると、下記のようにプログラムが出現したかと思います。
xcode_todo53
それでは、プログラムで制御するパーツのみ読み込んでいきます。
まずは、画面上のUITextfieldを選択した状態でキーボードでcommandを押しながらプログラム側へドラッグ&ドロップをします。
xcode_todo54
この場合、inputTitleと名づけました。
xcode_todo55
本文も同様にします。
xcode_todo56
この場合、inputTextと名づけました。
xcode_todo57
以上で、全ての設定は完了です。

最後に

どうでしたか?次は、プログラムの部分(ブレインとなる部分)を構築していきたいと思います。イメージがわかない場合は、基本的な構成を今一度確認してください。今回は以上です!

この記事が気に入ったら
いいね!しよう

creiveの最新情報をお届けします

この記事を書いた人

yuta
知識ゼロからプロのInstagram風画像加工iPhoneアプリを作る 特別クーポン配布中! 詳しくはこちらから! エンジニアでプロデューサー ピーターティールが大好きです! Twitter:Yuta Fujii 質問はお気軽にどうぞ!

関連する記事

Recommended by