はじめてのiOSアプリ開発

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

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
時間設定の画面からカウントダウンの画面に移動するときに、時間の情報をどのように受け渡すのかを説明します。
講師:
10:16

字幕

このレッスンでは 時間設定の画面から カウントダウンの画面に対して 時間の情報をどのように 受け渡すのかということを説明していきます 現在はカウントダウンタイマーに UIDatePicker というのを用意して 日付の取得のための コントロールを用意しました では ここに対して DatePicker の調整を少し行います このインスペクターの Attribute Inspector を使って まずこの DatePicker のモードが Date and Time になっていますが これをCount Down Timer というモードにしておきます こうする事で カウントダウンが 設定できるといったモードになります これを1回実行しておきますね この状態でカウントダウンタイマーにすると アプリケーションのモードが― このようにカウントダウンの モードに切り替わります この0時間 何分といった こういった設定が できるようになっています 今これはアプリケーションを起動したときに 現在時刻に 合わせるようになっているので そこは後で調整するのですけれども これでカウントダウンタイマーの モードになりました では次に実際にこの UIDatePicker から 何秒に設定されたのかということを 取得するプログラムのコードを 書いてみたいと思います プログラムのコードは Assistant Editor を使って つなげてやります ただし 今この Assistant editor を使っても カウントダウンタイマーの 設定画面に対応するための viewController がありませんので まずは カウントダウンタイマーに対応した viewController を 自分で用意するというところから 始める必要があります では 実際にそこをやってみたいと思います まず ViewController.m と書かれている このファイルを選択して― ここで右クリックを押します 右クリックしたところで New File という項目がありますので メニューから New File を選択して 新しいファイルを追加します そして iOS の Source という中から Cocoa Touch Class と 書かれたファイルを選択します Next ボタンを押して この Subclass of と書かれたところが UIViewController となっていることを 確認した上で 今回 設定のための画面を作りますので ここのClass と書かれたところに SettingViewController と 入力してください SettingViewController の間は スペース等を入れてはいけません SettingViewController すべて空白を入れずに つなげて書きます そして下の方で also create XID file と 書かれているところは 何もチェックは入れずに Language は Objective-C に なっていることを確認したうえで Next ボタンを押します そして次の画面はそのままで 右下の Create ボタンを押してください そうすると これで設定を行うための SettingViewController というのが 新しく作られました そしてこの SettingViewController が 先程の Main.storyboard の この設定画面で使われるようにするために この設定画面の上のあたりを 一度クリックしていただいて― これで viewController を選択します そして このインスペクターの領域を 表示させて このインスペクターの左から3つ目― これまで使いませんでしたが ここに Custom Class というのが 設定できるようになっています この Custom Class というところに 今作ったばかりの SettingViewController このクラスの一番右側のところを こうやってクリックすると SettingViewController が 選択できるようになっていますので この SettingViewController を ここで選択します これで このカウントダウンタイマーの 設定を行うためのプログラムを SettingViewController で書くことが できるようになりました ではもう一度 このインスペクターの領域を消して そして Assistant Editor を 表示してみたいと思います 現在は Manual というモードに なっているので ViewController が表示されていますけど この Manual というところを Automatic に変えて SettingViewController.m を選択すると これで今まで ViewController に対して カウントダウンタイマーの設定を 行っていたのと同じように 右と左の画面でdatePicker を つなげることができるようになりました それではここで datePicker を 操作するために この datePicker を右クリックで選択して あるいは Ctrl + 左クリックでも構いません 選択して頂いて SettingViewController に足を延ばします そして名前はそのまま datePicker でいいと思います 小文字で date そして P を大文字にして Picker と入力しておきます では Connect ボタンを押して Outlet を作成しましょう これでこの datePicker を操作するための datePicker 変数が出来上がりました ではこの datePicker を使って 操作していきたいと思います SettingViewController.m を 見てください SettingViewController のところで まずこの datePicker ですね 起動したときに現在時刻が 表示されるようになっていますので 私の手元では 現在 23:02 になっているんですが アプリケーションを実行すると― そのまま 23:02 というのが 時間がカウントダウンに 反映されるようになっていますので これではちょっと しんどいということで 使えないという事で ここの SettingViewController のところ まず SettingViewController の ViewDidLoad のところに Self.datePicker に対して setCountDownDuration 何秒のカウントダウンにしますかという事を あらかじめここでセットしておきます ここでは5分ぐらいの カウントダウンをセットしておくのが 分かりやすいんじゃないかと思いますので 5分というのは秒数にすると 300 秒ですから 300.0 秒のカウントダウンに してくださいという事を まず最初にここでセットしておきます 一度これで実行してみましょう そうするとここで 5分間の設定になるように なった事が分かります では 次にこのアプリケーションの カウントダウンボタンが カウントダウン開始ボタンが押された時に カウントダウン画面に 移るようにしたいと思います では Main.storyboard に戻っていただいて 次はこのカウントダウン開始ボタンの 動作を書きます ここの画面の書き方は 一番面白い所なのですが このカウントダウンの この設定画面と それからカウント画面を 並べて置いていただいて 左右に画面が2つ並ぶようにします これまでやってきたのと同じように このカウントダウン開始ボタンを 右クリックかあるいは Ctrl キーを 押しながらの左クリックで選択しながら これを右方向にある この 99:99 と書かれた― カウントダウンの画面に持って行きます この状態でボタンを離しますと ここに Action Segue と書かれた これは セグウェイと読みます Action Segue と書かれた メニューが出てきます ここで どれを使っても それなりに実装できるのですが 今回は ここに Present modally という 上から3つ目にあるのを 使ってみたいと思います 上から3つ目の Present modally というのをここで こうやって使うと ちょっと画面を離しますけど これでこういう風な 矢印がのびて このカウントダウン開始の ボタンが押されたときに この 右側にある ViewController が― 表示されるようになったという事が 矢印で表示されるようになります 実際にこれで― カウントダウン開始ボタンが 有効になったということを 確認したいと思います アプリケーションを実行します そうすると ここに5分の設定が できるようになった datePicker がありますけれども カウントダウン開始ボタンを押しますと このようにカウントダウンの 画面に移り変わりました まだ 10 秒のカウントダウンを 行うようになっているところは そのままですので この5分間のカウントダウン時間というのは まだ伝わっていない状態ですけれども これはこれから実装していきたいと思います このレッスンでは datePicker の設定を行いました そしてカウントダウン 開始ボタンが押された時に カウントダウンの画面に 移るという所を実装しました

はじめてのiOSアプリ開発

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

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

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

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

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