25
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

はじめに

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

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

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 以上) となっています。

サインアップ・Workspace作成

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

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

Client ID・Secret のキー確認

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

上記リンクの General セクションを開くと確認できます。
あとでアプリに組み込む際に使うので控えておきます。
スクリーンショット 2021-05-13 16.00.46.png

SDK 導入

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

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

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

platform :ios, '14.0'

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

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

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と紐づいている)

使ってみる

アプリでバグ報告

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

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

初期画面 内容入力した
スクリーンショット 2021-05-16 23.06.50.png スクリーンショット 2021-05-16 23.07.50.png

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

フィードバックタイプ選択 端末情報も詳しそう
スクリーンショット 2021-05-16 23.09.17.png スクリーンショット 2021-05-16 23.12.54.png

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

スクショに描ける ファイル添付の種類
スクリーンショット 2021-05-16 23.14.56.png スクリーンショット 2021-05-16 23.22.36.png

メールアドレスを入力して送信ボタンを押します。
モーダル画面が閉じ送信完了表示が出ます。3点リーダ😇

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

ダッシュボードを確認してみると・・・
バグレポート来てました!
スクリーンショット 2021-05-16 23.59.47.png

右側の項目は調査の項目であった内容が確認んできます。
Activity Histrory 部分は画面操作のログが見れます。
Crashlytics よりはライフサイクル寄りでわかりやすいかも?です。
スクリーンショット 2021-05-17 0.04.35.png

チャットも残せるので Workspace に開発メンバーを追加して議論したりもできそうです。
(GitHub issue かチケットでやりたいかもですが)
ブラックボックス部分で CPU とか Memory の状況もわかるみたいです。
スクリーンショット 2021-05-17 0.06.30.png

近々送信したユーザとチャットできるようになるそうです。
双方向は嬉しくもあり,逆も(ry

いろんなサービスと連携もできるので JIRA のチケット化したり,
GitHub の issue にしたり,Slack に流したり便利そうです。

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

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

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点リーダ😇

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

使ってみての所感      

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

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

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

さいごに

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

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

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

25
20
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
25
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?