Parseを使ったアプリケーション開発(実践編 2)

こんばんは、毒きのこです。(  ・ิω・ิ)

Parseを使った開発記事も今回が一旦最後です。前回はただParse上に実際テーブルにあたるもの(Object)をスキーマレスに生成できたとこまでをやってみました。今回は実際もう少し簡単なiOSアプリを作ってParseの感覚を掴んでみましょう〜。

実際プロジェクトを作成して確認してみるのもいいですが、とにかく雰囲気だけでもサクッと見てみたいって人のために、実際作成したアプリの動画を撮ってみたので確認してみてください。結構サクサク動いてサーバーサイドの実装いらずに簡単にサーバー連携アプリが出来ちゃってるのがわかるかと思います!


1. Parseのプロジェクトを新規作成する
parse_01

「ParseSampleApp」のプロジェクト名で新規作成します。
テーブルは作らずParse側はここで終了。次はiOSアプリの方に入っていきます。

2. iOSプロジェクトを新規作成

iOS側のプロジェクト名も「ParseSampleApp」としました。
それではさっそくAppDelegate.swiftから。

今回サンプルをササっとお見せするためにStoryboardを使わず全部コードで画面等作成しています。AutoLayoutも使ってませんがiPhone6s,6Plus等で見れば基本問題ないです。
特に解説は大丈夫だと思いますが、12、15、19行目でParseの初期化を行います。IDとKeyは前回作ったのとは別のモノなので気をつけて下さい。

今回は2画面構成なのでAppDelegateでViewControllerを2つ作り、それをUITabBarControllerに入れてます。(ココではUINavigationControllerを2つ作ってますがViewControllerでも問題ありません)

次に、トップの1つ目の画面、以下のような画面を作ってみます。
parse_02

まずTopViewController.swiftからダダーっと行きます。

Parse以外の処理が結構入っちゃってますが、簡単に解説。
まず「名前」「年齢」「血液型」のUILabel、UITextField周りを生成、最後「Parseへ転送」のボタンも作成し、まとめてself.viewにaddSubviewします。(99行目あたりまで) これで一旦画面が出来上がります。
一番上でParseをimportするのを忘れずに。

※非同期処理でローディングのダイアログを表示するのにSVProgressHUDを使わせてもらっています。DLして、pod installで組み込んで使用してください。
「名前」「年齢」のテキストフィールドへの入力制限を監視する処理を173行目のデリゲートメソッドで行っています。肝心のParse周りの処理が114行目executeAPI()で、ここではParseのテーブル(TestObject)を生成し、実際テキストフィールド等に入力した「名前」「年齢」「血液型」の値をセットしています。saveInBackgroundWithBlock()は非同期で処理が行われるので無事成功すれば、ParseのTestObjectに入力した値が入ります。

TopViewController.swiftはこんな感じで、血液型を選択するところはCustomPickerView.swiftと別クラスを設けているので一応そちらも載せておきます。

「血液型」A、B、 AB、Oを選択するカスタムPickerViewです。普通にTopViewController上に書いてやってもよかったですね…
次は最後、2つ目の画面ListViewController.swiftです。

内容としては、1つ目の画面の各項目に入力しParseのTestObject上に保存されたデータをTableViewとして表示するといったものです。Cellもソースで作成しているのであわせて載せておきます。

2つ目画面が表示されると78行目requestGetApi()が実行されます。無事Parseから値を取得できれば、あとはそのParseから返ってきた配列の分だけTableViewへ表示させます。

parse_019

1つ目の画面に入力した各項目の値が、2つ目画面上TableView内に表示されています。
UITabBarの2つのアイコンは今回サンプル用にシステム内からソレっぽいのを適当に選んだものです。(SearchとHistory)
またCell内の青い四角は写真を表示するイメージで仮で入れました。実際Parse上に画像をUploadし、それをこの青い四角のようにbitmapデータとして取得し表示させることも出来ます。(今回はイメージだけ…)

さてさて、ちゃんとParse上のTestObjectにINSERTされ、それをアプリのListViewController上で表示させることが出来たので、一応Parse側も見てみましょう。

parse_04

ちゃんとParse上にも「name」「age」「blood」と新しいカラムが追加、値も入っています! 実際1つ目画面でどんどん新しいデータを登録、2つ目画面でそれらを表示、といったことが可能となっています。

どうでしょうか!?
これらを応用すれば簡単にゲームのランキング画面や、ユーザーのお気に入りリストといったものをサーバー連携にて実装することが出来ます。(今回のようにParseがほとんどカバーしてくれているのでサーバー側の開発はほとんど必要ありません)

ちょっと今回はソースがズラズラと並んで量が多くなってしまいましたが、Parseを使えばサーバーサイドをほとんど実装することなく、サーバー連携するアプリが簡単に作れることを確認出来たかと思います。是非活用してみてください₍₍ (ง ˙ω˙)ว ⁾⁾

ではでは!
サンプルソースはこちら

スポンサーリンク
336 x 280 レクタングル(大)
336 x 280 レクタングル(大)