VOYAGE GROUP エンジニアブログ

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

2014年05月

Adtech Studio × VOYAGE Casual Talks #2

先日、第2回目となる Adtech Studio × VOYAGE  Casual Talks を開催しました。
DSC04249


サイバーエージェントさんでもエントリが公開されてます。
【第2回開催】Adtech Studio × VOYAGE Casual Talks!
きっちり翌週月曜の朝にはブログが更新されてるところがさすがです!

というわけで当ブログでも簡単にご紹介。

▼前半戦
前半は「アドテクでのAWS活用」をテーマにAdtech Studio 木村さん、VOYAGE GROUPからはZucks 大谷が登壇しました。

最初はZucks 大谷から。
「Zucks Adnetwork作ったけど何か質問ある?」ということで、アーキテクチャ、AWSに対する所感、リリース後に起こった様々な事件など、クローズドな場だからこその話に質疑応答も盛り上がりました。

次は木村さんからの事例。
サービスの概要と、様々なAWSのサービスから好きなサービスを3つほど紹介してくれました。
質問に対する回答にも利用実績に裏付けされた重みがあり、とてもためになりました。


▼後半戦
後半は「本当にあった怖い話」をテーマにパネルディスカッションを行いました。
Adtech Studioからは福原さん、鷹雄さんが、VOYAGE GROUPからはZucks 舘野、adingo 粟飯島が参戦!
まじで外ではできない話のオンパレードでみんな大笑いや苦笑いしてましたw
DSC04276


▼最後に
今回も大いに盛り上がったので、まだまだ続けていきたいと思います。


[PR]
VOYAGE GROUPではアドテクエンジニアを絶賛募集中です!
adingo WEBアプリケーションエンジニア
Zucks 広告配信システムエンジニア
cosmi WEBエンジニア



【初心者でも簡単】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テストができるサービスもいくつかあるので、実装がめんどうであれば、そちらを利用してもいいと思います。テストをカスタマイズしたい場合や、自サーバーでデータを収集したい場合などには、是非この方法も試してみてください。

記事検索
QRコード
QRコード