はじめてのiOSアプリ開発

ユーザインタフェースの部品をプログラムから操作するための名前を付けよう

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ユーザインタフェースの部品をプログラムのコードから操作できるように、部品に名前を付ける作業を行います。
講師:
08:32

字幕

それでは このレッスンでは これまでのレッスンで作ってきた この見た目の部分に対して 自分でプログラムのコードを書いて 更にそのプログラムを どのように動かすかという ルールを記述していきたいと思います では この画面をご覧ください 現在 この「 Main.storyboard 」 というものを選択して 画面を作ってきた状態です これに対して この画面が操作された時に どのようにアプリケーションを動かすのか ということを書くのは 左の方にある この 「 ViewController.m 」 というファイルになります この「 Main.storyboard 」と 「 ViewController.m 」を 繋いでやるソースコードを 書かないといけないのですが それをどのようにするかというと Xcode では これが非常に 見た目で分かりやすい様になっています では その方法をご紹介しましょう まず 画面のサイズを横に大きく使いたいので カラーエディタのソースコードを 表示する場所を ちょっと小さくします 右側にある このユーティリティ領域 このインスペクタと 部品のパネルが並んでいる所を 少し右へドラッグして 一旦消しておきます 今回 作業していくのは ここにあるツールバーの 右から2つ目にあるボタンのうち 真ん中のボタンです これが「 Assistant editor 」と呼ばれる 第2のエディタを開くためのボタンです この「 Assistant editor 」を 一度クリックしていただきますと この様に先ほど手ツールで選択していた 「 ViewController.m 」の内容が 右側に表示されるようになっています 場合によっては 「 ViewController.m 」ではなくて 「 ViewController.h 」が表示されてしまう人が いるかもしれませんが その時には この画面の左上にある 「 Automatic 」と書かれた所から この様に「 ViewController.m 」か 「 ViewController.h 」か 切り替えられるようになっていますので 「 ViewController.m 」が 選択されている状態にしてください こうやって Assistant editor を 表示することによって 左側にアプリケーションの見た目 そして 右側にアプリケーションのための ソースコードを並べて表示することで 両方いっぺんに編集していくことが 出来るようになります ではまず この ViewController に対して 色をいろいろ設定するためのカラービューを 操作できるようにしたいと思いますので この左側のエディタのビューを使って このカラービューを選択します 左クリックで一度 選択します 選択したら今度は クリックを右クリックに持ち替えて 右のマウスで このビューを押したまま 右の方へ この様に ズーッと持っていきます ズーッと持っていきます これを この ViewController の 「 @interface 」と書かれた所から 「 @end 」と書かれている 間の所に持っていくと 青い線が表示されます どこでも構いませんので この青い線が出てきたら この線の右クリックを離して この色に名前を付けて設定します 一回キャンセルをします もしも Mac のボタンが1つしかなくて つまり マウスが無くて トラックパッドを使っていて 右クリックができないという方は コントロールキーを押しながら この画面を左クリックで 押しながらドラッグしても 同じように操作することができます そしてこの「 ViewController 」の 「 @interface 」と「 @end 」の 間の所に持ってきて 手を離すと 先ほども出てきましたけれど この「 Connection 」と書かれた ポップアップが出てきます ここの上の所が「 Outlet 」と なっていることを確認して 下の「 Name 」の所に名前を付けて 部品をプログラムから参照するように 名前を付けます 名前( Name )の所に 「 colorView 」と書いて 右下の「 Connect 」ボタンを押します 今 これで 左側のカラービューと 右側の「 colorView 」という名前を 接続することができました 接続できたということは ここに 「 + 」(プラス)のボタンがありますが このボタンを選ぶと このカラービューが この「 colorView 」という 名前の箇所と繋がっているのが 見た目で確認できるようになっています 同じようにして 今度は この赤のスライダーとか 緑のスライダーも参照したいと思いますので 同様にして赤いスライダーを選択した状態から 右クリック あるいは コントロールを押したまま 左クリックをズーッと 右の方へ延ばしていって 先ほどの「 colorView 」の すぐ下の所に線を延ばして離します そして 今度は赤いスライダーですから 名前を「 redSlider 」 Objective-C のソースコードを書く時には ちょっとした決まりがあります この頭の所 名前の付け始めの所は 小文字から書き始める そして その後ろに続くものは 大文字から初めて また小文字にするという 法則があります ここでもし 左側の画面に スライダーが1つしかない場合だったら 「 slider」と名前を付けていれば 良いわけですけれども 今回は 3つもスライダーがありますから どのスライダーなのか分かりやすいように 名前を「 redSlider 」と付けています 勿論これは「 redSlider 」じゃなくて 「 slider1」とか「 slider2」「 slider3」 こういう名前の付け方をする方が 分かりやすかったらそれでも構いません 今回は「 redSlider 」とするのが 一番分かりやすいのではないかと思います それでは 「 Connect 」ボタンを押して 「 redSlider 」の作成を完了します 今回もこうして 「 colorView 」にひき続いて 「 redSlider 」が接続されたことが 分かります では 同じように緑のスライダーも 接続しましょう 右クリックから足を延ばして 今度は「 greenSlider 」 今までは「 Connet 」ボタンを 一回ずつ押していましたけれど 名前を入力して リターンキーを一回押すだけで この様にコネクトしてくれます 最後に青いスライダー 「 blueSlider 」ですね これを足を延ばして 「 blueSlider 」に接続します この様に「 colorView 」「 redSlider 」 「 greenSlider 」「 blueSlider 」という様に 4つソースコードの中に これを Outlet というのですが このプログラムと プログラムのソースコードと 画面上の部品を接続するための 名前を作ることに成功しました この先のレッスンでは 更に「 redSlider 」や「 greenSlider 」が 動いた時の実装を続けていきたいと思います

はじめてのiOSアプリ開発

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

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

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

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

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