StoryMaker — Instagramストーリー向けブラウザ画像エディタ

Web
StoryMaker — Instagramストーリー向けブラウザ画像エディタ

StoryMaker — Instagramストーリー向けブラウザ画像エディタ

StoryMakerはブラウザ上で動作するオンラインの画像エディタで、主にInstagram Stories（9:16）向けに設計されています。1080×1920の高解像度キャンバスを備え、背景の配置（fit／stretch／単色など）、画像やテキストの配置、変形、エフェクト適用、最終的な画像形式での書き出しが可能です。現在は画像編集のコア機能が整備されており、将来的には音声対応、画像ギャラリー検索、GIF／動画書き出し、オーディオビジュアライザなどの拡張を計画しています。（約300字）

https://github.com/sammwyy/StoryMaker

概要

StoryMakerは、Instagram Stories（縦型9:16比率、1080×1920）を想定したブラウザベースの画像編集ツールです。背景、画像、テキストといった要素をキャンバス上で配置・変形・エフェクト付与し、最終的に画像としてエクスポートできます。リポジトリはTypeScriptで実装され、軽量なランタイム（bunのロックファイルが含まれていることからBunでの実行を想定している可能性があります）やESLint設定が含まれています。現状はコア機能にフォーカスしており、今後は音声やGIF／動画対応、ギャラリー検索といったマルチメディア機能の追加が計画されています。（約300字）

GitHub

リポジトリの統計情報

  • スター数: 2
  • フォーク数: 0
  • ウォッチャー数: 2
  • コミット数: 3
  • ファイル数: 13
  • メインの言語: TypeScript

主な特徴

  • Instagram Stories向けの高解像度キャンバス（9:16、1080×1920）を標準サポート。
  • 背景設定（fit / stretch / 単色など）、画像・テキスト要素の配置と変形、エフェクト適用。
  • 編集結果を画像形式でエクスポートできるワークフロー。
  • 将来的な拡張計画（音声、GIF/動画出力、画像ギャラリー検索、オーディオビジュアライザ）を明示。

技術的なポイント

StoryMakerはフロントエンド中心のブラウザアプリとして設計されており、TypeScriptで実装されている点がまず注目に値します。リポジトリにbun.lockが含まれていることから、開発／実行環境にBunを想定している可能性が高く、高速な依存解決やバンドル、軽量な開発体験を活かせます。index.htmlがあることから単一ページアプリケーション（SPA）構成を取っており、Canvas APIやSVG、あるいはWebGLを用いたレンダリング層で要素の合成・変形・エフェクト処理を行っていると推測されます。

キャンバス解像度が1080×1920と固定に近い設計は、レンダリング品質・レイアウトの一貫性を重視する実装判断で、ピクセルパーフェクトな書き出しを可能にします。背景のモード（fit/stretch/solid）は画像ソースに対するフィッティングロジックとアスペクト比管理を要し、これらは内部的に矩形領域のスケーリング・クロッピングやCSS的な「object-fit」相当の計算で実装されることが多いです。

要素の「変換（transforms）」や「エフェクト」は、2D変換行列（平行移動、回転、拡縮など）とブレンド/フィルタ処理の組み合わせで表現されます。テキスト要素のレンダリングは、フォント管理（埋め込み／Webフォント）、テキストの折り返しや行間調整、縦横揃えなどの実装課題を含みます。画像の書き出しは、ブラウザ側でcanvas.toDataURLやtoBlobを使ってPNG/JPEG等にエクスポートするのが一般的で、透過や圧縮率の選択、メタデータ処理が付随します。

コード品質面ではeslint.config.jsが含まれており、静的解析・スタイルガイドに基づいた開発が進められていることが分かります。ファイル数が少なくコミット数も軽めな点からは、現在は機能のプロトタイプ段階か初期開発段階であり、将来的な拡張（音声や動画サポート）に向けてアーキテクチャの拡張性を意識した設計が必要になるでしょう。たとえば動画やGIFを扱う場合はフレーム合成やタイムライン管理、AudioContextやMediaRecorderを利用した入出力、サーバーサイドでのレンダリング（あるいはWebCodecs/OffscreenCanvasの活用）などの追加検討が考えられます。

総じて、StoryMakerは「ブラウザで完結する高解像度ストーリー作成ツール」という明確なドメインに特化しており、TypeScript＋Bun想定のモダンな開発体験、Canvasベースのピクセル制御、将来的なマルチメディア対応計画が技術的な特徴です。（約700字）

プロジェクトの構成

主要なファイルとディレクトリ：

  • .gitignore: file
  • README.md: file
  • bun.lock: file
  • eslint.config.js: file
  • index.html: file

…他 8 ファイル

プロジェクトは小規模で、フロントエンド単体で完結する設計が見て取れます。将来的にGIFや動画、音声を追加する場合は、ファイル入出力やパフォーマンス、依存するネイティブAPIの扱い（Web Audio API、Media APIs）をどう統合するかが課題になります。

まとめ

Instagram Stories特化の小型で拡張性のあるブラウザ画像エディタ。今後のマルチメディア対応に期待。

リポジトリ情報：

READMEの抜粋：

StoryMaker

Online image editor primarily designed for Instagram Stories (9:16). Compose backgrounds, text, and image elements with transforms and effects, and export the result to image formats. This document describes the current state and the plan to add: audio, image gallery/search, GIF support, video export with custom duration, and an audio visualizer.

Current features

  • 9:16 canvas (1080×1920): high‑quality canvas rendering for Stories.
  • Backgrounds: fit, stretch, sol…