はじめてのiOSアプリ開発

プロジェクトを作って、ラベルとボタンを配置しよう

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
新しいプロジェクトを作成して、ゲームに必要なユーザインタフェースの部品を配置していきましょう。
講師:
10:12

字幕

このレッスンでは 新しいプロジェクトを作成して ゲームに必要なユーザーインターフェイスの 部品を配置していきましょう それではプロジェクトの作成から 行います Xcode のメニューから 「 File」「 New 」 そして「 Project... 」と選択します そして テンプレートの選択画面で 「 iOS 」の「 Application 」 そして「 Single View Application 」を 選択しておきます それでは「 Next 」ボタンを押して 次の画面に行きましょう 次の画面では アプリケーションの設定を行います まず「 Product Name 」の所には アプリケーションの名前を入力します ここでは「 Add Fire」という 名前にしておきましょう この様に 自分が ゲームの内容を 想像しやすいような名前に しておくのが良いと思います 次の「 Organization Name 」の所には 自分の名前をローマ字で 入力しておきます ここには皆さんの名前を入力してください その次の 「 Organization Identifier 」の所には 「 mytest 」と入力しておきます その下の「 Language 」の所は 「 Objective-C 」 「 Devices 」の所には 「 iPhone 」を選択してください そして 右下の「 Next 」ボタンを押して プロジェクトの作成を完了させます 今回は デスクトップの上に このプロジェクトを 作成したいと思いますので 「デスクトップ」フォルダを選択したら 右下の「 Create 」ボタンを押します 以上で プロジェクトの作成が 完成しました それでは このプロジェクトに ゲームに必要な ユーザーインターフェイスの部品を 追加していきましょう 「 Main.storyboard 」というファイルを 選択してください このファイルを選択すると iPhone の画面が表示されます この iPhone の画面の上に 必要なユーザーインターフェイスの 部品を追加していきます 今回は こちらにイメージがあります この様に 「5 + 10 」の様に 足し算を行うためのラベルが 1つ 2つ 3つ そして 何回正解したか というラベルが 上の方に1つあります この様に4つのラベルと それから 時間制限を表すための 「 Progress View 」 これが真ん中に1つ そして 正解を選択するためのボタンが 左と右に2つある状態ですので この様な部品を まず 追加します この画面の中で 一番真ん中に来るのが Progress View ですので Progress View を 真ん中に追加しましょう 「 Progress View 」は上の方から 少し下にいったところにあります これをドラッグ & ドロップで 追加して 横方向に広げておきます 横方向のこのサイズは目分量です 広げておいて 画面の中央にドラッグして 丁度中央に来たところで この青い点線が 縦と横に 表示されるようになります では次に 足し算のための ラベルを追加しましょう この「 Label (ラベル)」を ドラッグ & ドロップで追加して 少しサイズを調整した後 この右上の所にある 「 Attribute inspector 」で このラベルの見た目を調整します まず 中央寄せになるように 「 Alignment 」を中央に フォントを少し太くなるように 「 System Bold 」のフォントにして 「 Size (サイズ)」を ちょっと上げておきましょう これくらいですか? 34 くらい そして このラベルの中身は ラベルをダブルクリックすると 編集できるので 全角で「+」と入力しておきます そうすると この様に 「+」のラベルが用意できました もう少し小さくしておきましょう そして この画面の横方向の中央に 表示されるように 位置を調整しておきます その次に また「 Label 」を追加して 今度は左側の 値が表示されるラベルを用意します これも大きさを調整します このラベルは数字を 表示するためのラベルですので まず 数字を入力して 数字が表示された時の感じを 確認しやすいようにしておきます これも System Bold の フォントにするために 「 Font 」のボタンをクリックして このボタンから「 System Bold 」 今回は「+」よりも 大きめにいけると思いますので 70 もう少し小さいほうが良いですか? 60 55 これ位にしましょう 「 55 」 の「 Size (サイズ)」にして 「 Done 」ボタンを押します そして 真ん中に寄せられるように この「 Alignment 」の所で「中央寄せ」を 選択しておきましょう そして 少しサイズを調整します 今「+」ボタンよりも 上の方に表示されていますので 下の方にドラッグして この「+」と丁度 下の位置が合っている所まで ドラッグします 今 丁度 下の位置が合った所で 青い点線が表示されていますので ここで離します 次に右のラベルも 用意しなければいけません 右のラベルは 「 99 」と表示されている 左側の数値ラベルを オプションキーを押しながら ドラッグ & ドロップすることで 複製することができます こうすることで 簡単に 同じ様なラベルを もう1つ用意できますので 簡単に同じ様な部品を 追加することができます これで 「 99 」「+」「 99 」が 表示されるようになりましたので 更にこの上にラベルを もう1つ追加しましょう 今度はカウントを表示するためのラベルです これを真ん中に追加して 今度は「 Font (フォント)」を太めにして 「 System Bold 」で 今度は「 19 」ぐらいで良いと思います 小さめで ラベルの中身も「 99 」 数字を表示しますから 何か数字を入力しておいて 中央寄せになるように「 Alignment 」を センターにしておきます 今回 カウントのための部分は 「何々+何々」という このメインの問題表示の所よりも 少し目立たないように しておきたいと思いますので サイズを小さくしただけではなくて 背景をポップな色にしておきます この「 View 」の所まで 「 Attribute inspector 」をスクロールして 「 Background (バックグラウンド)」のカラーに ちょっと明るめの青 この色を選択しておきます そして この色を選択したら ラベルの色を明るくしても 見やすくなりますので 上のラベルのカラーを白にします こうすることで ユーザーに 全然 注目させることなく 情報を提示するラベルが用意できます では 最後に同じ様にして ボタンを用意しておきましょう 「 Button (ボタン)」を ドラッグ & ドロップで追加します このボタンはある程度 大きめにしておいた方が 押しやすくなりますので これを「 99 」の下に持ってきて あまり縦長になると 格好が悪いと思いますので こうやってサイズ調整をしながら 今度は このボタンの背景色を 先ほどのラベルと同じ様に 背景色( Background )の色を 緑っぽくしてみたいと思います 緑はあまり明るすぎても 鮮やかすぎるので 色を落とす感じにして そして ボタンの上の方の設定で 「 Text Color 」がありますので この「 Text Color 」に 「 White Color 」を選択して 白にしておきます そして この「 Font 」を変更して 「 System Bold 」の 「 Size 」もこのラベルと 同じぐらいにしましょうか? さっき 55 を指定しましたので 「 55 」を指定して この「 Title 」も 「 99 」にしておきたいと思います ちょっと大きすぎますか? もうちょっとフォントのサイズを 下げましょうか? フォントのサイズだけを下げる時には ここの「 Font 」の右端の所にある この上の方や下の方に調整する このボタンを何回か押すと 簡単に調整できます そして これでボタンが作れましたので このボタンをまた オプションキーを押しながら 右の方へドラッグ & ドロップすることで このボタンを複製して これで画面が完成となります このレッスンでは 新しいプロジェクトを作成して ゲームに必要なユーザーインターフェイスの 部品を配置しました

はじめてのiOSアプリ開発

このコースではXcodeを使ったiOS用アプリの開発に必要な基礎知識を学びます。Xcodeの基本的な使い方から本格的なゲーム制作のためのSprite Kitを用いた制作方法まで、カウントダウンタイマーやスピード暗算ゲームなど3つの簡単なiOS用アプリを作りながら説明します。このコースを見れば、本当に必要なアプリ開発の知識を着実に身に付けられるでしょう!

5時間55分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月04日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。