Xtracticle

---

公開サイト： xtracticle.com — または、投稿URLの x.com を xtracticle.com に変更するだけです。

機能

エクスポート形式

形式	内容
PDF	A4サイズで印刷に適した形式です。タイトル、作成者、日付、ソースのヘッダー、画像、ページ番号、クリック可能なソースリンクが含まれます。ページごとにレンダリングするため、長い記事でも空白のPDFにならず、行が途中で切れることもありません。
Markdown	見出し、太字／斜体／取り消し線、リンク、入れ子のリスト、引用、コード、区切り線、画像、動画サムネイルに対応します。オプションでYAMLフロントマター（Obsidianのプロパティ、Hugo／Jekyll／Astro）を追加できます。
EPUB 3	画像とメタデータを埋め込んだリフロー型の電子書籍です。Kindle（Send to Kindle）、Kobo、Apple Booksに対応します。
ZIP + 画像	Markdownと、ローカルに保存されたすべての画像をまとめます。投稿が削除されても残るオフラインアーカイブです。
テキスト	余分な要素のない .txt 形式です。
Obsidian	Markdownをコピーし、obsidian://new で新しいノートを開きます。

コンテンツ

• 📝 Xの記事 — Draft.jsを完全に変換します。カバー画像、インライン画像、動画、キャプション、埋め込み投稿に対応します。
• 🧵 任意の投稿からスレッドを取得 — 最初、中間、最後の投稿のいずれを貼り付けても、同一ユーザーのスレッド全体を組み立てます（他のユーザーからの返信は含まれません）。
• 💬 投稿 — 改行、写真、動画、引用投稿に対応します。
• 🔗 柔軟な入力 — x.com、twitter.com、モバイル版、fxtwitter／vxtwitter／fixupx、nitter／xcancelのリンク、/i/web/status/、IDのみの形式、共有テキスト内のリンクに対応します。

ワークフロー

• 🔁 URLの置き換え — xtracticle.com/{user}/status/{id} を開くと投稿が直接表示され、共有時にはリッチリンクプレビュー（Open Graph）が表示されます。
• 📚 一括モード — 最大20件のリンクを、Markdownファイル1つにまとめたZIPとして出力します。
• 🔖 ブックマークレットとPWA共有ターゲット（AndroidのXアプリから共有）
• 🔊 音声読み上げ — ブラウザーの音声合成機能で読み上げます。
• 📱 iPhone／iPadショートカット — Xアプリから投稿をXtracticleに直接共有できます（public/shortcuts/）。
• 🤖 MCP サーバー + Markdown API — AI アシスタントがXの投稿をMarkdownとして読み取れます（/mcp、/api/markdown/:id）。
• 📜 履歴、🌙 ダークモード、🌍 English, Español, Português, 日本語, 简体中文, العربية, Türkçe（アラビア語は右から左に記述します）
• 📈 分析イベント — extract、download（形式）、copy、share、listen、batch_extract、エラーをGA4で記録します。

はじめに

git clone https://github.com/ahmetdeveci3112-crypto/Xtracticle.git
cd Xtracticle
npm install
npm run dev

開発サーバーは http://localhost:5173 で動作します。/api/* は Worker と同じハンドラー（src/shared/api.ts）によって処理され、すべてのランディングページはその場でレンダリングされます。wrangler は不要です。

スクリプト	説明
npm run dev	API を含む Vite 開発サーバー
npm run build	本番ビルド → dist/（すべてのランディングページ、404、サイトマップ）
npm run preview:worker	実際の Worker をローカルでビルドして wrangler dev で実行します（SSR ステータスページ、404、_headers）
npm run lint	アプリと Worker の型をチェックします

デプロイ

Cloudflare Workers + Static Assets で、main へのプッシュ時に自動デプロイされます（ビルド：npm run build、デプロイ：npx wrangler deploy）。環境変数は不要です。

wrangler.json:

• run_worker_first — /api/*、/mcp、/video/*、/*/status/* のみ Worker に送られ、それ以外はすべて CDN から直接配信されます
• not_found_handling: "404-page" — 不明な URL は実際の 404 を返します（ソフト 404 にはなりません）
• public/_headers — セキュリティヘッダー、Link: </llms.txt>、iOS Shortcut 用のダウンロードヘッダー

アーキテクチャ

Browser ──► Cloudflare
             ├─ Static assets (dist/)          /, /x-article-to-pdf, /tr/, … , 404.html, sitemap.xml
             └─ Worker (src/worker.ts)
                 ├─ /api/thread/:id, /api/tweet/:id ──► src/shared/api.ts ──► FxTwitter API
                 │                                        (edge cache, 5 min)
                 └─ /{user}/status/{id} ──► app shell + per-post OG tags + preloaded JSON (noindex)

src/
├── App.tsx              UI: extraction, exports, batch mode, deep links
├── i18n.ts              UI strings (en, tr, es, pt, ja, zh)
├── lib/export.ts        PDF (jsPDF + html2canvas-pro), EPUB, ZIP (fflate), Obsidian
├── lib/url.ts           Input + path parsing
├── lib/analytics.ts     GA4 event helper
├── shared/fx.ts         FxTwitter client (v2 thread endpoint + v1 fallback), shared by Worker & dev server
├── shared/api.ts        JSON API handler with edge caching
├── shared/convert.ts    Posts / threads / Draft.js articles → Markdown + text + metadata (app + Worker)
├── shared/markdown.ts   GET /api/markdown/:id
├── shared/mcp.ts        Remote MCP server (POST /mcp)
├── shared/text.ts       Title extraction
└── worker.ts            Cloudflare Worker (API + status-page SSR)
site/
├── blocks.ts            Types + localized shared blocks (shortcuts, privacy)
├── pages.ts             English pages (one per search intent) + page registry
├── pages-{es,pt,ja,zh,ar,tr}.ts  The same pages, localized (linked by `group`)
├── curated.ts           Weekly “Best X Articles” pages from site/curated/*.json
├── guides.ts            /guides — informational guides
├── mcp-page.ts          /mcp-server — MCP setup docs
├── render.ts            Head/meta/JSON-LD/content/footer rendering
└── plugin.ts            Vite plugin: emits every page, 404.html and sitemap.xml

重いエクスポートライブラリは動的にインポートされるため、初期ページでは React とアプリのみが読み込まれます。

SEO と AI による発見可能性

レイヤー	実装
インテントページ	/x-article-to-pdf、/x-article-to-markdown、/x-thread-to-pdf、/x-article-to-epub、/save-x-articles-to-obsidian、/thread-reader-app-alternative — それぞれに独自の、表示される HTML コンテンツと FAQ があります
言語	すべてのページを 7 言語に対応（/、/es/…、/pt/…、/ja/…、/zh/…、/ar/…、/tr/…）し、UI も 7 言語に対応しています。初回訪問時に言語バナーを表示し、選択した言語を記憶してリダイレクトします（クローラーには適用されません）
クロール可能なコンテンツ	コンテンツは React ルートの外側にある静的 HTML です。インデックス登録に JS は不要です
構造化データ	WebApplication、FAQPage（表示される FAQ と一致）、BreadcrumbList
i18n	各翻訳グループに相互の hreflang と x-default を設定
共有ページ	/{user}/status/{id} には投稿固有の OG/Twitter タグが設定されます。noindex, follow
サイトマップ / 404	ビルド時に生成。不明な URL には実際の 404 ステータスを返します
AI	/llms.txt、/llms-full.txt、robots.txt で AI クローラーを許可

API

GET /api/thread/:id  → { tweets: Tweet[], count, isThread }   # self-thread containing :id
GET /api/tweet/:id   → Tweet
GET /api/markdown/:id → text/markdown  # ?format=markdown|text&thread=0|1&front_matter=0|1
POST /mcp            → MCP (Streamable HTTP, stateless), tool read_x_post

Tweet は FxTwitter のステータスオブジェクト（text、author、media、quote、article、…）に対応しています。レスポンスはエッジで 5 分間キャッシュされます。ご利用は節度をもってお願いします。

毎週の「Best X Articles」

/best-x-articles は、site/curated/*.json をもとに手作業で確認して選んだ週次セレクションです（タイトル、著者、独自の言葉による 1 文の要約。記事本文は含めません）。

npm run curate -- 2026-W41 https://x.com/user/status/123 https://x.com/other/status/456
# → site/curated/2026-w41.json with title/author/lang filled in; write "intro", "topic" and "summary"
npm run build   # issues with an empty summary are skipped automatically

最新号は /best-x-articles に表示されます（次の号が公開されるまでは、その /best-x-articles/<week> ページの canonical はハブを指します）。過去の号は /best-x-articles/<week> に残ります。

コントリビュート

1. リポジトリをフォークします
2. フィーチャーブランチを作成します（git checkout -b feature/amazing-feature）
3. 変更をコミットします
4. プルリクエストを作成します

注意事項:

• ランディングページのテキストは site/pages.ts にあります。npm run build を実行すると、生成された HTML を確認できます
• src/shared/* では DOM 専用または Node 専用の API を使わないでください。Worker と開発サーバーの両方で実行されます
• Worker 専用の動作（SSR、404、ヘッダー）は npm run preview:worker でテストしてください

ライセンス

MIT