はじめに
はい、はるうさぎです。今回はSwiftとXcodeを使ってgooのひらがな化APIを使用してアプリを作りました。簡単な備忘録というか、自己満な記事です。
学生の頃にSwift3を触って以来久しぶりに書きました。Xcodeも変わっているところが何点もあって慣れるのに苦労しました。
何もわからない初心者がアプリを開発をするという全くタメにならない記事になってますので、興味本位でみていただけると幸いです。
参考サイト
調べてみると数名の方が記事などを書いていました。
以上のサイトを参考とさせていただきました。
gooのひらがな化APIについて
こちらにAPIについて概要が書かれています。
その名の通り、漢字の含んだ文をひらがなにするという簡単なものです。
まず見た目だ👀
アプリ起動時の画面(LaunchScreen.storyboard)
自分のロゴが最初に出るようにしました（自己主張が激しい）
肝心のアプリ画面(Main.storyboard)
[いらすとや](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
}
操作
1.オレンジ色の吹き出しはtextfieldなので、ここに漢字を含んだ文を入力します。
2.女の子がボタンになっています。タップします。
3.青色の吹き出しにひらがな化された文が表示されます。
以上、簡単だね！イエイ！
反省点
- textfieldとbuttonがわかりにくい
- textfieldをタップしても文字が消えない（自分で消さないとだめ）
- そもそものデザインが悪い
- MVC,MMVCになっていない
- オブジェクト指向わからん
- Xcodeの操作わからん
- Swiftわからん
- autolayout何それ美味しいの？
改善したい点
- 反省点を改善したい
- オブジェクト指向とXcodeとSwift完全に理解した。になりたい
- autolayoutの理解を深める
まとめ
書いてないですが、SwiftUIで苦戦しました。
わからんことだらけで、とりあえずアプリなんて作るもんじゃないです（）
でもわからないなりにフォロワーさんに教えていただいたり、調べたりで、楽しい時間でした。
少しは自走力もついたのでは？？？？と思っています。
今度はもっとUIがしっかりした何かを作りたいと思います。
「MVC,MMVCこう書くといいよ！！！！」とか「こうした方がいいよ」という点がありましたら、優しく教えていただけると幸いです。
最後まで読んでいただきありがとうございました。