アプリ操作のキャプチャ付き手順の作成や共有を簡単に行える「Scribe」がとても良さそう

こんにちは、CX事業本部 Delivery部の若槻です。

今回は、スクリーンキャプチャツールの Scribe を試してみたところ、とても良さそうだったので共有します。

Scribe とは

Scribe は、アプリ操作のキャプチャ付き手順の作成や共有を簡単に行えるWebサービスです。 Scribe トップページ

サービスと同名の Scribe 社により運営されています。

Scribe 社の概要

• 設立：2019年
• 本社：サンフランシスコ
• 従業員数：11-50
• 会社形態：非上場企業

LinkedIn より

Scribe の機能

Scribe では次のような機能を利用できます。プランによって利用できる機能が異なります。

Free

• Web画面の操作手順作成
• 手順の共有範囲の設定
  • 共有なし
  • 指定したユーザー
  • チーム内
  • パブリック

Pro 以上

• デスクトップアプリの操作手順作成
• スクリーンショット編集機能
• 手順作成時のセンシティブ情報の自動ぼかし
• 手順の高度なエクスポート
  • HTML
  • Markdown
• 手順のブランディング
• モバイルアプリの操作手順作成

試してみた

Free プランで Scribe を実際に試してみます。ブラウザ（Google Chrome）を利用した AWS リソースの作成手順を Scribe で作成してみます。

あらかじめ Scribe トップページ より Free プランでアカウントを作成しておきます。

手順の作成

Scribe でWeb画面の操作を記録するためには、ブラウザに拡張機能をインストールする必要があります。Chrome の場合は、Scribe - Chrome ウェブストア よりインストールします。

手順の準備が整ったら、拡張機能で記録を開始し、手順を作成したい操作を進めます。不要なステップは後で削除できるので、記録開始後に手順を開始したい画面を開くのでも問題ありません。

手順の記録中は画面左下にメニューボタンが表示されます。このボタンは手順のキャプチャからは非表示になります。またブラウザを複数ウィンドウで操作している場合は、操作中のウィンドウのみが記録されます。

手順の作成を終了したい場合は、右下のアイコンをクリックするとメニューが現れるので、Complete Recording をクリックして終了します。

作成された手順の編集ページに移動します。各画面での操作が「ステップ」として記録されています。画面遷移や画面中の操作箇所が自動取得されたスクリーンショット画像とともに各ステップで示されています。

不要なステップは削除することができます。

自動で付与されたステップの説明は編集することができます。

自動生成されたステップの間に、手動でステップを追加することもできます。

確認が完了したら編集を完了します。

作成した手順は自身のワークスペースから管理できます。

手順の共有

作成した手順はリンクや埋め込みなどでチーム内やパブリックに共有することができます。

共有をしたい手順の Share ボタンをクリックします。

Share メニューが開きます。

Copy Link をクリックすると、手順のリンクをコピーできます。リンクの共有範囲も指定できます。

Copy Embed Snipet をクリックすると、手順の埋め込みコードをコピーできます。

取得できる埋め込みコードは下記のようになります。as=scrollableで埋め込み内でのスクロールを有効にできます。またskipIntro=trueで、スニペットの冒頭の導入をスキップを設定できます。

<iframe src="https://scribehow.com/embed/How_to_Create_a_Pass_Step_in_AWS_Step_Functions__U_gqiz56Rg-VX-U4hgxunA?as=scrollable&skipIntro=true" width="100%" height="640" allowfullscreen frameborder="0"></iframe>

as=scrollable あり、skipIntro=false とした場合は、下記のように冒頭に手順の導入が付き、縦にスクロールをして手順を進める埋め込みコンテンツとなります。

as=scrollable なし、skipIntro=true とした場合は、下記のように横方向にウィザードのように手順を進める埋め込みコンテンツとなります。

プラン

Scribe には前述の Free 、Pro に加え、Enterprise の3つのプランがあります。

• Free
• Pro
• Enterprise

Pricing

おわりに

スクリーンキャプチャツールの Scribe がとても良さそうだったので共有いたしました。

アプリ操作のキャプチャ付き手順の作成は、いち操作ごとに画面のスクリーンショットを取って、必要に応じて画像へのキャプション追加や情報のマスクを行って、ストレージ領域にアップロードして、URLリンクを取得して、手順に記載して...のようにとても手間と時間が掛かります。Scribe を使えば、これらの作業を半自動化でき、手順の作成にかかる時間を大幅に短縮できそうです。

個人的には、私はブログ執筆時にもよくキャプチャ付き手順を作成するのですが、その際に Pro プランで使える「手順の高度なエクスポート」機能がとても役立ちそうな気がしています。使ってみたらまたレポートをします。

以上