2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

URLComponentsを使って、URLを変更する方法

Last updated at Posted at 2023-06-04

はじめに

こんにちは!
iOSエンジニアになることを目指して、Swiftの勉強しておりますそこら辺の大学2年生です!

今回は、タイトルにある通りにURLComponentsを使って、URLを変更したいと思います。
ちなみに、なかなかURLを変更したいと思う場面は少ないと思いますので、どういった状況でそのような場面に遭遇したのかというところから軽く説明できればと思います。

具体的な場面

個人開発をしているときに、下記の写真のようなimageのURLを取得し、画像のImageを表示しておりました。

https://thumbnail.image.rakuten.co.jp/ran/img/2001/0009/784/873/119/328/20010009784873119328_1.jpg?_ex=64x64

しかし、解像度が低い(_ex=64x64)ことにより、質の悪い画像が表示されてしまうという現象が起きてしまいました。
この解決方法として、解析度を表している部分だけを変更できればいいなと思い、実装してみました

実装

下記のようなメソッドを用意します

private func imageUrl(_ string: String) -> URL? {
    guard let imageUrl = URL(string: string) else {
        return nil
    }
    var components = URLComponents(url: imageUrl, resolvingAgainstBaseURL: true)

    let queryItems = components?.queryItems?
        .map {
            var copy = $0
            if copy.name == "_ex" {
                copy.value = "512x512"
            }
            return copy
        }
    components?.queryItems = queryItems
    return components?.url
}

簡単に説明

URLComponents(url, resolvingAgainstBaseURL)を使ってまずは初期化します。
その後、クエリの部分を実際に変更していきます。
個人的にポイントとなるのは、簡略引数名である$0から直接値を変更することはできないのでcopyという変数を作り、そこから変更してあげるところです、
これでこのメソッドを呼び出してあげればURLを変更することができます。
下記に使用例を乗っけておきます

使用例

AsyncImage(url: imageUrl(product.smallImage)) { image in
    image
        .resizable()
        .scaledToFit()
        .frame(maxWidth: .infinity, maxHeight: 120)
} placeholder: {
    ProgressView()
        .frame(height: 120)
}

実際に質の高い画像を表示することができました!!

さいごに

ここまで、ご覧いただきありがとうございました🙇‍♂️
間違いやご指摘等ございましたら、ご教授していただけると幸いです。
これからもアウトプットして行きたいと思います。

参考

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?