はじめてのSwift

Playgroundで遊んでみよう(その2):ビューの作り方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Playgroundを使って、よりグラフィカルなSwiftのプログラムを書く方法をご紹介します。
講師:
06:04

字幕

このレッスンでは、Playgroundを使って、 よりグラフィカルなプログラムを Swiftで書いていく方法を 説明します。 それではまず、このPlaygroundの 画面の上に、現在Swiftのコードが 少し書かれていますので、 このコードを全部ですね、 上の方の、このimport UIKitというだは 残して、 下の方のこのvar strから始まる部分を全部 選択して、Deleteキーを一度押して、 プログラムを消しておきます。 このようにSwiftのPlaygroundというのは、 学校の黒板を消すような感覚で、 書いては消し、書いては消し、 ということを繰り返しながら、 右側のこのグレーの部分で、その実行結果を 確かめていく、 というふうに使っていきます。 では、今回のプログラムを書いていきましょう。 まず、変数を作るということで、 これまでstrを書いてきた、 このvarというのを使うんですけれども、 今回は画面の見た目をですね、 ちょっと操作できるようなviewという 変数を作ります。 そしてこの後ろに、UIView()と 書いてやることで、 これでiPhoneのですね、上で動いている、 画面を一つ実は作成することができます。 では実際に、このviewに対してですね、 今度はプロパティというものを使って、 画面の大きさを指定してやります。 view.frameと書いてやることで、 このviewのframeプロパティというものに アクセスすることができます。 viewのフレームプロパティは、 右側にもちょっと表示されていますけど、 画面の大きさを表す4つの数字から できています。 ではこの数字をですね、 自分で設定していきたいと思います。 CGRectMakeというものを使って、 ここの最初の二つの数は、 0と0、と書いておきます。 そしてその次のwidthのところに、 widthというのは横方向のサイズを 表す英語なんですけれども、 ここに300、 そしてheigthの所に300と書いて、 300ピクセルX300ピクセルの大きさの、 こういうiPhoneの画面を一つ用意しました。 ではこの画面を、一度今どうなっているか というのを確認するために、 最後にviewというのをもう一つ書いてですね、 右側の方、ちょっと見てみてください。 ちょっと今までと違って、この UIView、UIView、UIView、 っていうこの文字がですね、 並んでるだけで、ちょっと何も 面白くないじゃないかと 思われるかもしれませんけれども、 最後のですねUIViewの このところに、カーソルをずうっと右の方に 合わせて見ていただきますと、 ここに目玉マーク、そしてこの+ボタンがですね、 並んでいるところに 行きあたると思います。 はい、そしてこの目玉マークを一度 クリックすると、 ちょっと分かりにくいかもしれませんけど、 ここに300ピクセルX300ピクセルの iPhoneの画面が実は表示されています。 で、この目玉マークを 一回クリックしただけだと、 すぐにこの画面消えてしまいますので、 右側のですねこの+ボタン、 これを押していただきますと、 さらにこの右側にですね、 このviewの状態を確認するための、 タイムラインという画面が 表示されるようになります。 ではちょっと、3つですね、 画面が今表示されていますので、 この画面をですね、それぞれ 境界線をドラッグして、 大きさを調整しておきましょう。 はいこのように、調整しました。 はいするとですね、右側の方の画面に viewというのが表示されていますけども、 今ちょっと色がですね、何もついていないので、 どんな風なviewなのかというのが、 ちょっと分かりにくくなっていますので、 さらにこのviewに対して、 プロパティをもう一つ設定します。 viewに対して設定するプロパティは いろいろあるんですけど、 特に分かりやすいのは、この backgroundColorというプロパティです。 これちなみにXcodeがですね、 このbaという風に2文字入力したところで、 ひょっとしたらあなたは、backgroundColor というのを入力したいんじゃないですか、 といってこうやって残りの部分を 補完してくれますので、 この補完のbackgroundColorの 青いやつがですね、表示されたら、 もうここまで入力したところで、 Returnキーを一回押してやると、 これでbackgroundColor、 すぐに入力できます。 はい、ではこのbackgroundColorに対して、 色を設定します。 色を設定するときには、 UIColorというのを使って、 このUIColorに.redcolorというのを 呼び出してやることで、 これで、このbackgroundColor、 背景色を赤に設定する、 というプログラムが書けました。 これ英語もですね、ものすごい 中学レベルで構いませんので、 分かっていると、ものすごく分かりやすく、 このviewの背景色が、 カラーの中のレッドカラーだというのが 書けているのが分かると思います。 Swiftはこんな感じでですね、 ビジュアルに、見た目が変化する、 というものを英語で分かりやすく書けるように なっているプログラミング言語です。 右側の方を見ますと、このレッドカラーを 指定したことで、 背景色がviewがこうやって 表示されるようになっています。 さらにこのレッドからの所ですね、 レッドを書き換えて、 ブルーと書いてやると、 今度は青いビューが表示されますし、 このブルーと書いてあるところを グリーンと書き換えると、 緑の背景色が設定されるというふうに なっています。 このレッスンでは、Playgroundを使って、 グラフィカルなiPhoneの画面を 表示することができるようになりました。

はじめてのSwift

このコースではまだSwiftを学んだことがない方を対象に、Swiftのプログラミング知識を基礎から一歩一歩解説していきます。変数や数値計算、条件分岐や配列、乱数など基礎的な内容を学んだのち、XcodeでiPhone用のアプリを作成します。Swiftの特徴であるPlaygroundの使い方も説明します。

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

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

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

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