メインコンテンツへスキップ
見出し画像

流れるバナーも、止まる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公式の登録もお待ちしております✨

    画像
     
     
    九州の長崎県からホームページ制作、AIツール開発に関する発信をしてます🖥️ noteではAIやWebに関連する普段の業務や副業などに活かせる内容をお届けしていきます🐸✨️ ITが苦手な方にも届くように記事を書いていきますので、ぜひフォローしてください✨

    あなたへのおすすめ