手順2:画面繊維させよう!超簡単なアプリを作成してXcodeに慣れよう!前回の講座で作成したプロジェクト『practice』で超簡単なアプリを作成しようと思います。サトリクこんな感じのを作成します進むボタンを押したら次の画面に遷移し、戻るボタンを押したら前の画面に戻るアプリ単純で簡単なアプリですが、基本操作を覚えるにはこのくらいのアプリでちょうどいいです。画面1はあらかじめ作成されているので、まずは、画面2を作成しましょう。Main.storyboardを選択しましょう。項目がない場合は、以下の2つの事象が考えられます。1でナビゲーターエリアを表示する。解決方法:プロジェクトを作成し直す。Controllerを配置1右上の+ボタンを押し、Objectsウィンドウを表示します。Lだぜ!コマンドマン2ViewContorollerを見つけたら上記の画像のようにドラッグ&ドロップしましょうこんな感じになっていれば成功です。先ほどと同じ手順で、次はボタンを配置しましょう。ボタンを配置したら、ボタン名を「進む」に変更しましょうbuttonをダブルクリックすると名前を変更できます。今度は、画面2にボタンを配置します。一回同じ手順で、配置してもいいのですが、それじゃめんどくさいので、先ほど配置した進むボタンを画面2に複製しましょう。やり方は簡単で、進むボタンにカーソルを合わせて、optionを押しながら画面2にドラッグ&ドロップするだけです。画面2にボタンが配置されたら、名前を「戻る」に変更しましょう。STEP.5ボタンの文字の大きさを変更ボタンが少し小さいので、ボタンの大きさを大きくしましょう。以下の作業で、画面1、画面2のボタンの大きさを変更しましょう。1ボタンをクリックし、選択します。完了こんな感じに、2つの画面にボタンが配置されたら成功!サトリク次は、ボタンが押されたら画面繊維するようにしてみましょう!手順2:画面繊維させよう!サトリク画面繊維は、基本中の基本なので、しっかりと覚えておきましょう。STEP.1画面1から画面2へ繊維まずは、画面1から画面2へ繊維するプログラムを作ります。進むボタンにカーソルを合わせてcontrolを押しながら画面2にドラッグ&ドロップします。すると、左のようなウィンドウが出てきます。Modallyを選択しましょう。画面と画面の間にこのような矢印ができていたら成功です。この矢印は、segue(セグエ)と言います。Xcodeではよく出てくる用語なのでしっかりと覚えましょう。STEP.2実行して確認しっかりと画面繊維されているか確認しましょう。左側の実行端末がiPhoneになっていることを確認し、再生ボタンを押しましょう。rだぜ!コマンドマン実行すると、シュミレーター(Simulator)が開くきます。起動に少し時間が掛かるので落ち着いて待ちましょう。進むボタンを押すと画面2に切り替わることを確認してください。今の状態だと、戻るボタンは何も反応しません。次は、戻るボタンを押すと画面1に戻るようにします。戻るボタンようのプログラムファイルを用意します。左上バーのFile→New→File...を選択しましょう。nだぜ!コマンドマン次に、ファイルのテンプレを選択します。Classを選択してNextをクリックしましょう。次は、クラスの名前をつけます。今回は、戻るボタンのクラスなので、>BackViewControllerという名前にします。続いて、ファイルを作成する場所を選択します。プロジェクトがpracticeになっていることを確認し、Nextをクリックしましょう。作成した画面(画面2)と、作成したファイル(BackViewController)を連携させます。構造としては、1つの画面に1つのファイルがあるイメージです。サトリク現在の構造としてはこんな感じです。画面1は、最初からViewControllerに連携されています。今回作成した画面2はまだファイルに連携されていないので、自分で連携させないといけません。やり方は簡単で、Main.storyboardを選択し、画面2のViewControllerを選択し、classをBackViewControllerにするだけです。次は、先ほど作成したファイルに戻るボタンを押された時、画面1に戻る命令をします。画面が狭いので、見やすくするために、一旦他のウィンドウを非表示にします。右上にこのようなウィンドウを表示非表示できるボタンがあります。ここを全て白色(非表示)にしておきましょう。0で一瞬で非表示にして書きます。覚えておいたほうが絶対いいショートカットキーの1つですね。controlを押しながらenterを押します。すると以下の画像のように、右側にコードの画面が出てきます。表示したいのは、このファイルではなく先ほど作成したBackViewControllerなので、コードをBackViewControllerに切り替えます。右上の「<」を押してBacViewControllerを表示させましょう。続いて、ボタンとファイルを連携します。戻るボタンにカーソルを合わせて、controlを押しながら17行目と18行目の間にドラッグ&ドロップします。すると、小さなウィンドウが立ち上がるので、NameをbackBtnと記入してConnectを押します。Connectを押すと、ファイルにこのようなコードが追加されます。{}このコードを以下のように変更しましょう。nil)}このように記述したら完成です!実行してみましょう。rで実行してみてください。成功していれば、進むを押すと、画面2に進み、戻るを押すと、画面1に戻るはずです。完了お疲れ様でした!これで超簡単なアプリが完成しました!今までやってきたのは、超基本的な作業なので、慣れるまで繰り返しやってみてもいいかもしれません。サトリク僕はこの作業を3分以内でできるまで繰り返しました。今では、2分20秒くらいでできます。コメントをキャンセルメールアドレスが公開されることはありません。サトリク21歳のエンジニアです。仕事終わってから1人で淡々とブログを書いています。目標は、このブログを自慢できるほどのコンテンツに仕上げることです。自分が買ったモノの紹介はこちらのブログで紹介しています。