[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_152":153,"_154":155},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_115":-5,"_20":116,"_22":117,"_118":119,"_120":121,"_25":122,"_24":-5,"_123":-5,"_124":-5,"_125":53,"_126":127,"_128":44,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","tsuchi_ya","name","X-posts01","branchName","main","version","path","","project",{"_33":61,"_13":14,"_45":62,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":44,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":94,"_95":96,"_97":98,"_99":53},"tree",[56],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":55},"id","ef4a66bc-37ab-11f0-bc7f-9e149126039e","main.tsx","fileId","45d1f17a-37a3-11f0-ae15-9e149126039e","parentId","branchId","45cff0f0-37a3-11f0-ae15-9e149126039e","branchVersion",6,"latest",true,"createdAt",["D",1747987204195],5,"fileType","http","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\n/**\n * 型定義\n */\ninterface Tweet {\n tweet_created_at: string;\n id_str: string;\n full_text: string;\n source: string;\n truncated: boolean;\n user: {\n id_str: string;\n name: string;\n screen_name: string;\n profile_image_url_https: string;\n };\n in_reply_to_status_id?: number;\n in_reply_to_status_id_str?: string;\n in_reply_to_user_id?: number;\n in_reply_to_user_id_str?: string;\n in_reply_to_screen_name?: string;\n quoted_status_id_str?: string;\n is_quote_status: boolean;\n quoted_status?: Tweet;\n retweeted_status?: Tweet;\n quote_count: number;\n reply_count: number;\n retweet_count: number;\n favorite_count: number;\n views_count?: number;\n bookmark_count: number;\n lang: string;\n}\n\ninterface SocialDataTweetsResponse {\n next_cursor?: string;\n tweets: Tweet[];\n}\n\ninterface ErrorResponse {\n status: \"error\";\n message: string;\n}\n\n// サーバーからの応答データ構造\ninterface FetchTweetsResponse {\n tweets: Tweet[];\n logs: string[];\n}\n\n/**\n * The main App component is rendered on the client.\n * No server-side-specific code should be included in the App.\n * Use fetch to communicate with the backend server portion.\n */\nfunction App() {\n const [username, setUsername] = useState(\"\");\n const [count, setCount] = useState(10);\n const [apiKey, setApiKey] = useState(\"\");\n const [tweets, setTweets] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [logs, setLogs] = useState([]); // ログを格納する新しいstate\n\n const handleSubmit = async (e: React.FormEvent) => {\n e.preventDefault();\n setLoading(true);\n setError(null);\n setTweets([]); // 以前のツイートをクリア\n setLogs([]); // ログもクリア\n\n if (!username || !count || !apiKey) {\n setError(\"すべて入力してください。\");\n setLoading(false);\n return;\n }\n\n try {\n const response = await fetch(\"/api/fetch-tweets\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ username, count, apiKey }),\n });\n\n if (!response.ok) {\n const errorData = await response.json();\n throw new Error(errorData.message || \"投稿の取得に失敗しました。\");\n }\n\n const data: FetchTweetsResponse = await response.json();\n setTweets(data.tweets);\n setLogs(data.logs); // ログをセット\n } catch (err: any) {\n setError(err.message);\n setLogs((prev) => [...prev, `クライアントエラー: ${err.message}`]); // クライアントエラーもログに追加\n } finally {\n setLoading(false);\n }\n };\n\n const getTweetLink = (tweet: Tweet) => {\n return `https://x.com/${tweet.user.screen_name}/status/${tweet.id_str}`;\n };\n\n return (\n

X 投稿収集アプリ

\n アカウントID (@は含めない):\n setUsername(e.target.value.trim())}\n placeholder=\"elonmusk\"\n required\n />\n

\n 取得件数 (最大500):\n setCount(Math.min(500, Math.max(1, Number(e.target.value))))}\n min=\"1\"\n max=\"500\"\n required\n />\n

\n SocialData APIキー:\n setApiKey(e.target.value.trim())}\n placeholder=\"YOUR_SOCIALDATA_API_KEY\"\n required\n />\n

\n APIキーはブラウザに保存されず、一時的にのみ使用されます。本番環境ではVal Townの\n 環境変数\n を使用することを推奨します。\n

\n \n

\n\n {error &&

{error}

}\n\n

取得結果

\n {tweets.length === 0 && !loading && !error && logs.length === 0 && (\n

アカウントIDと取得件数を入力して「投稿を取得」ボタンを押してください。

\n )}\n {tweets.map((tweet) => (\n

\n \n

\n {tweet.user.name}\n @{tweet.user.screen_name}\n

{tweet.full_text}

\n 💬 {tweet.reply_count}\n 🔁 {tweet.retweet_count}\n ❤️ {tweet.favorite_count}\n {tweet.views_count && 👁️ {tweet.views_count}}\n

\n \n View on X\n \n

\n Posted: {new Date(tweet.tweet_created_at).toLocaleString()} via {tweet.source.replace(/<[^>]*>?/gm, \"\")}\n

\n ))}\n

\n\n {logs.length > 0 && (\n

デバッグログ

\n            {logs.map((log, index) => (\n              {log}
\n            ))}\n

\n )}\n\n \n

\n );\n}\n\n/**\n * Client-only code\n * Any code that makes use of document or window should be scoped to the `client()` function.\n * This val should not cause errors when imported as a module in a browser.\n */\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") {\n client();\n}\n\n/**\n * Server-only code\n * Any code that is meant to run on the server should be included in the server function.\n * This can include endpoints that the client side component can send fetch requests to.\n */\nexport default async function server(request: Request): Promise {\n const url = new URL(request.url);\n\n if (url.pathname === \"/api/fetch-tweets\" && request.method === \"POST\") {\n const serverLogs: string[] = []; // サーバーサイドのログを格納\n serverLogs.push(`リクエスト受信: ${new Date().toISOString()}`);\n\n try {\n const { username, count, apiKey } = await request.json();\n serverLogs.push(`ユーザー名: ${username}, 取得件数: ${count}`);\n\n if (!username || !count || !apiKey) {\n serverLogs.push(\"必要なパラメータが不足しています。\");\n return new Response(JSON.stringify({ message: \"Missing required parameters.\", logs: serverLogs }), {\n status: 422,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n const tweets: Tweet[] = [];\n let lastTweetId: string | undefined = undefined; // max_idの代わりに使用\n let fetchedCount = 0;\n const tweetsPerPage = 20; // SocialData APIは通常1ページあたり約20件のツイートを返す\n\n // 指定された件数に達するまでループ\n let page = 0;\n while (fetchedCount < count) {\n page++;\n serverLogs.push(`--- ページ ${page} の取得を開始 (現在の取得件数: ${fetchedCount}) ---`);\n\n let query = `from:${username}`;\n if (lastTweetId) {\n query += ` max_id:${lastTweetId}`;\n serverLogs.push(`次回のmax_idとして ${lastTweetId} を使用します。`);\n }\n\n const apiUrl = `https://api.socialdata.tools/twitter/search?query=${encodeURIComponent(query)}`;\n serverLogs.push(`API URL: ${apiUrl}`);\n\n const apiResponse = await fetch(apiUrl, {\n method: \"GET\",\n headers: {\n \"Authorization\": `Bearer ${apiKey}`,\n \"Accept\": \"application/json\",\n },\n });\n\n const data: SocialDataTweetsResponse | ErrorResponse = await apiResponse.json();\n serverLogs.push(`API応答ステータス: ${apiResponse.status}`);\n\n if (!apiResponse.ok) {\n if (\"message\" in data) {\n serverLogs.push(`APIエラー応答: ${data.message}`);\n return new Response(JSON.stringify({ message: `API Error: ${data.message}`, logs: serverLogs }), {\n status: apiResponse.status,\n headers: { \"Content-Type\": \"application/json\" },\n });\n } else {\n serverLogs.push(`APIエラー応答: ${apiResponse.statusText}`);\n return new Response(JSON.stringify({ message: `API Error: ${apiResponse.statusText}`, logs: serverLogs }), {\n status: apiResponse.status,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n if (\"tweets\" in data && data.tweets.length > 0) {\n serverLogs.push(`APIから ${data.tweets.length} 件のツイートを取得しました。`);\n let currentBatchMinId: string | undefined = undefined;\n\n for (const tweet of data.tweets) {\n // 既に取得済みのツイートはスキップ（max_id検索では重複が発生する可能性があるため）\n if (tweets.some(existingTweet => existingTweet.id_str === tweet.id_str)) {\n serverLogs.push(`スキップ済みツイート: ${tweet.id_str} (既に存在)`);\n continue;\n }\n\n if (fetchedCount < count) {\n tweets.push(tweet);\n fetchedCount++;\n // 現在のバッチ内で最も小さいIDを追跡\n if (currentBatchMinId === undefined || BigInt(tweet.id_str) < BigInt(currentBatchMinId)) {\n currentBatchMinId = tweet.id_str;\n }\n } else {\n serverLogs.push(`目標件数 (${count}) に達しました。`);\n break; // 指定件数に達したらループを抜ける\n }\n }\n\n if (currentBatchMinId) {\n // 次回のリクエストのために、現在のバッチで最も小さいIDから1を引く\n lastTweetId = (BigInt(currentBatchMinId) - 1n).toString();\n serverLogs.push(`次回のmax_idを ${lastTweetId} に設定しました。`);\n } else {\n // このバッチで新しいツイートが追加されなかった場合 (全て重複など)\n serverLogs.push(\"このバッチで新しいツイートが追加されませんでした。\");\n break; // ループを終了\n }\n\n // 取得件数が目標に達しているか、またはAPIがそれ以上ツイートを返さない場合\n if (fetchedCount >= count) {\n serverLogs.push(`目標件数 (${count}) に到達したため、収集を終了します。`);\n break;\n }\n if (data.tweets.length < tweetsPerPage) {\n serverLogs.push(\n `取得したツイートが1ページあたり期待される数 (${tweetsPerPage}) より少ないです (${data.tweets.length}件)。これ以上取得できるツイートがない可能性があります。`,\n );\n break;\n }\n } else {\n serverLogs.push(\n \"APIからツイートが取得できませんでした（ユーザーのツイートがない、または最終ページに到達）。収集を終了します。\",\n );\n break;\n }\n }\n\n serverLogs.push(`収集完了。合計 ${tweets.length} 件のツイートを取得しました。`);\n return new Response(JSON.stringify({ tweets: tweets, logs: serverLogs }), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error: any) {\n serverLogs.push(`サーバーサイドで予期せぬエラーが発生しました: ${error.message}`);\n console.error(\"Server-side error:\", error);\n return new Response(JSON.stringify({ message: error.message || \"Internal Server Error\", logs: serverLogs }), {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n }\n\n return new Response(\n `\n \n \n \n X 投稿収集アプリ\n \n \n \n \n

\n \n \n \n \n `,\n {\n headers: {\n \"content-type\": \"text/html\",\n },\n },\n );\n}\n\nconst css = `\nbody {\n margin: 0;\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n background-color: #f0f2f5;\n color: #333;\n line-height: 1.6;\n padding: 20px;\n}\n\n.container {\n max-width: 800px;\n margin: 20px auto;\n background-color: #fff;\n padding: 30px;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n}\n\nh1 {\n text-align: center;\n color: #1a1a1a;\n margin-bottom: 30px;\n font-size: 2em;\n}\n\nh2 {\n color: #222;\n border-bottom: 2px solid #eee;\n padding-bottom: 10px;\n margin-top: 40px;\n margin-bottom: 20px;\n font-size: 1.5em;\n}\n\nform {\n display: flex;\n flex-direction: column;\n gap: 20px;\n margin-bottom: 30px;\n padding: 20px;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n background-color: #fdfdfd;\n}\n\n.form-group {\n display: flex;\n flex-direction: column;\n}\n\nlabel {\n margin-bottom: 8px;\n font-weight: bold;\n color: #555;\n}\n\ninput[type=\"text\"],\ninput[type=\"number\"],\ninput[type=\"password\"] {\n padding: 12px;\n border: 1px solid #ccc;\n border-radius: 6px;\n font-size: 1rem;\n width: 100%;\n box-sizing: border-box;\n transition: border-color 0.2s;\n}\n\ninput[type=\"text\"]:focus,\ninput[type=\"number\"]:focus,\ninput[type=\"password\"]:focus {\n border-color: #007bff;\n outline: none;\n}\n\n.note {\n font-size: 0.85em;\n color: #666;\n margin-top: 5px;\n}\n\nbutton {\n background-color: #007bff;\n color: white;\n padding: 12px 20px;\n border: none;\n border-radius: 6px;\n font-size: 1.1rem;\n cursor: pointer;\n transition: background-color 0.2s ease, transform 0.1s ease;\n align-self: flex-start;\n}\n\nbutton:hover {\n background-color: #0056b3;\n transform: translateY(-2px);\n}\n\nbutton:disabled {\n background-color: #cccccc;\n cursor: not-allowed;\n transform: none;\n}\n\n.error {\n color: #d9534f;\n background-color: #f2dede;\n border: 1px solid #ebccd1;\n padding: 10px;\n border-radius: 6px;\n margin-top: 20px;\n text-align: center;\n}\n\n.tweets-output {\n margin-top: 30px;\n}\n\n.tweet-card {\n background-color: #f9f9f9;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n padding: 20px;\n margin-bottom: 20px;\n box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);\n}\n\n.tweet-header {\n display: flex;\n align-items: center;\n margin-bottom: 10px;\n}\n\n.profile-img {\n width: 48px;\n height: 48px;\n border-radius: 50%;\n margin-right: 15px;\n object-fit: cover;\n}\n\n.user-info {\n display: flex;\n flex-direction: column;\n}\n\n.user-name {\n font-weight: bold;\n color: #1a1a1a;\n}\n\n.screen-name {\n color: #555;\n font-size: 0.9em;\n}\n\n.tweet-text {\n font-size: 1.1em;\n margin-bottom: 15px;\n white-space: pre-wrap; /* 複数行のテキスト表示 */\n word-break: break-word; /* 長い単語で改行 */\n}\n\n.tweet-stats {\n display: flex;\n gap: 20px;\n font-size: 0.9em;\n color: #777;\n margin-bottom: 15px;\n}\n\n.tweet-link {\n display: inline-block;\n color: #1da1f2;\n text-decoration: none;\n font-weight: bold;\n margin-bottom: 10px;\n}\n\n.tweet-link:hover {\n text-decoration: underline;\n}\n\n.tweet-meta {\n font-size: 0.8em;\n color: #999;\n}\n\n.logs-output {\n margin-top: 40px;\n background-color: #f0f0f0;\n border: 1px solid #ddd;\n border-radius: 8px;\n padding: 20px;\n font-family: 'Cascadia Code', 'Consolas', monospace;\n font-size: 0.85em;\n color: #444;\n max-height: 300px; /* ログエリアの最大高さ */\n overflow-y: auto; /* スクロール可能にする */\n}\n\n.logs-output pre {\n margin: 0;\n white-space: pre-wrap; /* 複数行のテキスト表示 */\n word-break: break-all; /* 長い単語で改行 */\n}\n\n.logs-output pre p {\n margin: 5px 0;\n line-height: 1.3;\n}\n\n\n.footer {\n margin-top: 40px;\n text-align: center;\n font-size: 0.9em;\n color: #777;\n}\n\n.footer a {\n color: #007bff;\n text-decoration: none;\n}\n\n.footer a:hover {\n text-decoration: underline;\n}\n`;","deleted",false,"label",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":59,"_18":60},["D",1747987204195],"children",[],[35],"45cf8174-37a3-11f0-ae15-9e149126039e",["D",1747983483888],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","fc0bd9ca-263d-48ce-84f0-30b4a2ea6082","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","fc71265b-929d-440a-aa31-727271a3da69","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_114":110},"org",{"_11":12,"_108":-5,"_109":110,"_70":71,"_111":112,"_113":53},"branch",{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycVRJUVhlbWlxQ1ZNUnJVcWpHQ1dWNGEwcU0ifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":61,"_13":14,"_45":148,"_63":-5,"_64":53,"_65":66,"_67":66,"_68":-5,"_69":-5,"_70":71,"_72":37,"_73":44,"_74":44,"_75":-5,"_76":77,"_78":79,"_80":-5,"_81":-5,"_82":-5,"_83":-5,"_84":85,"_86":85,"_87":88,"_89":88,"_90":88,"_91":85,"_92":85,"_93":149,"_95":150,"_97":151,"_99":53},[145],"files",[145],"counts",{"_135":77,"_136":137,"_138":77,"_31":139,"_140":141},[133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_18":134},[35],"pulls","branches",1,"forks",{"_142":77,"_144":77},"connections",{"_142":77,"_143":77},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":57,"_17":47,"_48":49,"_50":51,"_52":53,"_54":-5,"_58":146,"_18":147},[],[35],["D",1747983483888],{"_11":12,"_114":110},{"_11":12,"_108":-5,"_109":110,"_70":71,"_111":112,"_113":53},{"_17":42,"_13":16,"_33":40,"_100":61,"_101":-5,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":14,"_107":12},"ctx",{"_93":-5,"_130":185,"_186":187,"_188":189,"_190":53,"_191":53,"_192":53,"_193":44,"_194":-5,"_195":-7,"_196":-7,"_197":77,"_198":53,"_199":53,"_200":-5,"_201":53,"_202":53,"_203":53,"_204":-5},"ENV",{"_156":157,"_158":159,"_160":16,"_161":162,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]