LoginSignup
15

More than 5 years have passed since last update.

岩手をスワイプするアプリを作った話

Last updated at Posted at 2014-12-04

みなさんはじめまして. 私, かどわきと申します.
今年の3月に岩手県立大学を卒業して, 今は筑波大学大学院で勉強しています.

そして今回Qiitaに初投稿するので温かい目で見守ってくだされば幸いです泣
※フライングしてすみません...泣

作ったもの

最近はSwiftの勉強をしていて, ちょいちょいアプリを作っています.
そして今回は最近いいなぁと思っている「Tinder」のUIを使って, 岩手の風景画像を選ぶやつ作りました.
本AdventCalendarのトップバッター@otukutunさんが作ってくださった「いわてスイッチ」に感動して, 自分も岩手の魅力を伝えられるようなものを作ってみたいなーと思った次第でございます.
ただ, 時間がなかったので今回は風景画像が「好き」か「微妙」かに分別するだけのものになってしまいました泣
これをもとに, このあと何か面白い感じにできたらいいなぁと思っています.

使ったライブラリは「MDCSwipeToChooseView」というライブラリです.
CocoaPodsを使用すると楽に入ります.
※ここの作業は省略させていただきます泣

公式のgithubの方ではObjective-cで書かれていたので, そのままSwiftに変換しました.
とにかく実装できればいいやと思って書いてるので, 処理の最適化とかはしていません泣
その他, 色々適当なサイズ指定しているところは無視しちゃってください^^;

ViewController.swift
import UIKit

class ViewController: UIViewController, MDCSwipeToChooseDelegate {

    var frontView: MDCSwipeToChooseView = MDCSwipeToChooseView()
    var backView: MDCSwipeToChooseView = MDCSwipeToChooseView()

    var chooseViewArray: Array<MDCSwipeToChooseView> = []

    var chooseViewCount: Int = Int()

    var likeButton: UIButton = UIButton()
    var nopeButton: UIButton = UIButton()

    override func viewDidLoad() {
        super.viewDidLoad()
        chooseViewCount = 0

        // MDCSwipeToChooseViewのオプションを設定する(like or nope の時の文字とか文字色とか)
        var options: MDCSwipeToChooseViewOptions = MDCSwipeToChooseViewOptions()
        options.delegate = self
        options.likedText = "LIKE!"
        options.likedColor = UIColor(red: 0.18, green: 0.8, blue: 0.44, alpha: 0.8)
        options.nopeText = "Hummm...."
        options.nopeColor = UIColor(red: 0.9, green: 0.3, blue: 0.25, alpha: 1.0)

        // 背景の画像を設定してブラーをかける処理
        var image = UIImage(named: "background.jpg")
        var imageView = UIImageView(image: image)
        imageView.frame = CGRectMake(0, 0, self.view.bounds.width, self.view.bounds.height)
        var visualEffectView = UIVisualEffectView(effect: UIBlurEffect(style: .Light)) as UIVisualEffectView
        visualEffectView.frame = imageView.bounds
        imageView.addSubview(visualEffectView)

        let screenHeight = UIScreen.mainScreen().applicationFrame.size.height
        let screenWidth = UIScreen.mainScreen().applicationFrame.size.width
        let navigationBarHeight = self.navigationController?.navigationBar.frame.size.height
        let statusBarHeight = UIApplication.sharedApplication().statusBarFrame.size.height

        let logoViewWidth = screenWidth
        let logoViewHeight = screenHeight / 10
        let logoViewX = 0 as CGFloat
        let logoViewY = screenHeight / 6

        let lastImageWidth = screenWidth / 2
        let lastImageHeight = screenHeight / 6
        let lastImageX = (screenWidth - lastImageWidth) / 2
        let lastImageY = (screenHeight - lastImageHeight) / 2

        let chooseViewWidth = screenWidth
        let chooseViewHeight = screenHeight / 2
        let chooseViewX = 0 as CGFloat
        let chooseViewY = logoViewY + logoViewHeight + 20

        let buttonWidth = screenWidth / 4
        let buttonHeight = screenHeight / 11
        let likeButtonX = ((screenWidth / 2) - buttonWidth) / 2
        let nopeButtonX = (screenWidth / 2) + likeButtonX
        let buttonY = chooseViewY + chooseViewHeight + 20

        // ロゴ(?)の画像
        var logo = UIImage(named: "logo.png")
        var logoView = UIImageView(image: logo)
        logoView.frame = CGRectMake(logoViewX, logoViewY, logoViewWidth, logoViewHeight)

        // 全選択後の画像
        var lastImage = UIImage(named: "ganbarouiwate.gif")
        var lastImageView = UIImageView(image: lastImage)
        lastImageView.frame = CGRectMake(lastImageX, lastImageY, lastImageWidth, lastImageHeight)

        var chooseView1: MDCSwipeToChooseView = MDCSwipeToChooseView(frame: CGRect(x: chooseViewX, y: chooseViewY, width: chooseViewWidth, height: chooseViewHeight), options: options)
        chooseView1.imageView.image = UIImage(named: "picture1.jpeg")

        var chooseView2: MDCSwipeToChooseView = MDCSwipeToChooseView(frame: CGRect(x: chooseViewX, y: chooseViewY, width: chooseViewWidth, height: chooseViewHeight), options: options)
        chooseView2.imageView.image = UIImage(named: "picture2.png")

        var chooseView3: MDCSwipeToChooseView = MDCSwipeToChooseView(frame: CGRect(x: chooseViewX, y: chooseViewY, width: chooseViewWidth, height: chooseViewHeight), options: options)
        chooseView3.imageView.image = UIImage(named: "picture3.jpeg")

        chooseViewArray = [chooseView1, chooseView2, chooseView3]

        self.view.addSubview(imageView)
        self.view.addSubview(logoView)
        self.view.addSubview(lastImageView)
        setChooseView(chooseViewArray)
        setLikeButton(likeButtonX, buttonY: buttonY, buttonWidth: buttonWidth, buttonHeight: buttonHeight)
        setNopeButton(nopeButtonX, buttonY: buttonY, buttonWidth: buttonWidth, buttonHeight: buttonHeight)
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func viewDidCancelSwipe(view: AnyObject!) {
        println("決めれないって?")
    }

    func view(view: AnyObject!, wasChosenWithDirection direction: MDCSwipeDirection) {
        if (direction == MDCSwipeDirection.Left) {
            println("写真を消しました!")
        }
        else {
            println("写真を残しました!")
        }
        // 写真がスワイプ(選択)された回数を増やす
        chooseViewCount++

        // 写真がスワイプされた回数が選択画像の枚数以上だった場合, likeButtonとnopeButtonは無効化にする
        if chooseViewCount >= chooseViewArray.count {
            likeButton.enabled = false
            nopeButton.enabled = false
            likeButton.backgroundColor = UIColor.grayColor()
            likeButton.layer.borderColor = UIColor.grayColor().CGColor
            nopeButton.backgroundColor = UIColor.grayColor()
            nopeButton.layer.borderColor = UIColor.grayColor().CGColor
        }
    }

    // 画像を用意した枚数分セットする
    func setChooseView(chooseViewArray: Array<MDCSwipeToChooseView>) {
        for var i = 0; i < chooseViewArray.count; i++ {
            if i == 0 {
                self.view.addSubview(chooseViewArray[i])
            }
            else {
                self.view.insertSubview(chooseViewArray[i], aboveSubview: chooseViewArray[i])
            }
        }
    }

    // 「Like」ボタンの設置
    func setLikeButton(buttonX: CGFloat, buttonY: CGFloat, buttonWidth: CGFloat, buttonHeight: CGFloat) {
        likeButton = UIButton(frame: CGRect(x: buttonX, y: buttonY, width: buttonWidth, height: buttonHeight))
        likeButton.titleLabel?.textAlignment = NSTextAlignment.Center
        likeButton.setTitle("LIKE", forState: UIControlState.Normal)
        likeButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
        likeButton.backgroundColor = UIColor(red: 0.18, green: 0.8, blue: 0.44, alpha: 0.8)
        likeButton.layer.borderColor = UIColor(red: 0.18, green: 0.8, blue: 0.44, alpha: 0.8).CGColor
        likeButton.layer.borderWidth = 2.0
        likeButton.layer.cornerRadius = 5.0
        likeButton.addTarget(self, action: "chooseLike", forControlEvents: UIControlEvents.TouchUpInside)

        self.view.addSubview(likeButton)
    }

    // 「戻る」ボタンの設置
    func setNopeButton(buttonX: CGFloat, buttonY: CGFloat, buttonWidth: CGFloat, buttonHeight: CGFloat) {
        nopeButton = UIButton(frame: CGRect(x: buttonX, y: buttonY, width: buttonWidth, height: buttonHeight))
        nopeButton.titleLabel?.textAlignment = NSTextAlignment.Center
        nopeButton.setTitle("Humm...", forState: UIControlState.Normal)
        nopeButton.setTitleColor(UIColor.whiteColor(), forState: UIControlState.Normal)
        nopeButton.backgroundColor = UIColor(red: 0.9, green: 0.3, blue: 0.25, alpha: 1.0)
        nopeButton.layer.borderColor = UIColor(red: 0.9, green: 0.3, blue: 0.25, alpha: 1.0).CGColor
        nopeButton.layer.borderWidth = 2.0
        nopeButton.layer.cornerRadius = 5.0
        nopeButton.addTarget(self, action: "chooseNope", forControlEvents: UIControlEvents.TouchUpInside)

        self.view.addSubview(nopeButton)
    }

    // likeButtonが押された場合, 一番上にある画像を右へスワイプする(LIKEにする)
    func chooseLike() {
        self.chooseViewArray[chooseViewArray.count - chooseViewCount - 1].mdc_swipe(MDCSwipeDirection.Right)
    }

    // nopeButtonが押された場合, 一番上にある画像を左へスワイプする(Hummm...にする)
    func chooseNope() {
        self.chooseViewArray[chooseViewArray.count - chooseViewCount - 1].mdc_swipe(MDCSwipeDirection.Left)
    }

}

デモ

見にくいですが, 右にスワイプすると「LIKE」, 左にスワイプすると「Hummm...」となります.
Demo

終わりに

本当はもう少し丁寧に書きたかったのですが, 時間と知識が足らずすみません...
とにもかくにも, 岩手には本当に素晴らしい観光スポットがあるので, 広めていけたらいいなぁと思います.

ということで今回は以上です(๑╹ڡ╹๑)
ありがとうございました!

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
15