庭園の片隅と子猫

気ままに生きるがやっぱりおいしいご飯

春の野花を摘んで、GIFアニメを作って遊んでみました。iPhoneとGIFアプリで 作成・保存・貼り付ける

ちいさなお菓子達がちょこちょこと行進する知人作成の可愛いGIFアニメに感化されてわたしも作ってみました。

f:id:alkanetwhite:20150421210823g:plain

Instarram(インスタグラム)Twitter(ツイッター)やブログなどで、おもしろいGIF(ジフ)アニメーションを見かけるとついつい顔がほころんでしまいます。

素敵だったり可愛かったり笑えたり、コマ撮り画像が勝手にパラパラと動く様子にどことなくニクめないユーモラスさを感じながらしばらく見入っていたりするのですが、どういうわけか作ったことがなかったのです。

「iPhoneで撮影した写真から、GIFアニメを作成・保存・はてなブログに貼り付ける」

この簡単そうに思えた手順、実際にとても簡単なのですが、GIFという呼び名さえも知らなかったわたしは紆余曲折、一度作れた今なら笑えてしまうほどに苦戦したのでした。

iPhoneで撮影した写真から、iPhoneでGIFアニメを作る

舞い散った桜の花びらと野花を摘んで「文字を作っていく過程を小刻みに撮影」することにしました。

1. GIFアニメの素材となる写真を撮りました

雰囲気のある川沿いの遊歩道。HARUのHAまで(ここまでの撮影で15枚ほど)なんとか撮り終え、Rの準備をしているところに突風がッ。風にすべてを吹き飛ばされてしまいました。

しばらく待ちましたが風がおさまりそうにないので、ちょうど車の中にあったタオルを後部座席のシートに敷いて車内で撮り直しです。

タオルが無地でよかった・・

f:id:alkanetwhite:20150422200852j:plain

あとで思ったことなのですが、

カメラのちょっとした角度の違いでも色合いが変わりますし、この日は晴れたり曇ったりで光の加減がバラついてしまいました。

「AE/AFロック」にすればよかったです。

文字を作るのに一生懸命で気づきませんでした。iPhoneカメラファンにあるまじき失態です。

また、連続させると思う以上に大きさも角度もバラつきが目立ってしまったので、できれば撮影は屋内でカメラは固定するとよいですね。手も疲れませんし風も吹きません。

2. 「カメラロールに保存された画像からGIFアニメを作成できる」スマホアプリを探しました

いくつかGIF作成用のアプリをインストールし試してみた結果、こちらのアプリが直感的に進めやすく簡単に出来ました。

画像の上下がカットされることもなく撮った構図そのままでGIF作成できます。 

今回は、撮影した30枚以上の写真からピックアップ、18枚の画像を使ったのですが、読み込み、作成、保存までの一連の動作がとてもスムーズでスピーディーでした。もっと枚数があってもよかったかなと思います。

ちなみに知人がGIFアニメに使ったお菓子画像の枚数を聞いてみたところ、なんと60枚でした。ただただ驚きました。

iPhoneのカメラロールに保存されている静止画の他に、ビデオ(動画)や連写も、GIFアニメに変換できます。

f:id:alkanetwhite:20150422104958j:plain

3. GIFアニメをiPhoneアプリで作成しカメラロールに保存しました

作成のプロセスはこのような感じです。

f:id:alkanetwhite:20150421231747j:plain

  1.  「写真>GIF」をタップするとカメラロールの画像が一覧表示されますので、使いたい画像を選択し「エンコード」をタップします。
  2. 1秒間に表示させるフレーム数と解像度を選択します。(アプリに課金しプロバージョンにアップグレードすると赤線の項目も選択できます)
  3. リストアップされた画像でよければ「エンコードスタート」をタップ、画像の読み込みがスタートします。「編集」をタップすると画像の削除や並び替えができます。
  4. 読み込みが完了するとレポート画面に切り替わります。プレビューを確認しOKであれば「カメラロール送信」をタップ、iPhoneのカメラロールに保存されます。
  5. また、カメラロールに保存されたGIFは、GIFトースター内の「GIFビュア」でも確認できます。(注)カメラロールのGIFを消去するとGIFビュアのGIFも消去されます。

トースターにパンを入れたら焼き上がるように、画像を選んだら簡単に出来上がります。

カメラロールに保存されたGIFアニメを、はてなブログに貼り付ける

はてなブログに貼り付けてみようとしたところで、

1. トラブル発生です。迷子になりました

カメラロールに保存されたGIFアニメをアップロードしようとしたところ、見当たらないのです。新しく追加されているGIFアニメであるはずの画像をタップしても動かないのです。念のため他のアルバムも開いて確認したのですが無いのです。

保存方法を調べたり、よくわからない拡張子やHTMLなど調べてみたり、Tumblr(タンブラー)やYouTube(ユーチューブ)に一度投稿してコード?を取得すればよいのかと思ってみたり、

完全に迷子になって数日後・・

途方に暮れながらPC画面を眺めているところに、「最初の一枚しか保存されないのかと思ったけど、動いていないだけでちゃんとgifで保存されていたんですよ」との文字を発見。

もしかして・・と思い、さっそくPCに取り込んで確認してみたところ、保存名にちゃんとGIFが付いていました。「IMG_◯◯◯◯.GIF」と。なんだ!よかった!

※追記:iOS11からは、iPhoneカメラロールでGIFアニメの再生・確認ができるようになりましたね。バンザイ。

2. トラブル解決、ようやくブログ記事に貼り付けることができます

実はGIFトースターを使う前に、他のアプリで作成したものをPCに取り込んで確認してみたのですが、保存名が.movだったのです。

記事に貼り付けてみても再生ボタンを押さないと動き出さない動画になってしまうので、GIFトースターもそうだと思い確認していなかったのです。

思い込みってムダなものですね。数日間も遠回りしてしまいました。

3. はてなブログにGIFアニメを貼り付けます

ここまで来たら あとは簡単です。写真や動画を貼り付ける手順と同じです。

PCの場合であれば、フォトライフにアップロードし「記事を書く」画面の右側にある写真アイコンの「写真を投稿」から画像を選択し貼り付ける。

または、パソコンの画像をこの記事上までドラッグ&ドロップすると自動的にアップロード、挿入されます。これはとても便利ですね。

スマホの場合であれば、(iPhone、iPad、Andoroid)

写真であれば「はてなブログ」アプリで「写真を投稿」アイコンから挿入したり、コピー&ペーストで、簡単に写真や画像のアップロードができるのですが、

はてなブログ

はてなブログ

  • 株式会社はてな
  • ソーシャルネットワーキング
  • 無料

GIFを試してみたところ、下書きまではちゃんと動いて表示されているのですが、更新してみるとエラーで表示されない・・

そこで、はてなブログアプリではなく、

iPhoneのWebブラウザから(Safariなど)ブログを開いて編集画面にいき、写真アップロードと同じ手順で挿入してみたところ、

f:id:alkanetwhite:20151224004856j:image

成功しました!

f:id:alkanetwhite:20150421210823g:plain

また、公開していない下書きの記事や新規作成の場合では、①画面右上に表示されている自分のアイコンをタップ→②マイブログをタップ→そこからGIFを挿入する記事を開いて編集することができます。

f:id:alkanetwhite:20151224012441j:plain

マイブログの編集画面をホーム画面に追加しておくと、次回からの(ウェブブラウザからの)更新がスムーズです。

 

なぜかとても充実感に満たされたGIFアニメーション作りでした

朝の出勤前と夜の眠りにつく前の空いた時間に少しづつ調べながら試しながら遊んでいたのですが、

「GIFアニメを作成するアプリ探し」と「保存されたGIF探し」この2点で時間を費やしてしまったぐらいで(一週間ほど・・)、それらが解決したとなれば、作成自体は数分です。

GIFアニメの作成と保存はGIFトースターがサクッとしてくれますし、貼り付けははてなブログや他のSNSでの便利機能が自動的にしてくれますので、次回は素材となる画像をしっかりと撮る愉しみに専念しようと思います。

こんなに簡単に気軽にできるとわかった今は、いろんなバージョンを作ってみたくて構想が広がります。バースデーなどのおめでとうメッセージや、クスっと笑えるものなども作ってみたいです。

 

世界がまた広がりました。

楽しい!

 

 

f:id:alkanetwhite:20150421082607j:plain

※こちらはラストの静止画です。動きません。

 

 

P.S. スマホ用三脚のほかに、いろんな方向から撮影できるクリップ式のスタンドも欲しくなりました。便利そうでいいですね。

 

alkanetwhite.hatenablog.com