画像アセット最適化のコード実装
GitHub Actionsを使ったデザインワークフローの自動化実装例です。
画像最適化ワークフロー
画像ファイルが更新されると自動実行されます:
name: 画像最適化
on:
push:
paths:
– ‘assets/images/**’
jobs:
optimize:
runs-on: ubuntu-latest
steps:
– uses: actions/checkout@v3
– name: ImageMagick セットアップ
run: sudo apt-get install imagemagick webp
– name: 複数サイズ生成
run: |
mkdir -p optimized/{xl,lg,sm}
for img in assets/images/*.{jpg,png}; do
filename=$(basename “$img”)
convert “$img” -resize 1920×1080 “optimized/xl/${filename}”
convert “$img” -resize 1280×720 “optimized/lg/${filename}”
convert “$img” -resize 640×360 “optimized/sm/${filename}”
done
– name: WebP変換
run: |
for img in optimized/*/*.{jpg,png}; do
cwebp -q 80 “$img” -o “${img%.*}.webp”
done
on:
push:
paths:
– ‘assets/images/**’
jobs:
optimize:
runs-on: ubuntu-latest
steps:
– uses: actions/checkout@v3
– name: ImageMagick セットアップ
run: sudo apt-get install imagemagick webp
– name: 複数サイズ生成
run: |
mkdir -p optimized/{xl,lg,sm}
for img in assets/images/*.{jpg,png}; do
filename=$(basename “$img”)
convert “$img” -resize 1920×1080 “optimized/xl/${filename}”
convert “$img” -resize 1280×720 “optimized/lg/${filename}”
convert “$img” -resize 640×360 “optimized/sm/${filename}”
done
– name: WebP変換
run: |
for img in optimized/*/*.{jpg,png}; do
cwebp -q 80 “$img” -o “${img%.*}.webp”
done
ポートフォリオ自動更新ワークフロー
新しい作品がアップロードされると自動でサイト更新:
name: ポートフォリオ更新
on:
push:
paths:
– ‘portfolio/**’
jobs:
update:
runs-on: ubuntu-latest
steps:
– uses: actions/checkout@v3
– name: Node.js セットアップ
uses: actions/setup-node@v3
with:
node-version: ’18’
– name: サムネイル生成
run: |
npm install sharp
node generate-thumbnails.js
– name: サイト更新
run: |
npm run build
npm run deploy
– name: SNS投稿
run: python post_to_social.py
env:
TWITTER_API_KEY: ${{ secrets.TWITTER_API_KEY }}
on:
push:
paths:
– ‘portfolio/**’
jobs:
update:
runs-on: ubuntu-latest
steps:
– uses: actions/checkout@v3
– name: Node.js セットアップ
uses: actions/setup-node@v3
with:
node-version: ’18’
– name: サムネイル生成
run: |
npm install sharp
node generate-thumbnails.js
– name: サイト更新
run: |
npm run build
npm run deploy
– name: SNS投稿
run: python post_to_social.py
env:
TWITTER_API_KEY: ${{ secrets.TWITTER_API_KEY }}
アプリアイコン生成ワークフロー
マスターアイコンから各プラットフォーム向けアイコンを自動生成:
name: アプリアイコン生成
on:
push:
paths:
– ‘icons/master-icon.png’
jobs:
generate-icons:
runs-on: ubuntu-latest
steps:
– uses: actions/checkout@v3
– name: iOS用アイコン生成
run: |
sizes=”1024 512 256 128 64 32 16″
for size in $sizes; do
convert icons/master-icon.png -resize ${size}x${size} “ios/icon-${size}.png”
done
– name: Android用アイコン生成
run: |
convert icons/master-icon.png -resize 192×192 “android/icon-192.png”
convert icons/master-icon.png -resize 512×512 “android/icon-512.png”
on:
push:
paths:
– ‘icons/master-icon.png’
jobs:
generate-icons:
runs-on: ubuntu-latest
steps:
– uses: actions/checkout@v3
– name: iOS用アイコン生成
run: |
sizes=”1024 512 256 128 64 32 16″
for size in $sizes; do
convert icons/master-icon.png -resize ${size}x${size} “ios/icon-${size}.png”
done
– name: Android用アイコン生成
run: |
convert icons/master-icon.png -resize 192×192 “android/icon-192.png”
convert icons/master-icon.png -resize 512×512 “android/icon-512.png”
生成される画像サイズ
レスポンシブ対応
- XLサイズ:1920×1080(デスクトップ)
- Largeサイズ:1280×720(タブレット)
- Smallサイズ:640×360(スマートフォン)
次世代フォーマット
- WebP:80%品質で軽量化
- AVIF:さらなる圧縮効率
自動化のメリット
- デザイナーの作業時間短縮
- 一貫した品質の維持
- 複数フォーマット対応の自動化
- ヒューマンエラーの防止