🤖

ChatGPTにスライドビューアアプリを作ってもらう

2022/12/04に公開

Next.js

はじめに

ChatGPTが話題になっていますね。なんと、コードも書いてくれるようです。

以前から、スライドビューアを作ってみたいと思っていたのですが、フロントエンド技術に暗く、どうしたらいいのかよくわかりません。そこで、ChatGPTに書いてもらうことにしました。

ちょっと手を入れただけで、以下の通りのWebアプリができました。すごいですね。

今回作ったコードは以下に置いてあります。

ChatGPTへの質問

PDFファイルを表示するスクリプトを、ReactとTypeScriptで書いてください。

と質問してみたところ、以下のように回答がありました。

以下は、ReactとTypeScriptでPDFファイルを表示するスクリプトの例です。このスクリプトは、PDFファイルを表示するために、react-pdfという外部ライブラリを使用します。
import React from 'react';
import { Document, Page } from 'react-pdf';

interface Props {
  file: string; // PDFファイルのURL
}

const MyPdfViewer: React.FC<Props> = ({ file }) => {
  const [numPages, setNumPages] = React.useState(0);
  const [pageNumber, setPageNumber] = React.useState(1);

  // PDFファイルのページ数を取得する
  const onDocumentLoadSuccess = ({ numPages }) => {
    setNumPages(numPages);
  };

  // ページ番号を変更する
  const changePage = offset => {
    setPageNumber(prevPageNumber => prevPageNumber + offset);
  };

  return (
    <div>
      <Document
        file={file}
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <div>
        Page {pageNumber} of {numPages}
      </div>
      <button onClick={() => changePage(-1)}>Previous</button>
      <button onClick={() => changePage(1)}>Next</button>
    </div>
  );
};

export default MyPdfViewer;
上記の例では、PDFファイルを表示するための<Document>コンポーネントと、PDFファイルの各ページを表示するための<Page>コンポーネントを使用しています。また、ページ番号を変更するためのボタンも表示されます。

さらに、react-pdfライブラリを使用するためには、まず次のコマンドを実行してライブラリをインストールする必要があります。
npm install react-pdf
このスクリプトを使用するためには、fileというプロパティにPDFファイルのURLを指定して、<MyPdfViewer>コンポーネントを呼び出す必要があります。例えば、次のように呼び出すことができます。
<MyPdfViewer file="https://example.com/my-pdf-file.pdf

やったこと

セットアップ

ChatGPTがReactのコードを書いてくれたので、それを使うためのNext.jsの雛形を作成しました。Next.jsに関する内容を質問に入れ忘れたので、自分でやります。

npx create-next-app@latest --ts slides

そして、ChatGPTからの指示にあった通り、react-pdfを依存モジュールとしてに追加しました。

npm install react-pdf

ビューアコンポーネント

まずは、ChatGPTが書いてくれたコードを、components/MyPdfViewer.tsxとしてそのまま追加しました。中身は、上記に引用したChatGPTによるコードそのままです。

これだけでは動かないようだったので、react-pdfのドキュメントを参考に、以下の記述を加えました。

--- a/components/MyPdfViwer.tsx
+++ b/components/MyPdfViwer.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { Document, Page } from 'react-pdf';
+import { Document, Page, pdfjs } from 'react-pdf';
+
+pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.wo

 interface Props {
   file: string; // PDFファイルのURL

ビューアの呼び出し

pages/index.tsxの不要な箇所を削除し、適当な場所に以下を書き加えました。

pages/index.tsx

<div className={styles.description}>
  <MyPdfViewer
    file="slides/組織の生産性を高める意思決定の構造と方法.pdf"
  />
</div>

あとは、HTMLやCSSを少し手直ししたり、表示させるスライドのファイルを追加したりしました。

以上で終わりです。

おわりに

とりあえず、ファイル名を直で指定したPDFスライドをページ送りするだけのアプリですが、簡単にできました。あとは、複数のスライドに対応するだけですね。すごい！簡単！

というわけで、ChatGPTによる簡単なアプリ作成を試みてみました。面白いので、ぜひ皆さんもやってみてください。以下のツイートでは、Twitterぽいアプリを、ChatGPTとやりとりしながら作った事例が紹介されています。すごすぎる！