SwiftUIで湯婆婆を実装してみる

## はじめに
はやりには便乗したくなるのが人の情ですよね、というわけでSwiftUIでやってみました。

Swiftだけでもよかったのですがせっかくですし、最近PlaygroudがXcode開いてワンクリックで作成できなくなったので...
（元ネタなどのリンクは長くなったので記事の最後に貼ってあります。）

## 実装

せっかくなのでSiriさんにしゃべらせました。またアプリなので契約書っぽくしてみました。コードはこんな感じです。

`swift
struct ContentView: View {
    @State var name: String = ""
    let talker = AVSpeechSynthesizer()

    var body: some View {
        VStack {
            Spacer()
            Text("契約書")
                .font(.system(.largeTitle, design: .serif))
                .fontWeight(.bold)
                .multilineTextAlignment(.center)
                .padding()
            Spacer()
            TextField("名前を書きな", text: $name)
                .padding(.all)
                .cornerRadius(10.0)
                .background(Color.gray.opacity(0.1))
            Spacer()
            Button("契約", action: {
                let shortName = String(name.randomElement() ?? "千")
                let utterance = AVSpeechUtterance(string: "フン。\(name)というのかい。贅沢な名だねぇ。今からお前の名前は\(shortName)だ。いいかい、\(shortName)だよ。分かったら返事をするんだ、\(shortName)！")
                utterance.voice =  AVSpeechSynthesisVoice(language: "ja-JP")
                talker.speak(utterance)
            })
            .padding(.all)
            .frame(width: 100, height: 100, alignment: .center)
            .foregroundColor(.white)
            .background(Color.red)
            .cornerRadius(50)
            .font(.system(.title, design: .serif))

            Spacer()
        }
        .padding(.horizontal, 20.0)
        .onAppear {
            let utterance = AVSpeechUtterance(string: "契約書だよ。そこに名前を書きな！")
            utterance.voice = AVSpeechSynthesisVoice(language: "ja-JP")
            talker.speak(utterance)
        }
    }
}
`
デザインのときにModifierの順番でデザインが変わるのはなんかもっと直感的な方法ないのかなぁと少し思ったり思わなかったり。

ちなみにrandomElementがうまくいかなかったとき（入力してないとか）はみんな強制で**「千」**です笑

## 実行結果

|ここで「名前を書きな」の音声が再生|名前を入力|
|:--:|:--:|
|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10943/680fb3a2-c347-a917-be62-3ec1df4e44be.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/10943/e1dd7ee3-9a3e-5ca2-c0bb-e0ba2e57e63c.png)|

最初にアプリを起動すると*「契約書だよ。そこに名前を書きな！」*という音声が流れます。
その後名前を入力して契約と押すと湯婆婆から名前を取られるという寸法です。

一個感動したのは今のSwiftUIってSpacerとかつかってると結構よしなに画面の要素をやってくれるんですね、いいUX/DX


これで無事湯婆婆の従業員になりました。（めでたしめでたし？）
ちなみに千尋と入力すると千尋は「ちひろ」、千は「せん」と読んでくれるので映画の完全再現になります。

## まとめ

というわけでSwiftUIではやりに載っかってみました。もし実際の音声を聞いてみたいという方はこちらからCloneしてつかってみてください

- [touyou/YuBaBa](https://github.com/touyou/YuBaBa)

アクセントは大体いい感じですが、ここで語尾を上げたいとかはうまくやる方法あったりするんですかね（調べてない）
アドベントカレンダー前にこういうブームが起こるの少し珍しい気もしますがみなさんもプログラミング楽しみましょう！Let's 湯婆婆！笑

##### その他の湯婆婆

全員引用してやろうと思ったけどちょっと量多すぎてアホでした...
元ネタは最初のJavaの方です。あとこれをぱっとまとめるために[nippoly](https://nippoly.github.io/)というChrome拡張を使ったのでよければつかってみてください

- [Javaで湯婆婆を実装してみる - Qiita](https://qiita.com/Nemesis/items/c7192a7c510788d2cba2)
- [PHPで湯婆婆を実装してみる - Qiita](https://qiita.com/hinatao3o/items/52b8d457c650c3e00ea4)
- [Red言語で湯婆婆 - Qiita](https://qiita.com/koba-a-koba/items/3b98065ac5b539d38320)
- [gasとlinebotで湯婆婆を実装してみた - Qiita](https://qiita.com/taigasenren/items/9627277f39665f9b2131)
- [Bashで湯婆婆を実装してみる（短） - Qiita](https://qiita.com/n_kats_/items/dfb4fa29299d3bc23c90)
- [JavaScriptで湯婆婆を実装してみる - Qiita](https://qiita.com/hato-poppo/items/670d5186c2807a5f51b4)
- [バッチファイルで湯婆婆を実装してみる - Qiita](https://qiita.com/kshibamo/items/2e698a37d95652b22940)
- [【TwitterAPI】「贅沢な名だねえ。今からお前の名前は○○だ。」【Ruby】 - Qiita](https://qiita.com/fuj1kky/items/2a6c8b6612f3306e9040)
- [MSX BASICで湯婆婆を実装してみる - Qiita](https://qiita.com/fujitanozomu/items/4891b168121a86d11128)
- [Jで湯婆婆を実装してみる - Qiita](https://qiita.com/unsigned-wrong-wrong-int/items/8e7754049b18a0481ba7)
- [Nimで湯婆婆を実装してみる - Qiita](https://qiita.com/momeemt/items/c4163f71a9b2d4408935)
- [湯婆婆は参照で落ちるから名前を書かない方がいい - Qiita](https://qiita.com/nya3_neko2/items/3e6b27b2d0788b4858bd)
- [Bashでエイリアスを作ってくれる湯婆婆コマンドを実装してみた - Qiita](https://qiita.com/namn1125/items/9e2e1a01a53334daf35c)
- [Python 3で湯婆婆を実装してみる - Qiita](https://qiita.com/everylittle/items/aae58c241194c0e5f515)
- [monaca(JS)でAndroid版湯婆婆を実装してみる - Qiita](https://qiita.com/nakano1120/items/cbd34837ad8b18207637)
- [Discord Botで湯婆婆を実装してみる - Qiita](https://qiita.com/nekozuki_dev/items/485d47a459a63f59400f)
- [Rustで並列処理する湯婆婆を実装してみる - Qiita](https://qiita.com/mutuya/items/21b0bfbf8b58b424812b)
- [PureScriptで湯婆婆を実装してみる - Qiita](https://qiita.com/BlueRayi/items/86bfa691624efc9c37c0)
- [Clojureで湯婆婆を実装してみる - Qiita](https://qiita.com/akthrms/items/c95f30d309f3f9a6b579)
- [Rubyで湯婆婆を実装してみる - Qiita](https://qiita.com/takaram/items/31643adbe69940f77c7b)
- [Elixirで湯婆婆を実装してみる - Qiita](https://qiita.com/torifukukaiou/items/daec6de40a54978dccc9)
- [Dartで湯婆婆を実装してみる - Qiita](https://qiita.com/Kogia_sima/items/daabecee3ccc3c4b8ea2)
- [Cで湯婆婆を実装してみる - Qiita](https://qiita.com/NAVE/items/05d0622e735d23b5c37e)
- [D言語で湯婆婆を実装してみる - Qiita](https://qiita.com/JJ1LIS/items/8311e6c3d469abc1419e)
- [Go 言語で湯婆婆を実装してみる - Qiita](https://qiita.com/RyotaNakaya/items/1c160932c21d69db5786)
- [Javaで湯婆婆の出したエラーを回避する - Qiita](https://qiita.com/ayhntksm_tama/items/217d8d8751242fcb0786)
- [Rustで湯婆婆を実装してみる - Qiita](https://qiita.com/7321hasu/items/cad5efdaaf842cc967ba)