超簡単！クラウドサービスを使ったパラパラアニメの作成方法

#概要
Qiitaへ動画を投稿しようと思ったのですがファイル制限や編集ソフトでつまづいたのでまとめました。インストール無しで出来る超簡単！GIFアニメアップロードの方法です、ご覧ください。
**※動画撮影にはAndroidのスマホを使いましたが基本的にはiPhoneも同じかと思います**
**※非常に長文ですがお子様やご年配の方向けに写真を多用しております、ご了承くださいませ**

#はじめに
昭和世代なら誰もが知ってるナイトライダー、男の子ならいつかはトランザムに乗ってみたいなと思ったんじゃないでしょうか（私もその一人）
[![Knight Rider Opening MOVIE](http://img.youtube.com/vi/D6RehHRXhDU/0.jpg)](https://www.youtube.com/watch?v=D6RehHRXhDU)
（[H D 147](https://www.youtube.com/channel/UCtfe2I0WOXJlJdXpVkXAeHg)さんの動画をお借りしました）

その流れるLEDをMbedマイコンで作ってみたのがこちらです。
この動画のアップ方法を解説します。
![circleanimationmuvie](https://media.giphy.com/media/xULW8K3hCx4Q9qt0mk/giphy.gif)

>一応Mbedのコードサンプルを載せておきます。

>``` main.c
>// Knight Rider Flashing LED Example
>#include "mbed.h"
>DigitalOut led[]={LED1,LED2,LED3,LED4,LED3,LED2};
>int main() {
>    int x=0;
>    while (1) {
>        led[0]=0;
>        led[1]=0;
>        led[2]=0;
>        led[3]=0;
>        led[x]=1;
>        wait(0.3);
>        x = x++ -(x/5)*6; //6になったら0に戻す
>    }
>}
>```

#全体の流れ
**スマホ等で動画ファイルを用意し、パソコン上へ取り込んでおいて下さい。**
**その後、以下の３つのクラウドサービスを使い編集＆アップします。**
>動画編集サービスです、トリミングや回転もできます。
・[Online Video Cutter](https://online-video-cutter.com/ja/)

>アニメーションGIF変換サービスです、簡単な編集もできます。
>・[GIFMAGAZINE](https://gifmagazine.net/converters/movie_to_gif)

>GIFファイルの投稿サイトです、リンクURL取得に使います。
>・[GIPHY](https://giphy.com/)


**その後Qiitaへアップします。**

#動画を編集しよう
**※この時点でPC上に動画ファイルを用意しておいてください**
・それではOnline Video Cutterを立ち上げてください。
立ち上がったら中央のOpen Fileをクリックし動画ファイルを選択してください。
・[Online Video Cutter](https://online-video-cutter.com/ja/)
![SnapCrab_Online Video Cutter - 動画のカット、MP4 AVI MPG 3GP のカット - Google Chrome_2018-1-2_19-59-12_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/ec004ce9-04c9-c70e-76bf-69b50f767c95.png)

・読み込み中の画面
アップロードは少し時間がかかります。
![SnapCrab_Online Video Cutter - 動画のカット、MP4 AVI MPG 3GP のカット - Google Chrome_2018-1-2_20-0-6_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/0ed50734-dec5-e525-fd86-a292e416d17b.png)

・画面の説明
![SnapCrab_Online Video Cutter - 動画のカット、MP4 AVI MPG 3GP のカット - Google Chrome_2018-1-2_20-0-25_No-02.png](https://qiita-image-store.s3.amazonaws.com/0/120769/835cd4c0-9348-3e07-210d-18a58060aaa5.png)

・トリミングボタンをクリック
余計な部分をカットできます、見せたい部分を中央に持ってくると良いでしょう。
![SnapCrab_Online Video Cutter - 動画のカット、MP4 AVI MPG 3GP のカット - Google Chrome_2018-1-2_20-8-28_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/951ecf34-bed5-52f5-051a-86da171d2e06.png)

・開始と終了のスライダーで編集
再生ボタンで確認をしながら動画がうまくリピートする様に調整してください。
**※この時、１コマ程度少し長めに編集するのがポイントです**
完了すればカットボタンをクリックしてください。
![SnapCrab_Online Video Cutter - 動画のカット、MP4 AVI MPG 3GP のカット - Google Chrome_2018-1-2_20-9-47_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/15a8369b-cd53-b411-649c-2059a196c2aa.png)

・ファイルの保存
Downloadボタンをクリックし適当な場所にファイルを保管してください。
うまく編集ができたか一度再生をしておいてください（この時１コマ程度少し長めが最適です）
![SnapCrab_Online Video Cutter - 動画のカット、MP4 AVI MPG 3GP のカット - Google Chrome_2018-1-2_20-10-5_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/51046105-75df-ead2-4044-508a045ad71d.png)

#パラパラアニメに変換しよう
・次にGIFMAGAZINEを立ち上げます。
中央のアイコンをクリックし先ほど出来上がった動画ファイルを読み込みます。
[GIFMAGAZINE](https://gifmagazine.net/converters/movie_to_gif)
![SnapCrab_動画からGIF作成 - Google Chrome_2018-1-8_1-17-25_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/116c48ee-62a3-b1e8-b4d3-18ae6edbe55c.png)

・スライダーを調整して編集します。
先ほどの１コマ多めの部分をここでカットします。
なぜ１コマ多めのファイルを作成したのかですがGIF化する時に少し欠けるために糊しろと考えてください。
確認はpreviewボタンを押してください。
![SnapCrab_動画からGIF作成 - Google Chrome_2018-1-2_20-34-10_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/fb396eba-02dd-4cbc-3fac-8dd148513899.png)

・動画の最終確認をおこないます。
**※GIFMAGAZINEでは編集とレビューに時間がかかりますのでOnline Video Cutterと併用が望ましいです**
![SnapCrab_動画からGIF作成 - Google Chrome_2018-1-2_20-35-30_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/cf0cb4fe-8009-df9e-2062-b1594a5a7daa.png)

・GIFアニメファイルをダウンロードします。
中央のClickしてダウンロードからGIFファイルを保存します。
![SnapCrab_動画からGIF作成 - Google Chrome_2018-1-2_20-36-33_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/0eb64ad0-1322-686d-b79e-ddf4ea8ac2ff.png)

#GIFアニメサイトにアップしよう
Qiitaはファイルの大きさに制限があり直接貼り付けられる動画ファイルに制約があります。
なので一旦GIPHYにGIFファイルをアップさせて中継をさせます、それではGIPHYを立ち上げましょう。
立ち上がったら上部のUploadをクリックします。
[GIPHY](https://giphy.com/)
![SnapCrab_GIPHY  Search All the GIFs & Make Your Own Animated GIF - Google Chrome_2018-1-2_20-42-43_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/75af7b13-b5a9-d1b5-8e40-4cc947935458.png)

・Browseボタンから、または直接ファイルをドラッグ＆ドロップして読み込ませます。
![SnapCrab_Upload & Share GIFs Online  GIPHY - Google Chrome_2018-1-2_20-49-46_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/d8278337-e8f6-db45-9b03-d16db9ed95ad.png)

・画面上でリピートがうまく出来ているか最終確認をします。
OKならCopy linkをクリックします。
![SnapCrab_Upload & Share GIFs Online  GIPHY - Google Chrome_2018-1-2_20-50-18_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/31f425f9-a42a-d5fd-6968-6b648aabb13a.png)

・上から２つ目のGIF linkのURLをコピーします。
![SnapCrab_Animated GIF - Find & Share on GIPHY - Google Chrome_2018-1-2_20-55-46_No-00.png](https://qiita-image-store.s3.amazonaws.com/0/120769/56a23ed4-cb05-5995-6293-7812f9bde439.png)

#Qiitaへの書き方
・マークダウン記法はこんな感じ。
**!\[circleanimationmuvie](ここにURLを張り付ける)**
#結果#
![circleanimationmuvie](https://media.giphy.com/media/xULW8K3hCx4Q9qt0mk/giphy.gif)

###***終了です、皆さまお疲れさまでした！！***![circleanimationmuvie](http://sozaiyayukari.web.fc2.com/irasut/dn/a-dn-b.gif)