<p>chatGPTに代表される生成AIがさまざまな分野で活用されていますが、学習支援アプリケーションシリーズである<a href='https://nex-tudy.com/' rel='noopener noreferer'>NeXtudy</a>を開発する弊社において、chatGPTを活用した事例を報告します。</p>
<h2>
一問一答アプリQuizでの活用例
</h2>

<p>一問一答アプリ<a href='https://nex-tudy.com/apps/quiz/' rel='noopener noreferrer'>Quiz</a>は、4択式で暗記の確認が行えるアプリケーションです。現在、高校日本史に対応しています。</p>

<p>Quiz中では、問題文に対して4個の選択肢が与えられます。うち1個のみが正解で、予め登録された5個の誤答選択肢の中からランダムに3個が選ばれて、選択肢として提示される仕組みです。</p>

<p>
   弊社には、日本史を履修した者がおらず、教科書等を活用しながら問題文と正解選択肢の組み合わせを作成することはできますが、誤答選択肢を挙げられるほど知識があるわけではないので、その誤答選択肢の候補の列挙に、chatGPTを用いることとしました。
  </p>

  <h2>
  プロンプトの例
  </h2>

  <p>予め、問題文と正解選択肢を用意する必要があります。弊社では次のようなプロンプトを使用しました。</p>

  <syntax filename='response' language='text'>
  日本史に関する次の問題と正答の組がある。この問題の誤答選択肢を５個作成せよ。正解が史実上の人物・事件・組織、地名、年号ある場合、史実に基づいて近しい時代・地域のそれらから挙げること。また、誤答選択肢のみ、,区切りで列挙せよ。

  侍所の長官を何というか	所司
  </syntax>

    <syntax filename='prompt' language='text'>
  管領,奉行,大将,長官,主計
  </syntax>

  <p>将来的には、誤答選択肢や問題についてはその科目の知識に明るい担当者による改訂を施す予定ですが、社内人材の知識の限界を補完する目的でも、chatGPTは活用できます。</p>

  <p>
今回はアプリケーションでの活用事例でしたが、たとえば特に文系科目であれば小テストの作成の効率化などに活用できるのではないかと考えます。
</p>

学習支援アプリケーションにおける生成AIの活用事例①

<p>
ログイン画面や会員登録において、パスワードを入力する場面がありますが、その際に入力したパスワードを確認する機能のついたものがあります。それをReactのcomponentとして作成しましょう。
</p>

<h2>
表示・非表示切り替え  
</h2>
<p>
 HTMLのinputは、type属性でpasswordを指定すると、入力された内容を非表示とします。
</p>
<syntax filename="index.html" language="html">
&lt;input type="password"/&gt;
 </syntax>
このtype属性を、useStateによって、passwordとtextとで相互に切り替えることで、パスワードの表示・非表示機能を実装します。

<h2>
実装
</h2>

<p>
  styleはTailwindCSSによってあてるものとします。また、componentのpropsは、inputエレメントと同様のものが渡せるようにしておきます。
  </p>

<syntax filename='src/components/PasswordInput/index.tsx' language='typescript'>
import { useState } from "react" ;

type Props = React.InputHTMLAttributes&lt;HTMLInputElement&gt; ;

export const PasswordInput:React.FC&lt;Props&gt; = (props) => {
  const [showPW,setShowPW] = useState&lt;boolean&gt;(false) //true時はパスワードを表示する.

  return (
    &lt;div
      className="flex justyfy-between gap-2"     
    &gt;
      &lt;input
        {...props}
        type={showPW ? "text" : "password"}
     /&gt;

     &lt;button
       onClick={()=>{setShowPW(!showPW)}}
     &gt;
     &lt;&gt;{showPW ? "非表示" : "表示"}&lt;/&gt;
     &lt;/button&gt;

    &lt;/div&gt;
  )
}
  </syntax>

  <p>
  これで、パスワードの表示・非表示機能を備えた入力フォームを実装できます。実際には表示・非表示ボタンを、iconにしたり、装飾を施したりすることになります。
</p>

<h2>使用例</h2>
<p>ログインフォームで使用する場合、たとえば次のように使用します。</p>

<syntax filename="src/components/LoginForm/index.tsx" language="typescript">
import { Controller, useForm } from "react-hook-form";
import { PasswordInput } from "@/src/components/PasswordInputForm";

type FormInput = {
  email: string;
  password: string;
};

export const LoginForm = () =&gt; {
  const form = useForm&lt;FormInput&gt;();

  const onSubmit = form.handleSubmit(async (data) =&gt; {
    const apiRes = await fetch("https://example.com/api/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });
  });

  return (
    &lt;form onSubmit={onSubmit}&gt;
      &lt;Controller
        name="email"
        control={form.control}
        render={({ field }) =&gt; (
          &lt;&gt;
            &lt;label&gt;Email&lt;/label&gt;
            &lt;input type="email" {...field} placeholder="user@example.com" /&gt;
          &lt;/&gt;
        )}
      /&gt;

      &lt;Controller
        name="password"
        control={form.control}
        render={({ field }) =&gt; (
          &lt;&gt;
            &lt;label&gt;Password&lt;/label&gt;
            &lt;PasswordInput placeholder="英数字8文字以上32文字未満" {...field} /&gt;
          &lt;/&gt;
        )}
      /&gt;
    &lt;/form&gt;
  );
};
  </syntax>


【React】パスワード表示・非表示機能を有するInputComponentを作る

<p> 以前のウェブサイトもNext.js（バックエンドとしてWordPress）を使用していましたが、この度、株式会社登紀わの自社ホームページをリニューアルするにあたって、デザイン面・内容面だけではなく、ブログ機能やお問い合わせ機能についても見直しました。その取り組みを順次ご紹介します。
</p>
<p>
  今回は、弊社の「おしらせ」ページをContentfulで実現したその方法をご紹介します。
</p>

<h2>
  Next.js採用の理由
</h2>

<p>
  TutorDirectなど、自社にて作成するウェブアプリケーションのフロントエンドのフレームワークとしてNext.js（React）を採用しており、その技術的な理解を深めるために、自社ページもNext.jsで作成することにしました。
</p>
<p>
    このウェブサイトも、Next.js（14.0.3）で作成されています。ルーティングにはpages routerを使用しており、以下のNext.jsに関する説明でも同様とします。
</p>

<h2>
  Contentful採用の理由
</h2>

<p>
リプレイス前のホームページでも、ニュース配信用にブログ機能を持たせており、そのブログ記事を管理するHeadlessCMSとしてWordPressを採用していました。また、ContactForm7を使用しており、お問い合わせフォームのバックエンドとしても使用していました。しかし、WordPressはHeadlessCMSとして用いるには機能が多いため、今回はブログ機能とお問い合せ機能を分割し、それらをわかりやすく管理しようと思い、HeadlessCMS、なかでもドキュメントや参考サイトが充実しているContentfulを採用しました。なお、Contentfulは、TutorDirectのブログ機能でも採用しています。
</p>

<h2>
Contentfulでおしらせ（ブログ）を配信する
</h2>

<h3>
  必要なライブラリをインストール
</h3>

<p>
今回、ContentfulのContent Modelの型定義には<strong>contentful-typescript-codegen</strong>を使用します。また、Contentfulの公式のライブラリもあわせてインストールしましょう。
</p>

<syntax filename='node' language='plaintext'>
npm install contentful contentful-management contentful-typescript-codegen @contentful/rich-text-types
    </syntax>

 <h3>
  Content Management Tokenを発行
  </h3>

  <p>続いて型定義のためには、<strong>Content Management Token</strong>の発行が必要です。<strong>これは、Delivery API Access Tokenとは異なる</strong>ので注意が必要です。</p>

    <p>Contentfulの管理画面にログインし、左上の「Settings」をクリックし、<strong>CMA tokens</strong>メニューへ移動します。
    </p>

    <p>
        <strong>Create personal access token</strong>ボタンを押下してtokenに名前をつけます。有効期限が求められますので、適宜設定してください。これを確認したら控えておいてください。
    </p>

    <p>
        控えたアクセストークンは、.env.localに記述しておきます。.env.localに書かれた環境変数を利用するために、dotenvもインストールしておきます。
    </p>

    <syntax filename=".env.local" language="plaintext">
CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN=xxxx
    </syntax>
    <syntax filename="node" language="plaintext">
npm install dotenv
    </syntax>

<h3>
    getContentfulEnvironment.jsを作成
</h3>

<p>
    projectのrootに<strong>getContentfulEnvironment.js</strong>を作成し、以下のように記述します。
</p>

<syntax filename='getContentfulEnvironment.js' language='javascript'>
    require("dotenv").config({ path: `.env.local` });

    const contentfulManagement = require("contentful-management")

    module.exports = function () {
        const contentfulClient = contentfulManagement.createClient({
            accessToken: process.env.CONTENTFUL_MANAGEMENT_API_ACCESS_TOKEN,
        })

        return contentfulClient
            .getSpace(process.env.CONTENTFUL_SPACE_ID)
            .then(space => space.getEnvironment(process.env.CONTENTFUL_ENVIRONMENT))
    }
    </syntax>

<p>
    package.jsonに、次のようなnpm scriptを追加します。
</p>

<syntax filename="package.json" language="json">
{
    "scripts": {
        "contentful-typescript-codegen": "contentful-typescript-codegen --output @types/generated/contentful.d.ts"
    }
}
    </syntax>

こうすることで、型定義が@types/generated/contentful.d.tsに生成されるようになりますので、実行してみましょう。

<syntax filename="node" language="plaintext">
npm run contentful-typescript-codegen
    </syntax>

<h2>生成した型定義ファイルを確認</h2>

<p>
    次のようなファイルが生成されているはずです。内容はご自身の作成したContent Modelのfieldsに合わせて変わります。
</p>

<syntax filename="@types/generated/contentful.d.ts" language="typescript">
import { Asset, Entry } from "contentful";
import { Document } from "@contentful/rich-text-types";

export interface IPostFields {
    /** Title */
    title: string;

    /** Body */
    body: Document;

    /** Slug */
    slug: string;

    /** Excerpt */
    excerpt: string;
}

/** Blog post */

export interface IPost extends Entry&lt;IPostFields&gt; {
    sys: {
        id: string;
        type: string;
        createdAt: string;
        updatedAt: string;
        locale: string;
        contentType: {
          sys: {
            id: "post";
            linkType: "ContentType";
            type: "Link";
          };
        };
      };
    }
    </syntax>

<h2>
    SSGでブログ記事を配信する
</h2>

<p>
    Next.jsの有用な機能の一つであるSSG（Static Site Generation）を用いて、ブログ記事を配信します。SSGとは、build時にContentfulからデータを取得し、静的なHTMLを生成する機能です。この機能を用いることで、ブログ記事の配信に必要なAPIリクエストを減らすことができます。
</p>

<h3>
    contentful clientの作成
</h3>

<p>
    contentfulから記事を取得するために、contentful clientを作成します。筆者は、次のように作成しました。
</p>
<syntax
language="plaintext"
filename=".env.local">
CONTENTFUL_SPACE_ID = yyy
CONTENTFUL_ACCESS_KEY = zzz
    </syntax>
<syntax
language="typescript"
filename="utls/contentful.ts">
const client = createClient({
    space: process.env.CONTENTFUL_SPACE_ID,
    accessToken: process.env.CONTENTFUL_ACCESS_KEY
  })
    </syntax>
<p>
    以後、clientとして他の.tsxファイルから使用します。
</p>
<h3>
    post一覧ページの作成
</h3>

<p>
    まず、post一覧ページを作成します。pages/posts/index.tsxを作成しましょう。

<h4>
    getStaticPropsを実装
</h4>

<p>
    getStaticPropsを実装し、Contentfulからpostのデータを取得します。このとき、取得するデータの順番を指定することもできます。今回は、作成日時の降順で取得するようにしています。
</p>
<syntax language="typescript" filename="pages/posts/index.tsx">
export const getStaticProps: GetStaticProps = async () => {
    const contentfulClient = getContentfulEnvironment()
    const entries = await client.getEntries&lt;IPostFields&gt;({
        content_type: "post",
        order: "-sys.createdAt",
    })
    const posts = entries.items.map((entry) => entry.fields)
    return {
        props: {
            posts,
        },
    }
}
    </syntax>
</p>

<h4>
    PostListPageを実装
</h4>

<p>
    続いて、受けとったpostデータのstaticPropsをもとに、post一覧ページを作成します。pages/posts/index.tsxを以下のように編集します。
</p>

<syntax language="typescript" filename="pages/posts/index.tsx">
type Props = InferGetStaticPropsType&lt;typeof getStaticProps&gt;

export PostListPage:NextPage&lt;Props&gt; = ({posts}) => {
    return (
        &lt;div&gt;
            &lt;h1&gt;おしらせ&lt;/h1&gt;
            &lt;ul&gt;
                {posts.map((post) => (
                    &lt;li key={post.sys.id}&gt;
                        &lt;Link href={`/posts/${post.slug}`}&gt;
                            &lt;a&gt;{post.title}&lt;/a&gt;
                        &lt;/Link&gt;
                    &lt;/li&gt;
                ))}
            &lt;/ul&gt;
        &lt;/div&gt;
    )
}
    </syntax>

<h3>
    post個別ページの作成
</h3>

<p>
    今回は、postの一意なslug fieldをもとに、post個別ページを作成します。pages/posts/[slug].tsxを作成しましょう。
</p>

<h4>
    getStaticPathsを実装
</h4>

<p>
    slugをもとに、postの個別ページを作成するためには、getStaticPathsを実装する必要があります
</p>

<syntax
language="typescript"
filename="pages/posts/[slug].tsx">

export const getStaticPaths:GetStaticPaths = async () => {
    const res = await client.getEntries&lt;IPostFields&gt;({
        content_type: "post",
    })

    const paths = res.items.map(
        item => {
            return { params: { slug: item.fields.slug } }
        }
    )

    return {
        paths,
        fallback:false
    }
    </syntax>
<h4>
    getStaticPropsを実装
</h4>

続いて、一覧取得したslugをもとに、対応する個別ページのデータを取得ための関数であるgetStaticPropsを実装します。

<syntax 
language="typescript"
filename="pages/posts/[slug].tsx">
export const getStaticProps:GetStaticProps = async ({params}) => {
    const { items } = await client.getEntries&lt;IPostFields&gt;(
        {
            content_type: "post",
            "fields.slug": params.slug,
        }
    )

    return {
        props:{
            post: items[0].fields
        }
    }
    </syntax>

<h4>
    個別ページの表示を実装
</h4>

<syntax
language="typescript"
filename="pages/posts/[slug].tsx">
type Props = InferGetStaticPropsType&lt;typeof getStaticProps&gt;

const PostPage:NextPage&lt;Props&gt; = ({post}) => {
    return (
        &lt;div&gt;
            &lt;h1&gt;{post.title}&lt;/h1&gt;
            &lt;div&gt;
                {documentToReactComponents(post.body)}
            &lt;/div&gt;
        &lt;/div&gt;
    )
}
    </syntax>
これで、post一覧ページと個別ページの作成は完了です。

<h2>
    まとめ
</h2>

<p>
    以上のように、Next.jsとContentfulを用いてブログ機能を実装する方法を紹介しました。
</p>

<p>
    弊社の「おしらせ」ページおよび「技術発信」ページも、同様の方法で実装しています。みなさまも、ぜひお試しください。
</p>

学習支援アプリケーションにおける生成AIの活用事例①

一問一答アプリQuizでの活用例

プロンプトの例

最新の技術記事