はじめに
Swiftの学習を兼ねて、簡単なタロットカードアプリを作ってみました。
今回は画像を使わず、文字だけで作ります。
Xcodeが必要なので、環境はmacOSです。
（私のMacが古いので、今と違うところがあるかもしれません）
要件
- 起動したら「カードを引く」ボタンを表示
- ボタンをタップしたらタロットカードをランダムに表示
- 「もう一度引く」ボタンで再度タロットカードをランダムに表示
準備
Xcodeプロジェクトの作成
- Xcodeを起動し、新しいプロジェクトを作成します
- "App"テンプレートを選択し、"Next"をクリックします
- プロジェクト名に「TarotApp」などを入力し、インターフェースは「SwiftUI」を選択します
- 作業フォルダを選択し、「Create」でプロジェクトを作成します
- プロジェクトが作成されました！
今回のディレクトリ構成
CardViewとTarotCardsを追加してます。
実装
コンテンツ本体
ContentView.swift
//
// ContentView.swift
// TarotApp
//
import SwiftUI
struct ContentView: View {
@State private var selectedCard: TarotCard?
var body: some View {
NavigationView {
VStack(spacing: 20) {
Text("TarotApp")
.font(.largeTitle)
.fontWeight(.bold)
.padding()
.frame(maxWidth: .infinity) // タイトルを中央寄せにする
.background(Color.gray.opacity(0.2))
.cornerRadius(10)
if let card = selectedCard {
CardView(card: card)
Button("もう一度引く") {
// ランダムにカードを選択
selectedCard = tarotCards.randomElement()
}
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
} else {
Button("カードを引く") {
// ランダムにカードを選択
selectedCard = tarotCards.randomElement()
}
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
}
}
.navigationTitle("TarotApp")
.navigationBarTitleDisplayMode(.inline) // タイトルを中央寄せにする
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
カード表示部分
CardView.swift
//
// CardView.swift
// TarotApp
//
import SwiftUI
struct CardView: View {
let card: TarotCard
var body: some View {
VStack(spacing: 10) {
Text(card.name)
.font(.largeTitle)
.fontWeight(.bold)
.padding()
.background(Color.gray.opacity(0.2))
.cornerRadius(10)
Text(card.description)
.font(.headline)
.multilineTextAlignment(.center)
.padding()
Spacer()
Text("意味")
.font(.title2)
.fontWeight(.bold)
.padding()
Text(card.meaning)
.font(.body)
.padding()
}
.padding()
.background(Color(UIColor.systemGray6))
.cornerRadius(20)
.shadow(radius: 5)
}
}
カードの配列
Gemini 1.5 Flashに、一気に（10秒くらいで）作ってもらいました。
内容は精査してませんが、一旦このまま使います。
TarotCards.swift
//
// TarotCards.swift
// TarotApp
//
import SwiftUI
struct TarotCard: Identifiable {
let id = UUID()
let name: String
let description: String
let meaning: String
}
let tarotCards: [TarotCard] = [
TarotCard(name: "The Fool",
description: "始まり、無邪気さ、新しい旅立ち",
meaning: "新しい章の始まり、自由な精神、冒険心"),
TarotCard(name: "The Magician",
description: "意志力、創造力、潜在能力",
meaning: "目標達成、能力発揮、潜在能力の開花"),
TarotCard(name: "The High Priestess",
description: "直感、神秘、秘密",
meaning: "内なる知恵、直感力、秘密の解明"),
TarotCard(name: "The Empress",
description: "豊穣、愛情、自然",
meaning: "豊かさ、愛情、創造性"),
TarotCard(name: "The Emperor",
description: "権力、安定、秩序",
meaning: "安定、統率力、権威"),
TarotCard(name: "The Hierophant",
description: "伝統、信仰、精神的指導",
meaning: "伝統、精神的な指導、社会規範"),
TarotCard(name: "The Lovers",
description: "愛、調和、選択",
meaning: "愛情、調和、パートナーシップ"),
TarotCard(name: "The Chariot",
description: "意志、勝利、克服",
meaning: "意志力、目標達成、克服"),
TarotCard(name: "Strength",
description: "強さ、勇気、忍耐",
meaning: "内なる強さ、克服、忍耐"),
TarotCard(name: "The Hermit",
description: "内省、孤独、自己探求",
meaning: "内観、自己成長、探求"),
TarotCard(name: "Wheel of Fortune",
description: "運命、変化、サイクル",
meaning: "運命、変化、サイクル"),
TarotCard(name: "Justice",
description: "公正、均衡、法則",
meaning: "公正、バランス、調和"),
TarotCard(name: "The Hanged Man",
description: "犠牲、視点を変える、新しい見方",
meaning: "新しい視点、見直し、変化"),
TarotCard(name: "Death",
description: "終わり、変容、再生",
meaning: "終わりと始まり、変容、再生"),
TarotCard(name: "Temperance",
description: "調和、バランス、忍耐",
meaning: "バランス、調和、忍耐"),
TarotCard(name: "The Devil",
description: "誘惑、執着、物質主義",
meaning: "誘惑、執着、依存"),
TarotCard(name: "The Tower",
description: "破壊、変化、混乱",
meaning: "破壊、変革、混乱"),
TarotCard(name: "The Star",
description: "希望、再生、癒し",
meaning: "希望、再生、癒し"),
TarotCard(name: "The Moon",
description: "幻想、直感、隠された真実",
meaning: "幻想、直感、隠された真実"),
TarotCard(name: "The Sun",
description: "喜び、成功、幸福",
meaning: "喜び、成功、幸福"),
TarotCard(name: "Judgement",
description: "再生、自己評価、新しい始まり",
meaning: "再生、自己評価、新しい始まり"),
TarotCard(name: "The World",
description: "完成、達成、統合",
meaning: "完成、達成、統合"),
TarotCard(name: "The Major Arcana",
description: "運命のサイクル、人生の旅路",
meaning: "人生の重要な課題、試練"),
TarotCard(name: "Ace of Wands",
description: "新しい始まり、情熱、創造性",
meaning: "新しいプロジェクト、情熱、創造性"),
TarotCard(name: "Two of Wands",
description: "計画、展望、決断",
meaning: "計画、展望、決断"),
TarotCard(name: "Three of Wands",
description: "拡大、成長、冒険",
meaning: "拡大、成長、冒険"),
TarotCard(name: "Four of Wands",
description: "安定、祝賀、達成",
meaning: "安定、祝賀、達成"),
TarotCard(name: "Five of Wands",
description: "競争、対立、混乱",
meaning: "競争、対立、混乱"),
TarotCard(name: "Six of Wands",
description: "成功、勝利、栄光",
meaning: "成功、勝利、栄光"),
TarotCard(name: "Seven of Wands",
description: "防衛、抵抗、忍耐",
meaning: "防衛、抵抗、忍耐"),
TarotCard(name: "Eight of Wands",
description: "動き、変化、スピード",
meaning: "動き、変化、スピード"),
TarotCard(name: "Nine of Wands",
description: "忍耐、決意、防衛",
meaning: "忍耐、決意、防衛"),
TarotCard(name: "Ten of Wands",
description: "負担、責任、完成",
meaning: "負担、責任、完成"),
TarotCard(name: "Page of Wands",
description: "新しいアイデア、熱意、探検",
meaning: "新しいアイデア、熱意、探検"),
TarotCard(name: "Knight of Wands",
description: "行動力、情熱、冒険心",
meaning: "行動力、情熱、冒険心"),
TarotCard(name: "Queen of Wands",
description: "独立心、自信、創造性",
meaning: "独立心、自信、創造性"),
TarotCard(name: "King of Wands",
description: "リーダーシップ、成功、野心",
meaning: "リーダーシップ、成功、野心"),
TarotCard(name: "Ace of Cups",
description: "愛情、感情、創造性",
meaning: "愛情、感情、創造性"),
TarotCard(name: "Two of Cups",
description: "調和、愛情、パートナーシップ",
meaning: "調和、愛情、パートナーシップ"),
TarotCard(name: "Three of Cups",
description: "祝賀、友情、喜び",
meaning: "祝賀、友情、喜び"),
TarotCard(name: "Four of Cups",
description: "内省、満足、孤独",
meaning: "内省、満足、孤独"),
TarotCard(name: "Five of Cups",
description: "悲しみ、喪失、失望",
meaning: "悲しみ、喪失、失望"),
TarotCard(name: "Six of Cups",
description: "過去、思い出、ノスタルジア",
meaning: "過去、思い出、ノスタルジア"),
TarotCard(name: "Seven of Cups",
description: "幻想、誘惑、選択",
meaning: "幻想、誘惑、選択"),
TarotCard(name: "Eight of Cups",
description: "離脱、失望、新しい出発",
meaning: "離脱、失望、新しい出発"),
TarotCard(name: "Nine of Cups",
description: "満足、幸福、願いの成就",
meaning: "満足、幸福、願いの成就"),
TarotCard(name: "Ten of Cups",
description: "完璧な幸福、家庭、愛",
meaning: "完璧な幸福、家庭、愛"),
TarotCard(name: "Page of Cups",
description: "新しい愛、感情、創造性",
meaning: "新しい愛、感情、創造性"),
TarotCard(name: "Knight of Cups",
description: "ロマンチック、夢、理想",
meaning: "ロマンチック、夢、理想"),
TarotCard(name: "Queen of Cups",
description: "共感、慈悲、直感",
meaning: "共感、慈悲、直感"),
TarotCard(name: "King of Cups",
description: "感情の支配、感情の安定、調和",
meaning: "感情の支配、感情の安定、調和"),
TarotCard(name: "Ace of Swords",
description: "新しいアイデア、決断、突破",
meaning: "新しいアイデア、決断、突破"),
TarotCard(name: "Two of Swords",
description: "停滞、決断の遅延、葛藤",
meaning: "停滞、決断の遅延、葛藤"),
TarotCard(name: "Three of Swords",
description: "悲しみ、失恋、苦痛",
meaning: "悲しみ、失恋、苦痛"),
TarotCard(name: "Four of Swords",
description: "休息、回復、静寂",
meaning: "休息、回復、静寂"),
TarotCard(name: "Five of Swords",
description: "敗北、裏切り、争い",
meaning: "敗北、裏切り、争い"),
TarotCard(name: "Six of Swords",
description: "移転、旅立ち、癒し",
meaning: "移転、旅立ち、癒し"),
TarotCard(name: "Seven of Swords",
description: "裏切り、詐欺、隠蔽",
meaning: "裏切り、詐欺、隠蔽"),
TarotCard(name: "Eight of Swords",
description: "制限、束縛、囚われ",
meaning: "制限、束縛、囚われ"),
TarotCard(name: "Nine of Swords",
description: "不安、恐怖、悪夢",
meaning: "不安、恐怖、悪夢"),
TarotCard(name: "Ten of Swords",
description: "破壊、敗北、絶望",
meaning: "破壊、敗北、絶望"),
TarotCard(name: "Page of Swords",
description: "知性、メッセージ、情報",
meaning: "知性、メッセージ、情報"),
TarotCard(name: "Knight of Swords",
description: "迅速な行動、攻撃性、決断力",
meaning: "迅速な行動、攻撃性、決断力"),
TarotCard(name: "Queen of Swords",
description: "独立心、知性、冷静",
meaning: "独立心、知性、冷静"),
TarotCard(name: "King of Swords",
description: "権威、支配、正義",
meaning: "権威、支配、正義"),
TarotCard(name: "Ace of Pentacles",
description: "豊かさ、財産、新しい始まり",
meaning: "豊かさ、財産、新しい始まり"),
TarotCard(name: "Two of Pentacles",
description: "バランス、多忙、調整",
meaning: "バランス、多忙、調整"),
TarotCard(name: "Three of Pentacles",
description: "チームワーク、職人技、協力",
meaning: "チームワーク、職人技、協力"),
TarotCard(name: "Four of Pentacles",
description: "安全、安定、所有",
meaning: "安全、安定、所有"),
TarotCard(name: "Five of Pentacles",
description: "貧困、失業、孤独",
meaning: "貧困、失業、孤独"),
TarotCard(name: "Six of Pentacles",
description: "慈善、寛大、共有",
meaning: "慈善、寛大、共有"),
TarotCard(name: "Seven of Pentacles",
description: "努力、辛抱、成果",
meaning: "努力、辛抱、成果"),
TarotCard(name: "Eight of Pentacles",
description: "技能、熟練、努力",
meaning: "技能、熟練、努力"),
TarotCard(name: "Nine of Pentacles",
description: "成功、豊かさ、満足",
meaning: "成功、豊かさ、満足"),
TarotCard(name: "Ten of Pentacles",
description: "遺産、財産、家族",
meaning: "遺産、財産、家族"),
TarotCard(name: "Page of Pentacles",
description: "新しい機会、学習、潜在能力",
meaning: "新しい機会、学習、潜在能力"),
TarotCard(name: "Knight of Pentacles",
description: "勤勉、責任、安定",
meaning: "勤勉、責任、安定"),
TarotCard(name: "Queen of Pentacles",
description: "豊穣、実用性、安定",
meaning: "豊穣、実用性、安定"),
TarotCard(name: "King of Pentacles",
description: "富、成功、物質的な豊かさ",
meaning: "富、成功、物質的な豊かさ")
]
動作確認
まずはContentViewで確認。
「カードを引く」ボタンを押します。
『The Devil』が表示されました！
続いて、シミュレーターを起動して確認します。
「カードを引く」ボタンを押します。
『Queen of Swords』が表示されました！
続いて、「もう一度引く」ボタンを押すと、
『The Magician』が表示されました！
うまく動きましたね！
タロットカードの画像を用意しておけば、より本格的になりそうです。
まとめ
今回は、簡易的なタロットカードアプリを作ってみました。
まだまだ改良の余地があるので、また別の機会にチャレンジしてみようと思います。
みなさんも一緒にがんばりましょう🙂