はじめてのiOSアプリ開発

カウントダウンの基本部分を作ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
新しいプロジェクトを作成して、カウントダウンタイマーの基本の見た目を作っていきます。
講師:
07:37

字幕

このレッスンでは カウントダウンタイマー用の 新しいプロジェクトを作成して カウントダウンタイマーの基本的な 見た目の部分を作っていきたいと思います それでは まずプロジェクトを 作成していきましょう Xcode の 「 File 」メニューから「 New 」 そして「 Project... 」と選択していきます そして プロジェクトの テンプレート選択画面から 「 IOS 」「 Application 」 そして 「Single View Applicaton 」と 選択して 右下の「 Next 」ボタンを押します そして 次の画面では アプリケーションの情報を入力していきます アプリケーションの名前を まず ここの「 Product Name 」の 所に入力しますので ここに「 Countdown Timer 」と 入力します そして その下にある 「 Organization Name 」と 書かれた所には 自分の名前をローマ字で 入力してください 更に その下の 「 Organization Identifier 」と 書かれた所には 「 mytest 」と 小文字で入力しておきます その下の「 Language 」の欄は 「 Objective-C 」 そして 「 Devices 」の欄は 「 iPhone 」が選択されていることを 確認します それでは 右下の 「 Next 」ボタンを押して プロジェクトの作成を完了しましょう プロジェクトの保存先は どこでも良いのですけれども 分かりやすくデスクトップを選択して 「 Create 」ボタンを押します これでプロジェクトが作れました では 一度 アプリケーションを実行して プロジェクトが問題なく 作成できていることを確認しておきます 左上の「実行」ボタンを押します そうすると iPhone の シミュレータが立ち上がって この様にシミュレータ上で アプリが問題なく 起動できたことが分かります それでは 一旦終了させて このアプリケーションの機能を 実装していきましょう それでは この iPhone シミュレータから 終了させるのではなくて 後ろの方に見えている この Xcode の左上にある この四角いアプリケーションの 「停止」ボタンを この「実行停止」ボタンを押して iPhone シミュレータを 終了させるのと同時に Xcode に戻ります まず カウントダウンの基本部分として タイマーが 10 9 8 7 と カウントダウンしていくところの 見た目を作っていきたいと思います 「 Main.storyboard 」をクリックして 開きます 「 Main.storyboard 」と言うのが アプリケーションの見た目の部分を 作っていく部分になります ということで ここに iphone の画面が表示されています ちょっと大きめなので 画面に納まりきれていませんけれども ここに必要な部品を 右側に表示されている 様々なオブジェクトから 選択して 追加していく という形になります ドラッグ & ドロップで どんな部品でも追加できますので 部品をこうやって追加して こんな風に 好きな部品を選んで追加して これが いらなくなったら Delete ボタンを押して消す こんな感じの 本当に簡単な グラフィックのエディタと同じ様な感覚で 使うことができる そういう画面になっています 今回は カウントダウンの 基本部分ですので 大きなラベルを画面中央に ドンッと表示したいと思います では このラベルです テキストを表示するための部品 これがラベルです このラベルを右から ドラッグ & ドロップで 画面の中央に持っていって 離します これで ラベルが 1 つ作成できました ラベルはこの状態だと かなり小さいものになっていますので このサイズ変更のための枠が 周りに出ていますので このサイズ変更のための枠をつまんで 大きめにしておきます この大きく表示した このラベルは フォントがまだ小さいままですので このフォントの調整を行っていきましょう フォントの調整は この 右上の所にあります Attribute Inspector と 呼ばれる部分で行います この右上に表示されている部分は 左の方から File Inspector とか いろんなインスペクターと呼ばれる部分で 調整を行えるようになっているのですが 特に重要なのは この 左から4つ目にある この Attribute Inspector これが とにかくよく使う インスペクター項目です テキストの見た目であるとか テキストをどういう風に配置するとか その他にも機能であるとか そういったいろんなことを 調整することが出来るのが この Attribute Inspector です 今回は まず この― カウントダウンタイマーのテキストを 真ん中に表示するということを してみたいと思いますので この「 Alignment 」 上から 5 つ目の所に書いてある 「 Alignment 」の所に 中央寄せなのか 左寄せなのかを 調整できるボタンがありますから このボタンを 真ん中のものを選んで 「中央寄せ」を選択しておきます それから 上の方の 「 Font 」と書かれた部分で 文字の見た目を調整することができます 「Font 」は右端にある この「 T 」と書かれたボタンを押すことで 細かく調整できるようになっています 現在は細い システム標準のフォントが 選択されているのですけれども これを「 System Bold 」を選択することで もう少し太いフォントになります そして 今 サイズが 17 に なっているのですけれど このサイズをちょっと大きめに 60 くらいにしてみましょう こうやってサイズの設定をして 右下のこの「 Done 」ボタン つまり 「完了」ボタンを押すと この様に ラベルがドンッと 大きくなりました カウントダウンをしていく時には この部分に数字が表示されますので その数字が本当にちゃんと 入り切る大きさなのか― ということを調整するために 今度はこの右上の方にある 「 Text 」の下に 「 Label 」 最初から表示されている文字列の 設定が出来るようになっていますので ここを選択して 「 99:99 」と入力して エンターキーを一回押します そうすると ここに 「 99:99 」という文字列が ちゃんと表示できるように なったことが分かります これでカウントダウンタイマーの 基本的な見た目の部分が 作成できましたので これからのレッスンでは これに対して カウントダウンの実際の機能を 実装していくということを する準備が整いました このレッスンでは プロジェクトの作成 そして カウントダウンタイマーの 基本の見た目の作成を行いました

はじめてのiOSアプリ開発

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

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

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

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

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