mixi engineer blog

*** 引っ越しました。最新の情報はこちら → https://medium.com/mixi-developers *** ミクシィ・グループで、実際に開発に携わっているエンジニア達が執筆している公式ブログです。様々なサービスの開発や運用を行っていく際に得た技術情報から採用情報まで、有益な情報を幅広く取り扱っています。

Delight.ioでテストアプリの画面録画!(Webも)

どうも、佐野です。先日こちらの記事Delight.ioというフレームワークを知りました:

デベロッパは自分のiOSアプリに1行書き加えるだけで、ユーザのアプリ使用セッションをビデオで記録し、彼らがアプリを操作するときのタッチスクリーンの使い方、などをチェックできる。

おー、こりゃすげぇ!ということで早速試してみたのでレポートします。
インストールはとても簡単。Quick Start Guideに従って、

  1. Delight.ioでアカウント登録 (GitHubかTwitterアカウントが必要)
  2. 続けてアプリを登録して、AppTokenを取得
  3. Delight.frameworkをgithubからcloneし、対象のXcodeプロジェクトに追加
  4. その他6つのframeworkを追加し、 "Other Linker Flags" に -ObjC を指定
  5. プロジェクト内のコードに [Delight startWithAppToken:@"Your App Token"] を追加

これだけです!あとはアプリを起動すれば自動的に画面録画が開始され、セッション毎にサーバに自動的に送信されます。実際にiPhone4Sで録画した画面をご覧下さい:

アニメーションはスキップされてますが、ユーザの操作を観察するには十分な品質でしょう!これでユーザテストを行う際にビデオカメラを用意したり肩越しに観察したりする必要がなくなりました。もちろん実際にこれを使ってテストを行う際はプライバシーには十分配慮し、画面が録画されることについてちゃんとユーザの了承を得なければなりません。

さて、アプリはこんな感じに画面録画ができるようになりましたが、ウェブサイトでもやりたいですね。簡単です、WebViewを使って簡易ウェブブラウザを作ってそこにDelight.ioを組み込めばOK。という訳で作ってみました:

ss3.png

録画を手動で管理できるように録画開始/再生ボタンをおき、さらに録画停止時にフォトライブラリに動画が保存されるようにしました。ソースコードは GitHub においたので、必要な方はご活用ください。上の手順1, 2に従ってAppTokenを取得し、プロジェクト内のDelightAppToken.txtを書き換えれば、あなたのアプリとしてサーバ上で画面録画を管理できるようになります。

いやぁー、ホントに色々と便利になってきましたね。今後も開発を行う上で便利なツールやフレームワークは随時ご紹介していきたいと思います。それではまた次回。