【Apple Watchでできること】まとめ

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

AWJ tutorial

WordPressを使っているサイトのネイティブアプリ化(AppleWatch対応版)のチュートリアル第3回目です。
(第3回はこちら→第3回「WebViewでページを表示する」

作るのはこんなアプリ

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

AWJ

無料
(2015.08.16時点)
posted with ポチレバ

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

MagicalRecordのインストール

お気に入りの記事を保存(あとで読む記事的なイメージ)するために、CoreDataを利用します。
とはいえ、CoreDataは初心者には扱うのがなかなか難しいもの。
というわけで、CoreDataのラッパーライブラリであるMagicalRecordを利用します。

iOSライブラリの管理ツール「CocoaPods」のインストール

cocoapodsはrubygemのライブラリなので、ターミナルからgem installコマンドでインストールします。
rubyとgemコマンドが利用できる環境を事前に設定しておいてください。

$ sudo gem install cocoapods

続いて、cocoapodsのセットアップを実行。

$ pod setup

きちんとインストールされていることを確認する意味でも、バージョンを確認してみましょう。

$ pod --version

私の現在の環境では「0.37.2」と返ってきました。

プロジェクトにMagicalRecordをインストールする

cdコマンドで、xcodeのプロジェクトのフォルダへ移動し、以下のコマンドを実行します。

$ pod init

フォルダ内に「Podfile」というファイルが生成されていると思います。
ファイルを開いたら、以下の様にMagicRecordを追加。

target 'AWJClone' do
  pod 'MagicalRecord'
end

target 'AWJCloneTests' do

end

pod insallコマンドでインストールします。

$ pod install

プロジェクトフォルダをみると、「AWJClone.xcworkspace」というファイルが生成されていると思います。
これまでは、XcodeでAWJClone.xcodeprojを開いていたと思いますが、今後はAWJClone.xcworkspaceを開くようにしましょう。

MagicalRecordのセットアップ

Bridging Headerを設定

MagicalRecordはObjective-C製のライブラリなので、Swiftで利用するためにはBridging Headerを使う必要があります。

Xcodeの上部メニューからFile > New > File…を選択。
Header Fileを選択。
20150817002240

ファイル名を「AWJReaderApp-Bridging-Header」としてCreate。
20150817002404

作成したAWJReaderApp-Bridging-Header.hを、以下のように編集します。

#ifndef AWJClone_AWJReaderApp_Bridging_Header_h
#define AWJClone_AWJReaderApp_Bridging_Header_h

#import "MagicalRecord.h"

#endif

編集したAWJReaderApp-Bridging-Header.hを、Bridging Headerとして利用するために、ファイルパスをXcodeで指定します。
アプリのTARGETSからBuild Settingsを選択。
「Swift Compiler – Code Generation」「Objective-C Bridging Header」の入力エリアをタップし、先ほど作成したAWJReaderApp-Bridging-Header.hのフルパスを入力します。
20150817003659

続いて、AppDelegate.swiftに以下のとおり、MagicalRecordを利用するための設定を記述します。

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

  MagicalRecord.setupCoreDataStackWithAutoMigratingSqliteStoreNamed("AWJClone.sqlite")
  UINavigationBar.appearance().tintColor = UIColor.whiteColor()

  return true
}
func applicationWillTerminate(application: UIApplication) {

  MagicalRecord.cleanUp()
  
  self.saveContext()
}

以上でMagicalRecordのセットアップは完了です。

お気に入り記事の一覧画面を作成する

「お気に入り一覧画面」のレイアウトを作成する

Main.storyboardを開いて、ObjectLibraryからView Controllerをキャンパス内にドラッグ&ドロップ。
さらに、Table ViewをView Controllerの中心にドラッグ&ドロップします。
20150817011842

Attributes InspectorのPrototype Cellsを1に変更。
20150817012114

Size InspectorのRow Heightを80に変更。
20150817012327

メイン画面の時と同様に、Connections InspectorでdatasourceとDelegateをそれぞれView Controllerと接続。
20150817013123

Table View Cellを選択し、Attributes InspectorのIdentifierでセルに対して任意の名称を指定。
今回はお気に入りセルという意味で「FavCell」と命名しました。
20150817012521

メイン画面と違い、お気に入り記事一覧はサムネイルなしのシンプルなテーブルで実装するので、Custom Cellは使わずにデフォルトのセルを使います。
そのため、画面レイアウトの作成は、これだけで完了です。

「お気に入り記事一覧」用のViewControllerを作成する

File > New > File…からCocoa Touch Classを選択。
「FavViewController」などわかりやすい名前をつけ、Subclass ofに「UIViewController」を選択してファイルを作成します。
20150818230143

メイン画面と同様に、プロトコルを指定します。

class FavViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

一旦storyboardに戻り、お気に入り記事一覧画面のViewControllerのIdentify InspectorのCustom Classで、先ほど作成した「FavViewController」を指定。
20150818230715

さらに、Table Viewをoutlet接続します。
20150818231026

まだエラーが出ていると思いますが、ここは一旦置いといて…
先にお気に入り記事のデータを格納するためのモデルを作成します。

お気に入り記事のモデルを作成する

お気に入り記事用のエンティティを作成する

お気に入り記事の保存に利用するCoreDataのエンティティを作成します。

AWJClone.xcdatamodeldを選択し、「Add Entry」をクリック。
20150818232604

続いて「Add Attribute」をタップ。
「Attribute:title」「Type:String」の属性を追加します。
20150818232846

同様に、String型の属性「url」「adddate」を追加します。
20150818233235

お気に入り記事のモデル用ファイルを作成する

AWJClone.xcdatamodeldを選択した状態で、上部メニューからEditor > Create NSManagedObject Subclass…を選択。
20150818233449

Data Modelを選択して「NEXT」をクリック。
20150818233701

先ほど作成したエンティティーを選択し、「NEXT」をクリック。
20150818233817

ファイルの保存先を指定して「Create」をクリックします。
※Group, Targetの指定を忘れずに!

Objective-C製のライブラリ(MagicalRecord)から利用できるように、@objcを使う必要があるので、以下のように記述します。

import Foundation
import CoreData

@objc(Entity)
class Entity: NSManagedObject {

  @NSManaged var title: String
  @NSManaged var url: String
  @NSManaged var adddate: String
}

再びAWJClone.xcdatamodeldを表示し、Data Model inspectorでClassを先ほど作成した「Entity」に変更します。
20150819003044

お気に入り記事の一覧ViewControllerを完成させる

まだエラーが残っていた「FavViewController」のUITableViewDelegate, UITableViewDataSourceメソッドを追加します。

class FavViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

  @IBOutlet weak var tableView: UITableView!

  var entries: [Entity]!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    entries = Entity.MR_findAll() as? [Entity]
  }

  override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
  }

  func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return entries.count
  }

  func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = UITableViewCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: "FavCell")
    cell.textLabel!.text = entries[indexPath.row].title
    cell.textLabel?.numberOfLines = 3
    cell.detailTextLabel?.text = "追加した日; " + entries[indexPath.row].adddate
    cell.detailTextLabel?.textColor = UIColor.grayColor()
    return cell
  }
}

処理の内容としては、viewDidLoadで、MagicalRecordのMR_findAll()メソッドを使いEntityを全て取得。
Entity内の属性「タイトル」「追加日」を、デフォルトのTable Cellの要素に代入しています。
ついでに、タイトルは3行まで表示・追加日の文字色をグレーに設定しておきます。

まだデータベースに登録する処理が実装されていないので、中身は空っぽですが、これでエラーも消え、お気に入り記事一覧画面の最低限の機能が備わりました。

メイン画面→お気に入り記事一覧画面の遷移を作成する

メイン画面に「お気に入り」ボタンを設置

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

Attributes InspectorのTitleを空白に変更します。
20150817013800

続いて、ObjectLibraryからBar Button ItemをNavigation Barの右端あたりにドラッグ&ドロップ。
20150817013820

Identifierを「Bookmarks」に変更します。
20150817013858
「お気に入り」「あとで読む」を表示する画面への遷移ボタンです。
僕はブックマークボタンで作成しましたが、もっとイメージに合うボタンを選んだり、自作の画像を設定することも可能です。
アプリの個性を出したい場合は、検討してみてください!

お気に入りボタン→お気に入り記事一覧画面への遷移

作成したお気に位入りボタンをControlキーを押しながら、お気に入り一覧画面へドラッグ&ドロップ。
セグエは「show」を選択。
20150817014808

これで画面が接続されました。
20150817014830

ここまで完成した状態でビルド→実行してみると、「お気に入り記事一覧画面」への遷移と、空っぽのテーブル画面が表示されることを確認できると思います。
IMG 7783


という感じで本日はここまで。
下準備がいろいろ必要で、結構試行錯誤が必要な画面でなかなか大変でした。
「お気に入り記事一覧画面」の実装はまだ未完成ですが、次回はきっちりと完成まで進めたいと思います。
そして、その次の回で、ようやくAppleWatch対応をしていく予定です。(やっと!)

ちなみに、今回の記事はこちらの記事↓をかなり参考にさせていただきました。

同じくiOS開発の初心者とは思えないレベルの高い記事ですので、MagicalRecordをもっとちゃんと知りたい人は、こちらの記事や記事内のリンクを参考にしてみてください!

連載記事

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

コメントを残す

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