こんにちは。Step App Schoolの小林です。
今回は、2つめの開発として「画像切替アプリ」を作ってみましょう。
前回同様、Macで「Xcode」というアプリを立ち上げてください。

1．プロジェクトを作る

真ん中にある「Create a new Xcode project」を選んでください。

「Single View App」を選択して「Next」を押します。

「Product Name」の部分を「segImage」とします。あとは1個目のアプリと同じです。すべて入力したら「Next」を押してください。

次に保存先を決めます。どこでも構いませんが、ひとまず「Desktop」を選んで「Create」をクリックしてください。

最初は、iPhoneの操作画面をつくっていきましょう。左側のファイル一覧のうち「Main.storybord」をクリックしてください。iPhoneの画面があらわれます。

次に、iPhoneのバージョンを選びます。「Main.storybord」の下の方にある「Device」を選びます。

好きなものを選んでください。iPhoneを持っているのであれば、それを選択しましょう。

2．iPhoneの操作画面をつくる

表示するiPhoneが決まったら、右上の寛永通宝のようなマークをクリックしましょう。これはObjects（部品）がいっぱい入っています。そこから「Segmented Control」ボタンを選び、iPhone画面の上にドラッグ＆ドロップします。

同様に、部品のボタンから「Image View」をドラッグ＆ドロップしましょう。ここまでがうまくいけば、以下の画面のようになります。

3．お気に入りの画像を用意する

次に、お気に入りの画像を2枚用意してください。私は動物が好きなので、イヌとネコの画像を用意しました。

無料で使える画像素材サイトがたくさんあるので、うまく活用してください。私は写真ACさんをよくつかいます。うえの2つの画像もそこで手に入れました。写真ACさんの規定で2次配布は禁止ですので、ここでは用意していません。興味があったら皆さんも会員登録してダウンロードしてみてください（※私と写真ACさんとは無関係です）。

画像を手に入れたら、適当なサイズに加工してみましょう。詳しいやり方は検索してみてください。くわしく説明しているサイトがたくさんあります。Macの場合は画像を選択して「マークアップ」をクリックすると、簡易的に画像加工できます。切り抜きで、上の2枚の画像のように正方形にしてみてください。

2枚の画像を用意できたら、それぞれ「sampleDog.jpg」「sampleCat.jpg」と名前をつけましょう。この名付けを間違えると、あとでアプリが動かなくなるので慎重に。

2枚の画像に名前をつけたら、画面のとおり左はじのフォルダにドラッグ＆ドロップしてください。フォルダ名に入れば、2枚の画像がXcodeに取り込まれます。

この2つにチェックが入っていることを確認して「Finish」を押しましょう。

4．見ためをきちんと配置する

配置した「imageView」は、画像を入れておく「箱」です。牛乳はコップに、ざるそばはざるに入れるのと同じように、文字が入る箱は「Label」、Webサイトの画面を入れる箱は「Web View」と決まっています。画像はimageViewに入れておきます。

ここで困ったことがあります。iPhoneはXSとSEとでは画面のサイズが違います。このままだと、画像のサイズがおかしくなります。それを解決する手段の1つとして「整列・制約」があります。ここではiPhoneのサイズが変わっても「imageView」にある画像がおかしくならないように指定していきます。

iPhoneの画面の上にある「imageView」をクリックしてから、画面右下のこのマークをクリックしてください。Width（幅）を300、Height（高さ）を300にして、一番下にある「Add 2 Constraints」をクリックしてください。これで、imageViewの幅と高さが決まりました。

次にこのマークをクリックしてください。「Horizontally Container」（水平方向に中央）と「Vertically in Container」（垂直方向に中央）にチェックボックスを入れて「Add 2 Constraints」を押します。2つの値は0のままでOKです。

うまくいけば、imageViewを取り囲む赤線が、図のように青くなります。これで、iPhoneのモデルが変わっても画像が壊れなくなりました。Deviceの表示を切り替えてみてください。imageViewの上にある「Segmented Controll」の部品はずれますが、imageViewはずれないと思います。

もし、画像の挙動がおかしかったらもう一度設定し直します。「右下の数値を変えればいい」と思いたいところですが違います。画面の中央あたりに「Constraints」と書いてある部分があります。これを選択して消去しないと、あらたな「整列・制約」ができないようになっています。めんどくさいのですが、Appleが決めた仕様なので受け入れましょう。

「Segmented Controll」の見ためも変えましょう。最初に、右上にある下矢印（↓）のようなマークをクリックしてください。画像の部分「Segment」と「Title」と書いてあるところがあります。そこを変えていきます。

「Segment 0」を選び、Titleを「Dog」に変更します。「Segment 0」とは「1番目」という意味です。人間は順番を1から数えますが、コンピュータは「0、1、2…」0から数えます。「なぜ？」と思うかもしれませんが、どの言語でもそう決まっているのでその通り覚えましょう。次のエピソードを聞いておくと、忘れないと思います。

あるプログラマの男が深夜残業を終えて自宅に帰ってきた。結婚して以来、毎日続く残業に怒った妻が「あなたにとって、仕事と私のどっちが大事なの！」と詰め寄ってきた。男は妻の顔をじっと見つめ「きみが1番だ」と答えた。

はい。最初が0番だとわかっていないとまったくおもしろくない話ですね。

閑話休題。

同じように「Segment 1」を選択して、「Title」をCatに変更します。

部品の「Segmented Control」がそれぞれ「Dog」「Cat」と変わっていることを確認してください。「TitleがCatになってるのに、表示が変わってないよ？」って思う方は、enterキー（returnキー）を押して確定させてください。

5．操作画面とプログラムをつなぐ

iPhoneの操作画面に置いた部品「imageView」と「SegmentedControl」の2つを、プログラムとつなぐ作業に入ります。「つなぐってなによ？　どういうこと！」と言う方は、前のレッスン【＃4 Swift　iPhoneアプリをつくる流れを理解しよう】を振り返りましょう。

最初に、画面の左端にあるフォルダ「Main.storybord」を選んだあと、右上にある「∞」のようなマークをクリックしてください。すると、画面のように2画面になります。どちらかがこの画面にならない場合は、左画面の上にある「＜」のマークをクリックして、表示を切り替えてください。

これからちょっと操作が難しくなるので、よく説明を見ましょう。

iPhone画面の左横に、画面上にある部品一覧がフォルダのように整列しています。そこから「ImageView」をクリックしたあと、Macのcotrolキーを押しながら、右画面の「class ViewContoller:UIViewController{」と書いてある真下にドラッグ＆ドロップします。この画面だと12行めですが、13行めでも14行めでもかまいません。行の空きは、プログラムに影響しないので。

成功すると、画面のようなポップアップが出ます。ここで部品に「imageView」と名前をつけます。念のため、上が「Outlet」と書いてあるのを確認してから、右下の「Connect」ボタンを押します。これで

次に「Segmented Cotrol」の部品を接続します。その部品をクリックしたら、同じようにMacのcontrolキーを押しながら、「super.viewDidLoad(){」と書いてあるところから3行ほど下にドラッグ＆ドロップします。その上と下に「}」が1つずつあることを確認してください。

Segmented Cotrolの名前は「segChange」としてください。加えて、「Type」と書いてある部分に最初は「Any」と書いてありますが、その右端をクリックすると「UISegmentedControl」という選択肢が現れます。それを選んでください。さらに「Event」の部分が「Value Changed」になっていることを確認してから、右下の「Connect」ボタンを押してください。

これで、iPhone操作画面とプログラムをつなぐ作業が終わりました。右上にある横線のボタンを押して元に戻してください。続いて画面左端にあるファイルから「ViewController.swift」をクリックして、コードを書く準備をしておきましょう。

6．プログラムを書く

プログラムを書く前に、iPhone操作画面とプログラム入力ファイルがつながっているかを確認します。

画面の部分が、目玉のように真ん中が黒くなっていることを確認してください。「◯」の場合はうまくつながっていないケースがあります（毎回ではありませんが）。

書くプログラムは画面の通りです。上半分と下半分は似ているので、コピーして書き換えるなどしてください。中括弧（{ }）の位置がとても大事なので、気をつけましょう。念のために入力するコードも貼り付けておきます。

　　　　if(sender.selectedSegmentIndex == 0){
           imageView.image = UIImage(named:"sampleDog.jpg")
       }
       else if(sender.selectedSegmentIndex == 1){
           imageView.image = UIImage(named:"sampleCat.jpg")
       }

7．プログラムを実行する

それでは、プログラムを実行してみましょう。画面左上にある「▶︎」のマークをクリックします。

シミュレータを立ち上げる場合はそのままでもいいですが、ご自分のiPhone上にアプリを作る場合は、デバイスをクリックして、一番上のiPhoneを選んでから実行してください。うまくいくと、次の画像のようになります。

立ち上げるとまっしろです。かろうじて「SegmentedControl」は見えています。中の「Dog」「Cat」をタッチしてください。画像が変わりましたか？

今回のすべてのプログラムも掲載しておきます。

import UIKit

class ViewController: UIViewController {
   @IBOutlet weak var imageView: UIImageView!
   

   
   override func viewDidLoad() {
       super.viewDidLoad()
       // Do any additional setup after loading the view.
   }

   @IBAction func segChange(_ sender: UISegmentedControl) {
       if(sender.selectedSegmentIndex == 0){
           imageView.image = UIImage(named:"sampleDog.jpg")
       }
       else if(sender.selectedSegmentIndex == 1){
           imageView.image = UIImage(named:"sampleCat.jpg")
       }
       
   }
   
}

なんども繰り返しますが、『{ 　}』（ちゅうかっこ）の位置が大事です。行間はどうでもいいので、ちゅうかっこの位置が正しければ、問題なく動くと思います。

よかったら、当社のホームページもご覧ください。マイクロビットという、比較的かんたんなプログラミング講座も開催しています。

プログラムの中身の解説については次回です。お疲れさまでした。