バグ報告やフィードバック機能を簡単に爆速でアプリに導入できるShakeを使ってみた!!

## はじめに

アプリにバグ報告やフィードバック機能を入れると
アプリのブラッシュアップに繋がり，ユーザ＆デベロッパにとってとても有益です。
ただ，サーバサイドとの連携も考慮すると気軽に実装，とはいかないです。

そんな中，**Shake** というサービスを見つけたので，
今回は，サンプルの iOS アプリで導入して試してみました。

https://www.shakebugs.com/app-developers

## Shake とは

上記リンクにある通り，機能はたくさんあります。
その中で気になったのはバグ報告・フィードバックできる点でした。
受け取った内容をデベロッパがどう処理できるかも使ってみて興味持ちました。

ユーザは端末を Shake して(振って)送信フォームを表示させ，
内容を書いたり，スクリーンショットに手書きでdrawしたものを添付して送信できます。

デベロッパはフィードバックを受け取るとダッシュボードで確認できるようになって
コメント残したり，JIRA や Slack などと連携もできるので便利です。
リリース前も QAチームとのバグ報告の時とかも役立ちそう。

SDK 14.1.3 から日本語も対応しています。

iOS・Android，React Native や Flutter でも利用可能のようです。
後者のふたつは一部機能が使えないようです。
それぞれ対応 OS 等は
Android 5.0 以上，iOS 11以上，React Native 0.56以上，
Flutter	1.12以上 (Android 7.0 以上) となっています。

https://www.shakebugs.com/docs/overview

## サインアップ・Workspace作成

登録は無料でメールアドレスがあれば問題ないです。
登録後に Workspace を作るように言われるので任意の名前を入力して作ります。
基本的には 1Workspace，1アプリ/サービスのイメージになると思います。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/80357386-fa50-9942-a3ff-337e5eed9869.png" width="400">

Workspace 作成後はダッシュボードに移動します。
これから色々設定していきます。

### Client ID・Secret のキー確認

`Client ID` と `Client Secret` が，
アプリで利用するのに必要となるので確認しておきます。

https://app.shakebugs.com/settings/workspace#general

上記リンクの General セクションを開くと確認できます。
あとでアプリに組み込む際に使うので控えておきます。
![スクリーンショット 2021-05-13 16.00.46.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/a3e84c22-16d6-224c-4225-8a8d15a364b1.png)


## SDK 導入

iOS アプリへの SDK 導入は，
CocoaPods，Swift Package Manager(SPM)，直接導入があるようです。
バージョン管理も考慮すると CocoaPods，SPM を選択した方が良きです。
今回は，CocoaPods を使って導入したいと思います。

* CocoaPods
  - https://www.shakebugs.com/docs/ios/setup-cocoapods
* Swift Package Manager
  - https://www.shakebugs.com/docs/ios/setup-spm

Podfile に下記のように記述し，`pod install` コマンド打ちます。
iOS 11 以上なので適宜サポートOSによって書き換えの必要はあります。

```shell:Podfile
source 'https://cdn.cocoapods.org/'

platform :ios, '14.0'

target 'CrashSampleApp' do
  use_frameworks!
  pod 'Shake'
end
```

`xcworkspace` ファイルの方を開いて，
`AppDelegate.swift` に下記のように初期化コードを記述します。
`Client ID` と `Client Secret` 部分は先ほど確認した値を入力します。

```swift:AppDelegate.Swift
import UIKit
import Shake

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        Shake.start(clientId: "CLIENT_ID",
                    clientSecret: "CLIENT_SECRET")
        return true
    }
    // 省略
}
```

Run してアプリを起動すると自動的にダッシュボードに追加されています。
(bundle IDと紐づいている)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/487053c8-3879-cbb6-e1ae-e180e0d371b9.png" width="300">

## 使ってみる

### アプリでバグ報告

ダッシュボードに **Shake** して最初のバグ報告をしようって書いてあるので
iPhone を振ってみます。シミュレータなら **Control + Command + Z** です。

なんかモーダルで画面が出てきた。バグレポート用の画面ぽいですね。
サンプルアプリでは真っ白な画面が表示されるのでバグ報告してみます。
タイトルと内容の項目にわけたいかもですね。

|初期画面|内容入力した|
|:--:|:--:|
|![スクリーンショット 2021-05-16 23.06.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/1ded8bde-de5e-27a7-77c7-cb9c84dafce2.png)|![スクリーンショット 2021-05-16 23.07.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/9631675f-6c91-d9a8-ee10-629abdb21ff9.png)|

バグ報告のほかには改善点，質問が選択可能でした。
調査部分をタップすると端末情報がみれます。結構詳しく送れそうです！

|フィードバックタイプ選択|端末情報も詳しそう|
|:--:|:--:|
|![スクリーンショット 2021-05-16 23.09.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/27262d89-8c41-fd26-5c18-4b575d357ba6.png)|![スクリーンショット 2021-05-16 23.12.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/a4405f90-e526-4603-0021-390bdea1f441.png)|

スクショ部分をタップするとスクショの上に draw できます。
ファイル添付も動画などもあって再現方法などがあると修正もスムーズになりますね。

|スクショに描ける|ファイル添付の種類|
|:--:|:--:|
|![スクリーンショット 2021-05-16 23.14.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/f77c22c5-d6f0-6cf4-307c-314ec3a0f3c9.png)|![スクリーンショット 2021-05-16 23.22.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/4bbbc4c9-8f46-1f3c-47d7-d2772b45ae5b.png)|

メールアドレスを入力して送信ボタンを押します。
モーダル画面が閉じ送信完了表示が出ます。3点リーダ😇
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/0f93173f-6551-9a5b-01ff-01ed4f4d5a08.png" width="300">

### ダッシュボードでバグレポート確認

ダッシュボードを確認してみると・・・
バグレポート来てました！
![スクリーンショット 2021-05-16 23.59.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/ed3e8686-b127-e686-940b-9ec06b00e5b2.png)

右側の項目は調査の項目であった内容が確認んできます。
Activity Histrory 部分は画面操作のログが見れます。
Crashlytics よりはライフサイクル寄りでわかりやすいかも？です。
![スクリーンショット 2021-05-17 0.04.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/3b3edaae-445c-7156-49a8-f5e3b571581d.png)

チャットも残せるので Workspace に開発メンバーを追加して議論したりもできそうです。
(GitHub issue かチケットでやりたいかもですが)
ブラックボックス部分で CPU とか Memory の状況もわかるみたいです。
![スクリーンショット 2021-05-17 0.06.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/5b70ec6a-6cfe-8f64-853a-7eabf0e28aa1.png)

近々送信したユーザとチャットできるようになるそうです。
双方向は嬉しくもあり，逆も（ry
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/132fecf4-fbc8-d6f9-24ef-6cc27644a858.png" width="200">

いろんなサービスと連携もできるので JIRA のチケット化したり，
GitHub の issue にしたり，Slack に流したり便利そうです。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/e94bc3f4-50eb-36d0-6007-d23c5d0a2ac4.png" width="400">

**Crash Reporting 機能**も beta 版として提供しているようです。
Firebase Crashlytics と似た感じで
既に使っている場合は特にいらないかなぁ🤔と思いました。

https://www.shakebugs.com/docs/ios/crash-reporting

クラッシュ検出した際にフィードバック送れるようにもできるようです。
`AppDelegate` で `start` コール前に 2行追加するだけです。

```swift:AppDelete.swift
import UIKit
import Shake

@main
class AppDelegate: UIResponder, UIApplicationDelegate {

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.

        // 2行追加
        Shake.configuration.isCrashReportingEnabled = true
        Shake.configuration.isAskForCrashDescriptionEnabled = true
        Shake.start(clientId: "CLIENT_ID",
                    clientSecret: "CLIENT_SECRET")
        return true
    }
    // 省略
}
```

ボタンタップでクラッシュさせてみることにしました。
一旦クラッシュしてアプリが強制終了します。
その後再度アプリを起動すると半モーダルぽく表示が出てきます。3点リーダ😇
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/88266/711db6c4-ee4b-8b6a-c208-832c452a6d17.png" width="400">

起動シーケンス次第ではポップアップ表示と重なったりしそうだなぁ〜
DEBUG 環境では有効にしてテスターさんや QAチームに利用してもらうのが現実的な気もしますね。

## 使ってみての所感　　　　　　

個人アプリ開発などではこういったバグ報告，フィードバック機能は
結構大きな実装になるのでライブラリがあったらすごく楽になります。
アプリ内に複雑に実装する必要もなく，
**『端末を振ってフィードバックしてね！』**
みたいなメッセージをユーザに示すだけで良さそうなのはとても便利です。
Slack や GitHub，JIRA 連携などもあるので受け取ったらすぐ確認もできるのも良さそうです。

動きが多いアプリやテキストフィールドが多い(振って Undoしちゃう)アプリの場合には
UX 的にはご検知などもあり得そうで不向きかもですが大体のアプリには問題ないかなぁと。

問題は運用費用になってきます。
フリープランでは，1ヶ月あたり10件までという制限があります。
年次プランで 1アプリごと1ヶ月で `$50`，月次プランで `$60` になります。
サービスが成功したら別途考える，程度で考えれば
とりあえずフリープランで運用してみる価値はあるなと感じました。

## さいごに

バグ報告やフィードバック機能を簡単にアプリに導入できる **Shake** について書きました。
導入難易度もかなり低く，気軽に爆速でフィードバック機能を実現できるので
こだわりがあまりないようだったら導入してみてはいかがでしょうか。
書いた内容は一部に過ぎないので気になったらサイト見てみてください。

ご覧いただきありがとうございました。
こういうサービスもオススメだよ〜などもあったら教えていただけたら嬉しいです！

日本語対応してなかったからあんまりみてないだけなのかなぁと思いました。
=> 調べたら日本語対応は最近っぽい(21年3月？)から今後良くなっていくと思います。