#プログラミング初心者でも簡単に作れるRealmとFSCalendarを用いた日記アプリ作成（１）

今回は、プログラミング初心者に向けて、日記アプリの作成方法について解説していきます。

-環境-
・Xcode10
・Swift4

コードについては以下の記事に書かれています。
プログラミング初心者でも簡単に作れるRealmとFSCalendarを用いた日記アプリ作成（２）

##完成図

Simulator Screen Shot - iPhone XR - 2019-02-10 at 21.27.54.png

##1. 作成するにあたっての前提の確認

今回はプログラミング初心者に向けて書いています。
初めはコードの意味は考えずに、手順を見ながら写して欲しいです！

##2. プロジェクトファイルを作ろう！

###①「Create a New Xcode Project」を選択
Xcodeを開き、「Create a New Xcode Project」を選択して新規プロジェクトを立ち上げましょう。

###②「Single View App」を選択

###③ Projectの名前などを決める

※画像の名前に相当する箇所はそれぞれ各自のものにしてください。

Product Name：Diary
Team: None
Orgnization Name: （名前）
Orgnization Identifier: （ドメインの逆書き）
Language: Swift

###④ 保存先を決める
「デスクトップ」や「ダウンロード」などわかりやすい場所に保存しておくといいでしょう。

##3. アプリ開発の手順

##3-0. アプリ開発の全体像

まずは、使用するライブラリを準備します。
その上で、
「Storyboardでパーツを配置」→「コードを書く」→「関連付け」→「デバッグ」
を繰り返すことでアプリは作られます。

##3-1. Cocoapodsを用いて、ライブラリの準備をする。

###3-1-1. Cocoapodsを使用できるようにする。

ターミナルを開きましょう。
まずは、ターミナルで以下のコマンドを打ちます。

sudo gem install cocoapods

次に、アプリのプロジェクトファイルがあるところに移動しましょう！

cd （アプリのプロジェクトファイルがあるところ）

例えば、デスクトップにDiaryというファイルがある場合は、

cd Desktop/Diary

で移動できます。

この時、

ls

と書くと、ファイル内にどんなファイルがあるか確認できます。
正しくできていれば、

Diary Diary.xcodeproj

という2つのファイルがあります。

###3-1-2. Podfileを作る

以下のコマンドを打ってください。

pod init

次に

ls

とコマンドを打ちましょう。

Diary Diary.xcodeproj Podfile

のように、Podifileというファイルが作成されます。

###3-1-3. Podfileに書き込む。

まずは、Podfileを開きましょう。
以下のコマンドを打ち込んでください。

open Podfile

すると、以下のような画面が出現します。

use_frameworks! の下に以下のコードを書きます。

  pod 'RealmSwift'
  pod 'FSCalendar'

書き終わったら、⌘+Sで保存して、Podfileを閉じましょう。

###3-1-4. Pod installする。

Podfileを閉じ終わったら、次にターミナルに戻ります。
以下のコマンドを打ち込みましょう。

pod install

終わったら、

ls

というコマンドを打ってみましょう。

Diary Diary.xcodeproj Podfile Diary.xcworkspace

というように、Diary.xcworkspaceというファイルが作成されていると思います。

次に、以下のコマンドを打ち込んでXcodeを開きましょう！

open Diary.xcworkspace

##3-2. Storyboardにパーツを配置する。

3画面作ります。
①Calendarを表示する画面
・Calendarの表示
・Calendarで選択した日にちの日記のタイトルが表示される。

②日記を追加する画面

③日記の詳細画面をみる画面

###3-2-1. Calendarを表示する画面を作成する。

####3-2-1-1. UIViewの配置
まずは、UIViewを配置してみます。
以下の画像に倣って、パーツを配置してみましょう。

UIViewに関しては、カレンダーを表示するための準備をしましょう。

####3-2-1-2. TableViewの表示
3-2-1-1と同じ手順で、TableViewを配置します。
そして、「TableView Cell」と検索して、TableView内にcellを配置します。
cellに対して、以下の画像を見ながらIdentifierをつけます。

####3-2-1-3. Naviagtion Controllerの追加
次に、NavigationControllerを接続します。
上部の[Xcode File Edit ...]と並んでいる箇所から、

「Editor →　Embed In → navigation controller」

という手順で選択してみましょう。

####3-2-1-4. Naviagtion Itemの追加

右上にNavigation Itemを追加します。
3-2-1-1と同様に、「Bar Button Item」と検索して配置しましょう。
うまく配置できない人は、まず「Navigation Item」を配置した後に「Bar Button Item」を配置しましょう。

3-2-1-2のCellの時と同じ要領で、
BarButton Itemを選択→ホームベースボタンを選択→System Itemを**「Add」**に変更
しましょう！！

####3-2-1-5. 完成イメージ
完成イメージは以下の画像です。

###3-2-2. 日記を追加する画面を作成する。

####3-2-2-1. パーツを配置する
3-2-1と同じ要領でパーツを配置しましょう。
この画面では、「UITextView」と「UITextField」を配置します。

####3-2-2-2. 画面を繋ぐ
次に、先ほどの画面と日記を追加する画面を繋いでみましょう。
先ほどの画面の右上のボタンから、Controlキーを押しながら、日記を追加する画面にドラッグ&ドロップします。

###3-2-3. 日記の詳細をみる画面を作成する。

####3-2-3-1. パーツを配置する
3-2-1と同じ要領でパーツを配置しましょう。
この画面では、「UITextView」を配置します。

####3-2-3-2. 画面を繋ぐ
3-2-2-2.と同じ要領で画面を繋いでみましょう。
今回は、画面を繋いだら、画面を繋いでいるもの（Segue）をクリックして3-2-1-2の時と同じ要領でIdentifierを「toDetail」と名付けます。

これで、画面の作成は終わりました。
これからコードを書いていきましょう！！

##次回の記事

プログラミング初心者でも簡単に作れるRealmとFSCalendarを用いた日記アプリ作成（２）

##GithubURL

今回のアプリを以下のリンクからダウンロードできます。
https://github.com/atsutko/Diary