- Coding Methodology
- 第136回 ディレクションや検証に役立つ！お手軽録画ツール
第136回 ディレクションや検証に役立つ！お手軽録画ツール
Webサイトに実装された、JavaScriptの動きや操作時の挙動をクライアントに伝えるとき、言葉や文章で表現するのが難しいことはよくあります。そんなときに、動画を使って相手に内容を確認することも多いのではないでしょうか。今回は手軽に利用できる録画ツールをPCとスマートフォンそれぞれでご紹介します。
PC 編「ScreenToGif」
インストール不要ですぐに使えて、録画した動画の編集も直感的な操作で簡単に行えます。また、Gifアニメとして保存できるためファイルサイズも抑えることができます。
- ScreenToGif：https://www.screentogif.com/
【使い方】
- ダウンロードした「ScreenToGif.exe」をダブルクリック
- 起動画面の「レコーダー」ボタンをクリック（図1-1）
- ウィンドウの大きさを調整して録画するエリアを決めたら、「録画」ボタンをクリック（図1-2）
PC動画ツールならこちらもおすすめ！
「Awesome Screenshot」（ブラウザ拡張機能）
https://www.awesomescreenshot.com/
多機能でGoogleドライブやSlackなど各種サービスとの連携が充実。無料版では録画時間など、一部の機能に制限があります。
「Xbox Game Bar」（Windows10 標準）
https://www.microsoft.com/ja-jp/p/xbox-game-bar/9nzkpstsnw4p
Windows10に標準搭載されており、「Windows ロゴ キー + G キー」で起動。録画した動画はMP4形式で自動保存されます。
図1-1 起動画面
図1-2 録画エリアウィンドウ
スマートフォン iPhone 編
iOS11以降には、画面を録画できる機能が付いています。はじめて使うときは、次の手順で設定を行います。
【設定と使い方】
- 「設定」から「コントロールセンター」を選択
- コントロールを追加にある「画面収録」の「+」をタップ（図2-1）
- ホーム画面に戻って下から上にスワイプ。「画面収録」アイコンをタップ（図2-2）
図2-1 コントロールセンター
図2-2 スワイプ後の画面
スマートフォン Android 編
AndroidでもAndroid 11から録画機能が追加されました。こちらもはじめて使うときは、次の手順で設定を行います。
【設定と使い方】
- ホーム画面で上から下にスワイプ。クイック設定パネルでペンアイコンをタップ（図3-1）
- 「スクリーンレコード」を長押しして点線のところまでドラッグして移動（図3-2）
- クイック設定パネルに追加された「スクリーンレコード」を選択、「開始」ボタンをタップ（図3-3）
図3-1 クイック設定パネル
図3-2 編集画面
図3-3 スクリーンレコード
スマートフォンはデフォルトで端末にインストールされている機能なので、是非試してみてください。PCは今回ご紹介したもの以外にもたくさんの録画ツールがありますが、「手軽さ」「動画の保存形式」「オプション機能」を用途にあわせて比較検討してみてはいかがでしょうか。
