「AIに読ませるだけ」シリーズを始めます【第0弾：MP4→GIF変換ツール】

こんばんは。ほったりたです。

昨日、Threads予約投稿の記事がまた伸びてきたという話をしました。
そこで以下のようなことを考えました

ということで、早速新しいシリーズを始めてみます。

その名も 「AIに読ませるだけ」シリーズ です。

このシリーズでやること

このシリーズでは、僕が書いた記事や配布するコードをAIに読ませるだけで、実際に動くツールができるようにします。

初めての試みなので、うまくいかない時もあるかもしれませんが、ちょっとチャレンジということで優しく見守ってください。笑

極力普段使っているであろうGeminiをそのまま活用したり、無料でできること・自分専用アプリとして自分で使えることを目的とするのでVercelなどへのデプロイはなしで作れるようにしたいと思ってます。

その制約の元でやる場合に、今考えているやり方は3パターンで考えてます。

※パターン2,3はClaude CodeやAntigravity、Codexを使います。

パターン1：GeminiのCanvasに投げるだけ

コードファイルをGeminiのチャットにアップしてToolで「Canvas」を選択。そして「このコードをCanvasで表示して使えるようにして」と言うだけ。

ブラウザ上でそのまま動きます。環境構築はなしです。Geminiを契約していれば使えるパターンです

パターン2：AIでバイブコーディング → デスクトップアプリ

AIに指示してElectronアプリを作ってもらいます。自分のPCで動くアプリができあがります。

パターン3：AIでバイブコーディング → GAS（サーバーサイド）

AIに指示してGoogle Apps Scriptを作ってもらいます。自分のGoogleアカウントで自動化が動くようになります。

※もう一つGoogle Colabを使うという手もありますが、それはやるかどうか考え中です。

今回は 一番簡単なパターン1 から実際に、本当にできるかどうかテストも兼ねてやってみたいと思います

第0弾：MP4→GIF変換ツール

以前、noteに動画を貼るのが面倒で、MP4をGIFに変換するツールをPythonで作りました。

今回は、このツールをGemini上で動くようにしたものを用意しました。GeminiのCanvasに読ませるだけで動きます。

できること

動画からこんな感じのGIFができます

• MP4動画をGIFに変換

• トリミング（開始位置と終了位置を指定）

• 出力幅やフレームレートの調整

• noteにアップできるかどうか（5MB以内）の判定

• 変換後のプレビューとダウンロード

（ちなみに、5MB以下が安定してアップできます。一応先ほどのGIFは7MBでアップできましたが、過去記事にもあるとおり5MB以上だと失敗することも多いです。）

使い方

1. コードファイルをダウンロード

以下からmp4_to_gif_canvas.jsxをダウンロードしてください。

2. Geminiに投げる

Geminiのチャット画面を開いて、以下の手順で進めます。

1. ダウンロードしたmp4_to_gif_canvas.jsxをチャット入力欄にアップロード

2. Geminiのモードが Pro になっていることを確認

3. ツールの 「Canvas」 を選択

4. 「このコードをCanvas（プレビュー）で表示して」と入力して送信

これを入力すると右側にCanvasが開いてコードを書き始めます

さらに、しばらく待ち、コードが完成すると右側のCanvasでWeb UIが表示されます。

以下のようなUIが出てきたら成功

3. 動画を変換する

UIが表示されたら以下の手順で動作します。

①動画ファイルを選択（ドラッグ&ドロップもできます）

アップロード後は動画が表示されます。

②プレビューを見ながら、切り取る範囲を調整

紫のバーでGIFにしたいスタート位置と終わり位置を決めることができます

③「GIFに変換する」ボタンを押す

時間を決めたら、基本はデフォルトのままGIF変換を押すをクリックしていただいて構いません（それでも容量大きい場合は、以下のファイルサイズを小さくするコツを試してみてください）

※初期設定では
・fps 5
・出力幅　アップロードされた画像サイズの3/4倍
・開始・終了は先ほどUIで調整した位置
になります。

④変換が終わったらダウンロード

変換終了後は緑のボタンでダウンロード可能です

ファイルサイズを小さくするコツ

GIFはどうしてもファイルサイズが大きくなりがちです。noteにアップするには先ほども書いた通りおそらく10MB以内(できれあば5MB以内が安定します）に収める必要があります。

• 出力幅を小さくする — 一番効果があります。400〜600pxくらいがおすすめ

• フレームレートを下げる — 5fpsでも意外と滑らかに見えます

• トリミングで短くする — 必要な部分だけ切り出す

変換結果で10MB以内に変換された場合には、「noteアップロードOK」と表示されます。そのままnoteに貼れますが、5~10MBの場合は失敗することもありますので、その時は幅狭くしたりしてみてください。

終わりに

さて、ちょっと実験的にスタートしてみました。うまく皆さんも動くものができるといいですが…第0弾、試してみた方はぜひリアクションいただけると嬉しいです。

うまくいったかどうかの反応を見て、シリーズを続けられるか検討していきます！

最後まで読んでいただきありがとうございました！
普段は「はっきんぐパパ」として電子工作やものづくりの記事も書いていますので、こちらもぜひ覗いてみてください。
はっきんぐパパはこちら↓