> ## Documentation Index
> Fetch the complete documentation index at: https://basecamp.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Modifications for Frames
> フレームの細かい部分の修正をしてみよう
## 1. フレームタイトルの修正
デバッガーの **Preview** に表示されている（主にフレームが折りたたまれている時に表示される）タイトルを変更する場合、`/app/page.tsx` の `title` の値を任意の文字列に書き換えます。
```typescript /app/page.tsx {6} theme={null}
import { fetchMetadata } from "frames.js/next";
import { Metadata } from "next";
export async function generateMetadata(): Promise {
return {
title: "Frames Next.js Example",
other: {
...(await fetchMetadata(
new URL("/frames", process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000")
)),
},
};
}
export default async function Home() {
return GM user data example.
;
}
```
### タイトル修正の一例
```typescript /app/page.tsx {6} theme={null}
import { fetchMetadata } from "frames.js/next";
import { Metadata } from "next";
export async function generateMetadata(): Promise {
return {
title: "Multi Image Frame",
other: {
...(await fetchMetadata(
new URL("/frames", process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000")
)),
},
};
}
export default async function Home() {
return GM user data example.
;
}
```
## 2. ブラウザアクセス時のテキストの修正
タイムライン上にあるフレームをタップするとブラウザが起動してページが表示される場合があると思いますが、その際にブラウザ上に表示される文字列がソースコードの以下の部分となっており、任意の内容に書き換えることができます。
```typescript /app/page.tsx {16} theme={null}
import { fetchMetadata } from "frames.js/next";
import { Metadata } from "next";
export async function generateMetadata(): Promise {
return {
title: "Frames Next.js Example",
other: {
...(await fetchMetadata(
new URL("/frames", process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000")
)),
},
};
}
export default async function Home() {
return GM user data example.
;
}
```
### コンテンツ修正の一例
```typescript /app/page.tsx {16} theme={null}
import { fetchMetadata } from "frames.js/next";
import { Metadata } from "next";
export async function generateMetadata(): Promise {
return {
title: "Frames Next.js Example",
other: {
...(await fetchMetadata(
new URL("/frames", process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000")
)),
},
};
}
export default async function Home() {
return null; // nullは何も返さないため真っ白なページが表示される
}
```
## 3. その他の修正
`generateMetadata` 関数内にある `fetchMetadata` の `new URL` の部分ですが、フレームのプログラミングの際に使用した `appURL` 関数を用いてより見やすく管理しやすいコードに **リファクタリング** することが可能です。
```typescript /app/page.tsx {9} theme={null}
import { fetchMetadata } from "frames.js/next";
import { Metadata } from "next";
export async function generateMetadata(): Promise {
return {
title: "Frames Next.js Example",
other: {
...(await fetchMetadata(
new URL("/frames", process.env.VERCEL_URL ? `https://${process.env.VERCEL_URL}` : "http://localhost:3000")
)),
},
};
}
export default async function Home() {
return GM user data example.
;
}
```
### リファクタリング後
```typescript /app/page.tsx {3,10} theme={null}
import { fetchMetadata } from "frames.js/next";
import { Metadata } from "next";
import { appURL } from "app/utils"
export async function generateMetadata(): Promise {
return {
title: "Frames Next.js Example",
other: {
...(await fetchMetadata(
new URL("/frames", appURL())
)),
},
};
}
export default async function Home() {
return GM user data example.
;
}
```
> ### リファクタリングとは
>
> ソフトウェア開発において、プログラムの動作を保ったままソースコードを改善する作業です。
> プログラムの内部構造をブラッシュアップすることで、コードの可読性やメンテナンス性を向上させ、将来的な変更を容易にします。
>
> リファクタリングの具体例としては、次のようなものがあります。
>
> * 冗長なコードの削除
> * 変数名や関数名の適切化
> * コードの再構成
> * 似た処理が複数カ所に実装されたソースコードを関数化やクラス化して1つにまとめる
>
> リファクタリングのメリットとしては、次のようなものがあります。
>
> * コードの複雑性が下がる
> * コードの再利用性が上がる
> * バグが減少する
> * ソースコードが整理されているためバグの修正やトラブルでも迅速に対応できる