この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
WordPressを使っているサイトのネイティブアプリ化(AppleWatch対応版)のチュートリアル第3回目です。
（第3回はこちら→第3回「WebViewでページを表示する」）
作るのはこんなアプリ
アプリ版AppleWatchJournalをそのまま作成します。
詳しい動作は実際のアプリを参照ください！
※そして、もしよかったら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を選択。
ファイル名を「AWJReaderApp-Bridging-Header」としてCreate。
作成した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のフルパスを入力します。
続いて、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の中心にドラッグ＆ドロップします。
Attributes InspectorのPrototype Cellsを1に変更。
Size InspectorのRow Heightを80に変更。
メイン画面の時と同様に、Connections InspectorでdatasourceとDelegateをそれぞれView Controllerと接続。
Table View Cellを選択し、Attributes InspectorのIdentifierでセルに対して任意の名称を指定。
今回はお気に入りセルという意味で「FavCell」と命名しました。
メイン画面と違い、お気に入り記事一覧はサムネイルなしのシンプルなテーブルで実装するので、Custom Cellは使わずにデフォルトのセルを使います。
そのため、画面レイアウトの作成は、これだけで完了です。
「お気に入り記事一覧」用のViewControllerを作成する
File > New > File…からCocoa Touch Classを選択。
「FavViewController」などわかりやすい名前をつけ、Subclass ofに「UIViewController」を選択してファイルを作成します。
メイン画面と同様に、プロトコルを指定します。
class FavViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {一旦storyboardに戻り、お気に入り記事一覧画面のViewControllerのIdentify InspectorのCustom Classで、先ほど作成した「FavViewController」を指定。
さらに、Table Viewをoutlet接続します。
まだエラーが出ていると思いますが、ここは一旦置いといて…
先にお気に入り記事のデータを格納するためのモデルを作成します。
お気に入り記事のモデルを作成する
お気に入り記事用のエンティティを作成する
お気に入り記事の保存に利用するCoreDataのエンティティを作成します。
AWJClone.xcdatamodeldを選択し、「Add Entry」をクリック。
続いて「Add Attribute」をタップ。
「Attribute:title」「Type:String」の属性を追加します。
同様に、String型の属性「url」「adddate」を追加します。
お気に入り記事のモデル用ファイルを作成する
AWJClone.xcdatamodeldを選択した状態で、上部メニューからEditor > Create NSManagedObject Subclass…を選択。
Data Modelを選択して「NEXT」をクリック。
先ほど作成したエンティティーを選択し、「NEXT」をクリック。
ファイルの保存先を指定して「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」に変更します。
お気に入り記事の一覧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を選択し、画面内にドラッグ＆ドロップ。
Attributes InspectorのTitleを空白に変更します。
続いて、ObjectLibraryからBar Button ItemをNavigation Barの右端あたりにドラッグ＆ドロップ。
Identifierを「Bookmarks」に変更します。
「お気に入り」「あとで読む」を表示する画面への遷移ボタンです。
僕はブックマークボタンで作成しましたが、もっとイメージに合うボタンを選んだり、自作の画像を設定することも可能です。
アプリの個性を出したい場合は、検討してみてください！
お気に入りボタン→お気に入り記事一覧画面への遷移
作成したお気に位入りボタンをControlキーを押しながら、お気に入り一覧画面へドラッグ＆ドロップ。
セグエは「show」を選択。
これで画面が接続されました。
ここまで完成した状態でビルド→実行してみると、「お気に入り記事一覧画面」への遷移と、空っぽのテーブル画面が表示されることを確認できると思います。
という感じで本日はここまで。
下準備がいろいろ必要で、結構試行錯誤が必要な画面でなかなか大変でした。
「お気に入り記事一覧画面」の実装はまだ未完成ですが、次回はきっちりと完成まで進めたいと思います。
そして、その次の回で、ようやくAppleWatch対応をしていく予定です。（やっと！）
ちなみに、今回の記事はこちらの記事↓をかなり参考にさせていただきました。
同じくiOS開発の初心者とは思えないレベルの高い記事ですので、MagicalRecordをもっとちゃんと知りたい人は、こちらの記事や記事内のリンクを参考にしてみてください！
連載記事
第1回「HTTP通信でブログのデータを取得する」
第2回「テーブルビューに情報を表示する」
第3回「WebViewでページを表示する」
第4回「お気に入りの記事を保存する（前編）」
第5回「お気に入りの記事を保存する（後編）」
第6回「AppleWatch対応」
