wootan's diary

iOSアプリ開発を中心としたエンジニアブログ

Firebase Performance Monitoring を導入してみた

前回の記事から少し間があいてしまいましたが
Firebase Performance Monitoringを導入しました!
β版ですが十分つかえるレベルだと思います。

developers-jp.googleblog.com

Firebase Performance Monitoring とは?

アプリの起動時間、ネットワークリクエストなどのパフォーマンス情報を自動的に測定し、Firebaseコンソール上で確認することができるようになります。
アプリのパフォーマンスで問題がある部分を把握するのに役立つサービスです。

導入方法

Firebaseを導入済であればかなり簡単に導入することができます。

0. 前提条件

  • Xcode8.2.1以降
  • iOS8以上をターゲットとするXcodeプロジェクト
  • CocoaPods 1.0.0以降

1. Podfileの編集

pod 'Firebase/Performance'

2. インストー

pod update

3. コードの変更

// Objective-C
@import <Firebase.h>

[FIRApp configure];

ハマったところ

インストール時にこのようなエラーがでて焦りました。

[!] Unable to satisfy the following requirements:

- `Firebase/Performance` required by `Podfile`

Specs satisfying the `Firebase/Performance` dependency were found, but they required a higher minimum deployment target.

すぐに気づいたのですが update せずに install しており
Firebase/Coreが古いバージョンでロックされていました。

Firebase Remote Configをつかって有効/無効を切替え

公式サイトにもやり方が掲載されています。
Peformance Monitoring はβ版なので切替えられるようにしておいたほうが良さそうです。
Disable the Firebase Performance Monitoring SDK  |  Firebase

1. コードの変更

公式とは違うのですがこのように設定しました。

if (self.remoteConfig[@"performance_enable"].numberValue.boolValue) {
   [FIRPerformance sharedInstance].instrumentationEnabled = YES;
   [FIRPerformance sharedInstance].dataCollectionEnabled = YES;
} else {
   [FIRPerformance sharedInstance].instrumentationEnabled = NO;
   [FIRPerformance sharedInstance].dataCollectionEnabled = NO;
}

2. Firebase Remote Configの設定

Firebaseコンソール上ではこのようになっています。
値を0に変更することで無効化できます。
また、この設定自体を誤って消してしまった場合にも無効になります。
f:id:wootan1102:20170630210112p:plain

確認可能な情報

ダッシュボードではこのように表示されます。

f:id:wootan1102:20170630210637p:plain


端末、国、OS毎の起動時間や
ネットワークリクエストごとの応答時間、成功率など
細かくデータを確認することができます。

アプリの起動時間、ネットワークリクエストの応答速度で
ユーザ体験が大きくかわってしまうので
Firebase Performance Monitoringで計測して、
問題がある部分を少しずつ改善していくのが良さそうです!

Firebaseのカスタムパラメータレポートをつかってみた

Google I/O 2017でFirebaseの新機能が発表されました!
Analyticsの強化やパフォーマンス測定ツールの提供など盛りだくさんです。
詳しくはこちらのブログを御覧ください。

developers-jp.googleblog.com


今回はカスタムパラメータレポートを試してみました。

カスタムパラメータレポート

これまでカスタムパラメータはFirebaseの画面上では確認できず、BigQueryと連携して分析する必要がありました。
これからは画面上で簡単に分析が可能になります。
カスタムパラメータのためにクエリを書かなくてよくなります。

設定方法

1. Analytics > イベントのイベント一覧を表示

f:id:wootan1102:20170531221517p:plain

2. カスタムパラメータを追加したいイベントのアイコンからパラメータレポートを編集



3. パラメータ一覧から分析したいデータを追加

f:id:wootan1102:20170531223047p:plain

4. タイプを設定して保存

これで設定は完了です!かなり簡単ですね!
これから追加するカスタムパラメータをあらかじめ追加しておくこともできます。

データの閲覧

イベント一覧からカスタムパラメータを設定したイベントを選択すると詳細画面に遷移します。
この画面でカスタムパラメータの内容を確認することができます。

f:id:wootan1102:20170531224702p:plain
こちらはRelux開発版の検索キーワード一覧です。
(動作確認に北海道で検索している人が多いようです!)

数値は伏せていますがイベント発火件数とユーザ数を確認することができます。
通常のイベントと同様にフィルタをかけることができるので
ユーザプロパティやユーザリストで絞り込んでデータをみることもできます。

※データが多い場合はこのようなエラーが発生することがありますが
 待機してしばらく待つと問題なく表示されます。

f:id:wootan1102:20170531224612p:plain

あまりにも時間がかかる場合は期間をフィルタすると良さそうです。

制限

カスタムパラメータレポートは設定してから蓄積されるようになっています。
他のデータと同様に反映されるまでに最大24時間かかることがあります。
過去分について分析する場合やすぐにデータが見たい場合は
BigQueryを使用して分析する必要があります。

また、カスタムパラメータレポートを設定できる数は
テキストは10個まで、数値は40個まで設定することができます。

参考URL

support.google.com


複雑な分析はBigQueryを使う必要がありますが、
簡単なデータならエンジニア以外でも確認できるようになるので凄く便利ですね!
よくみるデータはここで確認できるようにしておくと良さそうです!

FirebaseのStreamViewとDebugViewをつかってみた

ReluxではFirebaseを既に導入しているので実際にさわってみました。
間違いなく神機能なのでぜひ使ってみてください!

【参考記事】
developers-jp.googleblog.com


DebugView

DebugViewはFirebaseで取得可能なイベントをリアルタイムに閲覧することができます。
不具合の調査や新しいイベント、プロパティの確認などにも使えそうです。
これまではBigQueryを利用するか、イベントが反映されるまで数時間待つ必要がありましたが
これからはDebugViewを利用することで簡単にイベントを確認することができます。

使い方

f:id:wootan1102:20170314192223p:plain

EditScheme -> Run -> Arguments Passed On Launch に -FIRDebugEnabled を追加して有効にするだけで利用可能になります。
Debugを無効にしたい場合は -FIRDebugDisabled を有効にするだけです。

実際の画面

f:id:wootan1102:20170314192818p:plain

実際の画面ではイベント、ユーザプロパティ、エラーをリアルタイムに確認することができます。
問題ある部分はハイライトされるのでしっかりイベントを設定しておけば、デバッグ時のエラー調査なども捗りそうです。

Stream View

StreamViewは直近30分以内にFirebaseAnalyticsに届いたイベントを可視化したものです。
イベントが送信されていればすぐに確認することができます。DebugViewのような設定は必要ありません。

実際の画面

f:id:wootan1102:20170314194005p:plain

地図上にこのように表示されます。
正確な位置まではわかりませんが、どの都市からアクセスがあるかを確認することができます。

他にもイベント一覧や
f:id:wootan1102:20170314195159p:plain

ユーザプロパティ一覧
f:id:wootan1102:20170314194720p:plain

地域など この画面で様々なデータを閲覧することができます。
f:id:wootan1102:20170314194904p:plain

フィルタをかけることもできるので特定の地域・イベント・プロパティで絞って
データをウォッチすることも可能です。

ユーザスナップショット

画面右下にあるユーザスナップショットをクリックすると
ランダムに選択されたユーザのイベントストリーミングを閲覧することができます。
ユーザスナップショットは地域、アプリバージョンでのみ絞り込むことできます。

f:id:wootan1102:20170314200114p:plain


新しい施策に対してユーザがどういう行動をとっているかすぐに確認することができるのでRemoteConfigとの相性も良さそうですね。
細かいデータの確認はBigQueryが必要ですが
StreamViewでいろいろできそうなので有効活用していきたいと思います。

まだ Firebaseを導入していない場合は
こちらからデモプロジェクトを確認してみてください!本当にこれは凄い奴です!!
support.google.com

Google Data StudioをつかってFacebookページのいいね数を表示してみた

Relux Facebookページの「いいね!」の数を
社内の一番目立つところに置いてあるディスプレイに表示しました。
いいね数はリアルタイムに更新されるので
出社時と退社時で数値が増えているのが嬉しいです。

f:id:wootan1102:20170226175105j:plain

簡単にできるのでやり方をご紹介したいと思います。
サーバなどを用意する必要はありません!

つかったもの

f:id:wootan1102:20170226181635p:plain

手順

1. Google Spread Sheetを新規に作成

このシートはGoogle Data Studioのデータソースとして使用します。

2. Google Apps ScriptでFacebook GraphAPIを使用していいね数を取得

function myFunction() {
  var response = UrlFetchApp.fetch('https://graph.facebook.com/?id=rlx.jp&access_token=アクセストークン’);  
  var result = JSON.parse(response.getContentText());
  var range = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet().getRange(1,1);
  range.setValue(result.likes);
}

Facebook Graph APIで取得した「いいね」の数をA1セルにセットしています。
プロジェクトのトリガーでmyFunction を定期的に実行するように設定します。

f:id:wootan1102:20170226182817p:plain

3. Google Data Studio で新しいレポートを作成

データソースに先程作成したGoogle Spread Sheetを指定します。

データの表示はスコアカードを使用しています。
データソースにはGoogleAnalyticsを指定することもできるので
PV数なども簡単にダッシュボードに表示することができます。

4. Google Chrome Extension の作成

Google Data Studioのデータは自動的に更新されず、
画面に表示される更新ボタンを押す必要があります。

ブラウザをリフレッシュするプラグインでは値が更新されなかったので

更新ボタンを一定間隔で押すだけのChrome拡張機能をつくりました。

manifest.json

{
  "content_scripts" : [
    {
      "matches" : [
        "https:\/\/datastudio.google.com\/*"
      ],
      "js" : [
        "content_scripts.js"
      ]
    }
  ],
  "manifest_version" : 2,
  "name" : "Google Data Studio Auto Refresh",
  "version" : "0.1"
}

content_scripts.js

function action() {
    var elements = document.getElementsByClassName("control-icon icon ng-scope");
    elements[0].click();
}

setInterval("action()", 60000);

これをChromeで読み込んで完成です。

f:id:wootan1102:20170226182832p:plain


社内でも好評です!工数をあまりかけずに簡単にできるので試してみてはいかがでしょうか?

Xcodeのビルド時間を短縮する

Xcodeのビルド時間が気になってきたので
調査してすぐにできそうなものを試してみました。

Xcodeが使用するコア数を設定

Macのコア数を確認

以下のコマンドを実行

$system_profiler SPHardwareDataType
Model Name: MacBook Pro
      Model Identifier: MacBookPro12,1
      Processor Name: Intel Core i5
      Processor Speed: 2.7 GHz
      Number of Processors: 1
      Total Number of Cores: 2
      L2 Cache (per Core): 256 KB
      L3 Cache: 3 MB
      Memory: 16 GB…

Total Number of Coresがコア数なのでこの場合のコア数は2です。

Xcodeの設定を変更

上記コマンドで調べたコア数を設定します。
これよりも大きな値を設定しても意味はなく、パフォーマンスが悪化することがあります。

以下のコマンドを実行

$defaults write com.apple.dt.Xcode IDEBuildOperationMaxNumberOfConcurrentCompileTasks 2

Debug Information Formatを変更

SchemeがDebugのときのみ
DWARF with dSYM FileからDWARFに設定を変更します。
dSYMファイルはクラッシュログを調査するのに必要なもので開発時は必要ないです。

CocoaPodsのコンパイルをスキップ

※効果はありますが戻し忘れに注意です。

Product -> Scheme -> Edit SchemeからBuildを選択し
Find Implicit Dependenciesのチェックをはずします。

f:id:wootan1102:20170112175515p:plain

Podfileを変更してもビルドは走らないので注意しましょう。

CocoaPodsではなくCarthageを使用

Carthageはライブラリを事前にビルドし、フレームワークを作成するのでビルド時間を短縮することができます。
対応していないライブラリ以外はCarthageを使用するのが良さそうです。
試せていませんがSwiftPackageManagerでも効果があるようです。

github.com
github.com


ビルド時間を確認するには?

以下のコマンドを実行

$defaults write com.apple.dt.Xcode ShowBuildOperationDuration YES

Xcode上ではこのようにビルド時間が表示されます。

f:id:wootan1102:20170112174619p:plain

最後に

設定を少し変更するだけでもビルド時間が改善されました。
Swiftはコードレベルでも改善できることがあるので
パフォーマンスを意識してコードを書くように心がけたいと思います。

ReluxがAppStoreでフィーチャーされました!

5ヶ国同時フィーチャー!

2016年12月9日から台湾、韓国、香港、オーストラリア、ニュージーランドの5ヶ国のAppStoreでフィーチャーされています。
※Reluxは英語、中国語(繁体字簡体字)、韓国語に対応しています。(ローカライズについては別の記事で紹介したいと思います。)

フィーチャーの影響

海外のRelux会員数が急増しています。
それに伴い予約やアプリのレビューも増えています。

海外のユーザにも日本の旅館・ホテルの魅力をしっかり伝えられるよう
さらに良いサービスにしていきます!

お知らせ

Reluxでは一緒にアプリをつくってくれるエンジニア・デザイナーを募集しています!
興味ある方はこちらからご応募ください。

www.wantedly.com

www.wantedly.com

Relux Androidアプリ がベストアプリに選ばれました!

play.google.com

ベストアプリとは?

Google Play がこの 1 年を振り返って選んだ「2016年 ベストアプリ」をご紹介します。思わず家族や友人にすすめたくなるアプリ、画面にくぎ付けになってしまうアプリ、ランキングを賑わせたアプリ、洗練された美しいアプリなど、多彩なラインアップ。さらに12/8 (木) 受賞イベントにて、2016年 ベストアプリ並びに各カテゴリー大賞が発表されます。発表をお楽しみ!

2016年 ベストアプリ

ベストデザインアプリ

ベストデザインアプリとしてReluxが選ばれています!
Androidユーザの方はダウンロードしてみてください。

f:id:wootan1102:20161201105532p:plain

play.google.com