Diary-8 祝 2003kaito4周年!
皆さん、お久しぶりです。
間に投稿を挟んでいないので実感がわかない方も多数いらっしゃることと思いますが、もうあれから1年も経ってしまいました。
そうです。本日、2018年03月12日は、私2003kaitoがプログラミングを始めてから4年の記念日なのであります。
突然ですが、ここで問題です。
この画像を作るのにかかった所要時間は、次のうちどれでしょうか?
以前まで使用していたロゴのイメージを受け継ぎつつ、明るい雰囲気を持つロゴとなっています。
間に投稿を挟んでいないので実感がわかない方も多数いらっしゃることと思いますが、もうあれから1年も経ってしまいました。
そうです。本日、2018年03月12日は、私2003kaitoがプログラミングを始めてから4年の記念日なのであります。
4周年記念作品
今年も、4周年に合わせて記念の大作を用意しておりました。
なんと、今回は超超超便利なWebツールを記念作品として用意していました。
なんと、今回は超超超便利なWebツールを記念作品として用意していました。
これから、そのツールについてじっくりと説明していきたいと思います。
そのツールとは...。
そのツールとは...。
GIFアニメーション作成ツール
インターネット上で、画像なのに動いているものを見かけたことはありませんか?
このツールでは、そんな動く画像「GIFアニメ」を作成することができます。
それだけなら他のサイトにもありますが、私がこだわったのはいかに凝ったGIFアニメを簡単に作れるようにするか、という点です。というのも、私は以前、凝ったGIFアニメを作成するときに苦労した経験があるためです。
突然ですが、ここで問題です。
この画像を作るのにかかった所要時間は、次のうちどれでしょうか?
- 20秒
- 20分
- 20時間
- 20日
正解は、[ 4. 20日 ]です。( 正解は [ ] の中を選択して確認してみてください。)
なぜそんなに時間が掛かったのか。
このアニメ画像は、もともとはこんな静止画でした。
まず、この静止画を少しずつずらして切り取り、160フレームに分割します。
ここまでで12~3日程度掛かりました。
そしてGIFアニメーションを作成したのですが、とある問題に直面します。
出来上がったGIFアニメーションは、こんな感じでした。
...小さい。拡大すると、このようにぼやけてしまいます。
実はもとにした静止画、上の画像ではくっきりした大きな画像に見えますが、実際の大きさで貼ると、こんな感じです。
そして、これを何も対策しないまま拡大表示させると、こうなります。
ブラウザのスムージング機能のせいで、ぼやけてしまうのですね。
これではユーザーアイコンに使うには不明瞭です。なので、作成時の設定でサイズを大きくしてみました。そうすると、こうなりました。
...。原寸大表示ですが、ぼやけてしまいました。何故でしょう。
実は、WebサイトでGIFアニメーションを作成するとき、canvasというhtmlの要素を使用します。そのcanvasは、デフォルトでスムージングがオンになっているのです。なので、canvasで画像を拡大して表示するので、ぼやけたアニメーションになってしまうのですね。
仕方なく、160枚のフレームを1つ1つ、拡大していくことにしました。これで大体7~8日。
完成品がこちらです。
拡大に負担があまりかからず、かつそこそこくっきり表示できるサイズを検討した結果、このサイズになりました。
こんな経験があったのです。ですが、ここでもう1度問題です。
私のGIFアニメーション作成ツールを使用して静止画から同じ画像を作るとき、所要時間は次のうちどれでしょうか。
私のGIFアニメーション作成ツールは、凝ったGIFアニメーションが作成しやすいよう、多くの機能を備えています。その中の1つが、「」です。
この機能を使うと、画像の位置をプログラムで自動的に変更し、スクロールしているように見せることができます。
これで、フレーム分割の12~13日が必要なくなりました。
そして、今回のようなドット絵でGIFアニメーションを作成したいときのために、ドット絵モードを搭載しています。このモードを利用することで、小さい画像から大きなGIFアニメーションを作るときでも、ぼやけずに作成できるというわけです。
なので、画像サイズ変更に掛かった7~8日がいらなくなりました。
ということで、正解は、 1. 20秒 でした。
20日が20秒に短縮されたということは、効率が86400倍になったということですね。86400倍。すごいでしょう。
他にも、等の機能も備えており、また機能は今後もどんどん追加していく予定です。
是非是非、ご利用ください。
GIFアニメーション作成ツールはこちらです。
なぜそんなに時間が掛かったのか。
このアニメ画像は、もともとはこんな静止画でした。
まず、この静止画を少しずつずらして切り取り、160フレームに分割します。
ここまでで12~3日程度掛かりました。
そしてGIFアニメーションを作成したのですが、とある問題に直面します。
出来上がったGIFアニメーションは、こんな感じでした。
...小さい。拡大すると、このようにぼやけてしまいます。
実はもとにした静止画、上の画像ではくっきりした大きな画像に見えますが、実際の大きさで貼ると、こんな感じです。
そして、これを何も対策しないまま拡大表示させると、こうなります。
ブラウザのスムージング機能のせいで、ぼやけてしまうのですね。
これではユーザーアイコンに使うには不明瞭です。なので、作成時の設定でサイズを大きくしてみました。そうすると、こうなりました。
...。原寸大表示ですが、ぼやけてしまいました。何故でしょう。
実は、WebサイトでGIFアニメーションを作成するとき、canvasというhtmlの要素を使用します。そのcanvasは、デフォルトでスムージングがオンになっているのです。なので、canvasで画像を拡大して表示するので、ぼやけたアニメーションになってしまうのですね。
仕方なく、160枚のフレームを1つ1つ、拡大していくことにしました。これで大体7~8日。
完成品がこちらです。
拡大に負担があまりかからず、かつそこそこくっきり表示できるサイズを検討した結果、このサイズになりました。
こんな経験があったのです。ですが、ここでもう1度問題です。
私のGIFアニメーション作成ツールを使用して静止画から同じ画像を作るとき、所要時間は次のうちどれでしょうか。
- 20秒
- 20分
- 20時間
- 20日
私のGIFアニメーション作成ツールは、凝ったGIFアニメーションが作成しやすいよう、多くの機能を備えています。その中の1つが、「」です。
この機能を使うと、画像の位置をプログラムで自動的に変更し、スクロールしているように見せることができます。
これで、フレーム分割の12~13日が必要なくなりました。
そして、今回のようなドット絵でGIFアニメーションを作成したいときのために、ドット絵モードを搭載しています。このモードを利用することで、小さい画像から大きなGIFアニメーションを作るときでも、ぼやけずに作成できるというわけです。
なので、画像サイズ変更に掛かった7~8日がいらなくなりました。
ということで、正解は、 1. 20秒 でした。
20日が20秒に短縮されたということは、効率が86400倍になったということですね。86400倍。すごいでしょう。
他にも、等の機能も備えており、また機能は今後もどんどん追加していく予定です。
是非是非、ご利用ください。
GIFアニメーション作成ツールはこちらです。
皆様にお知らせ
ここで、皆様にお知らせです。
読んでいて気づかれた方もいると思いますが、4周年を節目にブランドロゴの一新を行いました。
新しいロゴはこちらです。
以前まで使用していたロゴのイメージを受け継ぎつつ、明るい雰囲気を持つロゴとなっています。
最後に
この1年間は部活と高校受検に忙しく、なかなか投稿ができませんでしたが、次の1年間は頑張って投稿をするつもりです。
5年目も、2003kaitoをよろしくお願いします。
コメント
コメントを投稿