画面キャプチャーを探していたら、自動で操作手順ごとにキャプチャーを取ってくれるchrom 拡張機能があったのでご紹介します。
chromeブラウザの操作に限りますが、これを使えば手順書みたいなものも作れるし、ブログに操作手順を張り付ける時も記録した画像をコピーして貼り付けることができるのでかなり便利でした。
ボタンやリンクなどをクリックしたときもそのクリックした場所をオレンジ色で囲んで画面キャプチャしてくれるので誰かに教えるときにとてもわかりやすいと思います!
インストール方法
![](https://syac.app/wp-content/uploads/2023/03/image-1-1024x300.png)
chromeウェブストア「Tango」から拡張機能を追加します。
![](https://syac.app/wp-content/uploads/2023/03/image-1024x589.png)
Googleアカウントがあれば「Continue with Google」が楽です。
無ければ各種情報を入力するとメールアドレスに認証コードが届きます。
指示に従って進めてください。
ここまでやったらログインしておけば、もう使えます。
ログインすると、アンケートっぽいのがあるのでTangoを使ってキャプチャーしていきたいと思います。
最後にどんな感じの記録が残るかも紹介します。
Tangoを使ってキャプチャー
Tangoに登録すると以下の画面が表示されます。
アンケートみたいなものですが、ついでにTangoをつかてキャプチャーしてみました。
![](https://syac.app/wp-content/uploads/2023/03/image-3-1024x693.png)
「Tangoをどのように使いますか?」は適当にクリックします。
![](https://syac.app/wp-content/uploads/2023/03/image-4-1024x693.png)
Tangoではクリックした場所をオレンジの枠で囲って画面キャプチャーをしてくれました!
わかりやすい!
![](https://syac.app/wp-content/uploads/2023/03/image-5-1024x693.png)
Nextへ
![](https://syac.app/wp-content/uploads/2023/03/image-6-1024x693.png)
上があなたの役割は?、下がTangoをどこで知りました?って質問です。
適当に答えてOK。
Nextへ
![](https://syac.app/wp-content/uploads/2023/03/image-7-1024x678.png)
Workspaceの名前を付けます。
なんでもOK。
Nextへ
![](https://syac.app/wp-content/uploads/2023/03/image-9-1024x678.png)
チームメイトを招待についての記載ですが、特に招待がなければ何も入力せずDoneを押します。
![](https://syac.app/wp-content/uploads/2023/03/image-10-edited.jpg)
完了です!
Tangoの使い方
ブラウザの右上に拡張機能があるのでそこからTangoを選びます。
アイコンがオレンジ背景のTが書いてあるやつです。
![](https://syac.app/wp-content/uploads/2023/03/image-19.png)
![](https://syac.app/wp-content/uploads/2023/03/image-10.png)
選ぶと上記画面がでるので、〇ボタンを押すと画面キャプチャーがスタートします。
![](https://syac.app/wp-content/uploads/2023/03/image-11-414x1024.png)
次の記録用の画面が立ち上がります。
ブラウザをクリックすると画面キャプチャーをとってくれて、上記の一覧に操作内容が順番に並んでいきます。
下記の画像の感じ。
![](https://syac.app/wp-content/uploads/2023/03/image-12-415x1024.png)
クリックしたところは番号付きで上記のようになります。
上記画面のボタンで左の緑のボタンが完了ボタン、右の赤い×ボタンが中止ボタンです。
・
右から2番目の一時停止を押すとキャプチャーが停止します。
![](https://syac.app/wp-content/uploads/2023/03/image-13.png)
停止後に続ける場合は同じ場所にある再生ボタンを押します。
![](https://syac.app/wp-content/uploads/2023/03/image-15-547x1024.png)
失敗した手順があれば一覧のごみ箱ボタンから削除できます。
一通りのキャプチャーの手順が完了したら緑のボタンを押すと手順が完了です!
![](https://syac.app/wp-content/uploads/2023/03/image-16-1024x417.png)
完了ボタンを押すと上記画面に遷移し、手順とキャプチャーが表示できます。
右の「Save Workflow」を押すと保存ができます。
![](https://syac.app/wp-content/uploads/2023/03/image-14-1024x492.png)
右の「Share & Export」を押すとシェアリンクやエクスポートができます。
![](https://syac.app/wp-content/uploads/2023/03/image-17-1024x826.png)
![](https://syac.app/wp-content/uploads/2023/03/image-2-1024x822.png)
シェアは人と共有したいときに使う感じですね。
エクスポートのHTMLはHTMLコード、Markdown コードのマークアップ言語なので、それぞれサポートする製品に張り付ける必要があります。
あとはPDFで出力が可能ですが、Pro版でしかできません。
エクスポートはあんまり使えなさそうです。
基本的に手順ができたらブラウザの画面から画像をコピーしてブログに貼り付けて使えそうですね。
SaveしたWorkflowで手順と画面が確認できるのでとりあえずそこを見ておけばOK。
この記事もキャプチャを毎回と取る手間が減ったので大変助かりました。
使ってみた感じ無料版でも全然使えそうです。
気になった方はぜひ使ってみてください!