62
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Qiitaに動画を埋め込む方法。Macデスクトップで動画作成後GIF化するまでの手順詳細

Posted at

Qiitaでたまに見かける記事内に動画を埋め込む(アップロードする)方法について。(macのみ)

movie.gif

手順は大きく2つ。

  1. 動画の作成
  2. GIFファイルに変換

##動画の作成
###1. 動画ツールの起動

command + shift + 5をクリック。

動画および画面キャプチャツールが起動する。
image.png


###2. 撮影範囲を選択 以下アイコンをクリックし、画面上で選択範囲を指定する。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/d236e532-5413-c9c8-1575-c59c1d949ef1.png)

↓ 撮影したい範囲を指定

image.png


###3. 収録開始 収録ボタンをクリック。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/563526/134c2d2c-f746-c21f-0c0c-6da219207a8e.png)

以上で収録開始。かなり簡単。


###4. 収録の停止 収録の停止

command + control + esc

または、デスクトップ右上に表示されるストップボタン、および、タッチバーからも可能。

image.png

タッチバーが圧倒的にかんたん。


###5. 収録した動画を編集 収録を停止すると画面右下にサムネイルが表示されるのでこれをクリック。(数秒間のみ表示)

クリックすると編集ツールが起動する。

image.png

▼クリックする前に消えてしまった場合
表示が消えてしまった場合は保存された画像を右クリックすれば、オプションから画像ツールを起動できる。

image.png

トリムを選択する。

必要に応じて、黄色い枠をドラッグして開始と終了時間をトリムする。
image.png

以上で画像の作成が完了。


##GIFファイルに変換 作成した動画は.movなので、これをGIF動画に変換する。

###1. Appのインストール
PicGIF LITEというツールが操作が簡単でわかりやすい。

image.png

###2. 動画を編集
Appを開いてビデオの追加を選択する。
image.png

動画が自動再生されるので、右下の「読み込み」をクリック。
image.png

フレーム数を選択する。
フレーム数が大きいと速度が早く、少ないと遅くなる。

image.png

再生して速度を確認。問題なければ「GIFの作成」をクリック。
保存先と名前を指定するだけ。

image.png

数秒あれば変換が完了する。

###3. 動画のアップロード
保存した動画をQiitaの編集記事にドラッグドロップすれば完了。

movie.gif

※注意
コピペすると画像として読み込まれてしまうため、ドラッグ&ドロップすること。

62
26
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
62
26

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?