【Xcode】お気に入りのサイト集アプリを開発してみよう

みなさんこんにちは。Yuta Fujii(@HofuCamera)です。
今回は「お気に入りサイト集アプリ」を開発していきたいと思います。ボタンを押すと自分が設定した好きなサイトを表示するというアプリになります。

このアプリを作成できるようになると、Webサイトを簡単にiPhoneで表示できるようになるだけでなく、
Webゲームをつくる際にその基盤を構築できたり、iPhoneがWebサイトを表示してくれる種類などがわかってくるかと思います。

また、Webサイトを表示する画面の大きさを変更するだけで、さまざまなオリジナルアプリを作成していくことも今後可能になるかと思います。
それでは作っていきましょう!

Xcodeの環境構築がまだの方はこちら
前回までの続きはこちら

【Xcode】iPhoneアプリ開発に必要なこと
【超かんたん!】初心者がxcodeでドッキリiPhoneアプリを開発するまで
【Xcode】プログラムなしで、 レッドカードiPhoneアプリを開発してみよう
【Xcode】プログラムなしで、カラフルカードアプリを開発してみよう



プロジェクトを作成する

プロジェクトの作成方法はこちらに記載されています。
今回はcallMeとしてプロジェクト名を決めてあげます。

次に「Device Orientation」と書かれた箇所があるかと思います。
これはiPhoneやiPadアプリを作る際に、画面を「縦だけに対応されたアプリなのか、横だけか、それとも両方か」などを設定する箇所になります。
xcode_web3
今回は縦のみに対応したいと思うので、下の2つのチェックを外します。「Portrait」のみにチェックが入っている状態を確認してください。
xcode_web4

画面とファイルを整える

画面を準備する

Storyboard上の画面の上部をクリックすると、右側に「Size」という箇所が出てくるかと思います。
ここをクリックして、「iPhone4.7-inch」を選択します。
xcode_web7
それぞれ画面の大きさには意味があります。
下記にその一覧を記述しました。今回は「iPhone6」の大きさに対応したアプリを作成していきたいと思います。

      • iPhone6Plus→iPhone5.5-inch
      • iPhone6→iPhone4.7-inch
      • iPhone5→iPhone4-inch
      • iPhone4→iPhone3.5-inch

それでは次にいきましょう。次は画面をデザインしていきます。左側に「Main.storyboard」という箇所があるので、そこをクリックします。これは主に画面の遷移図(どのような順番で画面を表示していくかなど)や、パーツ(ボタンやラベルなど)を直感的に置いていく、全体図を見渡せる箇所になります。
xcode_web5
また、Main.storyboardは実際に自分でデザインしていくことができるので、デザインしていきましょう。

今回は画面が4つ使って作っていこうと思います。

1つははじめに表示するための画面、残りの3つはそれぞれ表示したいWebサイトを表示する画面です。
まず下記のようにボタンを画面の上に3つおいていきます。

置けたら、次はボタンの名前を変えてみます。「Button」と書かれた箇所をダブルクリックすると変更できるようになるので、それぞれ左から「サイト1」「サイト2」「サイト3」と変更します。
xcode_web11
xcode_web12
xcode_web13

続いて、ボタンを押したら画面を移動(遷移)したいため、画面を増やしていきたいと思います。
右側から「View Controller」と書かれた場所からドラッグ&ドロップしていきます。

xcode_web14

すると、画面が現れるので、はじめの画面と同じように画面のサイズを「iPhone4.7-inch」に設定します。設定できたらもとの画面のボタン(この場合はサイト1と書かれたボタン)を選択して、キーボードのcontrolボタンを押しながら、次の画面へドラッグ&ドロップしていきます。

xcode_web16
「Present Modally」を選択します。
xcode_web17
そうすると下記のように矢印ができたと思います。過去の記事を参考にして頂けるとわかると思いますが、これで画面遷移の準備が完了しました。
xcode_web18
同じように、続けてあと2つ、画面を追加していき、それぞれサイト2、サイト3ボタンを選択してcontrol + ドラッグ&ドロップで画面とつないでいきます。

全体で大きくみたいときは、画面以外のところをダブルクリックするとみることができます。
続いてWebサイトを表示するための準備をします。

Webサイトを表示するためには、「WebView」というものを使います。

使い方はとても簡単です。まず、このように画面の上にWebViewを右から選択してきてのせてください。画面の上にのったWebViewを選択すると、サイズを変更できるので、画面いっぱいになるようドラッグ&ドロップで広げていきます。
xcode_web25
xcode_web26
xcode_web27

ファイルを3セット準備する

ここから少しiPhoneアプリを作る上での基本的な考え方をお話します。

今、画面が合計4つつくられたと思います。重要な点としては、1つの画面につき「.h .m」ファイルが1つのセットとして存在しているということです。

はじめの画面には「ViewController.h ViewController.m」という名前で、すでに用意されています。
しかし、はじめの画面にしか用意されていません。なので、画面を追加したらそれだけファイルを増やしていかなければなりません。

そして、画面に指示をプログラムで与えたいときは、それぞれその画面に対応した「.m」ファイルに記述していくことが基本になります。

それでは、ファイルを作成していきましょう。まず、myWebSitesと書かれた箇所の上で、左クリックをします。
xcode_web29
次に「New File」をクリックします。
xcode_web29
Cocoa Touch Class」を選択します。
xcode_web30
そしてファイルの名前をつける箇所へ到達するのですが、ここでは、「Web1ViewController」
と設定します。ここでつけた「Web1ViewController」という名前は、あとから画面へ対応する設定をしていくことになります。
xcode_web31
下記のように表示されたら、「Web1ViewController.h」と「Web1ViewController.m」 が選択できるので、ドラッグ&ドロップで位置を変更します。
そして、「Web1ViewController.m」を選択できることを確認してみてください。
それでは、画面にファイル(Web1ViewController.hとWeb1ViewController.m)を対応させて行きたいと思います。
xcode_web32
xcode_web33
xcode_web34

まず、対応させたい画面の上のあたりをクリックします。
右側に「Class」と表示されているか確認してください。もし表示されていない場合は、その上の青い部分が四角のマークになっているかチェックしてみてください。
Classとかかれた場所にWeb1ViewControllerと設定していきます。予測で出るので、試してみてください。
xcode_web37

これで画面とファイルの対応は完成です。
他の画面もそれぞれ同じ方法でファイルを作成し、「Web2ViewController」、「Web3ViewController」と設定していきます。

サイトを表示する準備をする

それでは、Web1ViewControllerと設定した画面の上あたりをクリックしてください。
そして、右上にあるボタンをおして、プログラムを同時に表示してみましょう。
もしわからない場合は前回の記事を参考にしてください。
xcode_web47
xcode_web48
ここで順を追って基本的な考え方について説明します。

今画面の上にのっている「WebView」はこのままでは使えません。なぜならプログラムがこの「WebView」を認識していないからです。

まずは、認識させてみましょう。認識させるには、認識させる場所に設定しなければなりません。

場所は、「@implementation Web1ViewController」とかかれたすぐ横で

{ }と書きます。

そして、その括弧と括弧の間に名前をつけて認識させます。

これをWebViewをプログラムで使えるように「宣言」したといいます。

それではやり方を説明します。まず、Web1ViewControllerの画面側の上にあるWebViewをクリックします。

そして、キーボードのcontrolボタンを押しながらドラッグ&ドロップをしていきます。

すると線が伸びるのがわかります。そして、離すと、Nameと書かれた場所がでてくるので、そこに名前を決めます。ここでつけた名前を「変数名」と呼びます。ここでは、「webView」と名前をつけます。そして、右下にある「connect」ボタンをクリックするとプログラムとつながります。

xcode_web50
ここにwebViewという名前をつけます。
xcode_web51
xcode_web53
そして、すこし設定をしていきます。左側にinfo.plistという箇所があるので、そこをクリックします。1番したの「+」ボタンをクリックします。
「NSAppTransportSecurity」と記述します。
その後、左側の矢印をクリックして、「NSAppTransportSecurity」欄の「+」を押してください。
そうすると、2つ選択できるようになりますので、1番上の「Allow ~~」をクリックしてください。
これで設定は完了です。
具体的にみていきます。
まず、「info.plist」をクリックします。
xcode_web54
赤い部分をクリックします。
xcode_web56
「NSAppTransportSecurity」と記述します。
左側の赤い部分の矢印を下にします(クリックすると下方向になります)
xcode_web57
下記のように記述すると完成です。
xcode_web59

基本的な考え方

「Web1ViewController.m」に戻ります。
続いてプログラムについて説明します。
先ほど「宣言する場所」が存在すると書きましたが、「画面が表示されたときにはじめに呼ばれる場所」という場所も存在します。それが、viewDidLoadの括弧内です。
なので、そこに、webViewに表示するURLを設定していきたいと思います。

URLを設定してみよう

xcode_web0
まず、viewDidLoad内に、
NSURL *url = [NSURL URLWithString:@”http://www.yahoo.co.jp”];
NSURLRequest *req = [NSURLRequest requestWithURL:url];
[webView loadRequest:req];
と記述します。

重要なのは、ここの@“http://www.yahoo.co.jp”という部分だけです。
プログラムにはいくつかの決まりがあり、こういった場合には必ずこう書くというものがいくつか存在します。

それは、武器がほしいが武器を1からつくるのはめんどくさいので武器を借りてくるという感じに似ています。
そして重要な部分だけ変更します。慣れてくると、「自分に何が必要なのか、何がしたいのか、そのためにはどうすればよくてどこを変更すればよいのか」などがわかってきます。今はまだ深く考えなくても大丈夫です。こういったものなのだなくらいに思っておいてください。
武器にあたる「こういった場合には必ずこう書く」という辞書のようなものはこちらにあるので、参考にしてみてください。

シミュレーターで確認してみよう

xcode_web60
それでは、シミュレーターで確認してみましょう。
サイト1ボタンを押すと、画面が下から出てきて、Yahooが表示されたかと思います。

最後に

いかがでしたか?

URLを変更するだけでさまざまなサイトを閲覧することができるようになったかと思います!

次回は「【Xcode】お気に入りの動画アプリを開発してみよう」をみていきたいと思います。

コードを触っていて、わからなくなったら…

プログラマーじゃないから、どう触ったらいいかわからないという方は無料でエンジニアに質問ができるteratail(テラテイル)を利用しましょう。Yahoo!知恵袋のように気軽に質問でき、多くの過去質問も見ることができるので基本的なことであればこちらのサイトだけで解決します。

公式サイト:https://teratail.com

IT業界に強い転職サイト・転職エージェントのオススメはココ!【比較ランキング】









この記事をかいた人

yuta

知識ゼロからプロのInstagram風画像加工iPhoneアプリを作る 特別クーポン配布中! 詳しくはこちらから! エンジニアでプロデューサー ピーターティールが大好きです! Twitter:Yuta Fujii 質問はお気軽にどうぞ!