はてなブログの記事に.mov形式の動画が載せられないのでgifに変換したけど苦労した

この記事が役に立つかもしれない人

  • Mac ユーザ(OS Mojave以降)である
  • 収録した画面(.mov)を gif に変換したい
  • フリーの変換ソフトは使いたくない
  • Homebrew(パッケージマネージャ)が使える

概要

ある機能の実装(コーディング)方法について、PC画面のスクショと文章で記事に書こうとしました。しかし、PC画面の動画撮って貼った方が早いしわかりやすそうだと思い、動画(.mov)を撮って貼ることにしました。
そしたら、最近のはてなブログではYouTubeなど外部コンテンツの動画しか貼れないことが判明しました。

www.05shufu.com

一方、gifなら貼れるという情報を見つけました。

soumusoul.hatenablog.com

私がはてなブログに載せたい動画

私の場合は、PC画面の操作を撮った動画を載せたいのです。こんな感じの動画です。

f:id:ishii-akihiro:20191024180939g:plain

使っているPCは MacBook Air です。Mojave 以降のOSでは標準で画面を収録する機能が備わっています。

support.apple.com

この機能で収録した動画は.mov形式で保存されます。はてなブログの記事に載せるには、gifに変換する必要があるようです。

やりたいこと

フリーの変換ソフトやアプリもあるようですが、この先も使えるか保証できないので、自分のPC環境に変換機能を組み込んでおきたいと思いました。
調べたところ、ffmpeg を使うと簡単にできるようです。

qiita.com

ということで、mac で .mov形式の動画を gifに変換するため、ffmpeg を使える環境を構築するのが本記事の目的です。前置きが長くなってすみません。。

環境

  • macOS Catalina (バージョン 10.15)
  • Homebrew 2.1.5

環境構築の流れ

構築する(ffmpegをインストールする)までにエラーが出まくって苦労したので、順に書いていきます。

第一のエラー

まず、上記のQiita記事にある通り、$ brew install ffmpegをやってみました。すると、一つ目のエラーが発生。

Error: Your Xcode (10.3) is too outdated.
Please update to Xcode 11.1 (or delete it).
Xcode can be updated from the App Store.

Xcodeが古いから更新してよ、って言われてます。Xcode 使わないし更新に時間かかるんだよな。。でも今後のために gif 変換はできる環境にしておきたいので、Xcodeを 11.1に更新することにしました。App Store から更新します。

結局、3時間以上かかったと思います。Xcode はそんなもんです、多分。

でもこれでいけるっしょ!再度ターミナルにて$ brew install ffmpegを実行!

第二のエラー

Error: You have not agreed to the Xcode license. Please resolve this by running:
sudo xcodebuild -license accept

Xcode のライセンスに承認してないじゃん、って言われてます。後半に書かれている指示に従い、sudo xcodebuild -license acceptを実行します。

でもこれでいけるっしょ、マジで!再度ターミナルにて$ brew install ffmpegを実行!

第三のエラー

Permission denied @ dir_s_mkdir - /usr/local/Frameworks

もうエラー内容を丸コピしてgoogle先生に投げました。そしたら、別の目的で同じ目に遭った方を発見。

qiita.com

解決方法も載せてくださっています。ありがたや。
そもそも存在していない/usr/local/Frameworksを作るところも含め、記事に書かれているようにターミナルで以下のコマンドを実行。

$ sudo mkdir /usr/local/Frameworks
$ sudo chown $(whoami):admin /usr/local/Frameworks

無事に権限が付与されたような気がする。

流石にこれでいけるっしょ、ほんとに!再度ターミナルにて$ brew install ffmpegを実行!

。。。あれ?成功したっぽい(笑)一応$ brew info ffmpegと打ったら情報がちゃんと出てきたので、インストールされているようです。

ということで、ようやく変換です。フレームレートは適切な値がよくわかっていないので、Qiitaの記事で例に挙げられているのと同じく24に設定しました。

$ ffmpeg -i test.mov -r 24 test.gif

画面を収録した test.mov が、test.gif に変換できました!やったー!

はてなブログの記事にも、画像と同じ感じで貼り付けできました(Markdown記法で試しました)。

おわりに

半日かかるとは。。疲れた。

そしてこの記事のタイトルが長い。もはや記事の内容が「ffmpegのインストール手順」になっていますが、同じ事情のはてなブロガーがいるかもしれないので、このタイトルにしました。

タイトルとURLをコピーしました