Swift UIでWP APIを呼び出してみた

あまり触ったことのない言語・領域を試してみようと思い、Swift UIをはじめました。せっかくなので、このサイトのAPIを呼び出して、記事一覧を出すところまでやってみます。 Xcodeでセットアップ Swiftを使うの […]

あまり触ったことのない言語・領域を試してみようと思い、Swift UIをはじめました。

せっかくなので、このサイトのAPIを呼び出して、記事一覧を出すところまでやってみます。

Xcodeでセットアップ

Swiftを使うので、Xcodeでプロジェクトを立ち上げます。

Create a new Xcode projectを選びましょう。

アプリを作るので、Application > Appを選びます。

プロジェクト名などの設定がありますが、ローカルで動かしてみることが目的なので、そういう用途であることをわかるようにします。

プロジェクトのディレクトリを指定する画面が出ますので、パスを指定してやればOKです。

IDEが立ち上がれば完了です。

WP APIをよびだす

型を簡易的に定義

まずWP APIのレスポンス型を定義します。JSONデータなので、Codableを添えましょう。

またidを持つレスポンスですので、Identifiableもつけました。


struct Rendered:Codable {
    var rendered: String?
}
struct WPPost: Codable, Identifiable {
    var id: Int
    var title: Rendered
    var excerpt: Rendered
}

レスポンスを格納するためのStateを設定

続いてAPIのレスポンスを格納するためのStateを足します。[WPPost]()で空の配列を初期値として設定しました。

struct ContentView: View {
    @State private var results = [WPPost]()
    var body: some View {
...

WP APIを呼び出す

続いてURLRequestやURLSessionを使ってWP APIを呼び出します。

レスポンスのデコード時、第一引数にレスポンスの型（struct）を設定します。

    func loadData() {
        guard let url = URL(string: "https://wordpress.example.com/wp-json/wp/v2/posts") else {
            return
        }
        let request = URLRequest(url: url)
        URLSession.shared.dataTask(with: request) { data, _, error in
            if let data = data {
                guard let decodedResponse = try? JSONDecoder().decode([WPPost].self, from: data) else {
                    print("JSON decode error")
                    return
                }
                DispatchQueue.main.async {
                    results = decodedResponse
                }
            } else {
                print("Fetched failed \(error?.localizedDescription ?? "UnknownError")")
            }
        }.resume()
    }

UIに一覧表示する

あとは一覧表示させます。

    var body: some View {
        NavigationView {
            VStack {
                    List(results, id: \.id) { item in
                        VStack (alignment: .leading) {
                            Text(item.title.rendered ?? "")
                                .font(.headline)

                            Text("item")
                        }
                    }.navigationTitle("The list of posts")
            }
        }.onAppear(perform:  loadData)
    }

NavigationViewにonAppearすることで、WP APIを呼び出す関数を実行しています。

`command + R`でシミュレータ起動

あとはXCodeでシミュレータを起動します。

指定したWPサイトの記事が出ていればOKです。