[iOSアプリ開発] 木琴アプリ: ChatGPT使用

アプリで何か特定の機能を実現したいとき、どのようなコードを使えばいいのか分からず困ることありませんか?

この記事では、このような場合に、従来の方法(Google検索→StackOverflow→Apple API Docs)と今流行りのChatGPTを使用し、比較してみました。

具体的には、木琴アプリの開発プロジェクトを通じて、「音を鳴らす」ためのコードを見つけ出し、アプリに組み込んで完成させる過程を解説します。

目次

概要

この講座で学習する内容
  • 木琴アプリを作成

アプリを作成する過程で、以下の内容を学習できます。

  • アプリで何かしたいことはあるけど、どのようなコードを使ったらいいのかわからない
    →このような時に、どのようにして欲しいコードを手に入れるのか
  • 実際に、木琴の音を鳴らすコードがわからないときの、その解決法
    従来の方法(Google→StackOverflow→Apple API Docsを利用)
    新しい方法(ChatGPTを利用)

【参考にした講座】iOS & Swift – The Complete iOS App Development Bootcamp (Udemy)
 (Section7) Using and Understanding Apple Documentation

この講座で作成するアプリの概要
  • 7つのボタンがある木琴を作成します。
  • それぞれのボタンごとに異なる音が鳴ります。
  • ボタンの表面に書かれているアルファベットの文字を読み取り、その文字に対応する音を鳴らします。
アプリの開発環境
  • Xcode: Version 14.2
  • macOS: Venture: Version 13.2.1
  • iOS: 16.4.1
GitHubからプロジェクトを入手したい方はこちら
Xcodeのインストールが未了の方はこちら
GitHubからXcodeプロジェクトをクローンする
STEP
Xcodeプロジェクトをクローンする

「Code」をクリックし、赤枠で囲まれたURLをコピーします。

Xcodeを起動後、赤枠で囲まれた「Clone an existing project」をクリックします。

先ほどコピーしたURLを赤枠の中にペーストし、Cloneボタンをクリックすれば、クローン完成です。

UIの設定

開始プロジェクトをクローンして起動した状態を確認してみましょう。

開始プロジェクトの確認

クローンしたプロジェクトを確認します。

アシスタントビューを開いて、デザインとコードを並べてみましょう。

次に、赤いCボタンをViewControllerにリンクさせます。

  • Ctrlキーを押しながらViewControllerへクリック&ドラッグします
  • 赤枠の表示の中の通り設定します
    Name: keyPressed
    Type: UIButton
  • Connectボタンをクリックします

リンクされたことを確認するため、赤いCボタンを押すと、デバッグコンソールに「I got pressed」出力するコードを書きます。

赤いCボタンを押すと、デバッグコンソールに「I got pressed」が出力されました。

従来の手順で木琴アプリを完成させよう

(従来の手順)木琴の音を鳴らすコードを探す

木琴の音を鳴らしたいけど、そのコードがわからない。

アプリで何かしたいことはあるけど、どのようなコードを使ったらいいのかわからないこと、ありませんか?

このような時は、以下の手順で進めてください。

アプリで何かをしたいコードを調べる手順
  • Googe
    以下の3つの条件をスペースで区切り、Googleで検索します
    「アプリで何をしたいのか」
    「プログラミング言語」
    「リソース」
  • StackOverflow
    アプリでしたいことに最も相応しい回答を選定する
  • Implement
    StackOverflowで調べたコードをアプリに転記し、必要な調整をした上で実行してみる
  • Docs
    コードの意味を調べる
  • Customize
    必要なコードをカスタマイズする

Step1. Googleで検索

以下の3つの条件をスペースで区切り、Googleで検索します
「Play sound」
「 Swift」
「 StackOverflow」

赤字の「How to play a sound using Swift – ios」がやりたいことに近いと思われるので、クリックしてStackOverflowに移動します

Step.2 StackOverflowで使えそうなコード候補を抽出

Google検索の結果を受けて、StackOverflowで質問と回答を確認し、使えそうなコード候補を抽出してみます。

(判定)以前は動作していたコードがあったのですが、新しいVerのSwiftでは動作しないため却下

https://stackoverflow.com/questions/32036146/how-to-play-a-sound-using-swift

候補2の回答を採用することを決定したので、STEP3に進みます。

Step3. アプリに実装(Implement)

STEP2で採用した回答のサンプルコードをアプリ(下図の赤枠)に実装します。

STEP
StackOverflow
https://stackoverflow.com/questions/32036146/how-to-play-a-sound-using-swift
STEP
Xcode
STEP
アプリが動くように一部コードを修正(修正前)
STEP
アプリが動くように一部コードを修正(修正後)
  • 赤いCボタンを押すと、playsound()が実行するように修正
  • アプリに取り込まれている音源のソースコード「c.wav」に変更

アプリを実行し、赤いCボタンを押すと、音が出ることを確できました。

Step4. Apple API Docsでコード内容を確認

最初の3ステップを終えたところで、StackOverflowから見つけた解決策を実行しました。

次に行うことは、Apple API Docsを見て、このコード(StackOverflowから見つけたコード)が何をするものなのか理解することです。

あわせて読みたい

Apple API Docsの検索画面で「AVFoundation」を検索します。

https://developer.apple.com/search/?q=AVFoundation

黄色マーカの「AVFoundation」をクリックし、音楽再生に関する記事を探します。

https://developer.apple.com/documentation/avfoundation/

キーワード「Audio」「Play」が記載されている箇所をクリックし、さらに検索を続けます。

https://developer.apple.com/documentation/avfoundation/audio_playback_recording_and_processing

「AVAudioPlayer」がオーディオデータから音楽を再生するclassであることがわかります。

Apple API Docsの簡易版の紹介

Xcodeの中で下図のように、調べたい関数をCtrlキーを押しながらクリックすると、Apple API Docsの簡易版とも言える内容を確認することもできる。

Step5. コードをアプリに適合させる(Customize)

このステップは、Swiftプログラミングの知識が必要なため、最も難しいステップです。

この講座においては、カスタマイズのステップは割愛し、Xcodeクローンで取り込んだREADMEファイルの内容にコードを置き換えて、次に進むことにします。

READMEファイルの内容
https://github.com/appbrewery/Xylophone-iOS13.git
  • 現在、赤いCボタンのみがViewControllerにリンクされている。
  • 赤いCボタン以外の6個のボタンについてもViewControllerにリンクさせたい。
  • (手順)IBActionのコード番号20が丸くなっているので、ここから各ボタンに向けてドラッグする。

全てのボタンがViewControllerにリンクされ、どのボタンを押しても、C.wavの同じ音が出るようになった。

しかし、実際に望むことは、ボタンごとに異なる音です。
そのためには、どのボタンが押されたのかを特定する必要があります。

鍵盤を押した時に出力される情報を確認する

そこで、以下の「sender」に注目し、赤いCボタンが押された時にどのような情報を出力できるのか、確認してみた。

STEP
print(sender)とした場合に出力される情報
@IBAction func keyPressed(_ sender: UIButton) {
        print(sender)
        playSound()
    }

<UIButton: 0x13c20aab0; frame = (5 0; 380 102); opaque = NO; autoresize = RM+BM; tag = 1; backgroundColor = <UIDynamicModifiedColor: 0x60000041d5c0; contrast = normal, baseColor = <UIDynamicCatalogSystemColor: 0x600001f3b4c0; name = systemRedColor>>; layer = <CALayer: 0x600000a77e20>>

→多くの情報が出力されています。次から情報を絞って出力していきます。

STEP
print(sender.backgroundColor)とした場合に出力される情報
@IBAction func keyPressed(_ sender: UIButton) {
        print(sender.backgroundColor)
        playSound()
    }

Optional(<UIDynamicModifiedColor: 0x600000c03060; contrast = normal, baseColor = <UIDynamicCatalogSystemColor: 0x60000175ae00; name = systemRedColor>>)

→鍵盤の色が「赤色」であることがわかります。

STEP
print(sender.currentTitle)とした場合に出力される情報
@IBAction func keyPressed(_ sender: UIButton) {
        print(sender.currentTitle)
        playSound()
    }

Optional(“C“)

→鍵盤の文字が「C」であることがわかります。

押された鍵盤ごとに異なる音を鳴らす

押されたボタンの情報として、ボタンの色、ボタンに書かれている文字を入手できることが確認できた。

今回のアプリにおいては、ボタンに書かれている文字(例えばC)と音声データ(C.wav)の名称が一致していることに注目し、プログラムを完成させた。

押された鍵盤ごとに異なる音を鳴らす
  • ボタンが押されると、その情報がsenderに送られる
  • senderは押されたボタンに書かれている文字の情報をplaySound関数に送る
  • playSound関数は、「文字.wav」の音を鳴らす

ChatGPTを使って木琴アプリを完成させよう

(前提条件)全ての鍵盤とコードがリンクされており、鍵盤をクリックすると「I got pressed」と出力される状況から始めます。

ChatGPTに異なる鍵盤ごとに異なる音を鳴らすコードを聞く

次の通り、ChatGPTに質問してみました。

これまで、解説してきました従来の方法では、「音を鳴らすコードを探す」工程が完了後、「押された鍵盤ごとに異なる音を鳴らすコードを追加して、アプリを完成していました。

今流行りのChatGPTの凄さを確かめるため、これらの工程を満たす解答が一度に得られないか?と考え、質問して見ました。質問はできるだけ丁寧に書きました。

STEP
ChatGPTに質問
https://chat.openai.com/?model=text-davinci-002-render-sha-mobile
STEP
ChatGPTから回答
import AVFoundation

class ViewController: UIViewController {
    var audioPlayer: AVAudioPlayer?

    @IBAction func keyButtonPressed(_ sender: UIButton) {
        guard let keyTitle = sender.currentTitle else {
            return
        }

        // 対応する音声ファイル名を取得
        let soundFileName = "\(keyTitle).wav"

        // 音声再生
        playSound(soundFileName)
    }

    func playSound(_ soundFileName: String) {
        guard let soundURL = Bundle.main.url(forResource: soundFileName, withExtension: nil) else {
            return
        }

        do {
            audioPlayer = try AVAudioPlayer(contentsOf: soundURL)
            audioPlayer?.play()
        } catch {
            print("音声ファイルの再生中にエラーが発生しました: \(error.localizedDescription)")
        }
    }
}
https://chat.openai.com/?model=text-davinci-002-render-sha-mobile

ChatGPTから入手したコードを実装してみた

入手したコードをXcodeにコピーし、実行して見ました。

結果は、全く問題なく、期待通り動きました。

ChatGPTは素晴らしい!

従来の方法では、「音を鳴らすコードを探す」工程が完了後、「押された鍵盤ごとに異なる音を鳴らす」工程を経て、アプリを完成させていたが、ChatGPTを使えば、これらの工程を満たすコードを一度に入手できました。

今回は、とても簡単なプログラムでしたので、ChatGPTから簡単に期待する回答が得ることができましたが、複雑なプログラムになったときに、期待通りの結果が得られるか、不安はあります。

ChatGPTの鍵は、いかに適切な質問ができるか!

と考えます。今後も挑戦していきます。

応用問題
(押されたボタンの不透明度を半分にし、0.2秒後に元に戻してください)

import UIKit
import AVFoundation

class ViewController: UIViewController {
    
    var player: AVAudioPlayer!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    @IBAction func keyPressed(_ sender: UIButton) {
        
        playSound(soundName: sender.currentTitle!)
        
        //押されたボタンの不透明度を半分にする
        sender.alpha = 0.5
        
        //0.2秒後に元に戻す
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
            //Bring's sender's opacity back up to fully opaque.
            sender.alpha = 1.0
        }
    }
    
    func playSound(soundName: String) {
        let url = Bundle.main.url(forResource: soundName, 
            withExtension: "wav")
        player = try! AVAudioPlayer(contentsOf: url!)
        player.play()
                
    }
}
@IBAction func keyPressed(_ sender: UIButton)

sender.alpha = 0.5という行は、ボタンの透明度(不透明度)を半分に減らしています。これにより、ボタンがタップされたときに視覚的なフィードバックが与えられるでしょう。

さらに、DispatchQueue.main.asyncAfter(deadline: .now() + 0.2)という行では、DispatchQueueを使用して非同期で処理を実行しています。ここでは、0.2秒の遅延を設定しています。その後のブロックでは、sender.alpha = 1.0という行で、ボタンの透明度を完全に不透明に戻しています。つまり、ボタンのタップ時に一時的に半透明になり、0.2秒後に元の完全な不透明度に戻るという動作になるでしょう。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次