[SwiftUI]ChatGPTを使って単語からSF Symbolsを提案させコピペでPreviewを生成させる

SF Symbolsの検索をChatGPT使って効率化した

iOS開発してたら、アイコンとしてSF Symbolsはよく使います。

SF Symbolsの公式サイト
https://developer.apple.com/sf-symbols/

黙示で似てるのを探すのも大変なので検索したいテーマを入れるとSF Symbols を提案しPreviewまで自動生成してくれるPromptを作成しました。

音楽で生成させたコードが以下のようになります。

実行環境はChatGPT : GPT - 3.5です

実際に動作してるLink

ChatのLink
https://chat.openai.com/share/401d78cf-1019-4231-94f3-a8da62af8287

Prompt

現在音楽に関するSF Symbols を提案する例です。
「」内の単語を任意の単語に書き換えてください。

以下の手順で作業を行なって


1. SF Symbols において「音楽」に関連するものを箇条書きででなるべく多くリストアップして、近い表現のEmojiがあれば”Emoji”：SFSymbolの名前　って形式でおしえて
2. 1で取り上げたものをSwiftUIのArray形式で保存して
3. 2 で作成したArrayをCodeBlockに含めて視覚的に確認できるコードをSwiftUIで作成して。この時、コードをそのままコピペできるように2で作成したリストも含めて一つのコードブロックで生成して、Viewの名前は、SymbolListViewで ContentViewは使用しないで

以下のCodeを使用して

    var body: some View {
        VStack {
            Text("Symbol List")
                .font(.title)
                .padding()

            ScrollView {
                VStack(alignment: .leading, spacing: 10) {
                    ForEach(symbolList, id: \.self) { symbol in
                        HStack {
                            Image(systemName: symbol)
                                .font(.title)
                            Text(symbol)
                                .font(.body)
                                .padding(.leading, 10)
                        }
                    }
                }
                .padding()
            }
        }
    }
}

上記の手順をStep-by-stepで行っていきましょう

出力

出力は以下の通りになります

---

Step 1:
SFSymbol において「音楽」に関連するものを箇条書きででなるべく多くリストアップして、近い表現のEmojiがあれば”Emoji”：”SFSymbolsの名前”形式で教えて

• 🎵：music.note
• 🎶：music.note.list
• 🎙️：mic
• 🎚️：slider.horizontal.3
• 🎛️：slider.horizontal.below.rectangle
• 🎤：mic.fill
• 🎧：headphones
• 🎼：musical.note
• 🎹：pianokeys
• 🥁：drum

Step 2:
1で取り上げたSFSymbolsの名前をSwiftUIのArray形式で保存して

let symbolList: [String] = [
    "music.note",
    "music.note.list",
    "mic",
    "slider.horizontal.3",
    "slider.horizontal.below.rectangle",
    "mic.fill",
    "headphones",
    "musical.note",
    "pianokeys",
    "drum"
]

Step 3:
2で作成したArrayをCodeBlockに含めて視覚的に確認できるコードをSwiftUIで作成して。この時、コードをそのままコピペできるように2で作成したリストも含めて一つのコードブロックで生成して、Viewの名前は、SymbolListViewでContentViewは使用しないで

import SwiftUI

struct SymbolListView: View {
    let symbolList: [String] = [
        "music.note",
        "music.note.list",
        "mic",
        "slider.horizontal.3",
        "slider.horizontal.below.rectangle",
        "mic.fill",
        "headphones",
        "musical.note",
        "pianokeys",
        "drum"
    ]
    
    var body: some View {
        VStack {
            Text("Symbol List")
                .font(.title)
                .padding()

            ScrollView {
                VStack(alignment: .leading, spacing: 10) {
                    ForEach(symbolList, id: \.self) { symbol in
                        HStack {
                            Image(systemName: symbol)
                                .font(.title)
                            Text(symbol)
                                .font(.body)
                                .padding(.leading, 10)
                        }
                    }
                }
                .padding()
            }
        }
    }
}

struct SymbolListView_Previews: PreviewProvider {
    static var previews: some View {
        SymbolListView()
    }
}

以上のコードは、SymbolListViewというViewを作成し、symbolListという配列を使用して音楽に関連するSFSymbolsとその名前を表示します。ビューはスクロール可能で、それぞれのシンボルにはアイコンと名前が表示されます。これにより、コードをコピペして使用することができます。

---

表示されたコードを実装すると以下のようになります

二回目以降は途中で出力されるListをコピペするのが早いかもしれません

まとめ

SF Symbolsの検索からPreviewの作成できるPromptを作成しました。

いいね、ブックマーク、フォローしていただけると勉強の励みになりますので是非お願いします。😉

追伸　--
Twitterで日々の学習風景を投稿してます。

@Ren_yello