株式会社シベスピ 従業員ブログ

シベスピの社員ブログ。技術・想い・経験沢山書いていきます!

【objective-c】iOSアプリ開発超初心者講座【アプリ作成編】

どうも、松尾です。
以前書いたXcodeのインストール編から1年以上経ってました。
今回はインストールしたXcodeで簡単な雪を降らせるアニメーションアプリを作って行こうかと思います。
プログラミング未経験の方に向けて、難しい説明などは割愛して、アプリ作成する流れを書いて行きます。

用意するもの

mac
Xcode

1.プロジェクト作成

f:id:chivsp:20191023233746p:plain
まず、Xcodeを立ち上げて、「Create a New Xcode Project」をクリック。

f:id:chivsp:20191023235825p:plain
アプリで使うテンプレートを選びます。
今回は、簡単なアプリを作るので、真っ白な画面だけが用意される「Single View app」を選択し「Next」をクリック。

f:id:chivsp:20191024032528p:plain
プロジェクトの名前などを入力します。
ProductName:アプリの名前
OrganizationName:アプリを作る人の名前
OrganizationIdentifier:アプリを作る人のID(※適当で大丈夫ですが、アプリをリリースして売ったりする際は、他の人と被らないようにしないといけないです。)
Language:objective-cを選択
入力できたら、「Next」をクリック。

f:id:chivsp:20191024032729p:plain
プロジェクトの保存先を選び、「create」をクリック。

f:id:chivsp:20191024032810p:plain
すると、プロジェクトが作成されます。

2.Main.storyboard

f:id:chivsp:20191024032937p:plain
次に、左側の一覧にある「Main.storyboard」を選択します。
すると、中央に白い枠が出てきます。これはアプリを起動した際に開かれる画面で、どういうものを配置するのかを決めていきます。
今回は雪を降らせるので、白い背景では雪が映らないため背景を作っていきます。

f:id:chivsp:20191024034720p:plain
白い枠をクリックし、赤枠で囲ったところを選択すると、画面の背景色を指定できるので、それっぽい色に変更します。

f:id:chivsp:20191024035700p:plain
画面的に寂しいので、下に人を配置します。

f:id:chivsp:20191024040506p:plain
「Image View」を選択し、中央の枠にドラッグ&ドロップします。

f:id:chivsp:20191024041457p:plain
人の画像ファイルを直接ドラッグ&ドロップします。
すると、ポップアップが出てくるので「Finish」をクリック。
(一緒に雪の画像も追加しておきます。)

f:id:chivsp:20191024041503p:plain
無事画像が取り込まれました。

f:id:chivsp:20191024041814p:plain
Main.storyboardに戻り、先ほど設置した「Image View」の枠をクリックし、右上の「Image」に追加した画像が表示されているので選択します。

f:id:chivsp:20191024042207p:plain
これで、Main.storyboardでの作業は終了です。

3.ViewController

ViewControllerは表示される画面に色々な制御を加えるものです。
今回でいうと、雪の降るスピードや数などを制御しています。
ViewController.mに以下のコードを書いてみてください。

@interface ViewController ()
{
int snowCount;
double snowSpeed;
NSMutableArray *snowArray;
NSTimer *timer;
}
@end

@implementation ViewController

  • (void)viewDidLoad {

[super viewDidLoad];

snowCount = 0;
snowSpeed = 0.8;
snowArray = [NSMutableArray new];

timer = [NSTimer scheduledTimerWithTimeInterval:0.01
target:self
selector:@selector(snowFall)
userInfo:nil
repeats:YES];
}

  • (void)snowFall

{
if (snowCount >= 20) {
[self fall];
snowCount = 0;
}
snowCount++;

for (int i=0; i<[snowArray count]; i++) {
UIImageView *imageView = snowArray[i];
int randx = arc4random()%2;
imageView.center = CGPointMake(imageView.center.x+randx,
imageView.center.y+snowSpeed);

if (imageView.center.y > self.view.frame.size.height) {
[imageView removeFromSuperview];
[snowArray removeObject:imageView];
}
}
}

  • (void)fall

{
UIImageView *snowimageView = [UIImageView new];
snowimageView.image = [UIImage imageNamed:@"snow.png"
int randH = arc4random()%10;
int randT = arc4random()%10;
if (randH <=5) {randH = 10;}
if (randT <=5) {randT = 10;}
snowimageView.frame = CGRectMake(0, 0, randH, randT);
int rand = arc4random()%320;
snowimageView.center = CGPointMake(rand, -5)
[self.view addSubview:snowimageView];
[snowArray addObject:snowimageView];

}

  • (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end

赤で「雪の降るスピード」
水色で「雪の降る間隔」
青で「雪の画像」
緑で「雪のx座標、y座標、幅、高さ」
などを指定しています。

4.実行

f:id:chivsp:20191024055754p:plain
左上の実行ボタンをクリックして、アプリを起動させてみましょう。
右側を選択すると、どの端末で起動するか選べます。iPhoneiPadを持っていたらUSBで繋げば実機に作成したアプリをインストールすることができます。

完成!

f:id:chivsp:20191024061935g:plain
無事雪を降らせることができました!
「3.ViewController」で色付けした箇所をいじって暴風雪にしたり、石を降らせたりしてみて遊んでみてください!

次回また機会があれば、Xcodeの機能やobjective-cの文法などを書ければと思います。