LoginSignup
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Hemmy7(Hemmi Shuji ヘンミー)

子ども向け はじめてのiPhoneアプリ開発ワークショップ

Last updated at Posted at 2025-01-17

ワクワク！はじめてのiPhoneアプリ作り大冒険！ ✨

〜君だけのジャンプゲームを作ろう〜

ようこそ、プログラミングの世界へ！ 👋

やぁ、みんな！今日は特別な冒険にでかけるよ！
なんと、自分だけのiPhoneアプリを作っちゃうんだ！
ゲームを作りながら、プログラミングの楽しさを体験していこう！

今日の冒険でできるもの 🎮

  • タップでピョンピョン跳ねるかわいい主人公
  • ジャンプで障害物をよけるドキドキゲーム
  • スコアがどんどん上がっていく楽しさ

冒険の準備をしよう！ 🎒

必要なもの

  • Macパソコン（macOS Monterey 12.0以降）
    • 魔法の道具みたいなすごいパソコンだよ！
  • Apple ID（無料）
    • 宝物を入れておける特別なカギみたいなもの
  • Xcode（無料）
    • アプリを作る魔法の道具箱だよ
  • やる気とワクワク感！
    • これが一番大切！君の想像力が必要だ！

大切な約束！ 🌟

  • 分からないことがあったら、すぐに質問してね
    • 質問するのは賢い証拠だよ！
  • 間違えても全然平気！
    • 失敗は成功のもと。何度でもチャレンジしよう！
  • パソコンは優しく扱おう
    • 大切な道具は優しく使おうね

さぁ、冒険の準備をはじめよう！ 🚀

パソコンの準備をしよう 🖥

その1：Apple IDを作る

※ここは先生か大人の人と一緒にやろう！

  1. パソコンでインターネットを開く
  2. Apple IDの作成ページに行く
  3. 必要な情報を入れる

その2：Xcodeをインストール

  1. App Storeを開く
  2. 「Xcode」で検索
  3. インストールボタンを押す
    • とても大きいので時間がかかります
    • インストールが終わるまで待とう

1. Apple IDの作成

まだApple IDを持っていない場合は作成しましょう：

  1. https://appleid.apple.com/ にアクセス
  2. 「Apple ID を作成」をクリック
  3. 画面の指示に従って必要な情報を入力

2. Xcodeのインストール

  1. Mac App Storeを開く
  2. 検索欄で「Xcode」と入力
  3. インストールボタンをクリック
    • ダウンロードには時間がかかります（10GB以上）
    • インストールが完了するまで待ちましょう

3. Xcodeの初期設定

  1. Xcodeを初めて起動すると追加コンポーネントのインストールが始まります
  2. インストールが完了したら、Apple IDでサインインします：
    • Xcode → Preferences → Accounts
    • 左下の「+」ボタン → Apple ID
    • お持ちのApple IDでログイン

今日作るもの：「タップでジャンプ！」ゲーム 🦊

今日は、画面をタップすると主人公がジャンプするシンプルなゲームを作ります。
障害物をよけながら、どこまで進めるかを競うゲームです！

ゲームを作り始めよう！ 🎮

Step 1: Xcodeを開く

  1. 画面下の Dock から Xcode を探す
    • アイコンは青い背景にハンマーの形
  2. 見つからない時は:
    • 右上の虫眼鏡をクリック
    • 「Xcode」と入力
    • 出てきたアイコンをクリック

Step 2：新しい冒険の地図を作ろう（プロジェクト作成）

  1. 「Create a new Xcode project」をクリック
    • 新しい冒険の始まりだ！
  2. 上の方にある「iOS」をクリック
    • iPhoneアプリを作る世界だよ
  3. 「App」を選んでクリック
    • これが基本の冒険セット！
  4. 「Next」を押す

Step 3：冒険に名前をつけよう（プロジェクト設定）

  1. Product Name に「JumpGame」と入力
    • 半角英語で書くのを忘れずに
    • 大文字と小文字をまちがえないように
    • これが君のゲームの名前になるよ！
  2. 魔法の設定をしよう：
    • Interface: 「SwiftUI」にチェック
    • Language: 「Swift」にチェック
    • 他のチェックは外しておこう
  3. 「Next」を押して、デスクトップを選んで「Create」

Step 4：魔法の巻物を開こう（コードを書く準備）

  1. 左側のファイル一覧から「ContentView.swift」を探そう
    • 青いアイコンの巻物みたいなファイルだよ
  2. クリックして開いてみよう
  3. 中に書いてある文字を消して、新しい魔法を書く準備をしよう
    • Command + A で全部選択
    • Deleteキーで消してスッキリ！

Step 5：魔法の呪文を唱えよう（プログラムを書く）

  1. これから素敵な魔法の呪文（プログラム）を書いていくよ
    • 先生からもらった呪文をコピーしよう
  2. 呪文を写す（貼り付け）
    • Command + V でペッ！と貼り付け
  3. 魔法を保存
    • Command + S で魔法を封印完了！
  4. プログラムの説明：
    • 赤いボール：これが主人公だよ
    • 緑の四角：これが障害物だよ
    • 青い背景：これが空だよ

Step 6: ゲームを動かしてみよう

  1. 上の方にある再生ボタン（▶）を押す
  2. シミュレーターが開くまで待つ
  3. 画面をクリックしてボールをジャンプさせよう！

困ったときは？

画面が真っ白になったら

  • プログラムが正しく貼り付けできているか確認
  • 保存（Command + S）しているか確認
  • もう一度再生ボタンを押してみる

赤い！マークが出たら

  • プログラムの中に間違いがあるよ
  • 先生に見てもらおう

ボールが動かないときは

  • シミュレーターの画面をクリックしているか確認
  • 再生ボタンをもう一度押してみる

プログラムを変えて遊んでみよう 🎨

色を変えてみよう

  1. 赤いボールの色を変える
    • .red を別の色に変えてみよう
    • 使える色：.blue, .green, .yellow, .orange, .purple
  2. 保存（Command + S）して実行（▶）

大きさを変えてみよう

  1. ボールの大きさを変える
    • width: 50 の数字を変えてみよう
    • 小さくしたり大きくしたり
  2. 保存して実行

ジャンプの高さを変えてみよう

  1. ジャンプの高さを変える
    • characterPosition.y -= 100 の数字を変えてみよう
    • 大きくすると高くジャンプ
    • 小さくすると低くジャンプ
  2. 保存して実行

できた！おめでとう！ 🎉

  • 自分だけのゲームが作れたね
  • プログラミング、楽しかったかな？
  • もっといろんなことにチャレンジしてみよう！

次のチャレンジ 🌟

  • 背景の色を変えてみよう
  • 障害物の形を変えてみよう
  • スコアの表示場所を変えてみよう

がんばってね！ 👍

import SwiftUI

struct ContentView: View {
    @State private var characterPosition = CGPoint(x: 100, y: 300)
    @State private var isJumping = false
    
    var body: some View {
        ZStack {
            // 背景
            Color.blue.opacity(0.3)
                .ignoresSafeArea()
            
            // キャラクター
            Circle()
                .fill(Color.red)
                .frame(width: 50, height: 50)
                .position(characterPosition)
            
            // タップ用の透明なボタン
            Button(action: {
                jump()
            }) {
                Color.clear
            }
        }
    }
    
    func jump() {
        guard !isJumping else { return }
        isJumping = true
        
        withAnimation(.easeOut(duration: 0.5)) {
            characterPosition.y -= 100
        }
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            withAnimation(.easeIn(duration: 0.5)) {
                characterPosition.y += 100
            }
            DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
                isJumping = false
            }
        }
    }
}

Step 3: 障害物を追加しよう 🚧

次は、避けなければならない障害物を追加します：

// ContentViewに追加する新しいプロパティ
@State private var obstaclePosition = CGPoint(x: 400, y: 300)
@State private var gameTimer: Timer?
@State private var score = 0

// body内のZStackに追加
Rectangle()
    .fill(Color.green)
    .frame(width: 30, height: 60)
    .position(obstaclePosition)

// スコア表示を追加
Text("スコア: \(score)")
    .font(.title)
    .position(x: 200, y: 50)

Step 4: 障害物を動かそう 🎯

障害物を左から右に動かすコードを追加します：

// ContentViewに新しい関数を追加
func startGame() {
    gameTimer = Timer.scheduledTimer(withTimeInterval: 0.02, repeats: true) { _ in
        withAnimation {
            obstaclePosition.x -= 2
            
            // 画面外に出たら右端に戻す
            if obstaclePosition.x < -20 {
                obstaclePosition.x = 420
                score += 1
            }
        }
    }
}

// onAppearに追加
.onAppear {
    startGame()
}

Step 5: ゲームオーバーの判定を追加しよう 💥

キャラクターが障害物に当たったらゲームオーバーになるようにします：

// checkCollisionという関数を追加
func checkCollision() -> Bool {
    let characterFrame = CGRect(
        x: characterPosition.x - 25,
        y: characterPosition.y - 25,
        width: 50,
        height: 50
    )
    
    let obstacleFrame = CGRect(
        x: obstaclePosition.x - 15,
        y: obstaclePosition.y - 30,
        width: 30,
        height: 60
    )
    
    return characterFrame.intersects(obstacleFrame)
}

// gameTimerの中でチェックを追加
if checkCollision() {
    gameTimer?.invalidate()
    gameTimer = nil
    // ゲームオーバー処理
}

遊び方 🎮

  1. 画面をタップするとキャラクターがジャンプします
  2. 緑の障害物を避けながら進みましょう
  3. 障害物を避けるたびにスコアが増えていきます
  4. 障害物に当たるとゲームオーバーです

トラブルシューティング 🔧

よくある問題と解決方法

  1. シミュレーターが起動しない

    • Xcodeを一度終了して、再起動してみる
    • プロジェクトを閉じて、開き直してみる

  2. プログラムが動かない

    • 赤い警告が出ていないか確認
    • プログラムを保存（Command + S）したか確認
    • 再生ボタン（▶）を押して実行し直す

  3. 画面が真っ白

    • プログラムの内容が正しいか確認
    • 波かっこ { } の数が合っているか数える
    • プレビューの「Resume」を押してみる

  4. シミュレーターでタップできない

    • シミュレーターのウィンドウをクリックしてアクティブにする
    • マウスでクリックしてタップの操作をする

困ったときは

  • プログラムを1つずつ確認する
  • 先生や友達に相談する
  • 一度休憩して、リフレッシュしてから挑戦する

チャレンジ！ 🌟

基本のゲームができたら、以下のアイデアに挑戦してみましょう：

  1. キャラクターの色を好きな色に変えてみよう
  2. 障害物の動く速さを変えてみよう
  3. 背景に模様や絵を追加してみよう
  4. ジャンプの高さを変えてみよう
  5. 効果音を追加してみよう

実機でアプリを動かす方法 📱

自分のiPhoneでアプリを動かすには以下の手順が必要です：

1. iPhoneの準備

  1. iPhoneをMacにUSBケーブルで接続
  2. iPhoneのパスコードを入力
  3. 「このコンピュータを信頼しますか？」という表示が出たら「信頼」を選択

2. Xcodeの設定

  1. Xcode上部の実行デバイス選択で自分のiPhoneを選択
  2. もし「Cannot run ... on (your iPhone)」というエラーが出たら：
    • プロジェクトの設定画面を開く
    • 「Signing & Capabilities」タブを選択
    • 「Team」でご自身のApple IDを選択
    • 自動的に証明書が生成されるのを待つ

3. iPhoneでの承認

  1. 初めてアプリを実行すると、iPhoneに警告が表示されます
  2. 設定アプリ → 一般 → デバイス管理
  3. 開発者のプロファイルを信頼する

これで自分のiPhoneでアプリが動くようになります！

注意点

  • 開発者登録をしていない場合、アプリは7日間だけ動作します
  • 7日後も使い続けたい場合は、再度MacとiPhoneを接続して実行する必要があります

まとめ 🎉

おめでとう！これであなたも立派なiPhoneアプリ開発者です。
このゲームを元に、さらに楽しい機能を追加してみましょう。

プログラミングの世界には、まだまだたくさんの冒険が待っています。
これからも楽しみながら学んでいきましょう！

困ったときは？ 🤔

  • コードを入力するときは、スペルに気をつけましょう
  • エラーが出たら、赤い文字のメッセージを読んでみましょう
  • 先生や友達に相談するのもOKです！

がんばってください！ 👍

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?