slack-gif-creator

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. Create builder
builder = GIFBuilder(width=128, height=128, fps=10)

# 2. Generate frames
for i in range(12):
    frame = Image.new('RGB', (128, 128), (240, 248, 255))
    draw = ImageDraw.Draw(frame)

    # Draw your animation using PIL primitives
    # (circles, polygons, lines, etc.)

    builder.add_frame(frame)

# 3. Save with optimization
builder.save('output.gif', num_colors=48, optimize_for_emoji=True)

グラフィックの描画

ユーザーがアップロードした画像を扱う

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

• そのまま使う（例：「これをアニメーションにして」「これをフレームに分割して」）
• 参考にする（例：「これに似たものを作って」）

PIL を使って画像を読み込み、処理します。

from PIL import Image

uploaded = Image.open('file.png')
# Use directly, or just as reference for colors/style

一から描画する

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

from PIL import ImageDraw

draw = ImageDraw.Draw(frame)

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

# Stars, triangles, any polygon
points = [(x1, y1), (x2, y2), (x3, y3), ...]
draw.polygon(points, fill=(r, g, b), outline=(r, g, b), width=3)

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

# Rectangles
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)  # Add PIL Image
builder.add_frames(frames)  # Add list of frames
builder.save('out.gif', num_colors=48, optimize_for_emoji=True, remove_duplicates=True)

Validators (core.validators)

GIF が Slack の要件を満たしているか確認します。

from core.validators import validate_gif, is_slack_ready

# Detailed validation
passes, info = validate_gif('my.gif', is_emoji=True, verbose=True)

# Quick check
if is_slack_ready('my.gif'):
    print("Ready!")

Easing Functions (core.easing)

直線的な動きではなく、滑らかな動きを実現します。

from core.easing import interpolate

# Progress from 0.0 to 1.0
t = i / (num_frames - 1)

# Apply easing
y = interpolate(start=0, end=400, t=t, easing='ease_out')

# Available: linear, ease_in, ease_out, ease_in_out,
#           bounce_out, elastic_out, back_out

Frame Helpers (core.frame_composer)

よく使う処理のための便利な関数です。

from core.frame_composer import (
    create_blank_frame,         # Solid color background
    create_gradient_background,  # Vertical gradient
    draw_circle,                # Helper for circles
    draw_text,                  # Simple text rendering
    draw_star                   # 5-pointed star
)

アニメーションの概念

揺れ／振動

振動を使ってオブジェクトの位置をずらします。

• フレームインデックスとともに math.sin() または math.cos() を使います
• 自然な動きにするため、小さなランダム変化を加えます
• x 方向、y 方向、または両方に適用します

脈動／鼓動

オブジェクトのサイズをリズミカルに拡大・縮小します。

• 滑らかな脈動には math.sin(t * frequency * 2 * math.pi) を使います
• 鼓動の場合は、素早く 2 回脈動させた後に一時停止します（正弦波を調整します）
• 基本サイズの 0.8〜1.2 倍の範囲で拡大・縮小します

バウンド

オブジェクトが落下して跳ね返ります。

• 着地には easing='bounce_out' を指定して interpolate() を使います
• 落下（加速）には easing='ease_in' を使います
• 各フレームで y 方向の速度を増やし、重力を適用します

回転

オブジェクトを中心を軸に回転させます。

• PIL：image.rotate(angle, resample=Image.BICUBIC)
• 揺れを加えるには、角度を直線的に変化させるのではなく、正弦波を使います

フェードイン／フェードアウト

徐々に表示または非表示にします。

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

スライド

オブジェクトを画面外から所定の位置まで移動させます。

• 開始位置：フレームの境界外
• 終了位置：目標の位置
• 滑らかに停止させるには、easing='ease_out' を指定して interpolate() を使います
• オーバーシュートさせるには、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で自動的に最適化します

# Maximum optimization for emoji
builder.save(
    'emoji.gif',
    num_colors=48,
    optimize_for_emoji=True,
    remove_duplicates=True
)

基本方針

このスキルが提供するもの：

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

このスキルが提供しないもの：

• 固定されたアニメーションテンプレートや既製の関数
• 絵文字フォントのレンダリング（プラットフォーム間での動作が不安定です）
• スキルに組み込まれた、パッケージ済みグラフィックのライブラリ

ユーザーがアップロードした画像について：このスキルには既製のグラフィックは含まれていませんが、ユーザーが画像をアップロードした場合は、PILで読み込んで加工してください。その画像をそのまま使いたいのか、インスピレーションとして使いたいだけなのかは、依頼内容に基づいて判断してください。

自由に工夫してください！複数の概念を組み合わせ（バウンス＋回転、パルス＋スライドなど）、PILの機能を最大限に活用してください。

依存関係

pip install pillow imageio numpy