この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
WordPressを使っているサイトのネイティブアプリ化(AppleWatch対応版)のチュートリアル第3回目です。
（第2回はこちら→第2回「テーブルビューに情報を表示する」）
作るのはこんなアプリ
アプリ版AppleWatchJournalをそのまま作成します。
詳しい動作は実際のアプリを参照ください！
※そして、もしよかったらAppleWatchJournalも定期的にチェックしていただけますと超幸いです。よろしくです。
Webブラウザ画面を作成する
作成するアプリでは、テーブルに表示されている記事をタップすると、実際の記事をアプリ内のWebブラウザで表示します。
まずは、そのWebブラウザ画面を作っていきます。
Main.storyboardを開き、ObjectLibraryからView Controllerを選択。
キャンパス内にドラッグ＆ドロップ。
続いて、Web ViewをView Controllerの中心にドラッグ＆ドロップ。
Add Missing Constraintsで、レイアウトを設定しておきましょう。
ブラウザページの作成はこれだけです。
（「進む」「戻る」「ブックマーク」「リロード」などなど、ブラウザとしての機能を充実させてもいいと思います。参考にした書籍「No.1スクール講師陣による世界一受けたいiPhoneアプリ開発の授業」では、このあたりの機能をもう少し作り込んであるので、興味がある人はチェックしてみてください！）
メイン画面→ブラウザ画面の遷移を作成する
メイン画面のView Controllerを選択し、Commandキーを押しながらWebViewControllerにドラッグ。
Segueの設定画面が表示されるので、「show」を選択。
Segueのアイコンを選択し、Attributes InspectorのIdentifierに任意の名前（今回は「toWebView」としました。）
対応するWebViewControllerを作成する
Project navigatorの右クリックメニューの「New File…」、または上部メニューの「File > New > File…」を選択。
「Cocoa Touch Class」を選択。
今回も、クラス名は適当に。Subclass ofは「UIViewController」を選択します。
Main.storyboardを開き、Identity InspectorからCustom ClassのClassに、先ほど作成した「WebViewController」を指定します。
さらに、Web ViewをWebViewControllerクラスにOutlet接続します。
続いて、WebViewControllerクラスの実装に入ります。
表示するページのURLを格納するString変数とタイトルを格納するString変数を定義。
（タイトルはNavigation Barに表示するために使います。）
viewDidLoad()メソッド内で、NSURL→NSURLRequestと変換し、UIWebViewのloadRequestメソッドをコールします。
class WebViewController: UIViewController {
@IBOutlet weak var webview: UIWebView!
var entryUrl = "" // URLを格納するString変数
var entryTitle = "" // タイトルを格納するString変数
override func viewDidLoad() {
super.viewDidLoad()
var url = NSURL(string: entryUrl)! // String変数をNSURLに変換
var urlRequest = NSURLRequest(URL: url) // NSURLRequestにURL情報を渡す
webview.loadRequest(urlRequest) // NSURLRequestを使って、UIWebViewクラスのloadメソッドをコール
self.navigationItem.title = entryTitle // Navigationのタイトルに記事タイトルを設定
}
メイン画面→ブラウザ画面のデータ受け渡しを実装する
メイン画面のViewController（ViewController.swift）にて、記事のURLとタイトルを格納するためのString変数を定義します。
class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
@IBOutlet weak var table: UITableView!
var entryDataArray = NSArray() // entriesデータを格納する配列
var imageCache = [String:UIImage]() // thumbnail用のimageCache
var entryUrl = "" // 記事のURLを格納するString変数
var entryTitle = "" // 記事のタイトルを格納するString変数
続いて、UITableViewがタップされた時の処理を実装します。
performSegueWithIdentifierメソッドにより、セグエを使った画面遷移を実現しています。
func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
var entryDic = entryDataArray[indexPath.row] as! NSDictionary // 記事データの配列からindexPath.row番目の要素を取得
entryUrl = entryDic["link"] as! String // 記事のURLを取得
entryTitle = entryDic["title"] as! String // 記事のタイトルを取得
performSegueWithIdentifier("toWebView", sender: self) // Identifierを"toWebView"と命名したセグエを実行し、WebViewController画面に遷移
tableView.deselectRowAtIndexPath(indexPath, animated: true) //タップした際のハイライトを解除
}
さらに、prepareForSegueメソッドを使い、WebViewControllerへのデータの受け渡しを実装します。
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
if (segue.identifier == "toWebView") {
var wvc = segue.destinationViewController as! WebViewController // セグエ用にダウンキャストしたWebViewCOntrollerのインスタンス
wvc.entryUrl = entryUrl + "?utm_source=AWJReader&utm_medium=app&utm_campaign=news"
wvc.entryTitle = entryTitle
}
}
ポイントはentryUrlへの追記文字列です。
utm_soure, utm_medium, utm_campaignを設定することで、サイトのGoogle Analyticsでリファラを取得することができます。
アプリからサイトへの流入数を計測する際に、簡単にチェックすることができます！
あとは実行してみると、無事に画面遷移することを確認できると思います。
もろもろ微調整を
見た感じちょこちょこ気になるところがあると思うので調整します。
Navigation Barに表示されるアイコンの色を変更する
ブラウザ画面に遷移した際の戻るボタンの青とピンク背景の相性が最悪なので、白に変更しましょう。
AppDelegate.swiftにて、UINavigationBarのtintColorを指定します。
func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
UINavigationBar.appearance().tintColor = UIColor.whiteColor() // Navigation Barのアイコンの色を白に変更。
return true
}
「読み込み中」のインジケータを表示
画面の読み込みには少し時間がかかるので、読み込み中であることを示すインジケータを表示します。
まずはWebページの読み込み終了を読み込めるように、WebViewControllerにUIWebViewDelegateのプロトコルを追加。
インジケータを表示するための変数も作成します。
class WebViewController: UIViewController, UIWebViewDelegate {
@IBOutlet weak var webview: UIWebView!
var entryUrl = "" // URLを格納するString変数
var entryTitle = "" // タイトルを格納するString変数
var indicator = UIActivityIndicatorView() // インジケータを使うための変数
また、UIWebViewのViewDidLoadでインジケータの位置・色を指定。
UIWebViewDelegateの設定も行います。
override func viewDidLoad() {
super.viewDidLoad()
webview.delegate = self //UIWebViewDelegateの設定
indicator.center = self.view.center //インジケータを画面中央に表示
indicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.Gray //インジケータをグレーに設定
webview.addSubview(indicator) // インジケータをWebView上に配置
さらに、WebViewController.swift内で、Webページの読み込み開始時にインジケータを表示。読み込み終了時にインジケータを停止する処理を記述します。
func webViewDidStartLoad(webView: UIWebView) {
indicator.startAnimating()
}
func webViewDidFinishLoad(webView: UIWebView) {
indicator.stopAnimating()
}
実行してみると、インジケータが表示されるのを確認できると思います。
タイトル部分を非表示にするように、CSSをカスタマイズする
現在のWebViewはページをそのまま読み込んでいるだけなので、サイトタイトルやメニューボタンなどが表示されていますが、アプリ内の遷移であれば”記事のみ”を表示したいもの。
というわけで、CSSをカスタマイズして、タイトルやメニューを非表示にしましょう。
UIWebViewのstringByEvaluatingJavaScriptFromStringメソッドを使い、ページ読み込み完了時にjavascriptを読み込み、CSSを書き換えます。
func webViewDidFinishLoad(webView: UIWebView) {
indicator.stopAnimating()
var css:String = "header,#s-navi,div#breadcrumb,.entry-title{display:none;} main{padding-top: 0;} .blogbox{border-top: none;}" //Custom CSS
var jsscript = "var style = document.createElement('style');style.type = 'text/css';var cssContent = document.createTextNode('"
jsscript += css
jsscript += "');style.appendChild(cssContent);document.body.appendChild(style);"
webView.stringByEvaluatingJavaScriptFromString(jsscript)
}
実際は、使用するサイトに合わせて、文字列cssの内容を書き換えてください。
また、ページ読み込み完了時に処理が走るので、読み込み中はタイトルなどが表示されてしまいます。
どうしても気になる人は、アプリ専用のUA(User Agent）を作成し、そのUA向けの表示を調整するなどの処理にも挑戦してみてください！
実行すると、無事に記事にフォーカスした表示が実現しました！
という感じで、今回はここまで。
一応、WordPressブログのネイティブアプリ化という意味では、最低限の機能は実装が完了しました。
次回は、AppleWatch連携の要にもなる、「きになる記事の保存」の処理を実装していきたいと思います！
連載記事
第1回「HTTP通信でブログのデータを取得する」
第2回「テーブルビューに情報を表示する」
第3回「WebViewでページを表示する」
第4回「お気に入りの記事を保存する（前編）」
第5回「お気に入りの記事を保存する（後編）」
第6回「AppleWatch対応」
