はじめに 皆さんは世界的ソーシャル系マッチングアプリTinderをご存知でしょうか？ 今では、若者を中心に多くのユーザ数を誇るマッチングアプリとなっています。 このアプリが人気を獲得した理由の一つにスワイプでLike,Nopeを選択できる機能があることが挙げられます。 これは直感的に好き嫌いの判別がしやすいことと、このカードをめくったら次はどんな美男美女に出会える(出てくる)のだろうというワクワクがユーザーにヒットしたのだと考えます。(自論) そんなスワイプ機能は世間ではTinderスワイプと言われてるとか言われてないとか・・・ というわけで今回は大人気Tinderスワイプを簡単に実装できるライブラリがありましたので、そちらの紹介をしながらTinderへの愛を深めていただきたいと思います。 また、今回参考にさせていただいた記事も最後に載せていますのでそちらもご覧ください。 完成イメージ図 Like,Nopeをスワイプして選択できるようにします。 また、下のボタンからもタップで選択できるようにします。 神ライブラリ「Koloda」について 今回Tinderスワイプを実装するにあたって用いるライブラリがKolodaになります。 最終ログが3年前になっていますが現在の環境(Swift5)でも問題なく使えます。 また、REARMEにも詳しい説明が書かれています。 実装 ①Kolodaのインストール 以下のコードをPodfile内に記入してターミナル上でpod installでインストールをしてください。 pod "Koloda" ②スワイプカードに表示させる画像をXcodeにいれる 適当に複数枚の画像をXcodeに入れておきましょう。 ③Storyboardの作成 Storyboardでパーツを配置していきます。 行うことは以下の3点です。 ③-1.カードを表示させる土台のUIViewを置く ③-2.置いたUIViewのクラスをKolodaViewに変更 ③-3.Like,Nopeボタンの設置 実際の図を下に載せておきます。 ④コードを書く ④-1.KolodaをControllerにインポート 適用させたいViewControllerにKolodaをインポートさせます。 import Koloda ④-2.パーツの宣言と画像を配列に格納 UIViewの宣言をします。 その際に、クラスを変更したのでkolodaView型になることを忘れずに。 また、先程入れた画像を配列の中に格納しておきましょう。 @IBOutlet weak var kolodaView: KolodaView! var imageArray = ["〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg"] ④-3.DataSourceとDelegateを適用 TableViewみたいにKolodaViewではDataSourceとDelegateを適用させてあげる必要があります。 class ViewController: UIViewController ,KolodaViewDataSource, KolodaViewDelegate {... ④-4.各々のメソッドを用いて詳細設定 DataSourceとDelegateから適当なプロトコルを使ってどのようにスワイプさせるかなどの詳細を設定していきます。 また、カード数を設定するプロトコルと内容を設定するプロトコルは記述しないとエラーになるため必ず記述する必要があります。(TableViewと同じですね) 以下では主要なプロトコルをいくつかご紹介します。 ~DataSource~ 1. kolodaNumberOfCards 表示するカードの枚数を決めます。 func koloda(_ kolodaNumberOfCards koloda: KolodaView) -> Int 2. viewForCardAt 表示するカードの内容を決めます。 func koloda(_ koloda:KolodaView viewForCardAt index:Int)-> UIView 3. DragSpeed スワイプ時のドラッグのスピードを設定できます。 速度は、slow,moderate,fastがあります。 func kolodaSpeedThatCardShouldDrag(_ koloda:KolodaView)-> DragSpeed ~Delegate~ 1. allowedDirections スワイプ時の許可するドラッグ方向を指定できます 。 デフォルトはleft,rightになりますが、斜めなどの方向も設定できます。 func koloda(_ koloda:KolodaView allowedDirectionsForIndex index:Int)-> [SwipeResultDirection] 2. DidRunOutOfCards KolodaViewに表示するカードがなくなった場合に呼び出されます。 func kolodaDidRunOutOfCards(_ koloda:KolodaView) 3. didSelectCardAt KolodaViewのカードをタップしたときに呼び出されます。 func koloda(_ koloda:KolodaView didSelectCardAt index:Int) 4. didSwipeCardAt KolodaViewのカードをスワイプしたときに呼び出されます。 方向関係なく呼び出されます。 func koloda(_ koloda:KolodaView didSwipeCardAt index:Int in direction:SwipeResultDirection) 5. shouldDragCardAt KolodaViewのカードをスワイプしてる最中に呼び出されます。 func koloda(_ koloda: KolodaView, shouldDragCardAt index: Int) -> Bool 他にもプロトコルは存在しますが、詳しくはKolodaをご覧ください。 完成コード 完成イメージのコードは以下のようになります。 import UIKit import Koloda class ViewController: UIViewController ,KolodaViewDataSource, KolodaViewDelegate { @IBOutlet weak var kolodaView: KolodaView! var imageArray = ["〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg"] override func viewDidLoad() { super.viewDidLoad() kolodaView.dataSource = self kolodaView.delegate = self } func kolodaNumberOfCards(_ koloda: KolodaView) -> Int { imageArray.count } func kolodaSpeedThatCardShouldDrag(_ koloda: KolodaView) -> DragSpeed { return .moderate } func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView { let imageView = UIImageView(frame: koloda.bounds) imageView.contentMode = .scaleAspectFit imageView.image = UIImage(named: imageArray[index]) koloda.addSubview(imageView) return imageView } @IBAction func Nope() { kolodaView.swipe(.left) } @IBAction func Like() { kolodaView.swipe(.right) } } おわりに 今回は、Tinderスワイプについて書きました。 本記事を書くにあたって以下の記事を参考にさせていただきました。ありがとうございます。 tinderUIをライブラリKolodaを使って実装してみよう！ この記事を読んでぜひ皆さんTinderライフ楽しんでくださいね！ では良いお年を。
小学生でも分かるswift構文 初めまして！2021年12月より完全未経験からのプログラミング(swift)をスタートさせました！ 初めてみたものの、まず基礎となる構文の意味が全く解らない笑 英検4級の私には「false」や「string」も良く意味がわからず、本当にプログラミングが出来るのか... 正直、おしっこをちびりそうでした。 そこで、自分の為にも、または自分と同じくらいの学力しかない人にでも、分かるように記事を書いてみようと思った次第です。 それでは、早速やっていきましょう！ 構文の意味 let(レット）・・・初期のプログラミング言語で採用されていた数学用語。 それがそのまま現在まで引き継がれているようです。 constant(コンスタント)・・・定数、不変のもの。 variable(バリアブル)・・・変数、可変のもの。 型の名前 int（イント）・・・integer（インテジャ）の略。整数。 string(ストリング）・・・文字列の意。 double（ダブル）・・・変数のデータ型の一種。浮動小数点型といわれる。 bool（ブール）・・・boolean(ブーリアン）の略。変数のデータ型の一種。真理値のtrue「トゥルー(真)」とfalse「フォルス(偽)」の２つの値をとるデータ型。 今回は以上となります。 次回は実際にXcodeで入力していきたいと思います！
撮影済みの動画にバーチャル背景をつける方法 既に存在している動画にバーチャル背景をつけられれば、 面白い編集ができる。 バーチャル背景はリアルタイムでしかつけられないのか？ バーチャル背景は撮影時に設定するものが多い。 既存の動画を処理したい。 しかし、動画の処理を書くのは大変そう。 SemanticImageで秒で解決 SemanticImageというライブラリなら、 かんたんに既存の動画にバーチャル背景を適用できる。 使用方法 １、SemanticImageをインポートする SwiftPackageManagerでSemanticImageを追加する。 import SemanticImage ２、背景合成を実行 sematicImage.swapBackgroundOfPersonVideo(videoURL: url, backgroundUIImage: uiImage, { err, processedURL in // 処理済み動画URLをここで使う }) ? フリーランスエンジニアです。 お仕事のご相談こちらまで 簡単な開発内容をお書き添えの上、お気軽にご連絡ください。 rockyshikoku@gmail.com Core MLやARKitを使ったアプリを作っています。 機械学習／AR関連の情報を発信しています。 Twitter Medium
初めてのQiita投稿です。 間違いあればコメントいただけると幸いです。 よろしくお願い致します。 Xcode 13.1 プロジェクト作成 Include Testsにチェックを入れてプロジェクトを作成します。 UnitTest, UI UnitTestのファイルがデフォルトで生成されます。 ViewControllerにテスト対象のメソッドを追加 下記メソッドをViewControllerへ追加します。 func add(num1: Int, num2: Int) -> Int { return num1 + num2 } Tests.swift内にテストを追加 下記テストを追加 // testを行う場合は関数名の頭にtestと記述 func testAdd() throws { // ViewControllerをインスタンス化 addメソッドに引数1と3を与えてresultにInt型の結果を代入する let result = ViewController().add(num1: 1, num2: 3) // XCTAssertEqualは引数2つが等しいかテストを行う 等しい場合テストが成功する XCTAssertEqual(result, 4) } テストを行う 赤枠のボタンを押下します。するとテストが走り、失敗なら警告、成功なら緑のマークが表示されます。 これでテストは完了です。私自身、食わず嫌いでテストを避けていましたがシンプルに実装することで簡単に出来ました。 これから あえてテストを失敗させるためにメソッドの内部を変更したり、XCTAssertEqualの第2引数を変更してみたり、さまざまな箇所を変更して結果を確認してみましょう。XCTAssertEqual()以外にもいくつものテストがあるので調べながら試してみましょう。 既にあるプロジェクトへのテストの追加やUIテストなどありますが、とことんシンプルに説明できたのではないかと思います。 以上、最後までご覧いただきありがとうございました。
