【Swift初心者】メトロポリタン美術館APIを使ってTinder風アプリを作ってみた！

アプリ概要

メトロポリタン美術館の作品を検索でき、好きな作品を保存・シェアすることができるアプリです。

主な機能は以下になります。
・メトロポリタン美術館の作品を検索できる。
・好きな作品はTinder風でカードとして表示される。
・右スワイプでお気に入りリストに保存可能。
・他のユーザーがお気に入りにした作品の閲覧もできる。
・その中から気に入った作品を自分のお気に入りリストへ追加できる。
・お気に入りの作品をツイッター等でシェアできる

このアプリを作成した背景

このアプリを作成した背景は2つあります。

1.アートに関心を持つ人を増やしたかったから。
2.アート作品がみれるアプリが少なかったから。

1.アートに関心を持つ人を増やしたかったから。

自分自身、ZOZOの前澤社長がバスキアの作品を買った時からアートに興味を持ち始めました。
そこからいろいろなアーティストの作品を見ていくと、それぞれの作品に個性が詰まっていて、とても面白かった。
ただ、現状アート自体に関心がある人はかなり少ないと思います。おそらくアートに重いイメージを持っている人も多いからだと思いますが、写真と同じようにもっと気軽に作っても、観賞しても良いものだと自分は思います。

もっと多くの人にアートに関心を持ってもらう機会があれば、と思いこのアプリを作成しました。
また、若い人でも楽しめるように、若い世代に定着しているTinder風のUIを使いました。

2.アート作品がみれるアプリが少なかった。

AppStoreで検索してみたところ、あまりアート作品に特化したアプリがあまりなかったので、作成しました。
Pinterestのアート作品特化バージョンをイメージして作りました。
自分が好きな作品を保存・シェアすることができます。

UIデザイン

・アーティストに詳しくない人でも検索できるように、おすすめのアーティスト一覧を表示。
→気になるアーティストをタップするだけで検索可能に。

・作品を吟味できるように、スワイプで一作品ずつ確認できるようにした。
→画像が羅列されるよりも、一作品ごとにかける時間が多くなり、じっくり見て頂ける。

・他のユーザーのリストから新しい作品に出会えるようにした。
→他のユーザーのお気に入りリストから新しい作品に出会える。

機能

匿名ログイン機能
ログアウト機能
作品検索機能
カードスワイプ機能
お気に入り追加機能
お気に入り削除機能
別ユーザーのお気に入り確認機能
別ユーザーの作品保存機能
画像シェア機能

作品検索機能

工夫したこと
・APIの仕様上、情報を取得するために検索ボタンを押してから2回パースした。
1回目でobjectIDsを取得して、2回目でそれぞれの作品のデータを取得。

・検索数が0の場合、アラートが出るようにした。
検索ヒット数が多いと動作が重くなってしまうので、30件以上ヒットしたら30件のみ表示。

・アーティスト名が書いたボタンを押すだけで、自動で検索できるようにした。
アーティスト名に詳しくない人のためにこのようなUIにした。

カードスワイプ機能

工夫したこと
VerticalCardSwiperを使って表示。
右にスワイプした作品はデータベースに保存。

別ユーザーのお気に入り確認/保存機能

工夫したこと
・オートID以下（userID,userName）を取得してきて、userNameをリストに表示。
・リストの名前をタップすると、そのuserIDを元に、その人がお気に入りした作品の詳細情報を表示。

画像シェア機能

工夫したこと
・より多くの方に作品を知っていただけるように、コメントをつけてTwitter等でシェアが可能。

追加実装予定

・作品詳細画面で複数枚の写真を表示
・検索ロード時間を短縮
・検索コードの見直し
・現代アートも検索できるよう改善
・匿名ログインの変更/Twitterログインの実装
・アートに関する知識が増えるようなコンテンツの実装

データベース

Firebase/Database
Firebase/Auth

API

The Metropolitan Museum of Art Collection API

使用ライブラリ

Firebase/Database
Firebase/Auth
VerticalCardSwiper
SDWebImage
PKHUD
Alamofire
SwiftyJSON
ChameleonFramework
EMAlertController