Slack GIF Creator

Slack向けに最適化されたアニメーションGIFを作成するためのユーティリティと知識を提供するツールキットです。

Slack要件

寸法:

• 絵文字GIF: 128x128 (推奨)
• メッセージGIF: 480x480

パラメータ:

• FPS: 10-30 (低いほどファイルサイズが小さい)
• 色数: 48-128 (少ないほどファイルサイズが小さい)
• 期間: 絵文字GIFの場合は3秒以下に保つ

コアワークフロー

from core.gif_builder import GIFBuilder
from PIL import Image, ImageDraw

# 1. ビルダーを作成
builder = GIFBuilder(width=128, height=128, fps=10)

# 2. フレームを生成
for i in range(12):
    frame = Image.new('RGB', (128, 128), (240, 248, 255))
    draw = ImageDraw.Draw(frame)

    # PILプリミティブを使ってアニメーションを描画
    # (円、多角形、線など)

    builder.add_frame(frame)

# 3. 最適化して保存
builder.save('output.gif', num_colors=48, optimize_for_emoji=True)

グラフィックの描画

ユーザーがアップロードした画像の操作

ユーザーが画像をアップロードした場合、以下のどちらを望んでいるか検討してください:

• 直接使用 (例: 「これをアニメーション化して」「これをフレームに分割して」)
• インスピレーション源として使用 (例: 「これのようなものを作って」)

PILを使って画像を読み込んで操作します:

from PIL import Image

uploaded = Image.open('file.png')
# 直接使用するか、色やスタイルの参考にするだけ

ゼロから描画

グラフィックスをゼロから描画する場合、PILのImageDrawプリミティブを使用します:

from PIL import ImageDraw

draw = ImageDraw.Draw(frame)

# 円/楕円
draw.ellipse([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)

# 星、三角形、任意の多角形
points = [(x1, y1), (x2, y2), (x3, y3), ...]
draw.polygon(points, fill=(r, g, b), outline=(r, g, b), width=3)

# 線
draw.line([(x1, y1), (x2, y2)], fill=(r, g, b), width=5)

# 四角形
draw.rectangle([x1, y1, x2, y2], fill=(r, g, b), outline=(r, g, b), width=3)

使用しないこと: 絵文字フォント (プラットフォーム間で信頼性が低い) またはこのスキルに事前にパッケージされたグラフィックスが存在すると想定すること。

グラフィックスを見栄え良くする

グラフィックスは基本的ではなく、洗練された創造的なものに見えるべきです。以下の方法があります:

太い線を使う - アウトラインと線には常に width=2 以上を設定してください。細い線 (width=1) はぎこちなく素人っぽく見えます。

視覚的な奥行きを追加する:

• 背景にグラデーションを使用 (create_gradient_background)
• 複数の図形をレイヤーして複雑さを出す (例: 中に小さな星がある星)

図形をより興味深くする:

• ただの平らな円を描くだけではなく、ハイライト、リング、またはパターンを追加する
• 星はグロー効果を持つことができます (背後に大きく半透明のバージョンを描画)
• 複数の図形を組み合わせる (星+きらめき、円+リング)

色に注意を払う:

• 鮮やかで補色的な色を使用する
• コントラストを追加 (明るい図形に暗いアウトラインを、暗い図形に明るいアウトラインを)
• 全体的な構成を考慮する

複雑な図形の場合 (ハート、雪の結晶など):

• 多角形と楕円の組み合わせを使用
• 対称性のためにポイントを慎重に計算
• 詳細を追加 (ハートはハイライトカーブを持つことができ、雪の結晶は複雑な枝を持つ)

創造的で詳細にしてください! 良いSlack GIFはプレースホルダーグラフィックスのように見えるのではなく、洗練されて見えるべきです。

利用可能なユーティリティ

GIFBuilder (core.gif_builder)

フレームを組み立て、Slack向けに最適化します:

builder = GIFBuilder(width=128, height=128, fps=10)
builder.add_frame(frame)  # PIL Imageを追加
builder.add_frames(frames)  # フレームのリストを追加
builder.save('out.gif', num_colors=48, optimize_for_emoji=True, remove_duplicates=True)

バリデータ (core.validators)

GIFがSlack要件を満たしているか確認:

from core.validators import validate_gif, is_slack_ready

# 詳細な検証
passes, info = validate_gif('my.gif', is_emoji=True, verbose=True)

# クイックチェック
if is_slack_ready('my.gif'):
    print("準備完了!")

イージング関数 (core.easing)

線形ではなく滑らかなモーション:

from core.easing import interpolate

# 0.0から1.0への進行
t = i / (num_frames - 1)

# イージングを適用
y = interpolate(start=0, end=400, t=t, easing='ease_out')

# 利用可能: linear, ease_in, ease_out, ease_in_out,
#           bounce_out, elastic_out, back_out

フレームヘルパー (core.frame_composer)

一般的なニーズのための便利関数:

from core.frame_composer import (
    create_blank_frame,         # 単色背景
    create_gradient_background,  # 垂直グラデーション
    draw_circle,                # 円のヘルパー
    draw_text,                  # シンプルなテキストレンダリング
    draw_star                   # 5点の星
)

アニメーションの概念

揺れ/振動

オブジェクト位置を振動でオフセット:

• フレームインデックスで math.sin() または math.cos() を使用
• 自然な感じのために小さなランダム変動を追加
• x および/または y 位置に適用

パルス/鼓動

オブジェクトサイズをリズミカルに拡大縮小:

• スムーズなパルスには math.sin(t * frequency * 2 * math.pi) を使用
• 鼓動の場合: 2つの素早いパルスの後に一時停止 (正弦波を調整)
• 基本サイズの 0.8 から 1.2 の間でスケーリング

バウンス

オブジェクトが落ちてバウンス:

• ランディングには interpolate() で easing='bounce_out' を使用
• 落下には easing='ease_in' を使用 (加速)
• 重力を適用して毎フレーム y 速度を増加

スピン/回転

中心の周りでオブジェクトを回転:

• PIL: image.rotate(angle, resample=Image.BICUBIC)
• ぐらつき: 線形の代わりに角度に正弦波を使用

フェードイン/アウト

徐々に表示または非表示:

• RGBA画像を作成、アルファチャンネルを調整
• または Image.blend(image1, image2, alpha) を使用
• フェードイン: アルファを0から1に
• フェードアウト: アルファを1から0に

スライド

オブジェクトを画面外から位置に移動:

• 開始位置: フレーム境界の外
• 終了位置: ターゲット位置
• スムーズな停止には interpolate() で easing='ease_out' を使用
• オーバーシュートの場合: easing='back_out' を使用

ズーム

ズーム効果のためにスケーリングと配置:

• ズームイン: 0.1から2.0へスケーリング、中心をクロップ
• ズームアウト: 2.0から1.0へスケーリング
• モーションブラーを追加して劇的に (PILフィルタ)

爆発/パーティクルバースト

外側に放射状に広がるパーティクルを作成:

• ランダムな角度と速度を持つパーティクルを生成
• 各パーティクルを更新: x += vx, y += vy
• 重力を追加: vy += gravity_constant
• 時間とともにパーティクルをフェードアウト (アルファを減少)

最適化戦略

ファイルサイズを小さくするよう求められた場合のみ、以下の方法のいくつかを実装してください:

1. フレーム数を減らす - FPSを下げる (20ではなく10) または期間を短くする
2. 色数を減らす - num_colors=128 ではなく num_colors=48
3. 寸法を小さくする - 480x480ではなく128x128
4. 重複を削除する - save()で remove_duplicates=True
5. 絵文字モード - optimize_for_emoji=True は自動的に最適化

# 絵文字の最大最適化
builder.save(
    'emoji.gif',
    num_colors=48,
    optimize_for_emoji=True,
    remove_duplicates=True
)

哲学

このスキルは以下を提供します:

• 知識: Slackの要件とアニメーションの概念
• ユーティリティ: GIFBuilder、バリデータ、イージング関数
• 柔軟性: PILプリミティブを使ってアニメーションロジックを作成

以下は提供しません:

• 堅牢なアニメーションテンプレートまたは事前作成の関数
• 絵文字フォントレンダリング (プラットフォーム間で信頼性が低い)
• スキルに組み込まれた事前パッケージされたグラフィックスのライブラリ

ユーザーアップロードに関する注記: このスキルには事前構築されたグラフィックスが含まれていませんが、ユーザーが画像をアップロードした場合、PILを使用して読み込んで操作してください - ユーザーのリクエストに基づいて、直接使用するか単なるインスピレーション源として使用するかを解釈します。

創造的になってください! 概念を組み合わせ (バウンス+回転、パルス+スライドなど)、PILの完全な機能を使用してください。

依存関係

pip install pillow imageio numpy

使用時期

このスキルは、上記の概要で説明されているワークフローまたはアクションを実行する場合に適用可能です。

制限事項

• このスキルは、上記で説明された範囲に明らかに一致するタスクの場合のみ使用してください。
• 出力を環境固有の検証、テスト、または専門家のレビューの代替として扱わないでください。
• 必要な入力、権限、安全境界、または成功基準が不足している場合は、停止して明確化を求めてください。