💭

ブラウザ上の操作をキャプチャするChrome拡張機能「Tango」が便利すぎた

2023/05/07に公開

知った経緯

ふとTwitterで流れてきて(誰のツイートだったか見失った...)知った記事を見て興味を持ちました
https://www.lifehacker.jp/article/243310lht-tango/

自分でもツイートしたら同じく興味持った方が多そう
https://twitter.com/taketakekaho/status/1654785483199905793?s=20

導入

ChromeウェブストアEdgeアドオンにアクセスして"Tango"を検索

これを追加

アカウント登録が必要っぽい

どんな使い方するの?って聞かれてるので適当に答える

あんた何者?って聞かれてるのでこれまた適当に答える

作業場所の名前つけてって言われてるので適当につける

他者に共有する場合には招待できるっぽい。私は個人利用なのでこのままDone

トップ画面

すぐ使えるように拡張機能をピン止め

使い方

  1. Tangoのキャプチャを開始するタブに移動します
  2. 右上のTangoアイコンをクリックします。
  3. 大きな紫色のボタンをクリックして、Tangoのキャプチャを開始します
  4. キャプチャが開始されます。Tangoはスクリーンショットをキャプチャし、説明をリアルタイムで自動生成します。スクリーンレコーディングとは異なり、ガイドはユーザーが実行するアクションのハイライトリールです。
  5. 左下隅にある Tango コントローラーで以下のような操作ができます
  • キャプチャを完了する
  • キャプチャを一時停止します
  • キャプチャを再開する
  • 要素をライブ操作でぼかす (有料) ※無料ならTangoが保存された後ならエディターで要素をぼかすことができます
  • キャプチャを削除する
  1. 完了したら、緑色の ✅ をクリックしてキャプチャを完了します
  2. キャプチャが完了したら、名前、ステップ名、ステップの説明、キャプチャした画像を編集し、新しいTango の画像に代替テキストを追加したり画像を編集して機密情報をぼかしたり、注釈を追加したりします
  3. 完成したら目的に応じてコピー・共有・ダウンロードなどを行います

文章で書くとこうなるんですが。これ見てもらった方が早いです。Google検索でAWSドキュメントを開くだけの操作マニュアルを作成する操作をしています。

Image from Gyazo

完成したらリンク公開やPDFダウンロードなどを行うことができます。

実際に作ったマニュアルをWeb公開したものが以下です。Zennに埋め込む時にはNotion用のEnbedリンクを発行したら埋め込みできました。
https://app.tango.us/app/embed/Google----AWS-Incident-Manager--AWS--------------949ce1b053c44cbdb68351c8bd6a9a49

レビュー

使ってみた感触をメモします。

  • ハンズオン手順作成や作業証跡残す時に使える
  • PDF生成までできるけど、Tangoの主張が強めなので納品などには使いにくいが内部メンバーに配るくらいなら使える
  • MarkDown発行がマジ便利。このままZennに貼り付けて余計な情報(Tango利用を促すリンクとか)抜けばもうハンズオン手順やレビュー記事ができちゃう
  • クレジットカード入力などをマスクかけられるのはよいとして、Freeプランの場合には一度操作やキャプチャデータがサーバ上に保存されてしまうので個人情報などの入力時には注意した方がよさそう。(有料プランの場合には保存前にマスクかけられる。)

価格

フリープランで十分使えますが多用したい方は有料プランに移行してもいいかもしれません。
https://www.tango.us/pricing

  • Freeプラン
    • ユーザーあたり最大 25 のワークフロー
    • 最大 25 人の無料ユーザーが参加できるチーム ワークスペース
    • ワークスペース全体の共有ライブラリ
  • Proプラン
    • $20/month(年間利用の場合には$16/month)
    • 無制限のワークフロー
    • チームワークスペース管理者の制御と請求
    • PDFのTango透かしとカスタムブランドを削除
    • 共有プライベートフォルダ利用
    • デスクトップ全体でワークフローをキャプチャ
  • 法人プラン
    • SSO
    • バージョン履歴(今後予定っぽい)
    • 組織の使用状況分析

参考リンク

Discussion