# Astro (/ja/quickstarts/astro)
Related: [Node.js](/ja/quickstarts/nodejs.md), [Next.js](/ja/quickstarts/nextjs.md), [Express](/ja/quickstarts/express.md), [NestJS](/ja/quickstarts/nestjs.md), [Fastify](/ja/quickstarts/fastify.md), [Hono](/ja/quickstarts/hono.md)
## 前提条件 [#前提条件]
* SSR が有効化された Astro プロジェクト (`output: "server"` または `"hybrid"`)
* Firecrawl APIキー — [無料で取得できます](https://www.firecrawl.dev/app/api-keys)
## SDKをインストール [#sdkをインストール]
```bash
npm install firecrawl
```
`.env` に API key を追加します:
```bash
FIRECRAWL_API_KEY=fc-YOUR-API-KEY
```
## Webを検索する [#webを検索する]
`src/pages/api/search.ts` を作成します:
```typescript
import type { APIRoute } from "astro";
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: import.meta.env.FIRECRAWL_API_KEY,
});
export const POST: APIRoute = async ({ request }) => {
const { query } = await request.json();
const results = await firecrawl.search(query, { limit: 5 });
return new Response(JSON.stringify(results), {
headers: { "Content-Type": "application/json" },
});
};
```
または、サーバーサイドでレンダリングされるページ (`src/pages/search.astro`) で、リクエスト時に検索します。
```astro
---
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: import.meta.env.FIRECRAWL_API_KEY,
});
const query = Astro.url.searchParams.get("q");
let results = [];
if (query) {
const searchData = await firecrawl.search(query, { limit: 5 });
results = searchData.web || [];
}
---
検索結果
{results.length > 0 ? (
) : (
ウェブを検索するには ?q= を指定してください
)}
```
## ページをスクレイピングする [#ページをスクレイピングする]
`src/pages/api/scrape.ts` を作成します:
```typescript
import type { APIRoute } from "astro";
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: import.meta.env.FIRECRAWL_API_KEY,
});
export const POST: APIRoute = async ({ request }) => {
const { url } = await request.json();
const result = await firecrawl.scrape(url);
return new Response(JSON.stringify(result), {
headers: { "Content-Type": "application/json" },
});
};
```
または、サーバーサイドでレンダリングされるページでリクエスト時にスクレイピングします (`src/pages/scrape.astro`) :
```astro
---
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: import.meta.env.FIRECRAWL_API_KEY,
});
const target = Astro.url.searchParams.get("url");
let markdown = null;
if (target) {
const result = await firecrawl.scrape(target);
markdown = result.markdown;
}
---
スクレイピングされたコンテンツ
{markdown ? {markdown} : ページをスクレイピングするには ?url= を渡してください
}
```
## ページとInteractする [#ページとinteractする]
`src/pages/api/interact.ts` を作成します:
```typescript
import type { APIRoute } from "astro";
import { Firecrawl } from "firecrawl";
const firecrawl = new Firecrawl({
apiKey: import.meta.env.FIRECRAWL_API_KEY,
});
export const POST: APIRoute = async () => {
const result = await firecrawl.scrape("https://www.amazon.com", {
formats: ["markdown"],
});
const scrapeId = result.metadata?.scrapeId;
await firecrawl.interact(scrapeId, {
prompt: "Search for iPhone 16 Pro Max",
});
const response = await firecrawl.interact(scrapeId, {
prompt: "Click on the first result and tell me the price",
});
await firecrawl.stopInteraction(scrapeId);
return new Response(JSON.stringify({ output: response.output }), {
headers: { "Content-Type": "application/json" },
});
};
```
## 次のステップ [#次のステップ]
フォーマット、アクション、プロキシなど、スクレイピングのオプションをすべて掲載
Webを検索し、ページ全体のコンテンツを取得
クリック、フォーム入力、動的コンテンツを抽出
クロール、map、バッチスクレイピングなどを含むSDKの完全なリファレンス