はじめてのiOSアプリ開発

フルカラーのカラーエディタを作ってみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
グレーの色が作成できるようになったアプリに、スライダを2つ追加して、光の三原色RGBを操作して、フルカラーの色が作成できるようにしてみましょう。
講師:
14:22

字幕

それでは このレッスンでは いよいよ スライダーが動かされた時に カラービューの色を 変更していくためのプログラムを 書いていきたいと思います 現在は このカラービュー そして― 赤のスライダー 緑のスライダー 青のスライダーに対して それぞれ プログラムの中で使用することができる colorView redSlider ― greenSlider blueSlider と 名前を付けた状態になっています 現在はこの様に プログラムの中の名前から プログラムのアプリケーションの見た目を 操作することができるように 方向で言うと 右から左に操作できるように 足を結んでいたのですけれども 今度は スライダーが動かされた時に プログラムが呼び出されるように 左から右の接続をする必要があります 先ほど 色の部品を操作するために 名前を「 @interface 」から 「 @end 」という所で それぞれの部品に 名前を付けたわけです 今度 スライダーが操作された時に 実装するのは この「 @implementation」 と書かれた所から 「@end 」と書かれた所までに 書いてあるコードになります 操作自体は先ほどと同じです まず 左側で対象となるスライダーを 選択します 赤いスライダーを選択して 赤いスライダーから右クリック あるいは コントロールキーを押しながら こうして足を延ばしていきます 先ほどは「 @interface 」の所に 足を延ばしましたけれど 今度は下の方に足を延ばして この「 @end 」のすぐ上の所に 線を持ってきて離します 今度はこの「 Connection 」 と書かれた所が 「 Action 」になっているのを 見てください これに名前を付けるのですが 今度は 色が変わったということで 色が変わったということが分かるように 「 colorChanged 」と名前を付けます ここでも「 redSlider 」や「 greenSlider 」の 名前の付け方と同じ様に 「色が」という部分の「 color 」は 小文字で書き 後ろの「変わった」を表す 「 Changed 」というのは 大文字から初めて 残りを全て小文字にします ここでスペースを開けることはできないので 注意してください 全て 間を開けずに 「 colorChanged 」と書きます では 右下の「 Connect 」ボタンを押すか あるいは Outlet と同じ様に リターンキーを一回押して このアクションの作成を完了させます これによって「 colorChanged 」というのが スライダーが動かされる度に 呼び出されることになります では 一度 本当に呼び出されるか 確認してみましょう この「 colorChanged 」の中に 簡単なソースコードを書きます どういうソースコードかというと 「 NS log 」という これは「関数呼び出し」というのですが この NS log を使って ここに何でも良いので 例えば― 「 Color!! 」と書いておくと この「 colorChanged 」が 呼び出された時に この「 Color!! 」が Xcode の上に表示されるようになります 実際にやってみましょう アプリケーションを シミュレータ上で動かしてみます 「実行」ボタンを押して 動かします この様に起動しました 今「 iPhone 5 」になっていますけれど まあ 良いでしょう iPhone 5S の上で実行されている この赤いスライダーを動かすと 分かるでしょうか? このXcode の画面の方です 右下の所に「 color!! 」が 表示されるようになりました この枠は もうちょっと広げることができますので これを もうちょっと広げて 見ていただきますと もう一度 シミュレ―ションに戻って この様にスライダーが動く度に この「 colorChanged 」という さっき作った所が 呼び出されているのが分かると思います それでは もう一度 このXcode に戻って 今度は この赤色のスライダーだけではなくて 緑色のスライダー それから 青色のスライダーが動かされた時にも この「 colorChanged 」が 呼び出されるように してみたいと思います 今度は緑のスライダーを選択して 右クリックか コントロールキーを押しながらクリックで ズーッとこの線を延ばしていって 先ほどは「 colorChanged 」を 新しく追加したのですけれど 今回は「色を変更しました」というのを表す― 「 colorChanged 」が 始めから用意されていますから ここに左からこうやって 接続して この上で手を離すと 簡単に接続できます 同じ様に 青のスライダーからも 足を延ばして「 colorChanged 」の所に 接続します それでは アプリケーションを 実行してみましょう すると この赤いスライダーを動かすと 「 color!! 」 これがさっき確認した所ですけれど 同じ様に 緑のスライダーを動かしても 「 color!! 」 この左の方に時間が書かれていますから ちゃんと新しい時間が表示されることで カラーのスライダーに対応して 「 colorChanged 」が ちゃんと呼ばれていることが分かると思います これで スライダーが移動する度に 「 colorChanged 」が呼び出されることが 分かりましたので 最後に この「 colorChanged 」の中で 赤のスライダー 緑のスライダー― そして 青のスライダーの それぞれの現在の値を取ってきて 新しくカラービューの色を変える行動を 追加したいと思います 今までは 右側と左側の それぞれの Assistant editor を使って 見比べながら作業をしてきましたけれど 今度は本格的に「 colorChanged 」の 実装のプログラムを書いていきたいので もう一度 右上にある Assistant editor を表示するモードから 左の方にある Single editor のモードに戻して 「 ViewControllor.m 」の方に(行きます) Project Navigator の 「 ViewControllor.m 」を選択して 「 colorChanged 」の所に移動します 「 colorChanged 」の場所が 結構下なので プログラムが打ちにくいと思ったら 「 @end 」の後ろには 何を書いても構いませんので 「 @end 」の後ろに 改行を何行か打ち込んで 「 colorChanged 」を 見やすいようにすることができます では「 colorChanged 」が 呼び出された時に 現在のこの「 redSlider 」と 「 greenSlider 」「 blueSlider 」が どういう値になっているのか 確認するための ソースコードを書きます そのためのソースコードはこんな感じです おそらく 見ていただいたら すぐに分かると思うのですが まず 赤の値です 「 float red 」 これを現在の画面上にある 「 redSlider 」の 値として取り出してください こう書くことで この「 red 」を「変数」というのですが この「 red 」という変数の中に 「 redSlider 」がどういう値になっているのか 格納することができます 同じ様にして 「 float blue = self.」 あ!ブルーの前にグリーンですね RGB の順で入れているので 「 green = self. greenSlider.value 」 と書くことで 今度は緑の値  そして― 「 float blue = self.blueSlider. value 」と 書きます これで赤と緑と青が それぞれどれくらいの強さなのか 確認することが出来るようになっています 一度 これで赤緑青の3つの値が どれくらいの値になっているのか 見ておきたいと思います 先ほど NS log を使いましたけれど そのNS log をここで もう一度使うことによって それぞれ「 %f, %f, %f 」と 赤の値が入って欲しい所に「 %f 」 緑の所にも「 %f 」 青の所にも「 %f 」 それぞれ対応するところに「 %f 」と書いて この後ろに「 red, green, blue 」と 書くことによって 現在の赤と緑と青の値が それぞれどういう値になっているのか 並べて表示できるようになっています 一回実行しておきましょう そして 赤のスライダーの値を 左の方に持っていきます 後ろの NS log の出力を 完全に左の方に寄せます そうすると この様に 赤のスライダーを 完全に左の方に持ってきた時に 赤の値は 0.0 です 一番 右に持って来た時は これが 1.0 になります この様に色の値は少数を使って 最も低い場合を 0.0 最も高い場合を 1.0 として 表すことができます 同様に この緑のスライダーも 0.0 から 1.0 まで 動くようになっています 青のスライダーも同様です この様になっています ちなみに この 0.0 から 1.0 の設定は インスペクタで設定することができますので Main.storyboard を見て 赤 緑 青のスライダーを選択した後に インスペクタのユーティリティ領域の 表示ボタンを押しながら スライダーの所を見ると それぞれ 赤も緑も青も ここのインスペクタの設定で 値が 0 から 1.0 まで移り変わる そして最初の状態は 0.5 から始まりますよ と 設定されている状態に なっていることが分かります では もう一度「 colorChanged 」の メソッド定義の所に戻ります 先ほどは この「 red 」「 green 」 「 blue 」の3つの値を 変数に取り出しました 次はこの赤緑青の値を基にして 新しい色を作成します 色を作成するためのコードは 「 UIColor *color = 」 UIColor のクラスメソッドを 使うことで 「 colorWithRed 」と言うメソッドを使って red の値 そして green の値 そして blue の値を 基にしながら 「 alpha 」というのは透明度です 完全に色が見えるように 1.0 を指定すると不透明になります この様にして色を作成します 色を作成することができたら この色を現在のカラービューに ここのカラービューに反映させるコードを 最後に書きたいと思いますので この画面の「 colorView 」に対して メッセージを送ります メッセージは「 setBackgroundColor 」 こうすると この色をカラーに変更しなさい というメッセージを このカラービューに対して 呼び出すことができますので カラービューはこの色を 自分の背景色として使用できるようになります では アプリケーションを実行してみましょう 「実行」ボタンを押します すると この様に 赤いスライダーを動かした時には 赤い色 そして 緑のスライダーを動かした時には 緑の色 そして 青いスライダーを動かした時には 青の色がそれぞれ変更できて カラーエディタの基本の機能である 色を作る部分が これで実装できたことが分かります このレッスンでは スライダーが動かされた時に それに対応して色を作成して 背景色を変える方法について 説明しました

はじめてのiOSアプリ開発

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

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

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

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

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