日本一わかりやすいiPhoneプログラミング入門解説2巻〜レイアウト編〜

アプリを作ってみたいがどうすればいいか分からない。

そんな人のためにこんな感じでアプリ作るんだよ〜というのを解説します。

アプリ開発の壁を熟知したゴミプログラマーの僕が初心者の視点に立って分かりやすく解説することを心がけます。

今回は前回の準備編の続きということで、早速iPhoneアプリを作っていきたいと思います。

そして今回はアプリの画面を作っていきます。

ポチポチとボタンを配置したり、画面と画面をつなぎ合わせたりと、プログラミングのイメージとはだいぶ違って楽しい作業だと思います。

ボタンを配置する

まずはアプリのレイアウトを作成するための画面を開きます。

Xcodeが開かれた状態で、下の画像の赤枠の「Main.storyboard」と書かれた項目をクリックしてください。

すると次のような画面に切り替わると思います。

このiPhoneのような形をしたスペース。

そう、ここでアプリのレイアウトを作成していくのです。

ここにポチポチとボタンやら何やらを置いていくだけです。やってみましょう。

まず下の画像の赤枠の部分をクリックしてください。一番右下の部分です。

薄い字でFilterと書かれていますが、ここにButtonと入力してみましょう。

すると以下のようにボタンが絞り込まれると思います。

次に一番上のシンプルに「Button」と書かれた項目を、左上のiPhoneの形をしたスペースにドラッグ&ドロップしてみましょう。

するとこんな感じになるのではないでしょうか。

これでボタンの配置は完了です。

これだけで実際にアプリ上にボタンが配置されます。

ポチポチするだけで全然難しくないでしょう？

では一旦試しにアプリを動かしてみましょう。

まず下の画像の①をクリックし、アプリを動かすiPhoneを決めます。

iPhoneの種類の一覧がプルダウンで表示されると思うのですが、今回はiPhone8を選択しましょう。

iPhone8を選択した後は上の画像の②をクリックします。

すると、アプリを実行するためにiPhone8の画面が立ち上がってきます。

ここで少し待ちましょう。

少し待つと、このような感じでiPhoneの画面が表示されるのではないでしょうか。

そう、この画面に表示されているのは、あなたが作ったものです。

これでiPhoneアプリの動作確認ができました。

いい感じですね。

この調子で一つ一つ覚えていけば、一つのアプリを完成させるまでそんなに遠くはありません。

さて、プログラミングと言えば、コードです。

よく映画でスパイがコンピューターに向かってカチャカチャやってるアレです。

次回はそのコードを少し書いてみたいと思います。

コードは魔法の呪文なので、最初見ただけでは意味があまり分からないと思いますが、この魔法を唱えることでアプリが自在に動きます。

というワケで、次回はコードの魔法を体験してみましょう。