iOS
初心者
Swift
アプリ開発
ラブライブ!で学ぶ

〜はじめてのすうぃふと〜AqoursCP名日韓翻訳アプリを製作


はじめに

 お久しぶりです。副鼻腔炎に悩まされているLily.Mameokaです、どーもね。今回はSwift初心者であります私がSwiftを勉強するついでに作ったものを書いていきます。なんかね、Swiftってどんなんやろって思って齧ってみたら、「この言語ってね、すこしJSに似てるんだよ!(CV:飯田里穂)」なんですよ。とはいえまぁ私はそんなにJSを理解しているわけではないので信憑性はアレですが……。

 初めてSwiftを扱う人が、試しに何か作ろうかなん…?ってなったときにでも見ていただけたら幸いであります。


作ったもの

 その名も「AqoursCP名日韓翻訳アプリ」。うん。翻訳アプリと雖もグーグル先生のような汎用的なのではなく、ただ単にAqoursのメンバーのハングル訳を使ってカップリング名を翻訳するだけ。初心者の私でもできたくらい非常にシンプル。Swiftを勉強し始めて適当に一つ作ってみるか、な感じです。


環境

・MacBook Pro(Mojave 10.14.3)

・Xcode(Version 10.1)

・iPhone7(iOS 12.1.3)


つくりかた


まず...

 AqoursおよびSaint Snowメンバーの名前のハングル訳を頑張って調べる!!(多分これが一番時間かかる)

その結果は下の通り

ちか 치카

よう 요우

りこ 리코

なん 난  ←"ちかなん"が入力された場合に必要

かな 카나

まり 마리

ダイ 다이

よし 요시

まる 마루

ルビ 루비

せい 세이

りあ 리아

これを一々調べるのは面倒だからこのアプリを作るんです。。。


Xcodeの準備

 まず、新規プロジェクトを作成。

スクリーンショット 2019-02-07 13.06.43.png

そうするとこんな画面が出てくるので、今回はSingle View Appを選択。

スクリーンショット 2019-02-07 13.07.18.png

アプリの名前などを適当に入力します。私の場合は以下のように入力しました。各自好きなように。。。

スクリーンショット 2019-02-07 13.07.58.png

そうすると新しいプロジェクトが開かれるので、とりあえずストーリーボードを表示する。

スクリーンショット 2019-02-08 1.01.30.png

そうするとなんだかそれっぽい画面が出てくる。

スクリーンショット 2019-02-08 1.02.01.png

画面右上のこれ

スクリーンショット 2019-02-08 1.04.39.png

をクリックしてViewControllerを開く。

スクリーンショット 2019-02-08 1.05.19.png

これで準備は完了。


配置

 色々と配置していく。

スクリーンショット 2019-02-08 1.08.01.png

ここからオブジェクトのライブラリを開き、配置。

スクリーンショット 2019-02-08 1.08.15.png

今回はButton、Label、Text Fieldを使う。

こんな感じに配置した。

スクリーンショット 2019-02-08 1.15.17.png

そうそう。各オブジェクトの詳細(文字の種類とか)はこ↑こ↓を開くと、

スクリーンショット 2019-02-08 1.16.12.png

こんな感じで設定できる。これは適宜。

スクリーンショット 2019-02-08 1.16.20.png

次に、コードとオブジェクトを結びつける。右クリックでそのままドラッグしてこのへんに置く。

スクリーンショット 2019-02-08 1.21.23.png

そうすると多分設定的なのが出てくるので、

TextField(日本語入力用1)

Connection:Outlet

Name:適宜

Type:UITextField, weak

TextField(日本語入力用2)

Connection:Outlet

Name:適宜

Type:UITextField, weak

TextField(ハングル出力用)

Connection:Outlet

Name:適宜

Type:UITextField, weak

Button(翻訳ボタン)

Connection:Action

Object:ViewController

Name:適宜

Type:UIButton, Touch Down, Sender

な感じで設定する。


コード

以下のようにする。定数・変数名とかは適宜変えて。あ、さっきオブジェクトから引っ張ってきた時に追加されたやつは消さないように。オブジェクトから引っ張ってきた時に追加されたやつと、もともと書いてあったやつはそのままにして、不足しているのだけ下記のコードから抜き出してコピペするのを推奨。


AqoursCPNameTranslate.swift

import UIKit

class ViewController: UIViewController {

@IBOutlet weak var jpn1: UITextField!
@IBOutlet weak var jpn2: UITextField!

var kor1string = ""
var kor2string = ""
var korstring = ""

var jpns = ""
var kors = ""

let dict = [
"ちか":"치카",
"よう":"요우",
"りこ":"리코",
"なん":"난",
"かな":"카나",
"まり":"마리",
"ダイ":"다이",
"よし":"요시",
"まる":"마루",
"ルビ":"루비",
"せい":"세이",
"りあ":"리아"
]

@IBAction func btn(_ sender: UIButton) {

var jpn1string: String = jpn1.text!
var jpn2string: String = jpn2.text!

for (jpns,kors) in dict{
if jpn1string == jpns{
kor1string = kors
}else{
}
}

for (jpns,kors) in dict{
if jpn2string == jpns{
kor2string = kors
}else{
}
}

korstring = kor1string + kor2string
var korstr: String?
korstr = korstring
kor.text = korstr

jpn1.endEditing(true)
jpn2.endEditing(true)

}

@IBOutlet var kor: UITextField!

override func viewDidLoad() {

super.viewDidLoad()

}

}



テスト

 ではこれをPC上でシミュレーションしてみる。これは左上の再生マークを押せば良い。

こんな感じでシュミレーターが起動して、動かせるようになる。

スクリーンショット 2019-02-08 8.40.10.png

スクリーンショット 2019-02-08 8.40.23.png

スクリーンショット 2019-02-08 8.40.29.png

やったぜ。

次に実機でテストしてみた。

やり方はこちらの方の記事がわかりやすい。

https://qiita.com/FumihikoSHIROYAMA/items/a754f77c41b585c90329

この通りにやると、、、

8BB8A929-890C-4992-BF43-85A590B8A61C.jpeg

17B15197-6716-4243-BDF7-B55F62DE6833.png

9C832D8B-D16E-40C8-94F5-D480C473673E.png

やったぜ。

(アイコンは特に設定してないからあとで描くか)


終わりに

やってみて結構面白かったです(小並感)。ええ。今回のアプリは単純且つそのアプリ単体で完結しているので今後はTwitterにリンクさせたり、この前作ったやつに結びつけたりしたいなぁと思っております。

こんな初心者&クソアプリの記事を読んでいただきありがとナス

ほなねん!