LoginSignup
46
20

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-02-27

はじめに

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

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

参考サイト

調べてみると数名の方が記事などを書いていました。

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

gooのひらがな化APIについて

こちらにAPIについて概要が書かれています。

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

まず見た目だ👀

アプリ起動時の画面(LaunchScreen.storyboard)

スクリーンショット 2020-02-27 18.44.20.png
自分のロゴが最初に出るようにしました(自己主張が激しい)

肝心のアプリ画面(Main.storyboard)

スクリーンショット 2020-02-27 18.45.31.png
いらすとや三昧ですね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

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

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

反省点

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

改善したい点

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

まとめ

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

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

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

46
20
3

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
46
20