はじめてのiOSアプリ開発

時間設定の画面を作ってみよう(その1)

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Storyboardを使って、カウントダウンの時間を設定するための画面を追加します。
講師:
11:00

字幕

このレッスンでは Storyboard という機能を使って カウントダウンの時間を 設定するための画面を追加したいと思います それでは作業をしていきましょう 現在は カウントダウンタイマーの機能として 10 秒固定で アプリケーションが起動した時に 「 10 」という数字を表示して カウントダウンしていくだけに なっていますから 今回はこれに対して ユーザーインターフェイスを用意して ユーザーに分かりやすく時間を設定する という部分を作りたいと思います その為の機能を ここに追加していくのですけれども 今 用意しているタイマーの 「 99:99 」と書かれたこの画面は このままにしておきます この右上のユーティリティの領域を 表示します このボタンを押して表示して このボタンの上の所に 黄色い こういう部品が 並んでいるのが分かると思うのですけれど この黄色い部品は全て View Controller と 呼ばれるものになります View Controller は何物か と言いますと 画面を表すものなんですね この View Controller を ドラッグ & ドロップで これまで ラベルとかボタンとかは ドラッグ & ドロップして この画面に直接 追加するという形で 使っていましたけれども この View Controller というものは 画面上ではなく 画面の外のところに追加して 新しい画面を作るために 用意されている部品になります 今回は設定画面を カウントダウンのタイマー画面とは 別に用意したいと思いますので ここにある View Controller を使って 新しい画面を作ります この新しい画面なんですけど ここの中でも一番左上にある 最初にある View Controller もうそのまま 何もない シンプルな View Controller を 使いたいと思いますので この View Controller を選んで 「 99:99 」とかかれた画面の 左側の所に 新しい画面が来るようにして 今 スクロールしました ここに View Controller を 新しく追加したいと思います こうすることによって 現在 アプリケーションで 利用できる画面が この「 99:99 」のこの画面と それからこの設定用の画面と 2つ用意されました 今 インスペクターの領域を 見ていただきますと この追加したばかりの View Controller が選択された状態に なっているのですけれど この View Controller が 選択された状態で ここの「 Attribute inspector 」を 見ていただきますと そこの上から2つ目の項目の所に View Controller が設定できるような 項目があります ここに「 Is Initial View Controller 」と 書いてある チェックボックスがあるのが 分かると思うのですけれど このチェックボックスを チェックしておくことによって 「アプリケーションが起動した時に どっちの画面が最初に使われるのか」を 指定できるようになっています 「 Is Initial View Controller 」を チェックした時に ビューの左側に 矢印が入ったのがわかりますか? 「 Is Initial View Controller 」を チェックして 「ここからアプリケーションの実行が 始まるんですよ」と矢印が付くと これで アプリケーションの起動時に 表示される画面が決定されます 一度 アプリケーションを実行してみます さっきまでカウントダウンの画面が 表示されていたと思いますけど この新しい画面を追加したことによって アプリケーションを起動した時に この真っ白な画面から 開始されることになります では 次に こうして追加した新しい画面に コントロールを2つ追加したいと思います 今度は この部品の中からこの中に 今まで通りに 追加していきたいと思うんですけれども 今回使用するのはまず 時間を取得するということで Date Picker というものを使います Date Picker は 「 Date 」という名前ですので これを検索すると そのままここに 「 Date Picker 」が現れます この Date Picker は名前の通り 日付を取得したり あるいは日付と時刻を取得したりできる部品です これをドラッグ & ドロップで 画面の中央にくるように 追加します 今 青い点線が 「ガイド」というラインですけれども 「ガイド」の点線が 表示されているので 画面の中央にピッタリと 合わさっていることが分かりますので これで指を放して 部品を追加します これで Date Picker を 1つ追加しました そして この下に 今度は 「カウントダウンを開始してください」 と言う「開始」ボタンも 用意しておきたいので 開始のためのボタンを さらにこの下に追加します ボタンをドラッグ & ドロップで 追加します ちょっと下辺りに これあんまり「 Date Picker 」のすぐ下に くっつけてしまうと 押しにくくなると思いますので ちょっと離して ボタンのサイズも ちょっと大きくしておきましょう そして「 Attribute Inspector 」を使って このボタンのタイトルを 「カウントダウン開始」という名前のボタンにして サイズを更に調整します この様に調整したら これでユーザーインターフェイスが 完成となります 一応 現在このアプリケーションが カウントダウンタイマーだということが 分かりやすくするように ここにラベルを1つ追加しておきましょう このラベルを使って これがカウントダウンタイマーだと 分かるように 「カウントダウンタイマー」 こうやって書いて 真ん中に来るようにして もうちょっとサイズを 増やしておきましょう 「カウントダウンタイマー」の このラベルを 大きく表示しておきます もう少し小さくてもいいですかね? これくらいにして この「 Date Picker 」の ちょっと上の所に表示するようにします これでユーザーインターフェイスが 完成しました では このユーザーインターフェイスに対して 先ほどのタイマーの カウントダウンの画面に やったのと同じように 制約を追加していきます この「 Date Picker 」 ですけれど 「 Date Picker 」の高さは 固定になりますので まず 高さを固定するために 「 Height 」というチェックボックスに チェックを入れます そして 上の「 Constrain to margins 」の チェックを外して ここの「0」「0」になった 左端と右端がくっ付くようにしておいて これで 縦の高さと 左端と右端がくっ付くようにした 制約を追加します 今度は「 Pin 」ではなくて 「 Align 」のこちらのボタンを押して この「 Date Picker 」に対して 縦方向に中央に配置される様にする 「 Vertical Center in Container 」 という この一番下にある チェックボックスを追加します これで画面の縦方向に 「 Date Picker 」が 配置される様になります そして「 Add 1 Constraint 」 このボタンを押して これで「 Date Picker 」が 追加されました 残っている 「カウントダウンタイマー」の このラベルと 「カウントダウン開始」に対しても 同じ様に 「 Width 」と「 Height 」は固定 縦方向と横方向のサイズですね これは固定にします こちらの「カウントダウンタイマー」の方も 「 Width 」と「 Height 」を固定 そして 両方とも画面の中央に 表示してほしいので 「 Align 」を使って 「カウントダウン開始」の方は 横方向に 「 Horizontal Center 」 中央に表示されるようにして 「カウントダウンタイマー」の方も 横方向に「 Horizontal Center 」 これで中央に表示されるようにして そして 最後この 「カウントダウン開始」のボタンは 「 Date Picker 」のすぐ下に 表示されるようにしたいと思いますので これは今までやってきた 制約の作り方とは違うのですけれども 「カウントダウン開始」のボタンから 右クリックしながら あるいはコントロールキーを押しながら 左ボタンを押しながら 「 UIDate Picker 」 の所に 足を延ばして この「カウントダウン開始」のボタンは 「 UIDate Picker 」 に対して 「 Vertical Spacing 」という 設定項目があるんですけれども 上方向のサイズを「 Date Picker 」 に 合わせますという制約を 「 Vertical Spacing 」を クリックすることによって 追加できます では 追加しましょう 追加しました これで「カウントダウン開始」の ボタンの周りには 全て青い線が表示されて 問題なくレイアウト出来るように なったことが分かります 同じ様に「カウントダウンタイマー」の ラベルからも 「 Date Picker 」 に足を延ばして 「 Vertical Spacing 」 縦方向のサイズを 「 Date Picker 」 に合わせる という風にして これで問題なく レイアウトされるようにしておきます それでは一度アプリケーションを実行して 確認しておきましょう この様にアプリケーションが起動した時に 「カウントダウンタイマー」の ラベルが表示され 「 Date Picker 」 が表示され 「カウントダウン開始」と 表示されるようになりました このレッスンでは カウントダウンの設定をするための 設定画面を追加しました

はじめてのiOSアプリ開発

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

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

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

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

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