ボタンタップで画像が変わるちょっとオシャレな「Hello World!アプリ」を開発する方法

f:id:yoshitokamizato:20161130204519j:plain

前回、プログラマーの第一歩「Hello World!」を表示させるだけのアプリを作製しました。

で、自分で作っといてなんですが、やっぱ簡単すぎて味気ないですよね。

あれなら、パワポに「Hello World!」と書いて貼り付けているのと大して変わりません。

なので、今回はもう少しだけオシャレなものを開発してみました。

 

名付けて「ボタンをタップするとHello World!の色が変わるアプリ」です。

そのまんまでごめんなさい。

これからその方法をご説明するので、もしよかったら一緒に開発していきましょう。

わからないこと、うまくいかないことがあればいつでもSNSでご連絡くださいね。

 

 

アプリ開発手順

それでは、順序よく進めて行きましょう。

 

アプリの立ち上げ

まずは、アプリを立ち上げます。

そのやり方に関しても、こちらの記事でご説明しています。

名前はなんでもいいので、まずはアプリを立ち上げましょう。

f:id:yoshitokamizato:20161130183339j:plain

 

部品の設置

アプリを立ち上げたら、次は部品を設置していきます。

今回のアプリに使用する部品は「Button」と「Image View」の2つです。

 

右下のパネルから、それぞれの部品を探していきます。

f:id:yoshitokamizato:20161130183448j:plain

 

まずは「Button」から。 

f:id:yoshitokamizato:20161130185029j:plain

 

場所はお好きなところでいいので、iPhone画面下部に配置します。

f:id:yoshitokamizato:20161130185043j:plain

 

次は「Image View」を配置。

さっきの「Button」を探した場所にあります。

f:id:yoshitokamizato:20161130185141j:plain

 

これを画面上部に配置。

f:id:yoshitokamizato:20161130185654j:plain

 

「Hello World!」の画像作成

Macに内蔵されているkeynoteというスライド作成アプリで「Hello World!」用の画像を作成します。 

f:id:yoshitokamizato:20161130185800j:plain

 

画像の作り方は四角い枠線でHello World!を囲んで、その枠線に合わせてスクリーンショット(command + shift + 4)で撮影するだけです。

f:id:yoshitokamizato:20161130190058j:plain

 

 

あとは字の色を変えて、これをひたすら続けます。

ぼくは赤、紫、オレンジ、黄色、緑、青を作りました。

f:id:yoshitokamizato:20161130190114j:plain

f:id:yoshitokamizato:20161130190221j:plain

f:id:yoshitokamizato:20161130190239j:plain

f:id:yoshitokamizato:20161130190253j:plain

f:id:yoshitokamizato:20161130190305j:plain

f:id:yoshitokamizato:20161130190316j:plain

 

撮影した画像をフォルダにひとまとめに収納します。

f:id:yoshitokamizato:20161130190433j:plain

 

画像の名前がバラバラなので、一つ一つ変更します。 

f:id:yoshitokamizato:20161130190529j:plain

 

ぼくは「番号 + .png(拡張子)」にしました。

後の工程でこの名前が重要になってくるので、間違わないように気をつけます。 

f:id:yoshitokamizato:20161202193637j:plain

 

次に、一番最上位にあるフォルダ(ぼくの場合は「helloworldup」)を右クリック(二本指でタップ)し、「Add Files to"helloworldup(自分のアプリ名)"」をクリックします。

f:id:yoshitokamizato:20161201201713j:plain

 

で、先ほど作ったファイルを選択して「Add」を押します。 

これで画像がアプリに配置できるようになりました。

f:id:yoshitokamizato:20161202193510j:plain

 

Image Viewへの画像の設定

作成した画像を「Image View」へ表示させます。

まずはImage Viewをクリック。

 

f:id:yoshitokamizato:20161130191019j:plain

 

そうすると右側の表示が変わるので、そちらでImage Viewの編集をしていきます。

f:id:yoshitokamizato:20161130191102j:plain

 

「image」を選択し、追加した画像を選択。(なんでも大丈夫です)

f:id:yoshitokamizato:20161201201627j:plain

 

そうするとこんな感じになります。

少し形が崩れていますが、これは後に行う設定で変えられますのでご安心を。

f:id:yoshitokamizato:20161201201519j:plain

 

Modeを「Aspect Fit」に変更。

f:id:yoshitokamizato:20161130191301j:plain

 

すると、Image Viewの領域に合わせて型崩れせず表示されます。

f:id:yoshitokamizato:20161130191345j:plain

 

レイアウト決め

レイアウト決めと言ってもそこまで大げさなものじゃありません。

自分の好きなように画像とボタンの領域を決定します。

f:id:yoshitokamizato:20161130191533j:plain

 

ぼくはこんな感じで配置しました。 

f:id:yoshitokamizato:20161130191545j:plain

 

Buttonのレイアウト

Buttonの文字の色・大きさと、背景の色を変えます。 

文字の大きさは、Fontの部分を編集します。

f:id:yoshitokamizato:20161130191751j:plain

 

Fontの「T」マークを押すとSizeを編集する場所があるので、そこで文字の大きさをお好みのものに変更します。

f:id:yoshitokamizato:20161130191831j:plain

 

次に、Backgroundの色を変え、Buttonの背景部分を変更します。

ぼくは青色にしました。

f:id:yoshitokamizato:20161130192010j:plain

 

 そうすると、レイアウトはこんな感じ。

まぁまぁアプリっぽくなってきましたね。(デザインセンスなくてごめんなさい)

f:id:yoshitokamizato:20161130192135j:plain

 

 画像とボタンの関連付け

ここで初めてプログラミングらしいことをします。

それぞれの部品に対して「control」を押しながらクリックし、それをそのまま右側の画面に移すと、動画のように部品を関連づけることができます。

 

画像を右側画面に関連付けた時は、下のような表示になるので、「Name」の部分に「firstimageView」と記入し「Connect」を押します。

f:id:yoshitokamizato:20161130203358j:plain

 

「Button」についても同様に「control」を押しながらクリックし、右側の画面に関連付けます。

f:id:yoshitokamizato:20161130203757j:plain

 

場所は、下の画像の赤線の部分。

そこへ関連付けさせます。

 

f:id:yoshitokamizato:20161130203153j:plain

そうするとこのような表示が出るので「Connection」を「Action」にし、「Name」を「button」にして右下にある「Connect」を押します。

f:id:yoshitokamizato:20161130193807j:plain

 

そうすると下の赤枠のようになります。

f:id:yoshitokamizato:20161130203051j:plain

 

ここで初めてコードを書きます。

下の図のように「@IBAction func tapButton(sender: AnyObject) {}」の{}の中に「firstimageView.image = UIImage(named: "\(arc4random() % 7 + 1).png")」を入れます。

 

f:id:yoshitokamizato:20161130202821j:plain

 

ここで、このコードの意味について軽くご説明します。

firstimageView.image = UIImage(named: "\ 画像の名前 ")」で、画像を表示する部品である「firstimageView」と先ほど作成した「Hello World!の画像」を関連付けます。

そうすることで、画像が「Image View」に表示されるようになります。

 

ですが、このままだと一つの画像しか表示できないアプリになってしまいます。

そこで使用するのが「arc4random()」というコードです。

 

arc4random()とは?その使い方は?

「arc4random()」というコードを使用すると、「Button」を押すたびにランダムな値を出してくれるようになります。

これを利用して「Hello World!」の画像をランダムで表示できるようにするのです。

 

先ほど、「Button」のコードの中に「firstimageView.image = UIImage(named: "\(arc4random() % 7 + 1).png")」と書きました。

その中の「(arc4random() % 7 + 1).png」の部分は、画像の名前を指定しています。

ここで指定された名前と一致する画像が表示されるのです。

 

で、この中でも「arc4random() % 7 + 1」ではどういう処理を行っているのかというと、「ランダムな値を7で割った余りに1を足す」ということをします。

と言ってもここら辺難しいですよね〜。

スライドで説明しますね。

 

 

つまり、このコードを使うことにより先ほど用意した7種類の画像を指定できるようになったわけです。

 

シミュレート

必要なコードを書き終わったらシミュレーターの再生ボタンを押します。

f:id:yoshitokamizato:20161202191705j:plain

 

そうすると、こんなアプリが立ち上がっているはずです。

 

という感じで、ランダムに画像が切り替わるアプリが完成しました。

 

まとめ

これでボタンをタップすると画像が変わるちょっとオシャレな「Hello World!アプリ」を開発することができました。(別にオシャレじゃないとか言わないでね)

そして、ここで気づいた方もいらっしゃると思いますが、今回のアプリを開発数ために書いたコードはたったの1行だけなんですよね。

これがXcodeの素晴らしいところです。

 

誰でも直感的で簡単に、最低限のコードだけでアプリを開発することができる。

 

それがiPhoneアプリの開発をプログラミング初心者におすすめする理由です。

よかったら今回のアプリ開発にもチャレンジしてみてください。

もしうまくいかない点があれば、いつでも対応いたしますのでSNSにてご連絡ください。

気軽にプログラミング始めましょう〜♪