製品
PDFエディター
統合
機能
価格
サポート
ログイン

Next.jsアプリにSimplePDFエディターを追加する方法

Profile picture of Benjamin André-Micolon
Benjamin André-Micolon

Next.jsはReactアプリケーション開発の標準になりつつあります。実際、SimplePDF自体もNext.jsで構築されています！

SimplePDFエディターをアプリに埋め込む方法を紹介するのに、Next.js以上に適した選択肢はないでしょう。

このチュートリアルをスキップして、SimplePDF embed GitHubリポジトリで直接コードを確認することもできます。

ステップ1：プロジェクトのセットアップ

すでにNext.jsまたはReactアプリが動作している場合は、ステップ2：SimplePDF Embed依存関係の追加またはステップ3：Next.jsアプリにSimplePDFエディターを追加に進んでください。

Next.jsのCLIツールを使って、対話的にプロジェクトをセットアップしましょう。

ターミナルで以下のコマンドを実行し、手順に従ってください。

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app
  1. プロジェクト名を決めましょう：
? What is your project named? › simple-pdf-react-embed-example
  1. SimplePDFではTypeScriptを愛用しているので、次のステップでは「yes!」を選択します。

これは必須ではないので、TypeScriptに馴染みがなくても心配ありません！

? Would you like to use TypeScript with this project? › No / Yes
  1. ESLintも使いましょう。

同様に、ESLintは必須ではないので、馴染みがなければ「no」を選んでください。

Would you like to use ESLint with this project? › No / Yes
  1. コンピュータの出番です：必要な依存関係の取得とインストールが行われます。

ここではyarnを使用しているため、npmなどを使用する場合はメッセージが若干異なります。

info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[#####################################-------------------------------------------------------] 105/263
  1. 成功すると、以下のメッセージが表示されます：
Success! Created simple-pdf-react-embed-example at /Users/bendersej/workspace/widget-simplepdf/react/simple-pdf-react-embed-example
  1. フォルダに移動します。
cd simple-pdf-react-embed-example/
  1. プロジェクトを起動しましょう！
yarn dev
# or
npm dev
  1. すべて問題なければ、以下の表示が確認できるはずです：
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 529 ms (165 modules)

サーバーが以下のURLで起動しています：http://localhost:3000

以下のような画面が表示されるはずです。

このチュートリアルを実施する時期によって、多少の違いがある場合があります。

SimplePDF embed追加前のプロジェクト

ステップ2：プロジェクトにSimplePDF Embed依存関係を追加する

前提条件：ローカルで動作するReact（Next.js）アプリ - 前のステップを完了していれば準備万端です！

正しい場所にいることを確認しましょう。以下のコマンドを実行します。

ls

以下のファイルが表示されるはずです：

README.md      next.config.js package.json   public         tsconfig.json  yarn.lock
next-env.d.ts  node_modules   pages          styles         yarn-error.log

@simplepdf/react-embed-pdfをプロジェクトに追加しましょう。

  1. @simplepdf/react-embed-pdfをインストールします。
yarn add @simplepdf/react-embed-pdf
# or
npm install @simplepdf/react-embed-pdf

インストールが完了すると、以下のメッセージが表示されます：

ここではyarnを使用しているため、npmなどを使用する場合はメッセージが若干異なります。

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @simplepdf/react-embed-pdf@1.3.0
info All dependencies
└─ @simplepdf/react-embed-pdf@1.3.0
✨  Done in 5.91s.

Reactのコードを書く時間です！

ステップ3：Next.jsアプリにSimplePDFエディターを追加する

このステップでは、SimplePDFエディターコンポーネントの追加方法を学びます。このコンポーネントにより、アプリケーション内から任意のPDFを開くことができるようになります。

お好みのコードエディターでアプリのコードを開きましょう。 SimplePDFではVScodeを愛用しています。

  1. まずmain内のすべてを削除し、ページタイトルを更新して整理しましょう：

コードは以下のようになるはずです：

import Head from 'next/head'
import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>SimplePDF Embed Example</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
      </main>
    </>
  )
}

ブラウザには空白のページが表示されるはずです。

SimplePDFエディター追加の出発点

  1. ファイルの先頭にEmbedPDFコンポーネントをインポートしましょう：
import { EmbedPDF } from '@simplepdf/react-embed-pdf';
  1. コードに追加します：

EmbedPDF内に必要な子要素は1つだけです。a、div、buttonなど、任意のHTML要素を使用できます。

<EmbedPDF>
  <div className={inter.className}>
    <div className={styles.card}>Open SimplePDF!</div>
  </div>
</EmbedPDF>

コード全体は以下のようになります：

import Head from 'next/head'
import { Inter } from '@next/font/google'
import styles from '../styles/Home.module.css'
import { EmbedPDF } from '@simplepdf/react-embed-pdf';

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>SimplePDF Embed Example</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
      <main className={styles.main}>
        <EmbedPDF>
          <div className={inter.className}>
            <div className={styles.card}>Open SimplePDF!</div>
          </div>
        </EmbedPDF>
      </main>
    </>
  )
}

ブラウザには小さな「Open SimplePDF!」ボタンが表示されるはずです！

ステップ4：次のステップ

SimplePDF Embedは非常に強力で、まだまだ発見できることがあります：

  • ドキュメントのURLを指定して特定のドキュメントを開く
  • ドキュメントの読み込みや送信時にイベントを受信する
  • 独自のブランディングを追加する

詳しくはGitHubのドキュメントをご覧ください。

このチュートリアルをお楽しみいただけたなら幸いです！

ご質問やコメントがございましたら、画面右下のフィードバックボタンからお気軽にお知らせください。

あなたが興味を持つかもしれない