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","label",[99],"permalink","https://www.val.town/x/tsuchi_ya/X-posts01/code/main.tsx","extension","actionData","errors"]