初心者から始める診断系アプリの作り方（1/5）

こんにちは。

今回から3回（全5つの動画となります）に分けて、

iOSアプリの作り方について解説していきたいと思います。 

今回作るのは、診断アプリですね。

 

まず皆さま、Xcodeを起動しましょう。

Xcodeが起動しましたね。

それでは、「File」の「New」の「Project」を選びます。

 

アプリを作るときは、基本的に1つのアプリに対して、

1つのプロジェクトが必要になります。

 

ここで、「Single View Application」を選択してください。

「Next」を押します。

ここで、Product Nameを聞かれますので、

今回作るのは、「お笑い診断」というアプリですね。

診断をすると、あなたがどの程度面白いのか、

ということを診断してくれるアプリを作っていきます。

 

ProductNameは、「OwaraiShindan」としましょう。

OrganizationNameは、個人名か、会社名を入力します。

OrganizationIdentifierは、個人か会社を識別するものを入れましょう。

OrganizationIdentifierは、特に必要がなければ入れなくてもかまいません。

Languageは、「Objective-C」かSwiftが選べるのですけども、

今回は「Swift」を選んでください。

Deviceは、この3つ（iPad、iPhone、Universal）の中から、「iPhone」を選んでください。

Use Core Dataには、チェックを入れないでください。

 

Nextをタップして、次の画面にいきましょう。

Desktopを選択して、Createを押してください。

そうすると、このような画面になります。

これが、プロジェクトが立ち上がった状態ですね。

 

ここから、まず最初に、iPhoneの画面を作っていきたいと思います。

Main.Storyboardを左側から選んでください。

ストーリーボードは基本的にiPhoneの画面あるいはUI/UXを作るために用います。

 

ここの、Use AutoLayoutとUse Size Classesという選択肢が、

6つあるアイコンのうちの一番左を選択すると、

このような選択肢があります。

AutoLayoutというのは、今回初めてアプリを開発される方には難しいので、

今回はチェックを外して進めたいと思います。

AutoLayoutというのは、簡単ではないのですが、異なる画面サイズに対応するのが楽になるのですが、

最初はとっつきづらいので、今回は使わずにやります。チェックを外しましょう。

Disable Size Classesと聞かれますが、これをクリックして、

Size Classesという機能、これも無効にしましょう。

そうすると、この画面が、iPhone5もしくは、iPhone5sの画面になりますので、

この画面上に、様々なパーツを配置して、画面を作っていきたいと思います。

 

まず、アプリのタイトル画面から作りましょう。

そのために必要なのが、タイトルの画像ですね。

今回は、事前にタイトル画像を用意しておきました。

これを、アプリに取り込みたいと思います。

タイトル画像を用意できる方は、お手元に用意してください。

タイトル画像を、ドラッグアンドドロップでプロジェクトに入れておくと、

このように、いくつか質問がされます。

「Copy items if needed」にチェック

「Create Groups」にチェック

「OwaraiShindan」にチェック

がされていることを確認し、「Finish」をクリックしてください。

Finishをクリックすると、このような画面になります。

 

ではまず、最初のタイトル画面のデザインから始めていきましょう。

まずこのタイトル画面をクリックします。

この右に、インスペクターというエリアがあるのですが、

この、右から3番目のここをクリックしてください。

 

Backgroundと書かれた箇所があるので、

ここを、WhiteColorではなくて、お好きな色を選択しましょう。

そうすると、この画面の背景色を変えることができます。

 

次に、先ほどプロジェクトに取り込んだ画像を画面に表示させていきましょう。

右下の、このライブラリーペインと言うんですけども、

これをスクロールすると、ヤシの木の画像が表示されているアイコンがありますので、

これを、タイトル画面にドラッグアンドドロップしていきましょう。

それで、このイメージビューのサイズを調整した後、

右上のここの、Imageのところで、読み込んだ「logo.png」を選択しましょう。

そうすると、この画像が表示されます。

ただ、この段階では、ちょっと縦に長いですね。

ですので、縦横比を綺麗にするためには、

ここで、Modeのところで、「Scale to Fill」ではなくて、「Aspect Fit」を選択します。

そうすると、縦横比が、正しく表示されます。

 

次に、次の画面に進むためのボタンを配置していきましょう。

まず、画面にボタンを配置していきます。

この、Buttonというものがありますね。これを、ドラッグアンドドロップして画面に配置していきます。

で、このボタンをちょっといじりますね。

このように、ちょっと広げて、文字色を白にしましょう。White Colorにして、

この、ボタンの背景色をちょっと変えていきましょう。

Background Colorを、このような色にしていきましょう。

文字の大きさとか、見た目とかを整えましょうか。

StyleをRegularじゃなくて、Mediumにして、

Sizeを25くらいにしましょう。

Buttonを、「すた〜と」という表示に変えましょう。

ちょっと、横に長かったので途切れてしまいましたね。

初期状態のフォントが変ですので、フォントの種類も変えましょう。

Systemじゃなくて、Customを選択して、

Familyのところを、ヒラギノ角ゴシックにしましょう。

で、スタートボタンができました。

このボタンを押すと、診断が始まるようにします。

 

今回の診断は、全8問の問題を設けたいと思います。

それぞれの問題に関して、4択の選択肢があるようにしていきます。

 

それでは、その画面を作っていきます・・・

 

・

・

・

 

次の動画に続く・・・

 

To be Continued

Tekuruプログラミングスクールでは、

動画だけでは伝わりきらない、アプリ開発の楽しさや、

気軽に質問できる雰囲気で、プログラミングを学ぶことができます。

もっと深く、プログラミングを理解したい方は、ぜひ無料体験にお越しください。