wootan's diary

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

【解決済】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


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

Reluxアプリ開発で使っているデザインツール

この記事は Relux Advent Calendar 2017 16日目の記事です。
Reluxのアプリ開発で使っているデザインツールについて書きたいと思います。
qiita.com

Relux ではメインのUIデザインツールとして Sketch を採用しています。
最近は Zeplin を導入しようと思い、少人数でつかいはじめたところです。
今回はSketchとZeplinの便利機能をご紹介したいと思います。


Sketchとは

SketchはUIデザインに特化したデザインツールです。
複雑な画像処理には向いていませんが、動作が軽く直感的な操作で使用することができます。
フリーのテンプレート素材も充実しており、プラグインで機能を拡張することもできます。
多くの企業で採用され Relux でも1年以上愛用しています。

公式サイトはこちら
Sketch - The digital design toolkit


Sketchの便利な機能

今回はSketchの便利な機能とその使い方を3つご紹介します。

  1. スタイル
  2. シンボル
  3. Sketch Mirror

1. スタイル

Sketchは複数のオブジェクトに対して、共通のスタイルを適用することができます。特にテキスト周りはスタイルを使いこなすことで作業効率がアップします。

スタイルの作成方法

1. スタイルのもとにしたいオブジェクトを選択
スタイルは選択しているオブジェクトに設定されているパラメータをもとに作成されます。

2. Create New Shared Styleをクリック

f:id:wootan1102:20171206183426p:plain

3. 任意のスタイル名を入力

f:id:wootan1102:20171206183500p:plain:w200

スタイル名はあとから変更することができます。

スタイルの適用方法

1. スタイルを適用したいオブジェクトを選択

2. スタイルの一覧から選択

f:id:wootan1102:20171206184845p:plain

クリックだけで簡単に適用できます。
切り替えも一瞬なので、いくつかパターンを用意して比較検討することもできます。


スタイルの変更と反映

スタイルを設定したオブジェクトは自由に変更を加えることができます。
変更した内容は、同じスタイルが設定されたオブジェクトには即時反映されません。

f:id:wootan1102:20171206185451p:plain:w200
オブジェクトが変更されるとスタイル名の横に更新ボタンが表示されます。
この更新ボタンを押すことで、すべてのオブジェクトに変更が反映されます。
既存のスタイルに変更を加えて新たなスタイルを作成したい場合は
更新ボタンをおさずに Create New Shared Style からスタイルを作成することもできます。

スタイルの管理

作成したスタイルは Organize Shared Style… で管理することができます。

f:id:wootan1102:20171206185615p:plain:w300
名前部分をダブルクリックで名前変更
左下の [-] で削除をおこなうことができます。
スタイルは名前順でソートされる仕様になっています。

2. シンボル

次はシンボルについてご紹介します。シンボルは再利用可能なオブジェクトです。
ボタンのように何度も利用するオブジェクトはシンボル化することで作業効率がアップします。

シンボルの作成方法

1. シンボルにしたいオブジェクトを選択

2. CreateSymbolをクリック

f:id:wootan1102:20171208153847p:plain:w300

3. 名前を入力

f:id:wootan1102:20171208153858p:plain:w300

シンボルの名前はあとから変更可能です。
Send Symbol to "Symbols" Page にチェックをいれると
Symbolページが作成され、ここでシンボルの編集などをおこなえるようになります。

f:id:wootan1102:20171208154151p:plain:w300


シンボルの利用

シンボルはツールバーのメニューから挿入します。
Insert > Symbols から選択します。

f:id:wootan1102:20171208160625p:plain:w300

画面の任意の位置をクリックすることでシンボルを挿入することができます。

シンボルの数が多くなってくると縦に長くなってしまいますが、
名前をスラッシュで区切ることでグルーピングすることができます。

f:id:wootan1102:20171208171513p:plain:w300

f:id:wootan1102:20171208171533p:plain:w300

選択画面ではこのように表示されます。
命名規則をきちんと決めてからシンボルをつくるようにすると良さそうです。

シンボルの変更とオーバライド

シンボルはスタイルと違い変更を加えると即時反映されます。
シンボルの良いところは、設定されている値をオーバーライドできることです。

f:id:wootan1102:20171208175708p:plain:w300

例えばボタンの場合はOverridesでテキスト部分を任意の値に設定することで
ボタンのテキスト値を変更することができます。

3. Sketch Mirror

最後にSketch Mirrorをご紹介します。
Sketch Mirror はSketchのアートボードやシンボルをプレビューするアプリです。
iPhone上でリアルタイムに表示することができます。
使い方はiPhoneにSketch Mirrorをインストールし、USBで接続するだけです。

if:id:wootan1102:20171208180234j:plain:w300

Sketch Mirrorでデザインを確認すれば
実機で思ったとおりに表示されないということも少なくなるはずです。

Sketchの紹介は以上になります。
Sketchはプラグインも充実しているので別の記事にまとめたいと思います。
次は最近つかいはじめた Zeplin についてご紹介します。

Zeplinとは

Zeplin は Sketch や Photoshop のアートボードからレイアウト指示書(スタイルガイド)を作成するツールです。
デザインツールを持っていないメンバーにも、サイズやマージン、色などを共有することができます。
それだけでなくレイアウト指示書上にコメントを記入することもできます。
Slackと連携することもできるので、デザインの更新があった場合やコメントなどをSlackで確認できます。

公式サイトはこちら
zeplin.io

Zeplinの便利な機能

今回はZeplinの便利な機能について4つご紹介します。

  1. Sketchとの連携
  2. デザイン指示書(サイズ、マージンの確認)
  3. コメント機能
  4. スタイルガイド

1. Sketchとの連携

Sketchとの連携はSketchのプラグインを利用しておこないます。

f:id:wootan1102:20171208190132p:plain:w300

Plugins > Zeplin > Export Selected Artboards... から選択しているアートボードをエクスポートできます。
アートボードを更新したい場合は、再度エクスポートし直すだけでZeplinに反映されます。

2. レイアウト指示書(サイズ、マージンの確認)

Zeplin は Sketch や Photoshop のアートボードのデータからレイアウト指示書を作成してくれます。
特に設定などは必要ありません。
エクスポートしたアートボードはプロジェクトのダッシュボードに表示されます。
アートボードを開くとレイアウト指示書が表示されます。

f:id:wootan1102:20171208192336p:plain

要素をクリックするだけでサイズや色などを調べることができます。
もちろん要素間のマージやフォントサイズなども表示されます。
デザインファイルを直接やりとりする必要もなく、デザインツールを購入する必要もありません。
デザインツールをもっていないメンバーでもデザインが確認できるのです。

3. コメント機能

次にコメント機能をご紹介します。
Zeplinではレイアウト指示書上にコメントを残すことができます。

f:id:wootan1102:20171208194929p:plain
Cmdを押しながらクリックするとこのようにコメント入力欄が表示されます。

UI上にコメントを残せるので、どの要素に対してのコメントなのか
ひと目でわかるようになっています。通常のチャットツールと同じようにメンションすることもできます。
コメントには5種類の色がつけられるようになっています。
色自体に意味はないのですが、コメントの内容によって色を変更するなどチーム内で工夫すると良いと思います。

f:id:wootan1102:20171208201118p:plain

また、コメントはResolveボタンが用意されていてディスカッションが終わったら解決済にすることができます。

f:id:wootan1102:20171208204526p:plain

もちろん Reopen したり、過去のやりとりを表示する機能も用意されています。


4. スタイルガイド

最後にスタイルガイドをご紹介します。
スタイルガイドはダッシュボード画面から切替えることができます。
Zeplin の画面上部に切り替えボタンが配置されています。

f:id:wootan1102:20171208205725p:plain

カラーパレットではプロジェクト全体で使用されている色の一覧が表示されます。
名前も自由に変更することができます。

f:id:wootan1102:20171208210147p:plain

そしてコードジェネレート機能もついています。

f:id:wootan1102:20171208210210p:plain

言語は Swift4, Swift3, Objective-C, ReactNative など複数の言語に対応しています。

Zeplinの紹介は以上になります。
デザインの共有だけでなく、やりとりをZeplin上でおこなうことができるので
導入できればスムーズに開発がすすめられそうです。

最後に

いかがでしたか?
Zeplinはこんなチームにおすすめです。

  • UIデザインツールとして Sketch をつかっている。
  • デザイン・開発に関わるメンバーが増えてきて、チャットでのやりとりに限界を感じている。
  • デザインの指摘や文言変更のやりとりに時間がかかっている。
  • 実装に必要な情報を共有する方法がきまっていない。

Zeplinはまだまだ使い始めたばかりなので
チームで試行錯誤しながらデザインフローを改善していきたいと思います!
そして一緒にReluxを良くしたいデザイナーさんも募集中です!
興味がある方はこちらもご覧ください。
www.wantedly.com


おまけ①

Sketchのナッジの設定を変更したい場合はNudg.itを使うのがおすすめです。
nudg.it

ナッジの変更は設定ファイル(com.bohemiancoding.sketch3.plist)で可能ですが、こちらのツールはGUIで簡単に設定することができます。

f:id:wootan1102:20171206181701p:plain:w300


おまけ②

Adobe XD の正式版がリリース!
Adobe XD を使えば デザイン、プロトタイプ、共有 を簡単におこなうことができます。
Sketch, Zeplin, Prottが1つになった夢のようなツールです 笑
www.adobe.com

現在 Sketchを使っていなければ、Adobe XDのみでデザインするのが良いかもしれません。
まだまだ足りない機能もありますが今後のアップデートにも注目ですね。こちらのアカウントをフォローしておくと最新情報をキャッチアップできます。
twitter.com

SKStoreReviewController で App Store の評価数が急増した話

SKStoreReviewController で評価数が増えるという噂は聞いたことがあったのですが
まさかここまで増えるとは思いませんでした。

Reluxの評価数

11月01日時点のスクリーンショット
f:id:wootan1102:20171215123927p:plain:w300
528件

12月14日時点のスクリーンショット
f:id:wootan1102:20171215123946p:plain:w300
1,609件

1ヶ月半で1,000件以上増加!


実際の画面

f:id:wootan1102:20171215124952j:plain:w300

こちらは開発版の画面ですがこのように表示されます。

以前のUIはアラートで「レビューを書き込みませんか?」と表示し
「レビューを書き込む」ボタンを押すと App Store に遷移するようにしていました。
また、そこで評価をつけるためにコメントを入力する必要がありました。

SKStoreReviewController は★をタップして送信するだけで良いので
評価のハードルがかなり低くなり、評価数が増加したのだと思います。


対応方法

Swiftの場合

import StoreKit
SKStoreReviewController.requestReview()

Objective-Cの場合

#import <StoreKit/StoreKit.h>
[SKStoreReviewController requestReview];

対応はこれだけで良いので簡単です!

注意事項

  • iOS10.3以降対応
  • iOSの設定でオフにすることができる。
  • 1年で3回までしか表示することができない。
  • App Store 以外から配信されたものでは評価を送信することができない。

ガイドラインではどうなっているか?

App Store Review Guidelines - Apple Developer

1.1.7 App Store Reviews:
App Store customer reviews can be an integral part of the app experience, so you should treat customers with respect when responding to their comments. Keep your responses targeted to the user’s comments and do not include personal information, spam, or marketing in your response.
Use the provided API to prompt users to review your app; this functionality allows customers to provide an App Store rating and review without the inconvenience of leaving your app, and we will disallow custom review prompts.

こちらに記載がある通り提供されているAPIを使わないといけません。
APIを使わずにレビュー依頼をするようになっているとリジェクトされる可能性があります。


requestReview() - SKStoreReviewController | Apple Developer Documentation

When you call this method in your shipping app and a rating/review request view is displayed, the system handles the entire process for you. In addition, you can continue to include a persistent link in the settings or configuration screens of your app that deep-links to your App Store product page. To automatically open a page on which users can write a review in the App Store, append the query parameter action=write-review to your product URL.

APIドキュメントをよく見るとこのように書いてあるのでディープリンクを設置するのは良いようです。

親切にパラメータまで用意してくれています。
https://itunes.apple.com/app/id843104033?action=write-review
このようにURLのパラメータとして action=write-review をつけることで
レビュー画面に遷移するようになっています。便利ですね。


最後に

レビュー依頼を表示するタイミングは工夫する必要がありますが、
ほんの少しの工数で評価数を増やすことができました。
同じようにアクションのハードルを下げることで改善できること
たくさんありそうだなと感じました。既存のUIも一度見直してみたいと思います。