公式YouTubeチャンネルはこちら！

WordPressブログをiPhoneネイティブアプリ化（AppleWatch対応版）のチュートリアル 第5回「お気に入りの記事を保存する（後編）」

SHARE

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

AWJ tutorial
WordPressを使っているサイトのネイティブアプリ化(AppleWatch対応版)のチュートリアル第5回目です。
（第4回はこちら→第4回「お気に入りの記事を保存する（前編）」）

目次

  1. 作るのはこんなアプリ
  2. Webブラウザに「お気に入り」への追加機能を追加
    1. Webブラウザ画面に「お気に入り」ボタンを追加
    2. 「お気に入り」ボタンの機能を実装する
    3. 動作確認
  3. お気に入り記事一覧画面→Webブラウザの遷移を作成する
    1. お気に入り記事一覧画面→WebブラウザのSegueを作成する。
    2. お気に入り記事一覧画面→Webブラウザのデータ受け渡し処理を記述する。
  4. アプリの機能を仕上げる
    1. お気に入り記事一覧画面の「削除」機能を追加
    2. お気に入り記事一覧画面→Webブラウザ画面への遷移の場合、saveボタンを非表示にする
  5. 連載記事

目次へ

作るのはこんなアプリ

アプリ版AppleWatchJournalをそのまま作成します。
詳しい動作は実際のアプリを参照ください！

AWJ

AWJ
無料
Masashi Ezaki
(2015.08.23時点)
posted with ポチレバ

※そして、もしよかったらAppleWatchJournalも定期的にチェックしていただけますと超幸いです。よろしくです。

Webブラウザに「お気に入り」への追加機能を追加

Webブラウザ画面に「お気に入り」ボタンを追加

ObjectLibraryからNavigation Itemを選択し、画面内にドラッグ＆ドロップ。
20150823005133

さらに、ObjectLibraryからBar Button ItemをNavigation Barの右端あたりにドラッグ＆ドロップ。
20150823012845

“お気に入り”のアイコンはなかなか難しいところですが、今回はとりあえずプリセットで用意されているアイコンで。
Identifierを「Action」に変更します。（かなり抽象的で、ユーザーに機能はあまり伝わらないアイコンですが…。）
20150823013215

「お気に入り」ボタンの機能を実装する

先ほど作成したActionボタンをControlキーを押しながらドラッグ＆ドロップして、WebViewControllerに接続。
今回はOutlet接続ではなく、Actionで接続します。
20150823013614
Action名はなんでも構いませんが、今回はシンプルにsaveとしました。

作成されたメソッドに、実際の処理を記述していきます。

@IBAction func save(sender: AnyObject) {
  let now = NSDate()
  let formatter = NSDateFormatter()
  formatter.dateFormat = "yyyy/MM/dd HH:mm:ss"
  let adddate = formatter.stringFromDate(now)

  let newItem: Entity = Entity.MR_createEntity() as Entity
  newItem.title = entryTitle
  newItem.url = entryUrl.componentsSeparatedByString("?")[0]
  newItem.adddate = adddate
  newItem.managedObjectContext!.MR_saveToPersistentStoreAndWait()
  navigationController!.popViewControllerAnimated(true)
}

処理の前半部分では、追加した時間として残したい現在時間を、見やすい形に整形しています。

後半部分では、まずMagicalRecordのMR_createEntity()メソッドで新しいエンティティーを作成。
タイトル、URL、追加日をエンティティーの各アトリビュートに代入。
MagicalRecordのMR_saveToPersistentStoreAndWait()メソッドで、エンティティーの保存を行っています。

ちなみに、記事のURLはWebブラウザを起動した時点でリファラーのためのパラメータが付いています。
後々のために一旦ここでパラメータを削除したいので、entryUrl.componentsSeparatedByStringメソッドを使って?前後でURLの文字列を分割。?より前の部分だけを保存するようにしています。

最後にナビゲーションのpopViewControllerAnimatedメソッドを使い、Webブラウザからメインページへと戻る処理を入れました。

動作確認

ここで一旦動作確認をしてみましょう。

メイン画面から好きな記事を選んでWebブラウザ画面へ→右上のsaveボタンをタップ。
メイン画面右上の「お気に入り記事一覧」ボタンをタップしてみてください。

saveした記事が、一覧に表示されているのを確認できると思います。
IMG 7802

お気に入り記事一覧画面→Webブラウザの遷移を作成する

一覧画面の表示ができたので、次はテーブルをタップした時の処理を作っていきます。
基本的にはメイン画面→Webブラウザの遷移と同じ処理です。

お気に入り記事一覧画面→WebブラウザのSegueを作成する。

記事一覧画面のView Controllerを選択し、controlキーを押しながらWebViewControllerにドラッグ。
Segueの設定画面が表示されるので、「show」を選択します。
20150823194509

Segueのアイコンを選択し、Attributes InspectorのIdentifierに、メイン画面→Webブラウザ画面とは違う名前をつけます。
今回はtoFavWebViewとしました。
20150823194836

Webブラウザ画面を共有するので、storyboardは以下のようになっていると思います。
20150823194555

お気に入り記事一覧画面→Webブラウザのデータ受け渡し処理を記述する。

処理の実装も、メイン画面→Webブラウザ画面と同じようにやっていきます。

まずは、お気に入り記事用のviewController（FavViewController.swift）で、URLとタイトルを格納するString変数を用意。

class FavViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

  @IBOutlet weak var tableView: UITableView!
  var entries: [Entity]!
  
  var entryUrl = ""
  var entryTitle = ""

続いて、UITableViewがタップされた時の処理、およびprepareForSegueメソッドによるデータ受け渡しの部分を実装します。

func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
  entryUrl = entries[indexPath.row].url
  entryTitle = entries[indexPath.row].title
  performSegueWithIdentifier("toFavWebView", sender: self)
  tableView.deselectRowAtIndexPath(indexPath, animated: true)
}
    
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
  if (segue.identifier == "toFavWebView") {
    var wvc = segue.destinationViewController as! WebViewController
    wvc.entryUrl = entryUrl + "?utm_source=AWJReader&utm_medium=app&utm_campaign=favorite"
    wvc.entryTitle = entryTitle
  }
}

格納するURLのパラメータのうち、utm_campaignのところだけ、メイン画面→Webブラウザ画面の時とは別のものを設定しています。
これで、GoogleAnalyticsを使ってデータを取得する際に、リファラは「AWJReader」として合算値を計測。メイン画面経由とお気に入り一覧画面経由の流入はキャンペーンの値で計測することができるようになります。

これで、画面遷移は完了。
実行してみると、メイン画面と同様にWebブラウザ画面へ移動するのが確認できると思います。
IMG 7805

アプリの機能を仕上げる

お気に入り記事一覧画面の「削除」機能を追加

お気に入り記事一覧はいくらでも追加できるので、リストを左右にスワイプすることで項目を削除できるようにしたいと思います。

お気に入り記事用のviewController（FavViewController.swift）で、以下のように処理を記述します。

func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {
        if editingStyle == .Delete {
            entries.removeAtIndex(indexPath.row).MR_deleteEntity()
            NSManagedObjectContext.MR_defaultContext().MR_saveToPersistentStoreAndWait()
            tableView.reloadData()
        }
    }

実行してみると、リストを右から左へスワイプすることで削除ボタンを表示。ボタンタップでリスト項目を削除できることを確認できると思います。
IMG 7806

処理の内容は、MagicalRecordのMR_deleteEntity()を使って、Entityを削除。
削除した後は、reloadData()でテーブルを再描画しています。

お気に入り記事一覧画面→Webブラウザ画面への遷移の場合、saveボタンを非表示にする

メイン画面からの遷移とお気に入り記事一覧画面からの遷移で、Webブラウザ画面は共有しています。
でも、お気に入り記事一覧画面から遷移した場合には、お気に入りに追加するボタンは不要ですよね？
なので、遷移によってボタンの表示／非表示を切り替えたいと思います。

まずは、お気に入りに追加ボタンをWebViewControllerにOutlet接続します。
名前はsaveButtonとしました。
20150823213810

次に、ボタンの表示／非表示を設定する変数を定義します。

class WebViewController: UIViewController, UIWebViewDelegate {

  @IBOutlet weak var webview: UIWebView!
  
  var entryUrl = "" // URLを格納するString変数
  var entryTitle = "" // タイトルを格納するString変数
  var indicator = UIActivityIndicatorView() // インジケータを使うための変数
  var entryStorable = true // お気に入りボタンの表示／非表示

さらに、WebViewControllerのviewDidLoad()メソッド内で、ボタンの表示／非表示の処理を実装します。
saveButtonを無効にした上で、透明にすることで非表示にしています。

override func viewDidLoad() {
  super.viewDidLoad()

  // 中略...
  self.navigationItem.title = entryTitle // Navigationのタイトルに記事タイトルを設定
  
  if (!entryStorable){
    saveButton.enabled = false
    saveButton.tintColor = UIColor.lightTextColor().colorWithAlphaComponent(0.0)
  }
}

さらに、メイン画面、お気に入り記事一覧画面のそれぞれのprepareForSegue()メソッドで、entryStorableを設定します。

■ViewController.swift

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
  if (segue.identifier == "toWebView") {
    var wvc = segue.destinationViewController as! WebViewController
    wvc.entryUrl = entryUrl + "?utm_source=AWJReader&utm_medium=app&utm_campaign=news"
    wvc.entryTitle = entryTitle
    wvc.entryStorable = true
  }
}

■FavViewController.swift

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
  if (segue.identifier == "toFavWebView") {
    var wvc = segue.destinationViewController as! WebViewController
    wvc.entryUrl = entryUrl + "?utm_source=AWJReader&utm_medium=app&utm_campaign=favorite"
    wvc.entryTitle = entryTitle
    wvc.entryStorable = false
  }
}

実行すると、お気に入り記事一覧画面からの遷移の場合はボタンが消えていることを確認できると思います。
IMG 7808

というわけで、WordPressブログのネイティブアプリ化、iPhone版はこれで完了です！！
初めての本格的なアプリ制作だったのでなかなか大変でしたが、何とか最低限のカタチにはなったんじゃないかと思っています。
次回はいよいよ（ようやく）AppleWatch対応！
記事を書くのにもなかなか時間がかかってしまっている状況で申し訳ないんですが、お楽しみに！

連載記事

第1回「HTTP通信でブログのデータを取得する」
第2回「テーブルビューに情報を表示する」
第3回「WebViewでページを表示する」
第4回「お気に入りの記事を保存する（前編）」
第5回「お気に入りの記事を保存する（後編）」
第6回「AppleWatch対応」

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

前の記事

WordPressブログをiPhoneネイティブアプリ化（Ap…

次の記事

AppleWatchに新機能を追加するApple純正のスマート…