はじめてのiOSアプリ開発

プロジェクトを作成して、ユーザインタフェースの見た目を作成しよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
カラーエディタのためのプロジェクトを作成し、操作のためのユーザインタフェースを用意します。
講師:
11:57

字幕

このレッスンではカラーエディタのための プロジェクトを作成して 実際に実装を始めていきたいと思います ではまず Xcode を起動して File メニューから New そして Project と選択して プロジェクトの作成を始めます ではまずプロジェクトの種類として iOS のアプリケーションの中から Single Veiw Application を選択します そして右下の Next ボタンを押しましょう 次の画面ではアプリケーションの 名前を入力します Product Name のところに 今回は色のエディタを作りますので ‟Color Editor”と入力します そして Organization Name のところには 自分の名前をローマ字で入力します 皆さんは自分のお名前を ローマ字で入力してください そして下の Organization Identifier と 書かれたところには ‟My Test” と入力しておきます そしてその下の Language と書かれた欄には Objective C が選択されていることを 確認してください さらにその下のDevices のところには iPhone が選択されているようにします それでは右下の Next ボタンを押して プロジェクトの作成を完了しましょう このようにデスクトップのフォルダを選択して Create ボタンを押します このようにプロジェクトが作成できました ではプロジェクトが作成できたので 一度アプリケーションを実行して 現在の見た目を確認しておきたいと思います 左上のビルド実行ボタンを押します iPhone シミュレーターが立ち上がって このようにアプリの起動が行われました 現在はアプリケーションは 特に何も実装していませんので このように白い画面になっています ではこれから この白い画面に アプリケーションの見た目を 追加していきたいと思います では画面の後ろの Xcode の実行停止ボタン この四角いボタンを押しながら iOX のシミュレーターを終了させるのと同時に Xcode に戻ります では見た目を作成するために使用するのが この Main.storyboad と書かれたファイルです こちらを一度クリックして選択してください そうすると画面の上にちょっと 大きいのですけれども iPhone の画面が現れます この iPhone の画面なんですけども 普通に手に取って見ている iPhone の画面よりも だいぶ横長になっていると思うのですが 今の iPhone というのは色んなサイズがあります ちょっと見ていただきますと このように iPhone3 とか4とかで使われていた 横方向の長さが320 縦方向が480ピクセルの 3対4の画面から始まって iPhone5 iPhone6 iPhone6plusと 移り変わるにつれて様々なサイズのiPhoneが 現在使われるようになっています ですので どのサイズの iPhone が 使われていたとしても 自分のアプリケーションが使いやすく レイアウトされていることが重要ですから 先程のように四角い iPhone の画面の上で レイアウトの作業を行うようになっています それでは元のXcodeに戻って 作業を続けましょう ではですね iPhoneの エディタ画面の使い方なんですが 左側にあるのがiPhoneの画面そのものです その画面に対して右側の ユーティリティという部分が ここにあるんですけど さらにその中の このライブラリと呼ばれる場所に iPhoneの画面の上に使うことができる 部品がいっぱい用意されています どの部品を置いていってもいいので どの部品もドラッグアンドドロップで簡単に ちょっとやってみますね ラベルを追加したりボタンを追加したり こうやってセグメンテッドコントロールと 言うんですかね それからテキストフィールド スイッチ アクティビティインディケータ プログレスバー ありとあらゆる部品を 画面上にこうやって追加して 簡単に使うことができるようになっています もちろん操作も簡単ですので 普通のお絵かきツールと同じように こうやって選択して Delite ボタンを押してやると 全部簡単に消すことができます カラーエディタの画面を 今回は作りたいということですので まずは色を作成する部分を作りたいと思います 下の方を見ると ここに View という部品が用意されています この部品を一回クリックするとこのように それがどういう部品なのかということが 表示されるようになっています この View を画面に ドラッグアンドドロップで追加します やりますね そうするとこうやって iPhone の画面に合わせて ものすごく大きな View が 追加されてしまいますので 一旦これを左上とか右上とか どっちでもいいんですけど このあたりにこうやって除けながら追加して 摘まめるところが出てきますので サイズ変更のコントロールを使って このiPhoneの画面よりも 小さめにViewを変更してやって それを画面の中央に持ってきます ちょっと大きめに もう少し大きめかな こんな感じで調整します 今この画面の上で白い背景の上に白いViewを 持ってきたので分かりにくくなっていますので 今度はこのViewに対して 背景色を変更してみたいと思います その時に使うことができるのが 上にあるインスペクタと呼ばれる領域です このインスペクタと呼ばれる領域では 今選択中の 例えば後ろの画面だとか 今追加したばかりの色の作成用のViewとかですね 様々な部品に対して色んな設定を 行うことができるのが インスペクタビューと呼ばれるところです 左の方から順に上のところに インスペクタを切り替える場所がありますので これに対して色んな項目をこうやって 切り替えていくことができるのですが 今回は左から4つ目にある アトリビュートインスペクタと 呼ばれるところを使ってViewの背景色を設定します View の背景色は真ん中のところにある Background というところで変更ができます このWhite Colorというところをクリックして ここに出てくる色の一覧の中から 選択することもできます なんですが画面外のところを一回 クリックして戻りますけれども その左の方にある白い部分をクリックすると このようにOS10標準の カラーパレットが開いて この上で自由に色を作成することが できるようになっています 今回はここに中間の色を設定するということで グレーを選んでおきたいと思いますので グレーを選びましょう スライダーというものを使って ここに色んな種類のスライダーを 使えるようになっているんですけど この‟グレースケールスライダー”というところで このグレーの色が どのぐらいの明るさのグレーなのか ということが設定できるようになっています ここで50%を選択してちょうど 真ん中のグレーが選択されている状態にします では左上の閉じるボタンを押して 色の設定を終了させます では次に色を作るための スライダーを追加したいと思います 色を作るためのスライダーは3種類あります 赤のスライダーと緑のスライダーと 青のスライダー RGB の光の三原色に 対応したスライダーですので それぞれスライダーを追加していきます スライダーはスクロールビューを 上下にやって見つけることもできるんですけど 英語の表記が分かっていれば この右下のところに ‟SLIDER”と スライダーの表記を打ち込んでいくことで 簡単にスライダーを探すこともできます ではこのスライダーを ドラッグアンドドロップで この色のView の下に1つ追加しましょう このように追加して右の方に 少し広げておきます 1つスライダーを追加しました もう1つ追加します その下にもスライダーを追加してサイズを調整 そしてまたその下にスライダーを動かして 追加してサイズを調整 このような感じで3つスライダーを 並べておきました 先程 背景の色を設定したのと同じように このスライダーそれぞれに対して 色を変えておきたいと思います 先程のアトリビュートインスペクターを使って まず一番上のスライダー これを赤い色のスライダーに したいと思いますので ここの Min Track Tint と書かれた場所を 探して下さい Min Track Tint と書かれている 色のアイコンをクリックして 色の設定パネルのところで色を変えていくと このようにスライダーの左側に表示される色が 色々 切り替えられるようになっています ここでは赤い色を設定したいと思いますので 赤を選択してパネルを閉じて こうやってスライダーの色を 変更することができました さらに真ん中のスライダーを 今度は緑に変更します ということでまた同じように 緑色にしたいスライダーを選択したら アトリビュートインスペクターから Min Track Tint の色を選択して 緑の色を選択します あんまり緑の色を明るくしすぎると ちょっと見にくくなるので 少し暗いぐらいの方が見やすいんですよね ですので ここで選ぶよりは左側のところで 少し暗めの緑を自分で作ってやったり 少し黄色よりの緑にしてやったりと そんな調整をしていただくと きれいなスライダーが作れると思います まずはこのように画面の上に 赤 緑 青の3つのスライダーを並べて さらにスライダーで作った色を表示するための View を作ることができました このレッスンではまずプロジェクトを作成して 画面の見た目を作るところまで説明しました ではこの先のレッスンでは この色の View を使いながら スライダーで色を作成していくところについて より詳しく説明していきたいと思います

はじめてのiOSアプリ開発

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

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

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

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

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