【Xcode】ひらがな化APIを使ったアプリを作りました【Swift】

# はじめに
はい、[はるうさぎ](https://twitter.com/_harusa_p)です。今回はSwiftとXcodeを使ってgooのひらがな化APIを使用してアプリを作りました。簡単な備忘録というか、自己満な記事です。
学生の頃にSwift3を触って以来久しぶりに書きました。Xcodeも変わっているところが何点もあって慣れるのに苦労しました。

何もわからない初心者がアプリを開発をするという全くタメにならない記事になってますので、興味本位でみていただけると幸いです。


## 参考サイト
調べてみると数名の方が記事などを書いていました。

http://harumi.sakura.ne.jp/wordpress/2019/06/29/%E3%81%B2%E3%82%89%E3%81%8C%E3%81%AA%E5%8C%96api%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/

https://qiita.com/sventouz/items/318d8370ab489724c454

以上のサイトを参考とさせていただきました。


## gooのひらがな化APIについて
[こちら](https://labs.goo.ne.jp/api/jp/hiragana-translation/)にAPIについて概要が書かれています。

その名の通り、漢字の含んだ文をひらがなにするという簡単なものです。


## まず見た目だ👀
### アプリ起動時の画面(LaunchScreen.storyboard)
<img width="377" alt="スクリーンショット 2020-02-27 18.44.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/63b89000-1bd7-d955-e419-c36fb9310de5.png">
自分のロゴが最初に出るようにしました（自己主張が激しい）

### 肝心のアプリ画面(Main.storyboard)
<img width="374" alt="スクリーンショット 2020-02-27 18.45.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/36e0e81f-046e-e77f-5a15-15f001c5bfc8.png">
[いらすとや](https://www.irasutoya.com/)三昧ですねw
操作は後から書きますので抜粋します。


## ざっとコードを書きます
```ViewController.swift
import UIKit

class ViewController: UIViewController ,UITextFieldDelegate{

    @IBOutlet weak var convertText: UITextField!
    @IBOutlet weak var convertedText: UILabel!
    @IBOutlet weak var errorText: UILabel!
    
    let api = API()
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
        @IBAction func convertButton(_ sender: Any) {
        guard let convertTextForApi = convertText.text else {
        return
        }
       //api通信
        self.api.convertHiragana(convertTextForApi: convertTextForApi) { (convertedStr) in
        guard let _convertedStr = convertedStr else {
              //コンバート失敗
              //アラートを出す
              return
          }
          DispatchQueue.main.async {
              self.convertedText.text = _convertedStr
          }
      }

    }
}
```

```Api.swift
import Foundation

class API {
    let host = "https://labs.goo.ne.jp/api"
    let appID = "自分で取得したAPIのアレ"
    let requestID = "record003"
    let postMethod = "POST"

    func convertHiragana(convertTextForApi: String, completion:((String?) -> Void)?) {
       let url = "https://labs.goo.ne.jp/api/hiragana"
        let outputType = "hiragana"
        let postData = PostData(app_id: self.appID, request_id: requestID, sentence: convertTextForApi, output_type: outputType)

        self.request(method: "POST", url: url, postData: postData, completion: completion)
    }

    func request(method: String, url: String, postData:PostData,  completion:((String?) -> Void)?) {
        guard let _url = URL(string: url) else { return }
        // URLRequstの設定
        var request = URLRequest(url: _url)
        request.httpMethod = method
        request.addValue("application/json", forHTTPHeaderField: "Content-Type")

        //POSTするデータをURLRequestに持たせる
        guard let uploadData = try? JSONEncoder().encode(postData) else {
            debugPrint("json生成に失敗しました")
            return
        }
        request.httpBody = uploadData

        //APIへPOSTしてresponseを受け取る
        let task = URLSession.shared.uploadTask(with: request, from: uploadData) {
            data, response, error in
            if let error = error {
                debugPrint ("error: \(error)")
                completion?(nil)
                return
            }
            guard let response = response as? HTTPURLResponse,
                (200...299).contains(response.statusCode) else {
                    debugPrint ("server error")
                    completion?(nil)
                    return
            }
            guard response.statusCode == 200 else {
                debugPrint("サーバエラー ステータスコード: \(response.statusCode)\n")
                completion?(nil)
                return
            }

            guard let data = data, let jsonData = try? JSONDecoder().decode(Rubi.self, from: data) else {
                debugPrint("json変換に失敗しました")
                completion?(nil)
                return
            }
            debugPrint(jsonData.converted)
            completion?(jsonData.converted)

        }
        task.resume()
    }
}
struct Rubi:Codable {
    var request_id: String
    var output_type: String
    var converted: String
}
struct PostData: Codable {
    var app_id:String
    var request_id: String
    var sentence: String
    var output_type: String
}
```


## 操作

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/542365/eb619e4e-c870-5fdc-4a2f-1f711807e604.gif)


1.オレンジ色の吹き出しはtextfieldなので、ここに漢字を含んだ文を入力します。
2.女の子がボタンになっています。タップします。
3.青色の吹き出しにひらがな化された文が表示されます。


以上、簡単だね！イエイ！


## 反省点
 - textfieldとbuttonがわかりにくい
 - textfieldをタップしても文字が消えない（自分で消さないとだめ）
 - そもそものデザインが悪い
 - MVC,MMVCになっていない
 - オブジェクト指向わからん
 - Xcodeの操作わからん
 - Swiftわからん
 - autolayout何それ美味しいの？


## 改善したい点
 - 反省点を改善したい
 - オブジェクト指向とXcodeとSwift完全に理解した。になりたい
 - autolayoutの理解を深める




# まとめ
書いてないですが、SwiftUIで苦戦しました。
わからんことだらけで、とりあえずアプリなんて作るもんじゃないです（）
でもわからないなりにフォロワーさんに教えていただいたり、調べたりで、楽しい時間でした。
少しは自走力もついたのでは？？？？と思っています。
今度はもっとUIがしっかりした何かを作りたいと思います。

「MVC,MMVCこう書くといいよ！！！！」とか「こうした方がいいよ」という点がありましたら、優しく教えていただけると幸いです。


最後まで読んでいただきありがとうございました。