この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
先日、当サイト「AppleWatchJournal」のAppleWatch対応iPhoneアプリ「AWJ」をリリースしました。
→AppleWatchJournalをAppleWatchで読めるAppleWatchアプリをリリースしました！
私は、AppleWatchを購入してからiOSアプリ開発を勉強しはじめた初心者なので、まだまだ分からないことだらけではありますが、当サイトと同じようにwordpressを使っているサイトのネイティブアプリ化を検討している方のお役に立てればと、”チュートリアル”として、開発手順をまとめたいと思います。
間違っている記述や、もっと効率的な処理方法など、”突っ込みどころ”がございましたら、容赦なくバシバシと突っ込んでいただけますと幸いです！
※”ツッコミ”は、FacebookページかTwitterにいただけると助かります！
作るのはこんなアプリ
アプリ版AppleWatchJournalをそのまま作成します。
詳しい動作は実際のアプリを参照ください！
※そして、もしよかったらAppleWatchJournalも定期的にチェックしていただけますと超幸いです。よろしくです。
動作・開発環境
Mac OS X Yosemite 10.10.4
Swift 1.2
Xcode 6.4
iPhone6 iOS8.4
Xcode新規プロジェクトの作成
まずはXcodeのプロジェクト作成から。
Xcode起動時の画面で「Create a new Xcode project」をクリック。
または、「File > New > Project」から新規プロジェクトを作成します。
「iOS > Applecation」向けの「Single View Application」を選択。
プロダクト名を入力します。
- ProductName: プロジェクト名です。アプリ名の初期値にもなります。好きな名前をつけてください。
- Organization Name: 会社や組織名。入力しなくてもOKです。
- Organizetion Identifier: 任意の値でOKです。通常は「net.applewatchjournal」のようにドメイン表記を逆にした記述で設定します。
- Language: 開発言語を選択します。今回はSwiftを選択。
- Devices: iPad, iPhone, Universalを選択します。今回は「iPhone」を選択。
- Use Core Data: CoreDataを使うかの選択。AppleWatchで「あとで読む」ボタンが押された記事をストックする際にCoreDataを使うので、必ずチェックを入れておいてください！
※wordpressのサイト名称をそのまま使用してもよいと思います。ただ、AppleWatchJournalでは、アプリ名に「AppleWatch」が使われているという理由でリジェクトをくらったため、アプリ名などにはAWJという略称を用いています。
※現状iPadとAppleWatchのペアリングが不可なので、iPhone専用アプリとして作成します。
最後にプロジェクトを保存する場所を選んで「Create」をクリックするとプロジェクトが作成されます。
これで、プロジェクトの作成は完了です。
アプリの設定を”縦画面専用”に変更
横持ちにした時の画面を作るのがちょっとめんどくさいので、今回作成するアプリは縦持ち専用のアプリにしたいと思います。
アプリの設定画面の「Development Info」の「Device Orientation」の「Portrait」のみにチェックを入れます。
Alamofireライブラリをインストール
設定が終わったので、早速アプリを作り始めましょう。
wordpressサイトのアプリ化ということで、まずはサイトの情報を取得する必要があります。
サイトの情報を取得するためには、wordpressサイトのwebサーバーに対してHTTP通信のリクエストを出して情報を取得する必要がありますが、このあたりのプログラムを一から作るのは大変…。
というわけで、HTTP通信を簡単に使えるライブラリ「Alamofire」を使用しましょう！
Alamofireのダウンロード
GitHubで公開されているAlamofireのライブラリをダウンロードしましょう。
→ダウンロードはこちら
※「Download ZIP」をクリックでダウンロードすることができます。
ダウンロードしたライブラリをプロジェクトに追加
ダウンロードしたフォルダ「Alamofire-master」をプロジェクトフォルダにコピー。
「Alamofire-master」フォルダ内の「Alamofire.xcodeproj」というプロジェクトファイルを、Xcodeのナビゲーションエリアにドラッグ＆ドロップ！
これでAlamofireのインポートは完了です。
Alamofireを使うためのビルド設定
アプリ設定画面の「Build Phase」の「Target Dependencies」で「+」ボタンをクリック。
Alamofire iOSを選択して、Addボタンをクリック。
※OSX向けではなく、必ずiOS向けのものを選択してください。
また、Macのシミュレーターではなく実機を使ってデバッグする場合は、以下の設定をしておかないと「Library not loaded エラー」が発生することがあります。
アプリ設定画面の「Build Phase」の「Copy Files」で「+」ボタンをクリック。iOS向けのAlamofireを追加。
※Destinationは必ず「Frameworks」を選択してください。
なお、「CopyFiles」の項目自体が見つからない場合は、右上の「+」ボタンをクリックして、「New Copy Files Phase」を選択して、項目を追加してください。
以上で、Alamofireの設定は完了です。
データ取得のまえに、wordpress側の設定
wordpressのFeedを利用するので、設定をしておきましょう。
管理画面の「設定＞表示設定」から、「RSS/Atom フィードで表示する最新の投稿数」を20件、「RSS/Atom フィードでの各投稿の表示」を全文を表示に設定します。
HTTPリクエスト処理を記述 – サイトの更新情報を取得
それでは、いよいよコードを書いていきましょう。
まずはシンプルなHTTPリクエスト
まずは、ViewController.swiftでAlamofireをインポート。
import UIKit import Alamofire
続いて、サイトの更新情報を取得するリクエスト処理を記述します。
override func viewDidLoad() { super.viewDidLoad() let requestUrl = "https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://applewatchjournal.net/feed/&num=20" Alamofire.request(.GET, requestUrl).responseJSON{ (request, response, json, error) in println(json) }
}まず、リクエストURLですが、「https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://applewatchjournal.net/feed/&num=20」と設定しています。
通常通りwordpressを使っていると、更新情報を配信するRSSを利用していると思いますが、アプリ内で制御しやすいように、GoogleのFeedAPIを使ってRSS形式からJSON形式に変換しています。
もちろん、サイトの配信自体をJSON形式で行うプラグインなどもありますが、パッと調べたものを使った限り情報の欠落があったりしたので、FeedAPIを使うことにしました。
リクエストURLのパラメータの「q=http://applewatchjournal.net/feed/」が、FeedのURLになります。
（wordpressをデフォルト設定で使っている場合は、「サイトURL/feed/」がFeedのURLです。）
続く「num=20」は、取得する記事数。上記の処理では、新着20記事分のデータを取得するように設定しています。
このURLを使い、Alamofire.requestメソッドで、HTTPリクエストの発行、データの取得を行っています。
帰ってきたJSONデータをprintln()で表示させるというのが、上記の処理内容になります。
実行してみると、、、
コンソール部分に、JSONデータがずらーーーっと表示されると思います。
こちらのデータをNSArrayクラスの配列に格納していきたいと思います。
JSONデータの解析
取得されるjsonデータを解析し、実際のデータである“entries”の中身を配列へとコピーします。
class ViewController: UIViewController { // entriesデータを格納する配列 var entryDataArray = NSArray() override func viewDidLoad() { super.viewDidLoad() let requestUrl = "https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://applewatchjournal.net/feed/&num=20" Alamofire.request(.GET, requestUrl).responseJSON{ (request, response, json, error) in let jsonDic = json as! NSDictionary let responseData = jsonDic["responseData"] as! NSDictionary let feed = responseData["feed"] as! NSDictionary self.entryDataArray = feed["entries"] as! NSArray println(self.entryDataArray) } }再び実行してみると、下のJSONデータにあった「responseData」などのキー値が削除され、必要なデータだけが格納された配列が表示されると思います。
FeedAPIのキャッシュ対応
使用しているFeedAPIですが、便利な反面、キャッシュが強力すぎるのがちょっとネックです。
更新情報を即時に反映するためにも、あまり長期間キャッシュを持っておいて欲しくないものです。
そんな時は、requestURLのFeedURLに任意の文字列パラメータを付けると、キャッシュしてあるものとは”別のURL”と判断して、最新情報を取得することができます。
任意の文字列ですが、今回はシンプルに”時間（分）”を使いたいと思います。
1分以内にアクセスした人にはキャッシュが使われますが、それはむしろ表示高速化につながるのでOK！
ということで、キャッシュ対応処理をいれると、、、
override func viewDidLoad() { super.viewDidLoad() let now = NSDate() let formatter = NSDateFormatter() formatter.dateFormat = "yyyy/MM/ddHH:mm" let addeddate = formatter.stringFromDate(now) let requestUrl = "https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://applewatchjournal.net/feed/?" + addeddate + "&num=20" Alamofire.request(.GET, requestUrl).responseJSON{ (request, response, json, error) in let jsonDic = json as! NSDictionary let responseData = jsonDic["responseData"] as! NSDictionary let feed = responseData["feed"] as! NSDictionary self.entryDataArray = feed["entries"] as! NSArray println(self.entryDataArray) }
}現在時間をフォーマットした文字列「addeddate」を生成し、それをパラメータとして利用することで、1分毎に新たなキャッシュを作る仕様としました。
というわけで、第１回はここまで。
まだ、AppleWatchの”A”の字も出てきていませんが、アプリの一番の元となる「データの取得」部分は完成しました。
第２回は、このデータをアプリ内で表示する部分を解説したいと思います。
今日の参考書籍
本日解説したコードは、以下の書籍を参考にしています。
Swiftの言語仕様や、iOSアプリのアーキテクチャなどの説明はひとまず置いといて、とにかく動くアプリを作っていくタイプの書籍なので、どんどん手を動かしながら勉強するのが好きな人には、とても使いやすいと思います。
「とにかくアプリをを作りたい！」という人には、超オススメですよ！
連載記事
第1回「HTTP通信でブログのデータを取得する」
第2回「テーブルビューに情報を表示する」
第3回「WebViewでページを表示する」
第4回「お気に入りの記事を保存する（前編）」
第5回「お気に入りの記事を保存する（後編）」
第6回「AppleWatch対応」
