【#6 画像切替アプリ】コードの内容を理解してみよう
こんにちは。Step App Schoolの小林です。
前回作成した「画像切替アプリ」の中身を理解していきます。
前回のプログラムをまだ作っていない方、つくったけどうまく動かない方はもう一度作ってみましょう。
1.アプリを微修正する
前回作ったアプリは、画像を切り替えるものです。
「Dog」を押したらイヌが、「Cat」を押したらネコの画像が表示されました。
このアプリには少しおかしなところがあります。以下の画像をみてください。
左端のフォルダ一覧にある「Main.storybord」をクリックしてみましょう。私はXSのサイズでつくったので一見、問題ないように見えます。しかし、デバイスを他のものに切り替えてみましょう。
これは4Sのサイズです。「Segmented Control」の位置がおかしなことになっています。これは、「Segmented Control」の位置を決めなかったために起こる不具合です。気がつきましたか? さっそく直してみましょう。
「Segmented Control」の部品をクリックしてから、上記の整列マークを選択します。その後「Horizontally in Container」の数値が0であることを確認してから、「Add 1 Costraint」をクリックします。これで、水平方向には画面の中央に位置することが確定しました。
もう一度「Segmented Control」の部品をクリックしてから、上記の制約マークを選択します。画像の部分の「I」マークをクリックして実線にして、その値を20に設定します。これは、下の部品(つまり画像が入っているImageView)からの距離を「20」で固定する、という意味です。
成功すると、SegmentedControlの周りの線が青くなります。これで正しいのかどうか、左下のDeviceでiPhoneの画面を切り替えて確かめましょう。
私の場合、iPhone4SとXS MaxのDeviceを選んでチェックします。すごく小さいタイプと大きいタイプを見比べて、おかしくなければOKとしています。
逆に、整列や制約の仕方を間違えた場合は、以下のようにしてください。
「Main.storyboad」や「ViewController.swift」などのファイルが置いてある場所と、iPhoneの操作画面があるエリアの間に、いま画面に置いてある部品一覧が書いてあるエリアがあります。ここには、部品の一覧とその状態(プロパティ)が記録されています。ここにある「Constraints」が制約・整列の指示です。「▶︎」の部分をクリックして「▼」になると、詳しい制約・整列が表示されるようになります。このうち、修正したいものを選んでMacのdeleteキーを押して、まず削除します。それから、あらたな制約・整列を入れるようにしましょう。
気をつけなければならないのは、直接、制約・整列の数値を直してもうまくいきませんので、注意してください。
2.コード全体をみてみよう
コード(プログラム)全体をみてみましょう。注目してほしいのは四角で囲んだ部分です。
12行目の「@IBOutlet weak~」で始まる部分は、画像を入れておく部品「Image View」に「imageView」という名前をつけただけです。そのほかは最初から書かれているコードなので、ここでは無視しましょう。
では、「@IBAction func~」ではじまる部分をみてみましょう。
ここでも入れ子構造になっています。最初の文は「『segChange』という名前がつけられた『Segmented Control』を押したら、以下の中身を実行してください」という意味です。Segmented Controlとは「Dog」「Cat」と書いてあるボタンのことでしたね。つまり、このスイッチのようなものを切り替えたら、何かが起こるよと書いてあるのです。
では、さらに「if(sender.~」と書いてある中身をみてみましょう。
前半の部分は「もしSegmented Controlの順番が0のとき、sampleDog.jpgという名前のファイルをimageViewという箱の中に入れてください」と書いてあります。Segmented Controlの順番が0というのは、ボタンの左側「Dog」と書いてある方を指します。コンピュータにおける順番の読み方は「0、1、2…」と0からはじまるルールでしたね。
後半の部分は「そうでない場合でSegmented Controlの順番が1のとき、sampleCat.jpgという名前のファイルをimageViewという箱の中に入れてください」と書いてあります。順番が1ということは、Segmented Controlの右側「Cat」と書いてある方を選んでいるということです。
これで、大まかな意味は理解できたかと思います。
3.細かな文法を1つ覚えよう
よりこまかな文法について1つだけ覚えてください。「=」と「==」の違いです。プログラミングの世界では、日常的に使っている「=」は「右辺を左辺に代入する」という意味でした。
では「==」はどういう意味でしょう?
それは「左辺と右辺が完全に一致する」という意味です。今回書いたコードでいうと、「Segmented Controlの順番(Index)が、0と完全に一致したとき」という意味になります。つまり「==」は、わたしたちが日常的に使っているイコールに限りなく近いと思ってください。
4.注意点 「細かい文法を無理して覚えない」
他の文法をみていて「こんなに細かい文法を覚えられるだろうか」と不安になる人は多いと思います。すべて決まっている文法なので、何度か使うと覚えます。大事なことは、一度にすべてを覚えようとしないことです。コードを書いていくうちに、覚えていないけれども書き方に慣れていく部分もあります。
最初のうちは、細かい文法を無理に覚えようとせず、プログラミング独特の構造だけに注目しましょう。構造がわかれば、プログラミングができるようになります。
過去に書いた記事を以下に挙げますので、まだご覧になっていない方はぜひどうぞ。
【#1 プログラミングの準備】
【#2 背景変換アプリ】カンタンなコードを書いてみよう
【#3 背景変換アプリ】プログラムの中身を理解してみよう
【#4 Swift iPhoneアプリをつくる流れを理解しよう】
【#5 画像切替アプリ】お気に入りの写真を表示しよう
馬券が当たった方、宝くじを当てた方はお願いします。