Modifications for Frames

フレームの細かい部分の修正をしてみよう

1. フレームタイトルの修正

デバッガーの画面

デバッガーの Preview に表示されている（主にフレームが折りたたまれている時に表示される）タイトルを変更する場合、/app/page.tsx の title の値を任意の文字列に書き換えます。

/app/page.tsx

import { fetchMetadata } from "frames.js/next";
import { Metadata } from "next";

export async function generateMetadata(): Promise<Metadata> {
  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 <div>GM user data example.</div>;
}

タイトル修正の一例

/app/page.tsx

import { fetchMetadata } from "frames.js/next";
import { Metadata } from "next";

export async function generateMetadata(): Promise<Metadata> {
  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 <div>GM user data example.</div>;
}

2. ブラウザアクセス時のテキストの修正

ブラウザアクセス時の画面

タイムライン上にあるフレームをタップするとブラウザが起動してページが表示される場合があると思いますが、その際にブラウザ上に表示される文字列がソースコードの以下の部分となっており、任意の内容に書き換えることができます。

/app/page.tsx

import { fetchMetadata } from "frames.js/next";
import { Metadata } from "next";

export async function generateMetadata(): Promise<Metadata> {
  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 <div>GM user data example.</div>;
}

コンテンツ修正の一例

/app/page.tsx

import { fetchMetadata } from "frames.js/next";
import { Metadata } from "next";

export async function generateMetadata(): Promise<Metadata> {
  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 関数を用いてより見やすく管理しやすいコードに リファクタリング することが可能です。

/app/page.tsx

import { fetchMetadata } from "frames.js/next";
import { Metadata } from "next";

export async function generateMetadata(): Promise<Metadata> {
  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 <div>GM user data example.</div>;
}

リファクタリング後

/app/page.tsx

import { fetchMetadata } from "frames.js/next";
import { Metadata } from "next";
import { appURL } from "app/utils"

export async function generateMetadata(): Promise<Metadata> {
  return {
    title: "Frames Next.js Example",
    other: {
      ...(await fetchMetadata(
        new URL("/frames", appURL())
      )),
    },
  };
}

export default async function Home() {
  return <div>GM user data example.</div>;
}

リファクタリングとは

ソフトウェア開発において、プログラムの動作を保ったままソースコードを改善する作業です。
プログラムの内部構造をブラッシュアップすることで、コードの可読性やメンテナンス性を向上させ、将来的な変更を容易にします。

リファクタリングの具体例としては、次のようなものがあります。

• 冗長なコードの削除
• 変数名や関数名の適切化
• コードの再構成
• 似た処理が複数カ所に実装されたソースコードを関数化やクラス化して1つにまとめる

リファクタリングのメリットとしては、次のようなものがあります。

• コードの複雑性が下がる
• コードの再利用性が上がる
• バグが減少する
• ソースコードが整理されているためバグの修正やトラブルでも迅速に対応できる