【iPhone】メモ帳アプリ制作【swift】

【iPhone】メモ帳アプリを制作してみる Part.9【swift】

オプションページを作ろう

オプションページを先に作ってしまうことにした。

前回設置したツールバーの「item」を「設定」に変更し、そこからオプションページに飛べるようにする。

オプションページの飛び方は、ListViewControllerからViewControllerに飛ぶ時と全く一緒なので割愛する。忘れちゃった方は過去の記事を見てね。

オプションページヘの飛び方メモ

・storyboardに、TableViewControllerをぺたり。 名前は適当に。私は「OptionViewController」とした。

・ListViewControllerの「設定(ツールバーに設置したボタン)」からControl押しつつドラッグでOptionViewControllerへ。接続方法は「show」

・繋がったら、間の四角いのをクリックしてsegueを設定。私は「toOption」とした。

・OptionViewController.swiftを作成する。初期状態はListViewController.swiftと同じでオーケー。

・ListViewController.swiftのprepareForSegue()メソッドに、全く同じようにtoOptionのsegueも追加。

・OptionViewControllerの対応クラスに、OptionViewController.swiftを設定。

以上
いろいろあるが、慣れれば3分程度でぱぱっと出来る。
できたものがこちら。

SS

↓「設定」押下

SS 1

何もないけど、オプションページがとりあえずできた!!

【iPhone】メモ帳アプリを制作してみる Part.8【swift】

ツールバーをつけてみる

ツールバーをつけてみたい。ツールバーってのは、iPhoneアプリの下部に出てくるバーのこと。

設置の仕方は超簡単。Navigation Controllerを選択した状態で、図右側の「Shows Toolbar」にチェック。上から2番目のチェックマークだよ。

SS 1

これだけでOK。

この状態ではアイテムが0個なので、「Bar Button Item」からボタンを設置しましょう。
あとはツールバーの背景色と文字色を、ナビゲーションバーと同じものに変えます。下記をviewDidLoadへどうぞ。

ビルドしたらこんな感じ。

SS

イエス!!

背景色いろいろ変えました

前回から背景色をいろいろ変えてます。(まだ模索中です/今後も変わります)
背景色を変更するメソッドはこちらにまとめていくので、よければどうぞ。

次回からはちゃんとデザイン画を作ってから制作に取り掛かろうと思った。
やっぱりプログラムとデザインを同時並行で進めるのは難しい。絶対にコテコテしたデザインになってしまう。

【iPhone】メモ帳アプリを制作してみる Part.7【swift】

一覧の”タイトル”をメモの内容にあわせる

現在の一覧画面には「タイトル」という文字がずらーっと並んでいる状態。

スクリーンショット 2016-06-23 19.11.24

この「タイトル」という部分をメモの内容にそって変更してみる。

ListViewController

「cell.textLabel!.text = “タイトル”」となっている部分を上記に変更。これでOK。

SS 5

でもこれだけだと、メモ画面を更新し「戻る」ボタンで戻った際に、一覧画面の内容が更新前の状態で表示されてしまう。

それを防ぐために、こいつをどっかに書いておく。

「viewWillAppear」は画面が表示される前に呼び出されるメソット。
「tableView.reloadData()」はテーブルデータを更新するメソッド。
「super.viewDidDisappear」はよくわからない

まとめると「一覧画面が表示される前に、テーブルデータ更新するよ!」ていうメソッド。

これを書いておけば一覧画面に戻るたびにテーブルデータを更新してくれる。

★本当はメモとは別に「タイトル」というテキストフィールドを設けたかった。けど面倒だったので今回はやめた。また今度追加で作ります。

ナビゲーションバーのカラーを変えてみる

今の画面はモノクロでとにかく地味。ということで、ナビゲーションバーの色を変えてみる。

ListViewController

viewDidLoadをこんな感じに。

UIColorの設定は、こちらのジェネレーターを使うのがオススメ。
https://www.ralfebert.de/snippets/ios/swift-uicolor-picker/

背景を緑、文字を白にしてみた。

するとこんな感じ。

SS 1

いい感じに安っぽいカラーになった!!

 

セルのフォントサイズを変更してみる

今度はセルのフォントサイズを変更してみるよ。

ListViewController

cell.textLabel!.font = UIFont(name: “Arial”, size: 12)
この部分を追加したよ。

SS

こんな感じ。

 

あとついでにNavigationの境界線が邪魔なので消してみた。

【iPhone】メモ帳アプリを制作してみる Part.6【swift】

メモの保存&読込

保存の方法には色々あるらしいが、今回は「NSUserDefaults」という方法を使ってみる。”ちょっとした内容を保存する”のに向く方法らしいが、詳しいことはよく知らない。

まずViewController.swiftに、保存ボタンをAction接続、メモ本体をoutlet接続しておく。名前はなんでも良いのですが、私は「saveButton」と「memo」にした。

SS 6

Action接続はそれでなんかしたいときにする接続。(今回の場合は、保存ボタンを押したら保存するという動作をしたい。)
outlet接続はそれでなんかよみこみたいときにする接続。(今回の場合は、保存した文章を起動時にメモに読み込みたい。)

※この時点で「意味わからん!!」って人は少し待って下さい。別で記事を書きます。

ここまで出来たら、後は下記のソースをViewControllerにコピペ。

「”myText”+memoNo」ってのは、メモを本体に保存する際に使う識別名(key)。とりあえず今回は”myText”+memoNoにしたけど、キー名は何でもいい。後ろについてる「memoNo」は、メモごとに保存したいからセルNoを割り振ってる。(1個目のメモなら”myText1″、2個目のメモなら”myText2″って感じで保存されるようにした。)

ListViewControllerには下記をコピペ。

セルNoをViewControllerに渡す処理を追加してる。

SS 4

適当にメモを書いて「保存」ボタンを押下。一度アプリを閉じて起動し直すと、ちゃーんとメモが読み込まれた。やったね。

やってること

1.保存ボタンを押したらmyTextにメモを保存します。
2.起動時(viewDidLoad時)にメモを読み込みます。

以上

【iPhone】メモ帳アプリを制作してみる Part.5【swift】

メモ本体を設置(TextView)

 

さて、いよいよこのアプリのメイン!メモ機能を設置していこう。設置は超簡単。パーツから「Text View」をView Controllerの上にドラッグアンドドロップするだけ。おわり。

SS

位置調整はPinを使って。私の場合は左右の余白は0。下の余白は15。そして上の余白は-50している。Text Viewはなぜかデフォルトで上部に余白が出来るらしい。細かな調整は右側の定規アイコンから。

SS 1

※このやり方が正しいかどうかは不明。

ナビメニューに「保存」ボタンを設置

前回ナビゲーションコントローラーを設置したので、今回はそこに「保存」ボタンを設置していきたい。

まずは「Navigation Item」をView Controllerにドラッグアンドドロップ。

SS 2

Titleというバーが追加された。そしたら次に「Bar Button Item」をさっき追加したNavigation Itemの上に設置。

SS 3

Storyboard画面のなんか右にあるヤツ(名称不明)から設置するのがやりやすくて良いと思う。

次回は保存機能を追加するよ!

【iPhone】メモ帳アプリを制作してみる Part.4【swift】

とりあえず、この時点で実行してみる。
すると、セルをタップすると真っ白な画面に遷移するようになる。
分かりにくいけど、その真っ白な画面はメモ画面だよ。

_人人人人人人_
> 遷移完了 <
 ̄Y^Y^Y^Y^Y ̄

ナビゲーションをつける

スクリーンショット 2016-06-23 18.39.27

前回作った画面だと、上の部分がめり込んでいてカッコ悪いので、ナビゲーションバーを付けたい。
やり方は超簡単。TableViewControllerを選択した状態で、Editor > Embed in > Navigation Controller。

スクリーンショット 2016-06-23 20.39.36

こんな感じになればオッケー。

スクリーンショット 2016-06-23 20.39.52

できたら実行してみる。

スクリーンショット 2016-06-23 19.11.24

 

 

_人人人人人人人人人人_
> ビューティフォー <
 ̄Y^Y^Y^Y^Y^Y^Y^Y^Y ̄

※ちなみにSegueの種類が「Show」か「Push」になっていないと、TableViewControllerまでしかナビが繋がらない。

※右側のパーツにあるNavigationControllerから追加しても結果はおなじになる。

【iPhone】メモ帳アプリを制作してみる Part.3【swift】

一覧画面とメモ画面を繋ぐよ。

次に、一覧画面(TableViewController)とメモ画面(ViewController)を繋ぐ。
繋ぐ作業が多くて疲れてくるけど、頑張れ。

スクリーンショット-2016-06-22-17.35.31_full.png

一覧画面(TableViewController)を選択した時に上部に表示されるアイコンの一番左。黄色いやつ。これを右クリックして、そのままメモ画面(ViewController)にドラッグ&ドロップ。

すると黒いウインドウが表示されるので、その中から「show」を選択する。
(画像だとPresentなんとかを選択していますが、無視して下さい。)

一覧画面(TableViewController)とメモ画面(ViewController)が繋がると、2つの間に矢印が表示される。

スクリーンショット-2016-06-22-17.36.46_full.png

表示された矢印の四角い部分を選択。すると画像の位置に「identifier」と表示される部分があるはず。そこに適当な名前をつけてね。私は「toViwe(Viewへ)」にしたよ。

ちなみにidentifierとは識別子のこと。

あとでプログラム上で、ここでの繋がりを識別する際に使うから覚えておいて。

とりあえずセルを追加してみる。

セルをクリックしたらメモ画面に飛ぶようにしたい。
そのためには、とりあえずセルを追加したい。今はまだ真っ白のままだからね。

というわけで・・・

スクリーンショット 2016-06-23 18.39.27

セル作った。

作り方はすっごい簡単。下記をswiftファイルに追加するだけ。
(私の場合は「ListViewController.swift」さっき一覧用に作ったやつね。)

コピペだけでもいいけど、勉強のために出来れば覚えて下さい。

上がセルの総数を設定するメソッド。下がセルの値を設定するメソッド。長々と書いてあるけど、メソッド名と引数だけ暗記すればオッケー。

◆セルの総数を設定するメソッド。
tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int
私は最後に「Int」ってついてるtableViewって覚えてる。今は3って入れてるけど、最終的には「登録されているメモの数」が入るようにする。

◆セルの値を設定するメソッド。
tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
こちらも同じく最後に「UITableViewCell」ってついてるtableView(ry)
今は「タイトル」って入れてるけど、最終的には各メモのタイトルが入るようにする。

それぞれ追加したら、上記画像のように表示されるようになる。

セルをクリックしたら、メモ画面に遷移するようにする。

さらに上記を追加すっぞ!!!

◆セルがタップした時に呼び出されるメソッド
tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath)

これが書いてないと、セルをタップしても無反応になる。

◆Segue(飛び先)を設定
prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject!)

これが書いてないと、タップされたときにどこへ飛んだらいいか分からなくなる。そしてフリーズする。”toView”の部分を自分が設定した値に変更してね。

【iPhone】メモ帳アプリを制作してみる Part.2【swift】

まずは一覧画面から作っていこう。
作成したメモをずらーっと並べておく画面。

TableViewControllerをぺたり

一覧画面を作るには「TableViewController」を使う。
TableViewControllerは右側のパーツが色々並んでいるところにある。TableViewControllerを見つけたら、中央の白いところにドラッグ&ドロップ。

スクリーンショット-2016-06-22-15.00.31_full.png

 

ひっついた。

アプリ起動で、一覧画面を表示させたい

アプリを起動したら、まず最初に一覧画面を表示させたい。そのためには「is Initial ViewControllerをチェックする。チェックしたことで、TableViewControllerの左側に矢印がつけばOK。

スクリーンショット-2016-06-22-16.10.05_full.png
この時点でシミュレーターを起動させると、真っ白なテーブルが開くよ。

TableViewControllerとswiftファイルを繋ぐ

次に、TableViewControllerとswiftファイルを繋いで開発が進められるようにする。

まずは新しくswiftファイルを作る。私は「ListViewController」で作ってみた。swiftファイルができたら、下記のコードを記入。
その際、class ListViewController: 〜の部分はファイル名に合わせて変えること。

ここまで出来たら、TableViewControllerとswiftファイルを繋げる。
Custome Class > Classから選択する。

 

スクリーンショット-2016-06-22-17.23.18_full.png

これで繋がった!
swiftファイルに書いた内容がTableViewControllerに反映されるようになります。

◆注
もしここで今作ったswiftファイルが選択できない場合は、さっきコピーしたソース「class ListViewController: UITableViewController{」太字の部分に間違いがないかどうかを確認。これがViewControllerとかになってるとダメ。

【iPhone】メモ帳アプリを制作してみる Part.1【swift】

シンプルなメモ帳アプリを作ってみようと思い立った。
ちなみにiPhoneアプリ開発は未経験。

◆絶対つけたい機能

・基本のメモ機能(保存、削除、編集)
・一覧でメモを管理できる機能
・文字数表示
・オプション機能(とりあえず、フォントサイズを変更できる機能だけでいいや)

◆できればつけたい機能

・自動保存
・書いたメモをメールか何かで外部送信できる機能