はじめてのiOSアプリ開発

画面がタッチされた時に色を変えてみよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ユーザが画面をタッチするたびに色が変わるようにしてみましょう。
講師:
10:18

字幕

このレッスンでは 画面がタッチされた時に 画面の色を変化させる ということをしてみたいと思います まず こちらのコードをご覧ください 現在は 「アプリケーションが実行された時に ビューに対して setBackgroundColor というメソッドを使って 赤い色をセットする」 ということが書かれています ですので アプリケーションが起動した時に 赤い色がセットするだけ となっていますので このアプリケーションに対して タッチをした時の動作を 付け加えていきたいと思います 画面のタッチ すなわち ユーザーから何かの入力があった ということを検出するために使うのは この「 Main.storyboard 」 という所になります 「 Main.storyboard 」というのを ちょっと見ていただきますと この様に iPhone の画面が出てきます iPhone の画面にしては 画面のサイズが横の方向に 太いと思われるかもしれませんけど iPhone 3 とか 4 とかから始まって iPhone 6 iPhone 6+ と ここまでくるとだいぶ画面のサイズが いろいろ変わってきますから どんな画面のサイズにも 対応できるようにと いうことでこういうサイズになっています それでは次に この「 ViewController 」に対して タッチに対応するための部品を 付けていきたいと思います そのための部品は この右下に出ていますけれども このオブジェクトパネルの中から 選択することができます この真ん中のところをドラッグすると 上に広げたり 下に縮めたりということができるんですけども 上に広げてやると このビューに追加することができる いろんな部品が ここにずらっと出てきます 今回使用するのは この中でも下の方にあります この青い色をしたアイコンの部品です 今回使うのは 「 Tap Gesture Recognizer 」というやつなんですけれども この「 Tap Gesture Recognizer 」の他に 画面がピンチ 指を2本使って 縮めたり広げたりといった 操作をしたり 指を回転させたりといった動作をしたりする時に 対応することができる 様々なユーザーからの入力を 受け付けるための部品が ここに用意されています 画面がタッチされたよということを受け取るためには この「 Tap Gesture Recognizer 」 この右下の所に 点が1個だけ付いているやつですね これを使います 使い方は簡単で 他のチャプターでも ボタンとかラベルとかを張り付ける時に ドラッグ & ドロップをして 右から左に追加していっているんですけども この「 Tap Gesture Recognizer 」も 同様に この左側にある iPhone の画面に対して ドラッグ & ドロップで こうやって持って行って このビューの全体が選択されていたら そこの中のどこでも構いませんので ポンッと指を放してやると この様に ちょっとわかりにくいですけどね 上の方に「 Tap Gesture Recognizer 」が 追加されていますよというのを こうやって見ることができます この 「 Tap Gesture Recognizer 」が こうやって画面に追加されたら この Gesture Recognizer から タップされたよと ユーザーが画面をタッチしたよ というメッセージを受け取ることが 出来るようになりますので その受け取った時の動作を 今度はプログラムの中に書いていきます そのための方法は この「 Assistant editor 」というのを使います 画面の右上の方を見てください このツールバーのボタン群が 右から2つ並んでいるんですけども 2つ目の方の 真ん中のボタン この「 Show the Assistant editor 」と 書かれたこのボタンを 一度クリックしますと この2重丸になったボタンですね そうすると この左側の画面に Gesture Recognizer を 追加した画面が そして右側の方に それに対応する ViewController の 今「 setBackgroundColor 」が 入力されているのが分かりますけど このソースコードが並んで表示されます 今回はこの 一番右端の ユーティリティ領域と呼ばれる所は 使いませんので ここの境目のところをドラッグして 右側に寄せて 消しておきます では ここで この「 Tap Gesture Recognizer 」が ユーザーがタップしたということを検知した時の アクションを この ViewController の中に書いてやります どうやるかというと 左のこの画面から 「 Tap Gesture Recognizer 」の― 上にマウスカーソルを合わせて 右クリックをします 右クリックをしたまま この右側の方に線を延ばしていきます これ ボタンは放しません 右クリックして ボタンを押したまま この「 ViewController 」の所に 持っていって 「 @implementation 」と 書かれた所から 「 @end 」と書かれた所までの どこかに― ちょっと右の方を見ていただくと 「 Insert Action 」と書いてある線が 出ているのが分かると思うんですけど これが出る所に 線を延ばしていきます 線を延ばしてこの線が出たら 指を放します そうすると アクションを追加する という Connection のパネルが表示されます 一度 これキャンセルして もう一度やってみますけども もしも この 「 Tap Gesture Recognizer 」の所から 足を延ばすために マウスを使っていなくて 右クリックができないという時には タッチパネルとかを 使っている時には コントロールキーを押しながら 左マウスボタンを押しながらでも 線を延ばすことができます やはり同様に 「 @end 」の上の所に 「 Insert Action 」というのが表示されますので これが表示されたら この名前の所に 画面がタップされたよということを 受け取ったということで 「 screenTapped 」というふうに 英語で入力しておきます この「 screenTapped 」と スクリーンがタップされたということを 表す英語ですけども 先頭の「 screen 」は小文字にしておきます そして後ろの方の「 Tapped 」の 「 T 」を大文字にして 残りのところは全て小文字にしておくというのが 名前の付け方です 「 screen 」と「 Tapped 」の間に スペースを開けたりすると 問題が起きたりすることもありますので スペースは開けないでください 「 screenTapped 」と入力したら このままエンターキーを押しても 次に行けますし 右下の「 Connect 」ボタンを 押しても良いんですけども どちらかの方法で 次の画面に行きます この様に「 screenTapped 」というのが 追加されました 今 この状態で 「 screenTapped 」というこの─ ソースコードの上に 追加されたものの左に出ている このマークを マウスオーバーすると 左側の iPhone の画面の所に 「 Tap Gesture Recognizer 」と 結びついていますよというのが 表示されます なので これで画面のタップと同時に アクションのメソッドが呼ばれるということが 分かるわけです では 次に スクリーンがタッチされた時に 画面の色を変えるという ソースコードを書いてみたいと思います このまま「 screenTapped 」の ここに追加していっても良いんですけども 画面を広く使いたいので 左側の Project Navigator と言う 場所から 「 ViewController.m 」を選択して 今 2画面モードになっていますけど この2画面モードの 「 Assistant editor 」を 一度解除して 「 Standard editor 」 1画面のエディタに戻しておきます 2画面にする時には この2重丸の Assistant editor そして左画面のみにする時には Standard editor という感じで 使い分けていきます それでは ここの「 screenTapped 」の所に 新しくソースコードを付け加えましょう ちょっと見た目が分かりやすくなるように 真ん中の方にこの「 screenTapped 」を 持ってきます 「 @end 」の下に 自分が好きなだけ こうやってリターンキーを使って 改行してやって構いませんので 真ん中の方に来るようにしました 「 screenTapped 」 スクリーンがタップされた時に 今度 上の方のこの 「 setBackgroundColor 」をもう一度使って UIColor の さっきは赤い色を使いましたけれども ちょっと色を変えてみたいと思います 今度は「 greenColor 」として 緑の色を指定することで 赤の次に緑の色が 表示されるようにしてみます このレッスンで記述するコードは 以上で終わりですので アプリケーションの動作を シミュレータ上で 確認しておきたいと思います それでは 実行ボタンを押してください 押します すると まず 赤い画面が表示されますので 画面をタップします すると はい この様に緑に変わりました ということで このレッスンでは 「 Tap Gesture Recognizer 」というものを使うことで 画面にタッチされた時のタイミングで 呼び出されるメソッドを 追加することができる ということを見ていただきました

はじめてのiOSアプリ開発

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

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

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

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

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