レッドカードiPhoneアプリを開発してみようツイートシェアはてブPocket25みなさんこんにちは。前々回と前回でiPhoneアプリの作り方の基本である開発環境を整えるということを行いました。今回から実際にiPhoneアプリを、開発ツールである「Xcode」を用いて実際に作っていきたいと思います。今回はまだプログラムを記述するということは行いません。プログラムを記述する時がきても、80歳の方でもわかるようにお教えするつもりです。安心してください、大丈夫ですよ。今回のゴールは「ボタンを押すとレッドカードを表示できるレッドカードアプリ」を作成することです。最後にXcodeを立ち上げよう新規プロジェクトを立ち上げるそれでは、まずはじめに新規プロジェクトを立ち上げていこうと思います。インストールされてあるXcodeをクリックしてください。project」をクリックします。以下のように初期の設定を行います。Application」を選択し右下のNextをクリックします。Name:プロジェクトの名前になります。任意の名前を設定してください。Name:ご自身の名前をローマ字で入力します。Identifier:ここは「com.任意のローマ字」とします。これはアプリを申請する際に必要になりますが、今回は必要ないので割愛します。Language:使用するプログラミング言語を設定できます。Xcodeでは「Objective-C」と「Swift」という言語で記述が可能となっています。今回はObjective-Cを選択します。Devices:XcodeではiPhone,iPad,またその両方に対応させることができます。こちらは後ほど変更することも可能なので、今回はUniversal(iPhone,iPad両方に対応)に設定して進めます。右下「Next」をクリックして次のページに進み、次に登場する右下の「Create」をクリックします。これでプロジェクトの作成は完了です。アプリの画面を作っていこうStoryboardを用いてパーツを配置してみようさて、Xcodeが無事立ち上がり、新規のプロジェクト「redCardApp」を開発する準備が整いました。Orientation」と書かれた箇所があるかと思います。これはiPhoneやiPadアプリを作る際に、画面を「縦だけに対応されたアプリなのか、横だけか、それとも両方か」などを設定する箇所になります。今回は縦のみに対応したいと思うので、下の2つのチェックを外します。「Portrait」のみにチェックが入っている状態を確認してください。それでは次にいきましょう。次は画面をデザインしていきます。左側に「Main.storyboard」という箇所があるので、そこをクリックします。これは主に画面の遷移図(どのような順番で画面を表示していくかなど)や、パーツ(ボタンやラベルなど)を直感的に置いていく、全体図を見渡せる箇所になります。Main.storyboardは実際に自分でデザインしていくことができるので、デザインしていきましょう。全体を見渡したいので、下の赤い部分をクリックします。すると、よく見渡せるようになったかと思います。次に赤い部分をクリックします。すると右側に「Size」という箇所が出てくるかと思います。ここをクリックして、「iPhone4.7-inch」を選択します。それぞれ画面の大きさには意味があります。下記にその一覧を記述しました。今回は「iPhone6」の大きさに対応したアプリを作成していきたいと思います。iPhone3.5-inch今回のレッドカードアプリは、ボタンを押すとレッドカードを表示するというアプリになるので、画面が2つ必要になります。1つは「ボタンが設置された画面」、2つ目は「ボタンが押された際に遷移する(画面が変わるための)、レッドカードが表示された画面」になります。Storyboardへ画面が2つないといけません。そこで、はじめから用意されている画面のもとへもう1つ画面を追加しましょう。Controller」を左へドラッグ&ドロップします。すると画面が追加されたのがわかるかと思います。はじめから用意されていた画面の上にButtonを追加しましょう。ドラッグ&ドロップで追加できます。それでは、Buttonと書かれたボタンの名前を「OPEN」と変更してみましょう。変更するには、Buttonと書かれたところをダブルクリックします。すると変更できるようになるので、OPENと変更します。次に今回のアプリのメインである、レッドカードを表示する部分を作っていきます。以下のように、画面の赤い部分をクリックします。クリックしたあと、右側に「Background」と記載されたところがあることを確認してください。今は「White」つまり白になっていますが、ここを「Red」つまり赤に変更します。クリックしてください。「Other」をクリックします。様々な変更方法がありますが、赤い部分をクリックします。この中からRedを選択します。Controller」が赤くなったかと思います。次に、先ほど設定したOPENボタンを「押したら」、画面が赤い部分へと遷移する(移動する)ということを行います。クリック)をしたまま赤い画面の部分へドラッグ&ドロップします。すると、左から右へ矢印が出現したかと思います。これは、画面から画面への遷移方向を意味し、今回の場合だと、「Openボタンを押した時、赤い画面へ遷移(移動)する」という意味になります。Modally」を選択します。Modally」を使用します。シミュレーターを立ち上げよう作成したアプリを確認してみようそれでは、実際にアプリを起動してみましょう。左上にiPhone6sPlusと書かれた箇所があると思います。そこをクリックして、iPhone6へと変更します。前半部分でStoryboardの画面の大きさの設定を「iPhpne4.7-inch」に設定したためです。続いて、アプリを実行してみます。左上にある▶ボタンをクリックしてください。以下のようにシミュレーターが立ち上がったら成功です。実際にご自身のiPhone(実機)で試す場合は、Appleの有償プログラムへ登録する必要があります。この方法に関しても後日の記事で詳細に説明します。OPENと書かれたボタンをクリックしてください。?下から赤い画面が出てきたかと思います。おめでとうございます。画面遷移のアニメーション(トランジション)はいくつか事前にようにされています。画面と画面をつないでいる、赤い部分の矢印をクリックしてみてください。右側に「Transition」と書かれた箇所があるかと思います。ここで、画面遷移のアニメーションの仕方を変更することができます。最後にいかがでしたか?このようにiPhoneアプリはデザインを簡単に、かつ直感的に決定することができます。次回は今回のアプリを踏まえて【Xcode】プログラムなしで、カラフルカードアプリを開発してみようを実践してみたいと思います。今回は1回の画面遷移だけでしたが、複数回画面遷移させてみたいと思います。次回もおたのしみに!おすすめ記事【無料あり】本気でオススメしたいプログラミングスクール3つ【実際に受講した】おすすめ記事IT業界に強い転職サイト・転職エージェントのオススメはココ!【比較ランキング】この記事が気に入ったらいいねしよう!最新記事をお届けします。