はじめに
前回は、「カップラーメンタイマー」アプリを作りました。使い心地はいかがでしょうか？「こんな機能があればもっと便利！」という声があれば、それを追加してみるのもいいかもしれません。自分好みにカスタマイズできるのは、アプリ開発の大きな楽しみのひとつです。ぜひ新しいアイデアにも挑戦してみてください。
アプリ作成の第4弾は「福笑いゲーム」を作ります。福笑いとは、主にお正月に遊ばれる日本の伝統的なゲームで、目隠しをした状態で顔のパーツを台紙に配置し、完成したユーモラスな顔を見て笑い合いながら楽しむ遊びです。
今回はこの福笑いゲームをアプリ上で楽しめるように作っていきましょう。
開発環境
この連載では、次の環境を使用しています。
- macOS Sequoia 15.1
- Xcode 16.1
プロジェクトを立ち上げる
今回も前回と同じように作ったプロジェクトの中に新規ファイルを作成して進めていきます。それでは、Xcodeからプロジェクトを開いて、アプリ作りを進めていきましょう。
アプリ 「福笑いゲーム」ファイルを新規作成する
福笑いゲーム用にコードを記述するためのファイルを新規作成します。前回と同様に新規ファイル作成手順でLuckyLaughView.swiftファイルを追加します。
今回は特に最初のコードの書き換えは不要です。最終的にナビゲーションエリアも含め、次のようになっていれば問題ありません。
SF Symbolsを理解する
SF Symbolsとは、Appleが無料で提供するアイコンセットで、アプリで使用できる標準的なデザイン要素です。
開発者は、Appleの標準アプリが使用しているシンボルを同じように使用することができ、シンボルの種類はSF Symbols 6時点では6000以上のシンボルがあり、さまざまなケースに合わせてシンボルを選び、使い分けることが可能です。
シンボルを探す
SF Symbolsの各シンボルは、SF Symbolsアプリからも探すことはできますが、今回は第1回で紹介したXcodeのツールバーにあるライブラリパネルから探していきます。
-
Xcodeの上部ツールバーの①
ライブラリボタンを押す -
表示された②ライブラリパネルの③
☆マークを押す - 使用できるSF Symbolsのシンボルが表示されます
よくダウンロードする際に使用されている見覚えのあるシンボルが確認できます。
シンボルを探すには、④検索欄にテキストを入力すると結果を絞り込むことができます。このシンボルを使用する時は、⑥Availabilityに対応OSが記載されており、その記載OS未満のバージョンでは対象のシンボルは使用できないため、注意が必要です。
今回はこのgamecontrollerのシンボルを使用するため、gamecontrollerをドラッグ してLuckyLaughView.swiftの変数body内にドロップします。
以下のようなコードになれば問題ありません。
struct LuckyLaughView: View {
var body: some View {
Text("Hello, World!")
Image(systemName: "gamecontroller")
}
}
また、Text("Hello, World!")は不要なので削除します。最終的に以下のようなコードになり、プレビューにもgamecontrollerが表示されていれば問題ありません。
struct LuckyLaughView: View {
var body: some View {
Image(systemName: "gamecontroller")
}
}
今回はライブラリパネル上からドラッグ＆ドロップしてシンボルを追加しましたが、もし使用したいSF Symbolsのシンボル名が分かっている場合は、systemNameに使用したいシンボル名を記述するだけで使用することができます。
Image(systemName: 使用したいシンボル名)
TabViewを理解する
今回は福笑いのルール画面と、実際にゲームをプレイするゲーム画面の二つの画面を作成します。そのため、アプリ内で画面を切り替える機能が必要になります。この切り替えには、SwiftUIが提供するTabViewというUIコンポーネントを使用します。
まずは以下のようにコードを書き換えます。
struct LuckyLaughView: View {
var body: some View {
TabView {
// タブのラベル
Tab("ゲーム", systemImage: "gamecontroller") {
// タブ切り替え時に表示するView
Text("ゲーム画面")
}
}
}
}
タブで複数のViewを切り替えるためには、TabViewの中に表示したいViewのコンテンツを持ったTabを記述する必要があります。
まず、Tabの"ゲーム", systemImage: "gamecontroller"の部分が、タブに表示されるラベルになります。そして、{}内にタブ切り替え時に表示したいViewを設定します。今回は、プレビューにゲーム画面と表示されています。
タブを切り替える
まだ、タブで切り替える動作ができないのはTabView内にTabが1つしかないからです。Tabを追加するためには、以下のコードのようにTabView内に追加します。
struct LuckyLaughView: View {
var body: some View {
TabView {
Tab("ゲーム", systemImage: "gamecontroller") {
Text("ゲーム画面")
}
// ここを追加↓
Tab("ルール", systemImage: "questionmark.circle") {
Text("ルール説明画面")
}
}
}
}
これでタブのラベルを押すことで、それぞれの画面を表示することができます。
あとはそれぞれの画面を作成するだけです。
