SwiftUIでいこう！ - Search App! - 1

Jsonでデータを取得して、リストに表示します。検索ができるようのもします。以下参考サイト。

2つにViewを作っていきます。まず一つ目はSwitUIのみで組み上げます。

struct EmptyStateView:View{
   var body: some View{
       VStack{
           Spacer()
           Image(systemName: "music.note")
               .font(.system(size:85))
               .padding(.bottom)
           Text("Start searching for music ... ")
               .font(.title)
           Spacer()
       }
       .padding()
       .foregroundColor(Color(.systemIndigo))
   }
}

もう一つはUIKitを使うので、SwiftUIで使えるようにプロトコルUIViewRepresentableに適応させます。

struct SearchBar:UIViewRepresentable {
   typealias UIViewType = UISearchBar
   
   func makeUIView(context: Context) -> UISearchBar {
       let searchBar = UISearchBar(frame:.zero)
       searchBar.delegate = context.coordinator
       searchBar.searchBarStyle = .minimal
       searchBar.placeholder = "Type a song"
       return searchBar
   }
   
   func updateUIView(_ uiView: UISearchBar, context: Context) {
   }
   
   func makeCoordinator() -> SearchBarCordinator {
       SearchBarCordinator()
   }
   
   class SearchBarCordinator:NSObject,UISearchBarDelegate{
   }
}

この2つをContentViewに入れ込みます。

 NavigationView{
           VStack{
               SearchBar()
               EmptyStateView()
           }
           .navigationBarTitle("Music Search")

表示画面ができてきたので、データ部分を作っていきます。

中身です。Jsonを読み込んでデータを表示させために配列に変更していきます。

まずDecodableに対応させ、取得するJsonに合わせていきます。

struct SongResPonse:Decodable{
   let songs : [Song]
   
   enum CodingKeys:String,CodingKey{
       case songs = "results"
   }
}

struct Song:Decodable {
   let id:Int
   let trackName:String
   let artistName:String
   let artworkUrl:String
   
   enum CodingKeys: String,CodingKey{
       case id = "trackId"
       case trackName
       case artistName
       case artworkUrl = "artworkUrl60"
   }
}

そして解析して使うことのできる配列にしていきます。

class DataModel{}

を作っていきます。

https://itunes.apple.com/search?term=coldplay&entity=song

のサイトからJsonファイルを取得して解析してデータとして使えるようにしていきます。まず準備ですが、Codableに準拠させていきます。サイトにあるJsonファイルにある項目に対して変数を作っていきます。

struct SongResPonse:Decodable{
   let songs : [Song]
   
   enum CodingKeys:String,CodingKey{
       case songs = "results"
   }
}

struct Song:Decodable {
   let id:Int
   let trackName:String
   let artistName:String
   let artworkUrl:String
   
   enum CodingKeys: String,CodingKey{
       case id = "trackId"
       case trackName
       case artistName
       case artworkUrl = "artworkUrl60"
   }
}

そしてクラスを作っていきます。

必要なURLからそのデータを取り出す関数を作ります。

  private func buildUrl(forTerm searchTerm:String) -> URL?{
       guard  !searchTerm.isEmpty else {
           return nil
       }
       
       let quaryItem = [
       URLQueryItem(name: "term", value: searchTerm),
       URLQueryItem(name: "entity", value: "song")
       ]
       var components = URLComponents(string: "https://itunes.apple.com/search")
       components?.queryItems = quaryItem
       return components?.url
   }

そしてJsonをパースするコードを書いていきます。

 private var dataTask:URLSessionDataTask?
   
   func loadSongs(searchTerm:String,completion:@escaping(([Song])->Void)){
       dataTask?.cancel()
       guard let url = buildUrl(forTerm: searchTerm)  else {
           completion([])
           return
       }
       dataTask = URLSession.shared.dataTask(with: url){ data , _,  _ in
           guard let data  = data else{
               completion([])
               return
           }
           if let songResponse = try? JSONDecoder().decode(SongResPonse.self,from:data){
               completion(songResponse.songs)
           }
       }
       dataTask?.resume()
   }

URLSessionから、try? JSONDecoder()でJsonファイルをリスト表示で使う配列へと変換します。

URLsessionを用いたHTTPリクエストの方法(Swift, Xcode) - Qiita

URLSessionを使う時に注意すること、使い方がまとめてあるので参考に。

次ではデータをリストにして表示できるようにしていきます。