VOYAGE GROUP エンジニアブログ

voyagegroup_techのブログ
VOYAGE GROUPエンジニアブログです。

【初心者でも簡単】facebookのPopでiOSアニメーションやってみた

こんにちは、VOYAGE GROUPエンジニアのガイアです
最近はiOSアプリの開発を主にやってます。
今までのiOSアプリ開発でアニメーションはほぼ触ったことがなかったのですが、今回アニメーションを行う用件が出てきたので、今回やったことを紹介します。
 

今年の5月始め、facebookがアニメーションエンジン「Pop」を発表しました。
「Pop」はfacebookがリリースしたアプリ「Paper」で使われているアニメーションライブラリをオープンソース化したものです。海外では盛り上がっています。
GithubでPopのページを見ると注目度の高さが分かります。

iOSでアニメーションは初めてですが、せっかくなのでPopを使ってみました。


- Pop

github pop
https://github.com/facebook/pop

facebook engineer blog
https://code.facebook.com/posts/234067533455773/introducing-pop-the-animation-engine-behind-paper/

このページでPopにおける目標が3つあげられています。
この目標自体がこのPopを使う利点でもあります。

  1. 一般的なアニメーションを便利に利用する
  2. ポップは拡張可能なフレームワークにする
  3. 開発者に優しいかつ強力なプログラミング·モデルを構築する


- install

CocoaPodsでインストールできます。

pod ‘pop’, ‘~> 1.0’

必要なところでインポートします。

#import <pop/POP.h>


- Code

では実際のコードを見ていきます。

SpringAnimation

Boundsを変更するばねのようなアニメーション

Spring
POPSpringAnimation *anim = [POPSpringAnimation animationWithPropertyNamed:kPOPLayerBounds];
- POPSpringAnimationのインスタンスを作成
- LayerBoundsをアニメーションさせる

DecayAnimation

XYの位置を変更するDecayアニメーション

decay
 POPDecayAnimation *animX = [POPDecayAnimation animationWithPropertyNamed:kPOPLayerPositionX];
- POPDecayAnimationのインスタンスを作成
- LayerPositionのXをアニメーションさせる

2つアニメーションを定義すると合成される。

BasicAnimation

basic
POPBasicAnimation *anim = [POPBasicAnimation animationWithPropertyNamed:kPOPViewAlpha];
- POPBasicAnimationのインスタンスを作成
- kPOPViewAlpha:Alphaの値をアニメーション

普通のアニメーションも同様に記述できるため覚えることが少なくて済みます

PropertyNamedを変更すればアニメーションする要素を変更できます。

割と簡単にアニメーションできてしまいます。
Popを使わずにアニメーションしようとすると実装方法は複数あります。
Objective-Cでアニメーションまとめ
 

PopではNSObjectにカテゴリで関数を追加しているため、CALayerやUIViewなどで同じアニメーションのコードを書けます。
これがコードが統一され、「開発者に優しいかつ強力なプログラミング·モデル」を提供できている要因の一つのようです。(ってfacebook engineer blog に書いてありました)


- 拡張可能

2番目のポップは拡張可能なフレームワークにするとはどういうことでしょう?
実はアニメーションのカスタムプロパティを作ることができるようです。
Playing with pop (iv)

試しにLabelの数値をカウントアップするプロパティを作ってみました。

customProperty

プロパティがなくても割と簡単に作ってしまえるのはいいですね。


- おまけ  複数アニメーションを直列で実行したい

Blockを使えばできますが、簡単にできるようにライブラリを提供してくれている人がいました。
このライブラリを使えばBlockが使えるだけでなく、Popの構文をさらに短縮してくれます。
POP+MCAnimate

install

pod 'POP+MCAnimate', '~> 1.0'
#define MCANIMATE_SHORTHAND
#import <POP+MCAnimate.h>

code

まずは構文の短縮です

同じ動作をするコードです

pop
pop+MCAnimate

さらにアニメーションをBlockで分けて記述することが可能です。
ばねのようなアニメーションの後X軸で回転するアニメーションです。

mcAnimate

割と直感的に書けるのでいいと思いました。
(おそらくPopそのままでも直列のアニメーションを書けるとはおもいますが…)



実際にPopを使ってみて、まだまだできないこともありますができる限りPopを使いたいです。
(コードが統一されるため)
そして、こんな僕でも簡単にアニメーションが作れました !
ありがとうPop !
 

記事のサンプルコード https://github.com/Gaia-Murata/PopDemo

iPhoneアプリでABテスト

こんにちは、genesixで働くiOSエンジニア、@TachibanaKaoruです。

最近Web業界ではA/Bテストがすっかり定着してきます。

iPhoneアプリでもA/Bテストをしてみたいと思う方も多いと思います。
でも、AとBの二種類のパターンでユーザーインターフェースをデザインして、起動時にランダムでどちらかのパターンになるように実装して、アプリをリリースして、ユーザーのレスポンスを計測したあとで、また決まったユーザーインターフェースでアプリをリリースして……なんてことを考えると、ちょっと億劫になってきますよね。

そこで、アプリをリリースし直さずにiPhoneアプリのユーザーインターフェースを動的に変更する方法を実装してみました。
ここのユーザーインターフェースはどうしよう、ちょっとユーザーの反応をみて決めたいんだけど……と迷ったときに試してみてください。

サンプルソースはこちらにおいています。

ユーザーインターフェースを変更する(サーバーを使わない場合)

まずは、特にサーバーを使わない、簡単な方法です。

アプリのなかに複数のStoryboardを持っておけば、任意の時に、Storyboardを全部入れ替えることができます。

起動時に切り替えてもいいですし、ユーザーが選択したタイミングで切り替えてもいいですよね。

下記のように rootViewControllerを差し替えると、アプリ全体のユーザーインターフェースをまるまる変更することができます。

では、Storyboardをさしかえることで、なにができるんでしょうか。
ボタンや表示テキストの色や配色や位置など、画面のデザインやレイアウトを変えることができるのはもちろんですが、segueによる画面同士の遷移を変更することも可能です。
 
例えばトップ画面をタブ形式にするのか、それともテーブルビュー形式にするのかなどで悩むことも多いと思いますが、2パターンのStoryboardを作って、ユーザーの反応を測定してから決定することもできますね。
 

ユーザーインターフェースを変更する(サーバーを使った場合)

さて、さきほどの方法を使うと、アプリのUIをまるまる変更することはできますが、アプリの中に含まれたStoryboardファイルの内容を変更したり、数を増やしたりするためにはアプリを再リリースしないといけません。
 
これではちょっと柔軟性に欠けてしまうので、このStoryboardをサーバー側からとってくる仕組みにして、アプリの再リリースが必要ないようにしてみましょう。
サーバー側においておけば、いつでもStoryboardの内容を変更できますし、必要に応じて数を増やしたりすることも可能です。

まずは、Storyboardをダウンロードできるように、StoryboardがはいったNSBundleを作ります。
そして、そのNSBundleをzipにしてサーバーの適当な場所に配置します。

アプリ側では、そのzipファイルをダウンロード・解凍して、そのなかからStoryboardをとりだします。
あとはさきほどと同様に、rootViewControllerを変更すれば、アプリ全体のユーザーインターフェースを変更することができます。 
参考:Downalodable Storyboard

データ構造の変更に対応する

Storyboardで変更できるのは、画面のレイアウトやデザイン要素だけではありません。
実はStoryboardで、データ構造の変更に対応することもできます。

Storyboardでは、生成したオブジェクトのプロパティにアクセスできる「User Defined Runtime Attributes」という仕組みがあります。
 
例えば、この図に表示されているStoryboardのインスタンスはDITTableViewControllerというクラスのオブジェクトになっています。
普通にStoryboardで生成するだけでは、このオブジェクトのプロパティは初期化されただけの状態ですが、右の「User Defined Runtime Attributes」の部分に入力したい値をいれておけば、このオブジェクトが生成されたときに、指定した値が入力されます。

 44


この図の設定の場合には、下記のソースコードを書いた場合と同じ処理がStoryboardだけで実行されるわけです。


処理の流れとしてはこんな感じになります。
  1. DITTableViewControllerの初期化時にStoryboardで、APIのEndPointとして、「http://itunes.apple.com/jp/rss/topfreeapplications/limit=20/json」の値が設定される
  2. DITTableViewControllerのviewWillAppearで指定されたAPIのEndPointからJsonを取得し、かつ「feed.entry」で指定されたKey Pathの値をArrayとして内部に保持する

このAPIのEndPointと、表示データのArrayとして読み込むKey Pathの値をどちらもStoryboardで設定できるようにしておくことで、APIを変更した場合や、データベース構造が変更になった場合にも、Storyboardを差し替えるだけで対応できるようになりました。

また、画面に表示する要素も同じ仕組みで変更することが可能です。
この図では、UILabelを継承したDITLabelを使って、上記でダウンロードされたJsonファイルの中のim:artist.label要素を画面に表示するようにしています。

 UILabel

この仕組みを使うと、データベースの変更などにも、 Storyboardを変更するだけで対応することができます。

サンルコードのなかに、ソースコードを変更せずにStoryboardだけで「無料アプリリスト」と「映画リスト」をiTunesから取得して表示する画面を作ったので確認してみてください。 

測定

どのようにユーザーインターフェースをきりかえる方法を説明しましたが、A/Bテストで重要なのは確実な測定と分析です。

ユーザーインターフェース変更の仕組みをいれるだけではなく、それぞれのインターフェースでユーザーがどのように反応したのかを測定し、定期的に分析するのが重要です。

ここでは触れませんが、Google Analyticsを使って、適切な計測ポイントをいれておきましょう。

まとめ

Storyboardを切り替えるとアプリ全体のユーザーインターフェース全体を差し替えることができ、A/Bテストを実施できます。
また、 「User Defined Runtime Attributes」を使うことによって、データベースの変更やAPIの変更にも対応できる仕組みを作ることも可能です。

iOSでA/Bテストができるサービスもいくつかあるので、実装がめんどうであれば、そちらを利用してもいいと思います。テストをカスタマイズしたい場合や、自サーバーでデータを収集したい場合などには、是非この方法も試してみてください。

新人エンジニアに薦める1冊

巷では「新人エンジニアに勧める一冊」が流行ったらしいのでVOYAGE GROUPでも聞いてみました。

  ▼1つだけ選ぶなら!
書籍名薦めた人理由いいねした人
計算機プログラムの構造と解釈 @suzu_v 全人類が読むべき @ajiyoshi
@makoga
@brtriver
@hagino3000
体系的に学ぶ 安全なWebアプリケーションの作り方 @ajiyoshi 体系的に安全なWebアプリケーションの作り方を学べるから @suzu_v
@makoga
@brtriver
Webを支える技術 ── HTTP,URI,HTML,そしてREST @brtriver 基礎だけどとても大事なことが学べる @suzu_v
@makoga
情熱プログラマー ソフトウェア開発者の幸せな生き方 @_zoo 研鑽の大切さがわかるから @jewel
パターン認識と機械学習 上, パターン認識と機械学習 下 @hagino3000 学び続ける事の必要性を、これでもかというぐらい思い知らせてくれるから @ajiyoshi
リファクタリング―プログラムの体質改善テクニック @co3k コードの不吉な匂いとはそもそも何かを知って欲しいのと、現実にたゆたうあらゆるコードに立ち向かう気が沸いてくるはず @makoga
UNIX 4.3BSDの設計と実装 @awa-vg UNIX 系 OS のサーバエンジニアは必読。アプリケーションプログラマであっても OS の知識は必ず役に立ちます。古い分シンプルなのも○ @ajiyoshi
パターン・ランゲージ: 創造的な未来をつくるための言語 @TachibanaKaoru ソフトウェアデザインだけでなく、全人類汎用のパターンを取り扱ってるので。  
Clean Code アジャイルソフトウェア達人の技 @jewel それなりのコードを書こうという気持ちになる  
リーダブルコード――より良いコードを書くためのシンプルで実践的なテクニック @sys_cat 個人的に新人時に読みやすかった  
お〜い!竜馬 @masakiMatsumoto 不可能なことは無く、新しい時代を作っていくという気持ち @ajiyoshi

▼無制限かつ無秩序にオススメする編
オススメ理由いいねした人
ハッカーと画家 コンピュータ時代の創造者たち   @ajiyoshi
@makoga
@_zoo
Joel on Software   @ajiyoshi
@makoga
認証技術 パスワードから公開鍵まで いまどき自前で認証機構を拵える時代でもないが、なぜそういう仕組みになっているのかを知るのは重要だし、「どういう脅威があって、どういう対策ができるか」という普遍的な考え方が身につくと思う。パスワードの選び方なんかもあるよ  
めんどうくさいWebセキュリティ Web セキュリティは面倒くさいものだということを知ってほしい。最近の若者はいきなり面倒くさい中に放り込まれていると思うので、どうして面倒くさいのかも知ってほしい  
プログラミング作法 (家帰って読み返さないと)  
プログラミングErlang 改訂版が出るまで待ったほうがいいかもしれないが。 @ajiyoshi
ご冗談でしょう、ファインマンさん〈上〉, ご冗談でしょう、ファインマンさん〈下〉   @makoga
オープンソースソフトウェアの育て方 OSS と冠してはいるが、いまどきの pull request を利用した開発スタイルとか、エンジニア的チームの作り方とか参画の仕方とか、 OSS に関わっていなくても得られるものは多い。けど OSS に関わっていない人には勧めにくい……  
詳解UNIXプログラミング 第3版 古文書のたぐいだけど、枯れたツールの水平思考は悪くない。 @ajiyoshi
UNIXという考え方―その設計思想と哲学    
ビジネスモデル・ジェネレーション フリーミアム、ロングテール、プラットフォーム, etc. といったビジネスのパターンを学ぶ事ができる。GoogleやSkypeといった普段使っているサービスがどのようにして利益を生み出しているかを知る事ができる。  


集計してみると、やっぱりなというVOYAGE GROUPらしいラインナップでした。


[PR]
VOYAGE GROUPでは仲間を募集しています!
上記本を読んでる人はもちろん、読んでない人も興味があれば応募ください。
気軽に #ajiting してみたい人は上記の誰かにtwitterでメンションしてください。 
記事検索
QRコード
QRコード