読者です 読者をやめる 読者になる 読者になる

SwiftでRealmを使ってみよう①【準備編(UI・画面遷移)】

はじめに

まずRealmとは何かといったことですが、
SQLiteの代替になると言われているデータベースです。
Chatworkなどで使われているそうです。

本記事ではiOSアプリでRealmを使ってみたいと思います。
Realmの導入までは以下の記事で書いています。
setomoki.hatenablog.com

また上記の記事で作成したプロジェクトを用いて話を進めていきます。

使用前の準備

まずはプロジェクトを開きます。
この時「.xcodeproj」ではなく「.xcworkspace」から開きます。
f:id:setomoki:20170326222206p:plain

「.xcworkspace」がないという方は上にある前回の記事の確認お願いします。

まずは保存するデータを用意するためにText Fieldと保存ボタンを用意します。
Xcodeで開いたプロジェクト内の「Main.storyboard」を選択します。
すると以下のような画面になると思います。
f:id:setomoki:20170326222635p:plain



①「Object Library」を選択
②「Text Field」を「View Controller」にドラック&ドロップ
します。
すると以下の画面のようになります。
f:id:setomoki:20170329194625p:plain

さらに
①「Button」を「View Controller」にドラック&ドロップ
②「attributes inspector」を選択
③「Title」を「保存」に変更
すると以下の画面のようになります。
f:id:setomoki:20170329225928p:plain

ここまででテキストの入力と保存ボタンの配置が完了しました。
次に保存したテキストを表示するViewを用意します。
「Object Library」内の「View Controller」をなにもないところにドラック&ドロップします。
f:id:setomoki:20170329230858p:plain

ドラック&ドロップすると以下の画像のようになると思います。
f:id:setomoki:20170329231030p:plain

追加した「View Controller」に戻るボタンと保存したテキストを表示するテーブルを用意します。
①「Button」を「View Controller」にドラック&ドロップ
②「Title」を「戻る」に変更
③「Table View」を「View Controller」にドラック&ドロップ
④「Table View」のサイズを大きくする
f:id:setomoki:20170329231819p:plain
f:id:setomoki:20170329232025p:plain
f:id:setomoki:20170329232204p:plain

ここまででUIの配置が終わりました。
次に保存ボタンがタップされたら一覧画面に映る処理を追加します。
保存処理自体は次回の記事で書きます。
保存ボタンから右クリックしながらドラックアンドドロップすると以下のような画面になると思います。
f:id:setomoki:20170329233615p:plain
右クリックを離すと以下のメニューが出てくるのでその中の「present modally」を選択します。
f:id:setomoki:20170329233741p:plain
これで保存ボタンからの画面遷移が出来ました。

全く同じように保存一覧ボタンの遷移も作成します。

次に戻るボタンで入力画面に戻る処理を追加します。
まずは①「File」⇨②「New」⇨③「File」を選択します。
f:id:setomoki:20170329234218p:plain

表示されたウィンドウで「iOS」タブ内の「Cocoa Touch Class」を選択し「Next」をクリックします。
f:id:setomoki:20170329234402p:plain

Class : DataViewController
Subclass of : UIViewController
に設定し「Next」をクリックします。
f:id:setomoki:20170329234654p:plain

保存先は任意の場所に保存してください。

するとDataViewController.swiftが作成されていると思います。
f:id:setomoki:20170329234948p:plain

作成したファイルと先ほど作成したView Controllerをつなげます。
そのために①「main.storyboard」⇨②「View Controller」⇨③「Identity inspector」⇨④Classを「DataViewController」に設定
します。
f:id:setomoki:20170329235818p:plain

次に「Assistant editor」(下の画像の赤枠の部分」を選択すると下の画像のような画面になると思います。
f:id:setomoki:20170330000127p:plain

戻るボタン右クリックでドラックすると以下のような画面になると思います。
f:id:setomoki:20170330000324p:plain

上の画像のところらへんでドロップ(離す)とメニューが表示されるので 以下の画像のように設定して「Connect」をクリックしてください。
f:id:setomoki:20170330000507p:plain

すると下の画像の赤枠部分が追加されていると思います。
f:id:setomoki:20170330000735p:plain

追加されたソースコードを以下になるように追記をします。

@IBAction func back(_ sender: UIButton) {
        self.dismiss(animated: true, completion: nil)
}

これで戻るボタンの遷移が出来ました。

これで左上の再生ボタンを押してアプリを実行してみるとUIと画面遷移ができていると思います。
(UIの配置についてはほとんど話していませんが、本当はオートレイアウトを使うといろんな画面サイズに簡単に対応できるようになります)

今回の記事はここまでで次回の記事で実際にRealmを使ってデータの保存処理を書いていきたいと思います。

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
この記事はアプリ開発初心者が学んだことを整理するために書いていますので間違いなどが多々あると思います。間違いなどありましたら是非コメントなどで教えていただけると幸いです。