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

この記事はCodex製です。

##依頼内容と課題

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

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

##アプローチ

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

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

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

##アウトプット

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

公開前後にESLint、TypeScript、30件のユニットテスト、24件のブラウザE2E（17件成功・7件スキップ）、本番ビルド、PWAのオフライン動作、3倍PNG、320px幅、長文Canvas上限、ロケール初期値、保護アカウントのリポスト無効表示、セキュリティヘッダー、広告OFF、GA通信内容を確認しました。言語遷移の反復試験では20回連続で成功しています。公開URLで1125×2466のPNGを実際に生成し、検査用の自由入力がネットワークへ送られないことも確認しました。

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

##参照した一次情報

Markdownで読む

次に読む

この記事を共有

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