More than 3 years have passed since last update.

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

Posted at 2020-11-08

はじめに

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

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

実装

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

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がうまくいかなかったとき（入力してないとか）はみんな強制で**「千」**です笑

実行結果

ここで「名前を書きな」の音声が再生	名前を入力

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

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

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

まとめ

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

touyou/YuBaBa

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

その他の湯婆婆

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up