slack-gif-creator

Slack GIF クリエイター

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

カタログの変更に関するお知らせ：Slack の推奨事項とバリデーターの制限を明確にし、GIF の長さ／形式チェックと基本的なビルダーの入力処理を修正しました。付属の Apache-2.0 ライセンステキストはそのまま保持されています。このレビューでは、上流の著作者情報が欠落しているかどうかは確認していません。

解決済みのスキルルートから実行するか、Python のモジュールパスに追加し、分離された環境と付属の要件を使用してください。信頼できない画像をデコードする際は、寸法とフレーム数に上限を設け、Pillow のデコンプレッション爆弾保護を維持してください。新しいタスク専用パスにエクスポートしてください。共有やアップロードには、指定されたワークスペースと権限が必要です。点滅するアニメーションは避け、静止プレビューを用意してください。

Slack の目標値と推奨事項

寸法：

• 絵文字 GIF：128x128（推奨）
• メッセージ GIF：480x480

Slack は、128 KB 未満の正方形のカスタム画像を推奨し、最大 50 フレームの GIF をサポートしています。Slack のカスタム絵文字に関するガイダンスを参照してください。ここに示す寸法／FPS／色数／長さの値は設計上の目標であり、プラットフォームの受け入れ条件をすべて網羅するものではありません。メッセージ GIF の寸法は目安です。

パラメーター：

• 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)

バリデーター（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!")

イージング関数（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 (these may overshoot the range)

フレームヘルパー（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 倍の範囲で拡大縮小する

バウンス

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

• 着地には 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. 重複を削除する - remove_duplicates=True にすると、この実装ではタイミングが短くなります。一時停止や再生時間を保持する必要がある場合は false のままにします
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

使用する場面

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

is_slack_ready はローカルのエンコードやターゲットの制約を確認するもので、実際にアップロードが受け入れられるかどうかは確認しません。RGB への変換では透明度が失われます。絵文字の最適化は保存済みのフレームを変更し、アニメーションが短くなる場合があります。公称 FPS や返されたパレット数を鵜呑みにせず、エンコードされたファイルを確認してください。このパッケージは Slack へのアップロードを行いません。

制限事項

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