The Posted StudioのXポスト風プレビューを更新した

この記事はCodex製です。

##依頼内容と課題

twipeta.r109.com を The Posted Studio として整理し、Xポスト風の画面を作れる無料ツールを更新しました。アイコン、表示名、ユーザーID、本文、日時、表示回数、返信、リポスト、引用、いいね、ブックマーク、画像などを利用者が編集し、PNGとして保存できます。

今回の変更では、ファーストビューを「Xポスト風の画面を作るツール」と端的に伝える構成へ絞り、キャプチャ内の右上を X.com 表示にしました。生成画面からバージョン名、言語数、生成元署名などの冗長なラベルを外し、ホームFAQも用途・保存形式を案内する短い内容へ整理しました。添付画面との比較では、正方形メディア、鍵アカウントの無効リポスト、重複メトリクスの削除、4G表示、メッセージアイコン、Grok風中央アイコン、未選択の反応色を反映しました。書き出し画像には各言語の短いモックアップ識別だけを残し、実在人物のなりすまし、証拠の偽装、詐欺、嫌がらせを禁じる警告も維持しています。Xの公式表示要件は実在する未改変ポストを対象として存在しない投稿のモックアップを認めていないため、公式製品・公式表示とは称していません。

LPと編集画面が同じページに混在していたため、検索・説明用のLPと、入力・プレビュー・書き出しに集中するアプリ本体を分離しました。LPは / と各言語トップ、アプリは /app/ と /{locale}/app/ です。LPのCTA、法務ページのCTA、PWAショートカットはアプリへつなぎ、アプリのブランドリンクはLPへ戻します。

添付のiOS実機画面に合わせた再調整では、ステータス時刻の余白、4本の電波バー、Wi-Fi記号、iOSのグレーのバッテリーカプセルを個別に描画し、写真へ戻る行も追加しました。プロフィールは37pxアバターと実機の左右余白に合わせ、右上の X.com は汎用のXワードマークとドメイン部分を分離しました。認証バッジは青いスカラップ形状と白いチェック、中央下部のGrokは開いた円弧と斜線、通知ベルは輪郭と台座、ホームは塗りのハウス形状へ置き換えました。返信吹き出しの線幅、アクション列の左右端寄せ、返信入力欄、時刻・表示数直下の罫線なしも実機基準へ調整しています。本文はXのweighted length 280を超えると … で表示上限を守り、極端に長い入力は書き出し上限で止めます。画面下の旧「モックアップ」署名は短いロケール別「プレビュー」に整理しました。

##アプローチ

ReactとNext.jsの静的出力を使い、編集、画像処理、下書き保存、PNG生成をブラウザ内だけで完結させました。認証、データベース、アップロードAPIは設けていません。画像は端末内で縮小し、下書きはローカルストレージへ保存します。最大4件のメディア、ALT、動画・GIF表示、引用投稿、リンクカード、投票、コミュニティノート、公開範囲、テーマ、端末表示まで編集できます。

UIとキャプチャ内のデフォルト値は、日本語、英語、スペイン語、ブラジルポルトガル語、フランス語、ドイツ語、韓国語、中国語2種、インドネシア語、ヒンディー語、アラビア語の12ロケールで切り替わります。アラビア語はRTL表示に対応しています。PWAの起動先を /app/ にし、12言語のアプリルートをサービスワーカーへ事前キャッシュしました。アプリ画面は noindex とし、12言語のcanonical / hreflangを出力しています。LPの静的ページには構造化データ、OG画像、サイトマップ、robots.txt、llms.txtを設定しました。ガイド本文とSEOメタデータからXへの外部リンクも除去しました。

ロケールE2Eではクリーンセッションの英語アプリで入力ラベル、初期本文、プレビュー表記が英語になることを確認しました。プレビュー言語はUI言語と独立して変更でき、保存済みの下書きを別ルートへ移しても利用者の選択を失わない構成を保っています。

Google Analytics 4は利用者が解析へ同意するまで読み込みません。自由入力した名前、本文、画像、日時、数値、URLは解析イベントへ送らず、許可した操作名と固定値だけを送ります。AdSenseの所有者情報とads.txtは準備しましたが、初回公開では広告スクリプトと広告枠を無効にしています。広告を有効にする前に、対象地域の同意管理、認定CMP、サイト審査、広告枠を別工程で確認します。

##アウトプット

非公開GitHubリポジトリ rrih/twipeta.r109.com を作り、Cloudflare Workers Static Assetsへ自動デプロイするGitHub Actionsを設定しました。カスタムドメイン、連絡先メールのルーティング、GA4プロパティとWebストリームも接続しています。

公開前後にESLint、TypeScript、32件のユニットテスト、28件のブラウザE2E（21件成功・7件スキップ）、本番ビルド、LPとアプリのデスクトップ / モバイル表示、PWAのオフライン動作、3倍PNG、320px幅、長文Canvas上限、ロケール初期値、保護アカウントのリポスト無効表示、各専用アイコン、ステータスバー、セキュリティヘッダー、広告OFF、GA通信内容を確認しました。英語を含む12ルートをブラウザで巡回し、UI言語、HTML lang、初期プレビュー、プレビュー表記を確認しています。公開URLで1125×2466のPNGを実際に生成し、検査用の自由入力がネットワークへ送られないことも確認しました。

サイトマップはSearch Consoleの sc-domain:r109.com へ送信し、警告0件、エラー0件で受理されました。

##参照した一次情報

Markdownで読む

次に読む

この記事を共有

Xで共有Facebookで共有はてなブックマーク