(:3[kanのメモ帳]

個人ゲーム開発者kan.kikuchiのメモ的技術ブログ。月木更新でUnity関連がメイン。

PC画面の動画を撮ったり、録音したり、GIFにしたり、圧縮したり(Macの場合)【便利サービス】


このエントリーをはてなブックマークに追加

はじめに

今回は開発とは直接関係ありませんが、

PC画面上の操作を録画したり、GIFにしたりする時に僕がやっているやり方の紹介記事です。

なお、PCはMacですのであしからず。

録画(QuickTime Player)

録画にはMacにデフォルトでインストールされているQuickTime Playerを使っています。


f:id:kan_kikuchi:20180930085822j:plain


QuickTime Playerは動画を再生するアプリですが、

ファイル -> 新規画面収録からPC画面の録画も出来ます。


f:id:kan_kikuchi:20180930085922j:plain


画面収録ウィンドウの録画ボタンを押し、録画範囲を選択するだけで録画が開始されます。

(全画面の録画も出来ます)


f:id:kan_kikuchi:20180930090202j:plain
f:id:kan_kikuchi:20180930090207j:plain


録画を終えたい時は画面右上のアプリのアイコンが並んでいる所の停止ボタンを押します。


f:id:kan_kikuchi:20180930090425j:plain


録画後は編集 -> トリムから動画にする範囲を指定する事が出来ます。

(録画後でなくても普通に動画を開いても出来る)


f:id:kan_kikuchi:20180930091046j:plain
f:id:kan_kikuchi:20180930091053j:plain


動画ファイルの保存はファイル -> 書き出しから解像度を指定して行います。


f:id:kan_kikuchi:20180930091103j:plain


余談ですが、QuickTime Playerで動画ファイルを開いてる時に

別の動画ファイルや音声ファイルをドラック&ドロップすると結合する事も可能です。


f:id:kan_kikuchi:20180930103200j:plain


録音(Soundflower)

録画と同時に録音を行いたい時はSoundflowerを使っています。


QuickTime Player違い、デフォルトでインストールされてるわけではないので、

以下のページからdmgをダウンロードしてきて、インストールを行います。

(再起動が必要になる場合もあります)


f:id:kan_kikuchi:20180930103426j:plain


インストールする際、pkgファイルがダブルクリックで開けない場合

右クリックの「開く」から開きましょう。


f:id:kan_kikuchi:20180930104544j:plain


また、「開発元"MATT INGALLS"のシステムソフトウェアの読み込みがブロックされました。」

と出てインストール出来ない場合はシステム環境設定->セキュリティとプライバシーから

許可をしてからインストールし直しましょう。


f:id:kan_kikuchi:20180930104733j:plain
f:id:kan_kikuchi:20180930104743j:plain
f:id:kan_kikuchi:20180930104754j:plain


インストールが終わったらシステム環境設定->サウンドの出力をSoundflower(2ch)にします。

上手くいっていれば、これでPC上の音が聞こえなくなります。


f:id:kan_kikuchi:20180930104941j:plain
f:id:kan_kikuchi:20180930104947j:plain
f:id:kan_kikuchi:20180930105025j:plain


後はQuickTime Playerでの録画時にマイクをSoundflower(2ch)にするだけ。


f:id:kan_kikuchi:20181001070834j:plain


録画後はサウンドの出力を内蔵スピーカー等に戻す事をお忘れなく。


GIFの作成(PicGIF)

GIFの作成にはPicGIFを使っています。

有料版だと文字入れやエフェクトの追加が出来ますが、GIFを作りたいだけなら無料版で十分です。


PicGIF

PicGIF

  • PearlMountain Technology
  • 写真
  • ¥600
PicGIF Lite

PicGIF Lite

  • PearlMountain Technology
  • 写真
  • 無料


使い方は簡単、動画をアプリにドラック&ドロップしてから読み込むボタンを押し、

f:id:kan_kikuchi:20181001071909j:plain


サイズや速度を設定した後、右上の「GIFの作成」を押すだけ。


f:id:kan_kikuchi:20181001072053j:plain


動画だけでなく、画像からGIFを作成する事も出来ますし、

一部フレームを削除したり、画像サイズを変更したりも出来る優れものです。


画像圧縮(I♡IMG)

GIFはそのままだとかなり重いので、I♡IMGというサイトを使って圧縮しています。



これも使い方は簡単、画像を選択から画像を選んで(またはドラック&ドロップ)、


f:id:kan_kikuchi:20181001072813j:plain


画像の圧縮ボタンを押すだけ。複数同時に圧縮する事も可能です。


f:id:kan_kikuchi:20181001072905j:plain


ちょっと待つと、圧縮された画像がダウンロード出来るようになります。

画像によりますが、だいたい半分以上軽くなります。


f:id:kan_kikuchi:20181001072939j:plain


なお、JPGやPNGの画像も圧縮出来ますし、サイズ変更や切り抜き等も出来るっぽいです。


おわりに

技術記事を書く際は今回紹介した方法などを使って、

動画やアニメGIFを付けると分かりやすさが段違いに上がるのでオススメです。

(そのかわり手間は増えますが)

また、ゲームの紹介Tweetをする時も画像よりも目に付きやすいので、これもまたオススメです。