wootan's diary

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

Xcode10 で error: Fabric: Info.plist Error と出たときの対処方法

Crashlytics のドキュメントが更新されていました。

Crashlytics Installation — Fabric for Apple documentation
Get started with Firebase Crashlytics  |  Firebase

If you’re using Xcode 10 on a new project, Xcode 10 adopts a new build ordering that is independent of the ordered list in the Build Phases of Xcode. Put "$(BUILT_PRODUCTS_DIR)/$(INFOPLIST_PATH)" into your Fabric Run Script’s “Input Files” section to ensure your installation of Fabric goes smoothly.

Xcode10のみ追加で設定が必要になります。

Project -> Build Settings -> Run script の
Input Files に下記を追加します。

$(BUILT_PRODUCTS_DIR)/$(INFOPLIST_PATH)

この状態で Clean しても解決しない場合は DerivedData を削除すると解決します。

【2度目】AppStore の Today タブに Relux のストーリーが掲載されました!

Today

2018年09月13日(木)に AppStoreJP のTodayタブで「Relux」のストーリーが掲載されました。

f:id:wootan1102:20180919144757j:plain:w300


総合ランキング(無料 App)31位!
f:id:wootan1102:20180919151115p:plain:w300


Twitterでも紹介されました!


AppStoreからぜひご覧ください!
‎理想の宿を見つけよう:App Store ストーリー

ストーリーでも紹介されている「テーマ別まとめ」は眺めているだけでも楽しいです。
ダウンロードして触ってみてください!

Relux(リラックス)

Relux(リラックス)

  • Loco Partners Co., Ltd.
  • 旅行
  • 無料

【解決済】fastlaneをアップデートしたら What target would you like to use? と聞かれるようになった

fastlaneを軽い気持ちでアップデートしたら What target would you like to use? と毎回聞かれるようになってしまいました。
これを毎回指定するのは面倒なので Issues をみてみるとわかりやすいタイトルでありました 笑

github.com


どうやら get_version_number の仕様が変更になったようです。
get_version_number - fastlane docs


get_version_numberは開発版のアイコンに使用していたので
add_badge部分の記述を変更しました。

add_badge(
  shield: "Version-#{get_version_number(target: 'relux', configuration: 'Debug')}-blue",
  no_badge: true
)

これで What target would you like to use ? と聞かれないようになりました。

Firebase Crash Reporting から Firebase Crashlytics にアップグレードしました!

Reluxでは Crash Reporting を使用していましたが
今回 Crashlytics がベータ版を卒業するタイミングでアップグレードすることにしました。

firebase.googleblog.com

ブログによるとCrash Reporting は 2018年09月08日に完全に廃止されるそうです。

f:id:wootan1102:20180404145014p:plain

コンソール画面上からも同じように廃止される旨が表示されています。

アップグレード手順

公式ドキュメントにかかれている手順で簡単にアップグレードできます。
Firebase Crash Reporting から Firebase Crashlytics にアップグレードする  |  Firebase

Podfileの編集

Crash Reportingを削除
pod 'Firebase/Crash'
Fabric, Crashlyticsを追加
pod 'Fabric', '~>1.7.2'
pod 'Crashlytics', '3.9.3'

ビルド設定を変更

Build Settings > Debug Infromation FormatDWARF with dSYM に変更
※なぜか DWARF に設定されていて少しハマりました...

Build Phaseのスクリプトを編集

下記を削除

${PODS_ROOT}"/FirebaseCrash/upload-sym

下記を追加

"${PODS_ROOT}/Fabric/run"

動作確認手順

#import <Crashlytics/Crashlytics.h>

// 任意のタイミングで強制クラッシュ
[Crashlytics.sharedInstance crash];
Import Crashlytics

// 任意のタイミングで強制クラッシュ
Crashlytics.sharedInstance().crash()

対応するとどう表示されるか?

Crash Reporting

従来の Crash Reporting アプリの選択画面から表示することができる。

f:id:wootan1102:20180404150213p:plain

Crashlytics

クラッシュ率に関しては Crash Reporting版 と Crashlytics版 のデータがマージして表示されていました。
アップグレード前の過去のクラッシュ率を Crashlytics から確認することができます。
ただし、クラッシュ数、影響を受けたユーザ数、問題は表示されないのでどうしても見たい場合は Crash Reporting の画面で確認する必要があります。

Sketch に Create Symbol のショートカットを追加する

こちらのプラグインを使用してショートカットを追加しようとしたのですが
うまく動かずクラッシュしてしまうのでMacの設定からショートカットを追加しました。

github.com

ショートカットキーの設定方法

ショートカット設定画面を開く

システム環境設定 > キーボード > ショートカット

f:id:wootan1102:20171227164348p:plain

+からショートカットキーを追加

+をクリックするとこのような画面が表示されます。
f:id:wootan1102:20171227164528p:plain:w300

アプリケーションで 「Sketch.app」 を選択
メニュータイトルに 「Create Symbol」 を入力
キーボードショートカットに 「^S」を入力
追加ボタンをクリックすることでショートカットが追加されます。

※^はコントロールです。今回はSymbolのSにしました。

追加後はこのように表示されます。
f:id:wootan1102:20171227164837p:plain


Sketchのメニュー上ではこのように割り当てられているショートカットキーが表示されます。
f:id:wootan1102:20171227165109p:plain:w300

Sketchがクラッシュして起動できなくなってしまった場合

クラッシュ後にSketchが起動しなくなる現象が発生しました。
アプリを再インストールしても治らず、Application Support配下のファイルを削除することで解決しました。

※設定などがすべて初期化されます。
※再度ライセンスキーを登録する必要があります。
プラグインを再インストールする必要があります。

rm -rf ~/Library/Application\ Support/com.bohemiancoding.sketch3

もっと良い方法があるかもしれませんが私の場合はこれでなおりました。
Sketchpacksをつかっていて良かったです。。。

Reluxアプリ開発の舞台裏 便利な開発用機能

この記事は Relux Advent Calendar 2017 23日目の記事です。
今回は開発の舞台裏ということで、普段はユーザーの目に触れることのない開発用機能などをご紹介します。

入社時のアプリの問題

僕が宿泊予約サービス Relux を運用する Loco Partners にジョインした当初は
開発版のアプリがどのサーバに接続されているかが判別できませんでした。
本番環境と見分けがつかず、誤って本番環境のホテル・旅館を予約してしまう事故も発生していました。

改善したこと

まず、アプリがどのサーバに接続しているかわかるように、画面下端に半透明のバーを追加しました。
f:id:wootan1102:20171212160625p:plain:w300
こちらは本番環境に接続している時に表示されるバーです。

本番環境はレッド、開発環境はグレーのように環境ごとに色をわけています。
これにより色だけでどのサーバに接続されているか判断できるようになっています。
また、ジョインしたばかりの人も迷わないように右下に接続先を表示しています。
すべての画面でこのバーが表示されるようになっているので、誤って本番環境で予約してしまうということもなくなりました。


次にアプリの接続先のサーバを変更できるようにしました。
接続先のサーバは上記のバーをタップすることで切り替えられるようにしました。
タップするたびに
本番環境 → ステージング環境 → 開発環境 → ... というように接続先が変更されるようになっています。
ただし、デバッグ中に誤タップで接続先がかわってしまうということがないように
未ログイン状態でかつホーム画面でのみ切り替わるという制限を設けました。
改善前は環境ごとにアプリをビルドし、デバッグ担当者はそれを再インストールする必要があったのでかなり工数削減できたと思います。

Release版がDebug版に上書きされてしまう問題

開発版でサーバの接続先を変更できるようにしたので後回しにしていたのですが
社内で動作確認のために Release版とDebug版を入れかえている方がかなりいたので対応しました。

改善したこと

llcc.hatenablog.com
こちらの記事を参考にして Release版とDebug版を共存できるようにしました。
App Extensionsに対応している場合は、そちらもRelease版とDebug版を分ける必要があり少し大変でした。

さらにアイコンも見分けがつく用にRelease版とDebug版でわけることにしました。
上記の記事で紹介されている方法でもよかったのですが、アイコンをわざわざ用意するのが面倒だったので fastlane-plugin-badge を利用しています。

github.com

f:id:wootan1102:20171213141012j:plain:w300
アイコンはこのように表示されます。(冬仕様のトナカイさんの首が...)


Fastfileでは下記のようにしています。

add_badge(shield: "Version-#{get_version_number}-blue", no_badge: true)
...
reset_git_repo(files: icons, force: true)

add_badgeでバッジ付きのアイコンを生成し、
アプリの配信アップロードが終わったあとに git reset しています。

開発・デバッグをスピードアップするための効率化

さらに開発・デバッグの効率をよくするために
繰り返し行う操作や面倒な操作をサポートする機能を実装しました。
この中からいくつか紹介したいと思います。

f:id:wootan1102:20171213165320g:plain
端末を振るとUIAlertControllerで開発・デバッグ用のメニューが表示されます。
このメニューはどの画面からでも呼び出せるようになっています。

サーバの接続先バーを非表示にする

開発途中のスクリーンショットが必要な場合や
デザイン確認などで一時的にバーをはずしたいという要望があったので実装しました。
操作後にはずしたままにするとRelease版と間違えてしまいそうだったので
画面遷移すると表示されるようにしています。

アプリからSlackへスクリーンショットを送信する

弊社ではデバッグ用にテスト端末をレンタルしているのですが
特定のアカウントで App Store や Slack にログインしたままにするわけにはいかず、
AirdropMacスクリーンショットを転送し、MacからSlackへアップロードするという手順を踏んでいました。

何枚も送信したい場合はこれでは手間なので
アプリ上でスクリーンショットを擬似的に合成して送信することにしました。
ソースコードをみていただければわかりますが、Windowのlayerを重ねて描画しています。

 UIApplication *application = [UIApplication sharedApplication];
UIWindow *window = application.keyWindow;
UIGraphicsBeginImageContextWithOptions(window.bounds.size, NO, 0.0f);
CGContextRef context = UIGraphicsGetCurrentContext();
for (UIWindow *aWIndow in application.windows) {
    [aWIndow.layer renderInContext:context];
}
UIImage *captureImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return captureImage;

ここで生成したUIImageをSlackに送信しています。

f:id:wootan1102:20171213171209p:plain

Slackではこのように表示されます。
不具合の報告などにも使われるので
ユーザID、言語、接続先サーバなども送信するようにしています。

FirebaseデバイストークンをSlackへ送信する

Relux では Push Notification に Firebase を採用しています。
FirebaseデバイストークンはDBで保存しているのでSELECTすれば良いのですが
こちらもSlackに送信するようにしました。
アプリを再インストールするとデバイストークンが変更されるので地味に便利です。

Firebase Remote Config の設定値を表示する

Firebase Remote Config は便利なのですが現在設定されている値がわからず困ることがありました。
そこで Key, Value を表示する一覧を実装しました。また、値をすぐ反映するためのフェッチ機能も実装しています。

f:id:wootan1102:20171222195507p:plain
ほとんど中身はお見せできないのですがこのように表示されます。

初回起動時の挙動を確認するためにローカルデータをすべて削除する

初回起動時の挙動を確認するためにアプリを一度アンインストールしてからインストールする必要がありました。
それではあまりにも効率が悪すぎるのでローカルデータをすべて削除する機能を追加しました。
こちらもかなり工数が削減できたと思います。

最後に

いかがでしたか?
紹介した機能以外にも画像のキャッシュクリアなどの基本的なものから
ちょっとマニアックなデバッグ用機能もあります。
どれも最初は自分が楽をするためにおこなっていた改善ですが
いつの間にかチームのためにもなっていました。これからもそんな改善を繰り返していきたいと思います!

そしてアプリを一緒につくってくれる仲間を募集中です。
興味がある方はお話だけでも聞きにきてください!
www.wantedly.com

「エンジニアを褒めるネコ」スタンプをSlackに導入しました。

「エンジニアを褒めるネコ」とは?

note.mu

こばかなさんが作成したLINEスタンプです。
Slackでもつかえるようにと無料配布されています。ありがとうございます!

導入しようと思ったきっかけ

きっかけはこちらのツイート

Slackのカスタム絵文字だと小さいなと思っていたのですが
こちらの動画をみて大きく表示できることがわかり導入しました。
もっとエンジニアを褒めてほしいという理由もあります 笑

どうやってやったか

スタンプコマンドはこちらを利用しました。ありがとうございます!

github.com

インストール方法はREADMEに丁寧に書かれていて超簡単です。

実際の画面

Slackのスラッシュコマンドはヒントと短い説明文を設定することができるので
このように表示することができます。

f:id:wootan1102:20171220143038p:plain

スタンプの表示はこんな感じです。

f:id:wootan1102:20171220142919p:plain


たくさんつかってたくさん褒めてもらえるように
社内に浸透させていきたいと思います!