見出し画像

流れるバナーも、止まるGIFも。Movie to GIFに新機能を足しました

朝晩は少し涼しくなってきましたね。
どうも、Kyosukeです。

今回はnoteに嬉しいGIFの新機能のご紹介です。

ただ、その前に。どうしても先に書いておきたいことがあります。

Movie to GIF のトップ画面

01. 先に、お礼を言わせてください

Movie to GIF は無料で出しています。会員登録も課金もありません。

ですが、チップを送ってくださった方がいました。

ありがとうございます!


チップには、メッセージを添えられるようになっています。

どなたからのものかは伏せますが、うれしかった言葉をふたつだけご紹介します。

まず、390円のチップに添えられていた一文。

ありがとうございました。サンキュー(390)をおくります。

こちらこそサンキューです♪

そして、これ。

以前使わせていただいてから、実は今も愛用しています

ありがとうございます。とてもうれしかったです!

無料で何かを出すと、「届いているのか分からない」状態になります。
そこに「使ってます」のひと言が活動の燃料になります。

いつもコメントを下さるみな様も本当にありがとうございます!

というわけで、本編へ戻ります。



02. 【新機能】流れるバナーが作れる「マーキー」

記事やWebサイトで、細い帯が流れているの、見たことありませんか。

あれ、自分で作れたらいいのに、とずっと思っていました。

なので作りました。マーキーです。

完成した流れるバナー

白紙からは始まりません

開くと、いきなり見本が並んでいます。

押すと、その見た目が丸ごと入ります。色も、流れる速さも。
あとは好きに変えるだけ。

見本は「テイスト」ごとに用意しました。

はっきり / 線画アイコン / パステル / クレヨン / らくがき / メンフィス の6種類です。

「おまかせで組む」ボタンもあります。選んだテイストの中で、勝手に並べてくれます。


おまかせボタン


絵は181点、入っています

図形だけだと「模様」しか作れないので、絵も同梱しました。

桜・ひまわり・もみじ・雪、本・鉛筆・吹き出し、医療、料理……全部で181点です。

選ぶときは、先にテイストを選びます。

輪郭の濃さや塗り方が違うものが隣り合うと、帯としてすぐ崩れるんですね。なので、混ざりようがない作りにしました。

線画のアイコンだけは色を着せられます。濃い地の上でも、白を着せれば沈みません。

いちばん苦労したのは「継ぎ目」

流れる帯って、ループの端で「ガクッ」となりがちです。

このツールは、どう設定してもループがきれいにつながります。

速さを変えても、明滅させても、回転させても、色を回しても。

継ぎ目を探さなくていい。ここだけは、何度も測り直しました。

作ったバナーは、リンクで渡せます

GIFができると、その下に「バナーのリンクを共有」ボタンが出ます。

押すとURLがコピーされます。受け取った人がそれを開くと、同じバナーが載った状態でツールが立ち上がります。

色だけ変えて自分のものにする、みたいな渡し方ができます。

設定はぜんぶURLの中に入っているので、私のサーバーには何も残りません。

(自分で入れた画像だけは渡せません。図形と設定だけが乗ります)

触ってみて、変なところがあったら教えてください。



03. GIFの最後のコマを、止められるようにしました

GIFって、止まらないじゃないですか。

ずっとぐるぐる回っていて、記事に置くと、目の端でいつまでも動いている。

なので、最後のコマだけ長く止めるツールを作りました。「ループ調整」です。

できあがったGIFを放り込んで、止める秒数を決めるだけ。

ポイントは、作り直していないことです。

コマの表示時間を書き換えているだけなので、画質は元のまま落ちません。

1周の長さ・コマ数・容量も出るので、noteの上限に収まっているかもその場で分かります。

止まらない版と、最後で止まる版の比較

止まらない版
5秒止まる版
ずっと止まる版





04. 縦の動画、切らずに横長にできます

Movie to GIFの新機能

縦長の動画をnoteに貼ると、画面いっぱいに縦へ伸びて、記事が間延びします。
かといってクロップすると、見せたいものが切れる。

なので、余白を足して横長に整えられるようにしました。「画面」タブの下のほうです。

映像はそのまま。足りない側に単色の余白を足して、指定の比率に収めます。

  • 比率はボタンで選べます

  • 余白の色は白・黒・好きな色から

  • 映像を左右(上下)のどちらに寄せるかも選べます

容量の推定も、貼り先の上限判定も、余白込みの大きさで計算しています。

実際に貼られるのは、そちらの大きさなので。




おわりに

相変わらず、動画も画像もサーバーには送られません。 ぜんぶブラウザの中だけで終わります。

インストールも会員登録も課金もいりません。

あばけろ君は左肩でいつも「バグ報告はラブレターだね」と言っています🐸

今回はそこに、本物のラブレターが何通か届いてしまいました。

チップをくださったみなさん、ありがとうございます。

おかげで、さらにnoteの皆さんに優しいツールになりました。

▼ぜひ触ってみてください👇

「ここが使いにくい」「この端末で動かない」も大歓迎です。
応援のコメントもお待ちしております😊

LINE公式やDMに送ってもらえたら、次のアップデートで直します😌🐸

不定期でAIやWebに関する情報や便利なアプリを紹介しています。 よければLINE公式の登録もお待ちしております✨

いいなと思ったら応援しよう!

Kyosuke(みんなのWeb屋さん) よろしければ応援お願いします!いただいたチップは、よりよい記事づくりのために大切に使わせていただきます🐸