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です。
参考にした記事
ブックマークや限定記事（予定）など
WP Kyotoサポーター募集中
WordPressやフロントエンドアプリのホスティング、Algolia・AWSなどのサービス利用料を支援する「WP Kyotoサポーター」を募集しています。
月額または年額の有料プランを契約すると、ブックマーク機能などのサポーター限定機能がご利用いただけます。
14日間のトライアルも用意しておりますので、「このサイトよく見るな」という方はぜひご検討ください。