Zenn
🕌

モバイルアプリでも使えるメディア最適化サービスをつくってみた

に公開
Docker
Vercel
mobile
image
記事投稿コンテスト「TypeScriptでやってみた挑戦・学び・工夫」
tech

🚀 MediaEdge: エッジで実現するメディア最適化サービス

現代のWebにおいて、画像や動画の配信最適化は必須要件となっています。
しかし、多様なデバイス、様々なネットワーク環境、そして急速に進化するメディアフォーマットに対応するのは容易ではありません。

そこで開発したのが MediaEdge - エッジコンピューティングの力を活用した、高性能な画像・動画処理サービスです。

まだまだ個人用途で色々と手直ししたい箇所もありますが、ひとまず公開

🎯 なぜMediaEdgeが必要なのか？

現代のWebメディアが直面する課題

  • デバイスの多様化: スマートフォンからデスクトップまで、様々な解像度とピクセル密度
  • ネットワーク環境の差: 5Gから低速回線まで、帯域幅の大きな格差
  • フォーマットの進化: WebP、AVIF、AV1など、新しいフォーマットの対応
  • パフォーマンス要求: より高速な読み込みとより良いユーザー体験

MediaEdgeは、これらすべての課題を自動的に、インテリジェントに解決します。

✨ MediaEdgeの革新的な機能

🎭 インテリジェントなデバイス検出

// 例: 自動的にデバイスに最適化された画像を配信
GET /responsive-image/sample.jpg
// → iPhone: 750px WebP画像
// → Desktop: 1920px AVIF画像
// → 低速回線: 480px 圧縮強化版

User-AgentとClient Hintsを活用し、アクセスするデバイスを瞬時に判別。最適なサイズ・フォーマット・品質の画像を自動配信します。

🖼️ 次世代レスポンシブ画像配信

従来の方法:

<!-- 手動で全サイズを用意する必要がある -->
<img src="image-320.jpg" 
     srcset="image-320.jpg 320w, image-640.jpg 640w..." />

MediaEdgeでは:

<!-- 1つのエンドポイントで全てが自動最適化 -->
<img src="/responsive-image/sample.jpg" />

📹 アダプティブビデオストリーミング

# デバイスと回線に応じて自動的に最適解像度を選択
curl -H "User-Agent: iPhone" /adaptive-video/sample.mp4
# → 720p H.264 1.5Mbps (モバイル最適化)

curl -H "User-Agent: Desktop" /adaptive-video/sample.mp4  
# → 1080p H.264 5Mbps (デスクトップ高品質)

🔄 ワンクリック最適化マークアップ生成

面倒なpicture要素の記述も自動生成：

GET /responsive-markup/hero-image.jpg

<picture>
  <!-- AVIF support for modern browsers -->
  <source srcset="/image/hero-image.jpg?format=avif&width=320 320w,
                  /image/hero-image.jpg?format=avif&width=640 640w,
                  /image/hero-image.jpg?format=avif&width=1280 1280w"
          type="image/avif">
  <!-- WebP fallback -->
  <source srcset="/image/hero-image.jpg?format=webp&width=320 320w,
                  /image/hero-image.jpg?format=webp&width=640 640w"
          type="image/webp">
  <!-- JPEG fallback -->
  <img src="/image/hero-image.jpg?format=jpeg&width=640" 
       loading="lazy" decoding="async">
</picture>

🏗️ 柔軟なデプロイメント選択肢

☁️ Vercelでのサーバーレス実行

# 3コマンドで本番デプロイ完了
npm install -g vercel
git clone https://github.com/your-repo/MediaEdge.git
vercel --prod

メリット:

  • インフラ管理不要
  • グローバルエッジ配信
  • 使用量に応じた自動スケーリング
  • 30秒以内のレスポンス保証

🐳 Dockerでのコンテナ実行

# ローカル開発もクラウドデプロイも同じ環境
docker-compose up -d

メリット:

  • 完全な制御とカスタマイズ
  • オンプレミス対応
  • Redis + MongoDB 完全統合
  • 無制限の処理時間

📊 パフォーマンス実例

Before (従来の方法)

初回画像読み込み: 2.3秒
ページサイズ: 4.2MB
Lighthouse Score: 67/100

After (MediaEdge導入後)

初回画像読み込み: 0.8秒 (65%改善!)
ページサイズ: 1.7MB (60%削減!)
Lighthouse Score: 94/100 (40%向上!)

🛠️ 驚くほど簡単な導入

Step 1: アップロード

curl -X POST -F "image=@photo.jpg" https://your-mediaedge.vercel.app/upload/image
# → {"key": "images/12345_photo.jpg", "url": "/image/images/12345_photo.jpg"}

Step 2: 最適化配信

<!-- あとはこれだけ！ -->
<img src="https://your-mediaedge.vercel.app/responsive-image/images/12345_photo.jpg">

Step 3: さらなる最適化（オプション）

# 特定の用途向けカスタマイズ
/image/sample.jpg?width=800&format=webp&quality=80
/thumbnail/video.mp4?time=00:00:05&width=320
/hls/video.mp4  # アダプティブストリーミング対応

🎨 実際の使用例

Eコマースサイト

<!-- 商品画像が自動的にデバイス最適化 -->
<img src="/responsive-image/products/smartphone-case.jpg" 
     alt="iPhone Case" />
<!-- モバイル: 375px WebP, デスクトップ: 1200px AVIF -->

ブログ・メディアサイト

<!-- 記事のヒーロー画像 + 動画 -->
<img src="/responsive-image/articles/hero-2024.jpg" />
<video src="/adaptive-video/interviews/ceo-talk.mp4" controls></video>

ソーシャルメディア

<!-- ユーザーアップロード画像の自動最適化 -->
<img src="/responsive-image/user-content/vacation-photo.jpg" />

🔮 技術仕様

サポートする画像フォーマット

  • 入力: JPEG, PNG, WebP, AVIF
  • 出力: JPEG, PNG, WebP, AVIF (ブラウザ対応に応じて自動選択)

サポートする動画フォーマット

  • 入力: MP4, WebM, QuickTime, AVI
  • 出力: MP4 (H.264), WebM (VP9), HLS対応

API機能一覧

GET  /image/{key}                    # 画像変換・配信
GET  /responsive-image/{key}         # デバイス最適化画像
GET  /responsive-markup/{key}        # picture要素生成
GET  /metadata/{key}                 # 画像メタデータ
POST /upload/image                   # 画像アップロード

GET  /video/{key}                    # 動画配信
GET  /adaptive-video/{key}           # デバイス最適化動画
GET  /hls/{key}                      # HLSマニフェスト
GET  /thumbnail/{key}                # 動画サムネイル
POST /upload/video                   # 動画アップロード

GET  /health                         # ヘルスチェック

🚀 今すぐ始めよう

1分で試す - ローカル環境

git clone https://github.com/madaoz1974/MediaEdge.git
cd MediaEdge
npm install
npm start

# ブラウザで http://localhost:3000/static/test.html

本格運用 - Vercelデプロイ

vercel --prod
# → https://your-mediaedge.vercel.app で本番稼働開始！

🌟 コミュニティと貢献

MediaEdgeはオープンソースプロジェクトです。

MediaEdgeは、現代のWebアプリケーションが必要とするメディア最適化機能を、シンプルなAPIで、高いパフォーマンスで提供します。

Vercelのサーバーレス環境でも、Dockerのコンテナ環境でも、あなたのプロジェクトに最適な形で導入できます。

MediaEdge - エッジで実現する、次世代のメディア最適化

#WebPerformance #ImageOptimization #EdgeComputing #OpenSource #Vercel #Docker

Discussion