そのまま使える！iOSアプリを作るためのswiftサンプル集

##### 更新情報
2018/7/1：基本サンプルに`AVSpeechSynthesizerSample`、`HomeScreenQuickActionsSample`、`PeekAndPopSample`を追加。
2019/9/23：全サンプルをXCode10.3、Swift5に対応

# はじめに
カスタムセルを使ったCollectionViewの表示、手を止めずに作れますか？
TableViewCellを伸び縮みさせたり、視覚効果を与えたりする、、、何も調べずに作れますか？？

おそらく開発業務に携わっているほとんどの方は（僕を含めて）新規に何かを作成する場合にネットで該当するサンプルコードを探していると思います。
そしてサンプルを探すことに時間がかかり、「調べる時間 > 作る時間」の状態になっているのではないでしょうか。

ならば「あるある」な画面や機能のサンプル一式を実行確認できる状態にして全体共有しておけば開発に役に立つのではないかと考え、この記事を書きました😃

サンプルコードのURL
https://github.com/RyutaMiyamoto/iOS_Samples

※Apple公式にUIKitのサンプル[UIKit Catalog](https://developer.apple.com/library/archive/samplecode/UICatalog/Introduction/Intro.html)がありますので、そちらもiOSアプリを作る上で参考になると思います。

# サンプルについての説明
- 公開しているサンプルはMITライセンスです。（改変、再配布、商用利用など、どんなことにでも自由お使いください）
- 本記事のサンプルは全てライブラリ未使用です。
- サンプルはそれ自体の機能を特徴づけたかったので、必要最低限の機能しか実装していません。
※実行結果は画面ではなく、XCodeのコンソール上で確認する必要があるものがいくつかあります。
- サンプルは機能ごとに独立させたかったのでプロジェクトを分けています。（頑張って一つずつプロジェクトを開いて実行してください٩(๑❛ᴗ❛๑)۶）
- サンプルの実行環境は以下の通りです。
  - XCode9.4.1以降
  - Swift4.1以降
  - iOS11.1以降

# サンプル
### アラート表示（UIAlertControllerSample）
![alert.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/ac6aafd2-77c2-4547-fc7b-803efdedc157.gif)

#### 説明
- `UIAlertController`を使用した`UIAlertControllerStyle.alert`と`UIAlertControllerStyle.actionSheet`それぞれの表示サンプル。

#### ポイント
- ボタンタップ時のアクションは、各ボタン生成時のクロージャスコープ内に記述する。

### TableView表示（UITableViewSample）
<img width="307" alt="Alert.png" src="https://qiita-image-store.s3.amazonaws.com/0/160811/919fea16-5e83-f3fd-b5c4-e7221b57ab74.png">

#### 説明
- カスタムセルを使用したUITableViewの表示サンプル。

#### ポイント
- Storyboardを使用している場合は、`Outlets`に`dataSource`と`delegate`の設定をして（繋いで）おくと、（`dataSource`と`delegate`の設定を）コードに記述しなくて良いので便利。
- カスタムセルの`identifier(Reuse Identifier)`に名前の指定を忘れずに。

### CollectionView表示（UICollectionViewSample）
<img width="306" alt="collection1.png" src="https://qiita-image-store.s3.amazonaws.com/0/160811/9c2874da-0758-afe9-de1e-05d52ee1ea8c.png">

#### 説明
- カスタムセルを使用したUICollectionViewのサンプル。

#### ポイント
- Storyboardを使用している場合は、`Outlets`に`dataSource`と`delegate`の設定をして（繋いで）おくと、（`dataSource`と`delegate`の設定を）コードに記述しなくて良いので便利。
- カスタムセルの`identifier(Reuse Identifier)`に名前の指定を忘れずに。
- `sizeForItemAt`のタイミングでカスタムセルのサイズを指定する。

### ピッカー表示（UIPickerViewSample）
![10.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/4a036c84-29b3-2930-9678-d9ba46ec5926.gif)

#### 説明
- `UIPickerView`と`UIDatePicker`を使用した汎用ピッカーと日時ピッカーのサンプル。

#### ポイント
- Storyboardを使用している場合は、`Outlets`に`dataSource`と`delegate`の設定をして（繋いで）おくと、（`dataSource`と`delegate`の設定を）コードに記述しなくて良いので便利。

### タブ表示（UITabBarControllerSample）
<img width="307" alt="tab.png" src="https://qiita-image-store.s3.amazonaws.com/0/160811/70f3b094-9106-3ae0-2340-c215d0ec7006.png">

#### 説明
- `UITabBarController`を使用したタブ画面サンプル。

#### ポイント
- UITabBarControllerの配置しているStoryboardには、各タブに対応する`Storyboard Reference`を配置する。
※StoryboardをViewControllerごとに分けることにより、各ViewControllerの独立性が高まり（場合にもよるが）管理しやすくなる。
- タブに該当するStoryboardの`Initial ViewController`に`TabBarItem`を配置する。

### 認証機能（LocalAuthenticationSample）
![4.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/f763a969-b8a6-8d97-5108-33b426c23d62.gif)

#### 説明
- Face IDや指紋認証、パスコード認証を使用するためのサンプル。

#### ポイント
- plistの`Privacy - Face ID Usage Description`にFace ID、指紋認証機能を使用する理由を記述。

### Json形式のデータパース機能（CodableSample）
#### 説明
- `Codable`を使用したJson形式のデータをパースするためのサンプル。

#### ポイント
- Codableでそのまままとめて取得しようとすると`型が違う`、`パラメタがレスポンスに無い`などの理由でアプリが落ちてしまうため、意図とレスポンスが返ってきた場合にも対処できるようにする。

### シェア機能（UIActivityViewSample）
![13.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/24de521f-49d7-6b68-f892-c409183441b7.gif)

#### 説明
- `UIActivityViewController`を使用したメールやコピー等の共有機能に関するサンプル。

#### ポイント
- 共有する（文字や画像など）内容は`activityItems`に指定する。
- 共有したくない項目は`excludedActivityTypes`に指定する。（無ければnilでよい。）
- `Safariで開く`などの独自のシェア機能を使用する場合は`カスタムUIActivity`を作成する。

### カメラ、フォトライブラリへのアクセス（UIImagePickerControllerSample）
<img width="303" alt="camera.png" src="https://qiita-image-store.s3.amazonaws.com/0/160811/9785fb9a-cb47-c71e-b839-67c0cba0ba6f.png">

#### 説明
- `UIImagePickerController`を使用したカメラでの撮影、フォトライブラリからの写真読み出し、画像データの保存をするためのサンプル。

#### ポイント
- plistの`Privacy - Camera Usage Description`にカメラを使用する理由を設定。
- plistの`Privacy - Microphone Usage Description`にマイクを使用する理由を設定。
- plistの`Privacy - Photo Library Additions Usage Description`にフォトライブラリに画像を保存する理由を設定。

### Webブラウジング表示（WKWebViewSample）
![11.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/69a3c608-15d4-a82d-ebf5-ffbae16ed1a4.gif)

#### 説明
- `WKWebView`を使用したwebブラウジングを行うためのサンプル。

#### ポイント
- `didStartProvisionalNavigation`はロード開始のタイミングで実行される。
- `didFinish`はロード完了のタイミングで実行される。

### メール作成機能（MFMailComposeSample）
![12.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/bc3a62e5-3fde-d655-7143-0c336a645fdd.gif)

#### 説明
`MFMailComposeViewController`を使用したiOS標準のメール機能を使用するためのサンプル。

#### ポイント
- `setToRecipients`でメールの宛先に`To:`を指定できる。
- `setCcRecipients`でメールの宛先に`Cc:`を指定できる。
- `setBccRecipients`でメールの宛先に`Bcc:`を指定できる。

### 地図表示（MKMapViewSample）
![5.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/43b49310-e151-98fd-b282-bf25d6cc7783.gif)

#### 説明
- `MKMapView`を使用した地図画面を表示し、指定ロケーションでピンで表示させるサンプル。

#### ポイント
- Storyboardを使用している場合は、`Outlets`に`delegate`の設定をして（繋いで）おくと、（`delegate`の設定を）コードに記述しなくて良いので便利。
- `viewFor`のタイミングでピンに該当するViewを作成する。

### 画像フィルタ機能（ImageFilterSample）
![3.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/b211d8d8-4d1f-e09c-862e-8a81796994fc.gif)

#### 説明
- `CIFilter`を使用した、フィルタリング後の画像を一覧表示するサンプル。
- このサンプルは1枚の画像にフィルタをかけた場合のサンプル。
※複数の画像を用意すれば、複数枚画像を掛け合わせたような画像を生成することができるフィルタも多数ある。フィルタの種類についてはAppleの[Core Image Filter Reference](https://developer.apple.com/library/archive/documentation/GraphicsImaging/Reference/CoreImageFilterReference/index.html)を参照。

#### ポイント
- `CIFilter`の生成時にフィルタ名として`CIBoxBlur`や`CIDiscBlur`などの文字列を指定することで画像にフィルタをかけることができる。

### Delegateによるデータ受け渡しのデザインパターン（DelegateSample）
#### 説明
- `protocol`を使用し、`UITableViewCell`に配置された`UIButton`のタップイベントをView配置元の`UIViewController`に検知させるためのDelegateデザインパターンサンプル。
※今回はDelegateデザインパターンを実装するためのサンプルなので、`UITableViewDelegate`のDelegateに関する説明は割愛します。

#### ポイント
- Delegate（移譲）`元`のdelegateプロパティ定義には基本的に弱参照`weak`で定義する。
- Delegate`元`のdelegateプロパティ定義はランタイムエラーを防ぐためにオプショナル型`?`で定義する。
- Delegate`元`のdelegate定義には`protocol`を使用する。
- Delegate`先`のdelegate対象クラス生成時に移譲処理（`xxx.delegate = self`に該当する）を記述する。
- Delegate`先`のクラス定義部分にdelegateに該当する`protocol名`と、Delegate`元`のprotocolで定義した`メソッド`を記述する。
※`extension`を使用して、移譲`先`クラスのスコープ外に`protocol名`と`メソッド`を定義し直してもOK。

### ホーム画面からのクイックアクション（HomeScreenQuickActionsSample）
![14.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/30457e5b-7d3e-d468-66d2-1e6a070d56fa.gif)

#### 説明
- ホーム画面からの3Dタッチを利用したクイックアクションのサンプル。
​

#### ポイント
- クイックアクション追加には以下の2種類がある。
  - plistに記述して追加する方法（Static Actions）。
  - コードに記述して追加する方法（Dynamic Actions）。
- クイックアクションで設定する項目は以下の5種類。
  - タイトル：文字列、必須。
  - サブタイトル：文字列、任意。
  - アクション種別：文字列、必須。
  - アイコン種別：クイックアクション用画像もしくは画像、任意。
  - 各種パラメタ：辞書型配列、任意。
​

### アプリ内3Dタッチ（ピーク、ポップ）サンプル（PeekAndPopSample）
![13.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/87add883-2c9e-576c-bdd2-7041b57a1c62.gif)

#### 説明
- Viewへの3Dタッチを利用した画面遷移のサンプル。
- ピーク（Peek）は軽めにプレス、ポップ（Pop）は深めにプレスすることを指す。
​

#### ポイント
- ピーク時とポップ時の動作は合わせて設定しておく。

### 文章読み上げ（AVSpeechSynthesizerSample）
![IMG_5236.PNG](https://qiita-image-store.s3.amazonaws.com/0/160811/10eb2d4d-7616-40bd-ea64-4b0d440c9aa4.png)

#### 説明
- AVSpeechSynthesizerを使用した文章読み上げサンプル。

​
#### ポイント
- 読み上げ機能は「言語」、「音声の速さ」、「音声の高さ」を指定できる。
- バックグラウンド再生をするには以下を実行。
  - `TARGETS`の`Capabilities`の`Background Modes`を`ON`にし、`Audio〜`にチェックを入れる。
  - `AVSpeechSynthesizer`初期化前に`try? AVAudioSession.sharedInstance().setCategory(AVAudioSessionCategoryPlayback)`を実行。
  - `rate`には音声を読み上げる速さを設定する（0.0〜1.0）
  - `pitchMultiplier`には音声の高さを設定する（0.5〜2.0）
  - `volume`には音声の大きさを設定する（0.0〜1.0）

# 応用

### 横方向の画面ページング（UICollectionViewSample2）
![9.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/31d24a2e-ef8b-244c-75c0-d26499fcbfef.gif)

#### 説明
- 横方向にスワイプすることで画面切り替えができるサンプル。

#### ポイント
- `Scroll Direction`を`Horizontal`に設定する。
- `Min Spacing`を全て`0`に設定する。
- `Scrolling`の`Paging Enabled`をtrueの状態にする。

### TableViewCellの伸び縮み（アコーディオン）表示（UITableViewAccordionSample）
![2.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/03e03124-a3e3-4454-c6f7-41239c97f5eb.gif)

#### 説明
- UITableViewCellをタップすることで、タップしたセルを伸び縮みさせるサンプル。
- iOS標準アプリ`カレンダー`で使用。

#### ポイント
- TableViewCellの高さを変える場合は`AutoLayout`のセルの高さの制約を変更してあげると楽。
- 伸び縮みさせるときにアニメーションさせる場合はセルの高さを変える処理を`tableView.beginUpdates()`と`tableView.endUpdates()`で挟む。
- 伸び縮みさせるときにアニメーションさせない場合はセルの高さを変える処理後に`tableView.reloadData()`を実行する。

### LINE風タイムラインTableView表示（UITableViewTimelineSample）
![1.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/ee5ed807-b198-8896-9c45-be0c422de21a.gif)

#### 説明
- タイムライン表示（LINEのトーク画面表示）ができるサンプル。
- アプリ`LINE`や`Messenger`で使用。

#### ポイント
- UITableViewCellを追加していくことでタイムライン表示している。
- 表示する文字数によっては`TableViewCell`に配置している`UILabel`が複数行表示になるため、`cellForRowAt`のタイミングで`TableViewCell`に計算済みのCellの高さを設定する。

### TableViewCellの視覚効果（UITableViewParallaxSample）
![7.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/8fff9cd8-d2e9-e95b-e226-5f40ac396289.gif)

#### 説明
- UITableViewを上下にスワイプさせることで、UITableViewCell内の画像の端部分が見え隠れするサンプル。
- アプリ`Relux`で使用。

#### ポイント
- 視覚効果させたい（ImageViewなどの）パーツは、TableViewCellの高さから上下に`はみ出した状態`で配置し、`AutoLayout`で制約を設定する。
- 視覚効果に関するは`UIScrollViewDelegate`の`scrollViewDidScroll`のタイミングでパーツの縦位置（`rect.origin.y`）を調整する。

### スライドメニュー表示（SlideMenuSample）
![6.gif](https://qiita-image-store.s3.amazonaws.com/0/160811/6c581449-260e-914d-1c39-0498d1340737.gif)

#### 説明
- 画面外から他の画面（UIViewController）を表示させるサンプル。
- アプリ`AbemaTV`や`グノシー`で使用。

#### ポイント
- ViewControllerを重ねて表示させるには`ContainerView`を使用する。

# 終わりに
いかがだったでしょうか？
この記事から役に立つサンプルが見つかれば幸いです。

気に入ったサンプルが見つかればGithubのスターボタンを押してあげてください😌
https://github.com/RyutaMiyamoto/iOS_Samples

この記事のサンプルコード作成には[KentarouKanno](https://github.com/KentarouKanno)さんに一部協力していただきました。
感謝感謝です٩(๑❛ᴗ❛๑)۶

また、iOSアプリでよく使う機能や画面のサンプルを作っていただける方を募集します。
https://github.com/RyutaMiyamoto/iOS_Samples
からリポジトリをforkして、そのリポジトリからサンプルの新規プロジェクトを作成後に本家リポジトリにプルリクエストをしていただけましたら全力でコードレビューします！
プルリクエスト後に本家リポジトリにプロジェークトをマージします。
マージ後はこの記事に作成者名とともにサンプルプロジェクトを感謝の気持ちを込め、紹介させていただきます。

僕自身も新しいサンプルを作成次第、この記事に追加していきますのでたまに記事をチェックしてみてください。