ハッカソンでiOSアプリを２４時間で作るためのアーキテクチャや事前準備、実装手順

## 概要

この記事は、もともと[iOSDC](https://iosdc.jp/2017/)で話そうと思ってたけど不採択、でも[俺コン](https://orecon.connpass.com/event/63769/)にて拾っていただいて発表することになった発表のQiita版です。


スライドは以下
https://speakerdeck.com/fujikawakei/hatukasondeiketeruapuriwo-24shi-jian-debao-su-shi-zhuang-surufang-fa

<script async class="speakerdeck-embed" data-id="d63f2fa11fad4fdfb25ddfe068c29a05" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>

ハッカソンのアプリ全体の話は[Spajam2017優秀賞「嫌われAIの命名」の発想プロセスからiOSアプリ実装まで](https://qiita.com/k-boy/items/00aff3e3c34abb6160c0) で詳しく書いてありますので、実装以外の部分も興味ある方はそちらも覗いてみてください。


## この記事の内容

* ハッカソンのアーキテクチャはこれでいい
* ハッカソンでの事前準備しとこう
* 実装手順はこれが良さそう

## ハッカソンでのアーキテクチャ

テストしやすくするために疎結合にしたり、メンテナンス性の低いFatViewControllerを作らないために、iOSアプリのアーキテクチャを工夫することは大事だと思っています。

<img width="694" alt="スクリーンショット 2017-10-04 22.41.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/01b01550-562c-9324-ee6c-d29f392a895e.png">


Swiftエンジニアを２年弱やった僕もアーキテクチャ選定って気持ちよく仕事する上で大事だよなと思ったりしてます。

しかし、**ハッカソンは短時間で実装し、イケてる感じに見せかけ、感動させれば勝つことができます。** 特に流行りのフレームワーク、アーキテクチャを取り入れるメリットはそれほどありません。

ということで、ハッカソン用のアーキテクチャを考えました。

<img width="699" alt="スクリーンショット 2017-10-04 22.02.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/8411450a-b38b-1137-a8e2-e8be0c14e52b.png">

### 爆速！ハッカソン用アーキテクチャ V&M

その名は**V&M(ViewController & Manager)**

Spajamではこんな感じで作りました。

画面間で共有したい要素は全てManagerに突っ込みます。他の必要なことはViewControllerに突っ込みます。細かいことは気にしない。分かり易ければ良いのです。

<img width="700" alt="スクリーンショット 2017-10-04 22.13.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/89d1b2f9-e94a-e87d-c59f-abc8d40f08f8.png">


### Manager(シングルトン)の例

textFieldに入力した値、生成したNickName, screenShotは全てこのマネージャーに突っ込みます。まさにマネージャー。全ての大切なpropertyをマネジメントしてくれます。

```swift:NickNameManager.swift
class NickNameManager {
    
    private init(){
        
    }
    static var shared =  NickNameManager()
    
    var screenName = ""
    var nickName = ""
    var screenShot: UIImage?
}
```

### ViewControllerでのManager使い方例

VCはManagerさんの力を借りて値を投げたり受け取ったりします。

#### InputNameViewController
<img width="701" alt="スクリーンショット 2017-10-04 22.13.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/cde5386e-dd78-bd32-1885-10673bbe120a.png">

textFieldに入った値をシングルトンのmanagerに渡すだけ！簡単！！！

```swift:InputNameViewController.swift
class InputNameViewController: UIViewController {

    @IBAction func buttonTapped(_ sender: Any) {

        guard let screenName = textField.text else { return }
        NickNameManager.shared.screenName = screenName
    }
}
```


#### ResultViewController
<img width="712" alt="スクリーンショット 2017-10-04 22.13.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/386ad39a-ef72-9108-542f-03df7305d02e.png">

できたnicknameはManagerに保持しておいてResultViewControllerに表示！！簡単！！

```swift:ResultViewController.swift

class ResultViewController: UIViewController {

    var nickName: String {
        let name = NickNameManager.shared.nickName
        return name
    }
    
    @IBOutlet weak var resultLabel: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        resultLabel.text = nickName
    }
}
```

## 事前準備

画面遷移、音楽再生、動画再生あたりを先に用意しておきます。音楽や動画を使って、リズムよく画面を遷移していくアプリが僕たちのチームのスタイルに合っていたからです。

### 画面遷移

ScreenTransitionManagerってやつを用意しときます。下からmodalとかクロスディゾルブで表示とか、横にpushで画面遷移をメソッドを呼べばできるように、あとはVCとidentifierを入れればすぐに画面遷移のメソッドが作れるようにしておきました。

```swift
class ScreenTransitionManager {
    
    static let shared = ScreenTransitionManager()
    private init(){
        
    }
    
    private var targetViewController: UIViewController? {
        // 現在一番上にあるViewControllerを取得する
        var tc = UIApplication.shared.keyWindow?.rootViewController
        while tc?.presentedViewController != nil {
            tc = tc!.presentedViewController
        }
        return tc
    }
    
    /// 横にスライド表示
    private func show(_ controller: UIViewController){
        targetViewController?.show(controller, sender: targetViewController)
    }
    
    /// 新しいnavigationControllerでモーダル表示
    /// modalPresentationStyleやmodalTransitionStyleを設定しなければ下から出てくる
    private func presentModalWithNavigation(_ controller: UIViewController){
        let nc = UINavigationController(rootViewController: controller)
        targetViewController?.present(nc, animated: true, completion: nil)
    }
    
    /// クロスディゾルブでスーッとモーダル表示
    private func showTranslucenceView(_ controller: UIViewController) {
        controller.modalPresentationStyle = .overFullScreen
        controller.modalTransitionStyle = .crossDissolve
        targetViewController?.present(controller, animated: true, completion: nil)
    }
    
    // ログインに飛ぶ
    func goToLogin(){
        let storyboard = UIStoryboard(name: "Login", bundle: nil)
        let controller = storyboard.instantiateViewController(withIdentifier: "LoginViewController")
        show(controller)
    }
    
}
```

### 音楽再生class

```swift

class AudioPlayer: NSObject, AVAudioPlayerDelegate {

    static let shared = AudioPlayer()
    private override init(){
    }

    var audioPlayer: AVAudioPlayer?

    enum MusicName: String {
        case loopmusic
    }
    
    func playMusic(_ name: MusicName){

    }

    func stop(){
        audioPlayer?.stop()
    }
}

```

### 動画再生class

#### AVPlayerView

```swift
// レイヤーをAVPlayerLayerにする為のラッパークラス.
final class AVPlayerView: UIView {

    func setPlayer(_ player: AVPlayer) {
        let layer = self.layer as! AVPlayerLayer
        layer.player = player
    }
}
```

#### ViewDidLoadにコピペで貼ったやつ

```swift
// パスからassetを生成.
let path = Bundle.main.path(forResource: "movie_parts", ofType: "mp4") ?? ""
let fileURL = URL(fileURLWithPath: path)
let avAsset = AVURLAsset(url: fileURL, options: nil)
        
// AVPlayerに再生させるアイテムを生成.
let playerItem = AVPlayerItem(asset: avAsset)
// AVPlayerを生成.
videoPlayer = AVPlayer(playerItem: playerItem)
        
// 動画再生完了の監視
NotificationCenter.default.addObserver(self, selector: #selector(MovieViewController.movieEnd(_:)), name: NSNotification.Name.AVPlayerItemDidPlayToEndTime, object: nil)
```

## 実装手順

最後に実装手順。**皆さんはアプリを作るときにどこから作るでしょうか？**

通信周りから？　Modelから？ Viewから？ (僕は喉から)

<img width="702" alt="スクリーンショット 2017-10-04 22.14.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/17ec65d1-bd4a-9f66-9ecb-9a85832493f3.png">


私はハッカソンでも普段の業務でも**Viewと画面遷移から**作ります。それはデザイナーが何もできない時間を減らすためと、できてる感を出すためです。

**ハッカソンで大事なのがこのできてる感。** とりあえず動くアプリを作っておけば、時間が足りなくなって裏の実装が間に合わなかったとしてもとりあえず動くアプリを持って発表に望むことができます。

**まず動く**ことはSpajamでも評価として高そうでした。ぶっちゃけ中身がなくてもいい動画、いい音楽、いい感じに動くアプリがあれば、それだけで　ポイントを稼ぐことができると思います。

そこに技術点を加えていくために裏側の実装を頑張るイメージです。


## まとめ

<img width="701" alt="スクリーンショット 2017-10-04 22.39.37.png" src="https://qiita-image-store.s3.amazonaws.com/0/111366/d382693e-8e42-1e50-95ca-fc8c518ea314.png">

**V&M**は仕事では使っちゃダメだけど、ハッカソンで爆速実装するにはこの実装はよかったです！

ハッカソン出る方は参考にしてみてくださいw

[Spajam2017優秀賞「嫌われAIの命名」の発想プロセスからiOSアプリ実装まで](https://qiita.com/k-boy/items/00aff3e3c34abb6160c0)も読んでね！