プロジェクトのセットアップ

このセクションでは、Stamp API を利用するためのプロジェクトのセットアップ方法を説明します。

プロジェクトの作成

クライアントライブラリを参考に、プロジェクトを作成します。

TypeScript
Go

プロジェクトのセットアップを行います。

シェルで実行
mkdir stamp-example
cd stamp-example
npm init -y

クライアントライブラリおよび依存ライブラリをインストールします。

シェルで実行
npm config set @buf:registry https://buf.build/gen/npm/v1
npm install @buf/pocketsign_apis.bufbuild_es @buf/pocketsign_apis.connectrpc_es @connectrpc/connect @connectrpc/connect-web typescript

サンプルコードの追加

TypeScript
Go

本サンプルでは、 Hono を利用した実装例を紹介します。

ライブラリのインストール

Hono の依存ライブラリをインストールします。

シェルで実行
npm install hono
npm install --dev @cloudflare/workers-types wrangler

ファイルの作成・編集

以下の内容でファイルを作成します。
<YOUR_API_TOKEN> には、API の利用で取得した API トークンを指定してください。

src/pages.tsx
import type { FC } from 'hono/jsx';

const Layout: FC = ({ children }) => {
  return (
    <html lang="ja">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>ポケットサインターネット　お申し込みページ</title>
      </head>
      <body>
        <main>{children}</main>
      </body>
    </html>
  );
};

export const Index: FC = () => {
  return (
    <Layout>
      <h1>ポケットサインターネット　お申し込み</h1>
      <p>お申し込みはこちらから</p>
      <form action="/apply" method="post">
        <select name="plan">
          <option value="高速プラン">高速プラン</option>
          <option value="中速プラン">中速プラン</option>
          <option value="低速プラン">低速プラン</option>
        </select>
        <br />
        <input type="submit" value="申し込む" />
      </form>
    </Layout>
  );
};

export const Callback: FC<{ content: string }> = ({ content }) => {
  return (
    <Layout>
      <h1>ポケットサインターネット　お申し込み完了</h1>
      <p>{content}</p>
    </Layout>
  );
};

export const Error: FC<{ message: string }> = ({ message }) => {
  return (
    <Layout>
      <h1>エラー</h1>
      <pre>{message}</pre>
    </Layout>
  );
};

src/index.tsx
import { SessionService } from '@buf/pocketsign_apis.connectrpc_es/pocketsign/stamp/v1/session_connect';
import { createPromiseClient } from '@connectrpc/connect';
import { createConnectTransport } from '@connectrpc/connect-web';
import { Hono } from 'hono';
import { getCookie, setCookie } from 'hono/cookie';
import { Callback, Error, Index } from './pages';

const client = createPromiseClient(
  SessionService,
  createConnectTransport({
    baseUrl: 'https://verify.mock.p8n.app',
    useBinaryFormat: true,
  })
);

const app = new Hono();

app.get('/', (c) => {
  return c.html(<Index />);
});


app.post('/apply', async (c) => {
  // ここに実装を追加します。
  return c.redirect('not implemented');
});

app.get('/callback', async (c) => {
  // ここに実装を追加します。
  return c.html(<Callback content={'not implemented'} />);
});


export default app;

wrangler.toml
name = "stamp-example"
compatibility_date = "2023-11-01"

[vars]
POCKETSIGN_TOKEN = "<YOUR_API_TOKEN>"

package.json に以下の npm scripts を追加します。

package.json
{
  "scripts": {
    "dev": "wrangler dev src/index.tsx"
  }
  // ...
}

実行

以下のコマンドで、サーバーを起動します。

シェルで実行

npm run dev

起動したら、ブラウザで http://localhost:8787 にアクセスします。

これでプロジェクトのセットアップは完了です。

プロジェクトの作成​

サンプルコードの追加​

ライブラリのインストール​

ファイルの作成・編集​

実行​

プロジェクトの作成

サンプルコードの追加

ライブラリのインストール

ファイルの作成・編集

実行