🤖

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

2022/12/04に公開約3,800字

はじめに

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

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

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

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

https://github.com/kentaro/chatgpt-slide-viewer

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

https://github.com/kentaro/chatgpt-slide-viewer/commit/2101c1ae34a1707753cf0fffd9ce4e7104374980

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

npm install react-pdf

https://github.com/kentaro/chatgpt-slide-viewer/commit/56cc941141e8b721c6c1f09932244691a1eebb7a

ビューアコンポーネント

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

https://github.com/kentaro/chatgpt-slide-viewer/commit/272213d2f1aecc8ba6e01163b4a5925beb1c8ad2

これだけでは動かないようだったので、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

https://github.com/kentaro/chatgpt-slide-viewer/commit/ea99e5eedd3352fe4acd7b86a4022a0bcfbc98b9

ビューアの呼び出し

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

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

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

https://github.com/kentaro/chatgpt-slide-viewer/commit/c06ec158612898798ebe88b2985e78f85fe9a806

以上で終わりです。

おわりに

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

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

https://twitter.com/itohiro73/status/1598994604912939009

Discussion

ログインするとコメントできます