swiftで自作WebAPIを叩く方法

Question

前提・実現したいこと

画像認識を行うスマホアプリを見た目部分はswift,画像処理部分はflaskで行おうとしています。
swift上で呼び出しすることがうまく行かず手詰まり担ったので質問させていただきます。

発生している問題・エラーメッセージ

VSCode側で、405を返しているが、printして確認しようとするとnilが返されてしまっている。

該当のソースコード

from flask import Flask, jsonify, request
from flask_cors import CORS
import cv2
import numpy as np
import base64

app = Flask('flask-tesseract-api')
CORS(app)

@app.route("/image/", methods=["POST"])
def post():
    """
    画像をグレースケールに変換する
    """

    response = []

    for json in request.json:

        # Imageをデコード
        img_stream = base64.b64decode(json['Image'])

        # 配列に変換
        img_array = np.asarray(bytearray(img_stream), dtype=np.uint8)

        # open-cv でグレースケール
        img_gray = cv2.imdecode(img_array, 0)

        # 変換結果を保存
        cv2.imwrite('result.png', img_gray)

        # 保存したファイルに対してエンコード
        with open('result.png', "rb") as f:
            img_base64 = base64.b64encode(f.read()).decode('utf-8')

        # レスポンスのjsonに箱詰め
        response.append({'id':json['id'], 'result' : img_base64})

    return jsonify(response)

if __name__ == '__main__':
    app.run(host='0.0.0.0',port=5000,debug=True)

struct JsonSample : Codable{
        var id : String
        var Image : String
    }
let json = ["id" : "0","Image" : base64String!]//base64Stringに画像のbase64に変換したものが代入されています。

        
let listUrl = "http://127.0.0.1:5000/image/"
        
guard let url = URL(string: listUrl) else { return }

URLSession.shared.dataTask(with: url) { (json, response, error) in
if error != nil {
    print(error!.localizedDescription)
            }
    guard let json = json else { return }
    let data = try? JSONDecoder().decode(JsonSample.self, from: json)
    print(data as Any)
        }.resume()

試したこと

vscodeで試した結果うまく処理が帰ってきました。

SwiftでWebAPIにGETリクエストしてみた。参考
いろいろprintする変数を変えましたが、nilしか返ってきませんでした。

補足情報（FW/ツールのバージョンなど）

macbook: xcode :vscodeを使用
swiftに関しては、初学者なので少し説明を初歩的な部分からしていただくと助かります！

Comments

[hoshi-takanori]

URLSession.shared.dataTask(with: url) だと、GET かつ json データを送信してない (ために警告が出る) ので、URLRequest を使ってメソッド (POST) とボディ (json データ) を指定する必要があるかと。また、python コードを読む限り送受信するデータは配列のようですが、合ってますか？ 結果が複数返ってきた場合はどうしたいですか？

[moromoro]

各写真ごとにリクエストを送る予定なので配列である必要はないかもしれません。
WebAPIの叩き方の調べた結果をそのまま入れているので、正直IDとかも必要はないかもしれません。
URLSession.shared.dataTask(with: url)の後にあるjsonで送信できているのかと思ってました。
URLRequestはswiftでもできるのでしょうか？

Answer 1

とりあえず現状の python コードと通信してみましょう。

まず、送受信のデータ構造をそれぞれ RequestItem, ResponseItem (名前は適当) として定義します。
実際にはこれらの配列を JSON でやりとりすることになります。

struct RequestItem: Codable {
    var id: String
    var Image: String
}

struct ResponseItem: Codable {
    var id: String
    var result: String
}

あとはこんな感じでしょうか。JSON を送信する場合は Content-Type の指定が必要なはず。

        let listUrl = "http://127.0.0.1:5000/image/"

        let requestItems = [
            RequestItem(id: "0", Image: base64String!)
        ]
        guard let requestBody = try? JSONEncoder().encode(requestItems) else { return }

        var request = URLRequest(url: URL(string: listUrl)!)
        request.httpMethod = "POST"
        request.httpBody = requestBody
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")

        URLSession.shared.dataTask(with: request) { (data, response, error) in
            if let error = error {
                print(error.localizedDescription)
                return
            }
            guard let data = data else { return }
            let responseItems = try? JSONDecoder().decode([ResponseItem].self, from: data)
            print(responseItems as Any)
        }.resume()

ちなみに、結果の画像を resultImageView に表示したければこんな感じでいけると思います。
dataTask の結果はバックグラウンドスレッドで処理されるので、UI の更新はメインスレッドに切り替える必要があります。

        URLSession.shared.dataTask(with: request) { (data, response, error) in
            if let data = data,
               let responseItems = try? JSONDecoder().decode([ResponseItem].self, from: data),
               let resultData = Data(base64Encoded: responseItems[0].result),
               let resultImage = UIImage(data: resultData) {
                DispatchQueue.main.async {
                    resultImageView.image = resultImage
                }
            }
        }.resume()

Comments

[moromoro]

無事できました。神とよびたいです。またよろしくおねがいします。

[moromoro]

すみません、やはりIDもtextViewとして表示させたいです。
textの表示方法についてもご教授いただけないでしょうか？

[hoshi-takanori]

DispatchQueue.main.async の中に textView.text = responseItems[0].id とか書けば良いのでは。

[moromoro]

新たな質問があるので、よろしければ回答していただきたいです。