hanzochang
hanzochang
はじめに
ゴール
この記事でやらないこと
対象読者
要求知識
この記事で作成できるもの
作成方法/プロセス概略
thirdwebとは
完成までのプロセス
① コントラクトのデプロイ
② Metadata設定 - NFT画像・NFTメタデータのアップロード・販売期間設定
③ フロントエンドの設定
④ フロントエンドのデプロイ
サイト公開
技術構成
フロントエンド
コントラクト
ストレージ
宣伝: ノーコードでNFTサイトを作成したい方
① コントラクトのデプロイ
前準備: faucet発行
thirdwebでコントラクトを作成
② Metadata設定
NFT画像/メタデータ準備
販売期間の設定
ここまでのまとめ
③フロントエンド設定
▼ MAC向け
▼ WIN向け
サンプルソースコードの初期設定
自分のコントラクトに接続する
サーバーの再起動
いよいよ自分のコントラクトにアクセス!
サンプルで実装されている機能
自分の保有NFT
④ フロントエンドのデプロイ
githubにアップロード
Vercelのアカウントを取得する
Vercelにアップロードし公開する
(任意)独自ドメインを設定しましょう
💖 いいね!役になったなと思ったら
twitterフォローお願いします。
サービスの事前登録お願いします。
NFTサイト作成の依頼
依頼フォーム
執筆者の簡単なプロフィール
https://s3.ap-northeast-1.amazonaws.com/hanzochang.com/10_Thumbnail_Image_0575b894a2.png

thirdwebの使い方 - 独自コントラクトの作成と「NFTのMINTサイト」の作り方を紹介

thirdwebでの独自コントラクト作成 〜 MINTサイト作成までの流れが掴める記事です。サンプルリポジトリ(React/Next.js)を使って、MINTサイトをすぐに構築する方法を説明します。独自コントラクトでのNFT作成までの一連のフローを体験してみましょう。

公開日2022.06.26

更新日2022.10.24

はじめに

この記事は、NFTのMINTサイトの作り方を紹介します。


thirdwebを使ったコントラクトのデプロイから、フロントエンドの実装までを流れで解説します。フロントエンドはReactで実装します。 触って動かせるソースコードも用意しました。


2022/10/24追記:2022/10/22ごろthirdwebサーバーのRPCが使えなくなったため、thirdwebがSDKの3.4.0にアップロードしました。それにより新しい接続先に変更となりました。よって古いソースコードは使えなくなりました。最新版はこちらをご利用ください。https://github.com/hanzochang/thirdweb-nftdrop-nextjs

ゴール

  • 下記一連の流れを体験することでMINTサイト構築手順の流れを理解します。
    • thirdwebのコントラクトをデプロイ
    • 上記にサンプルのフロントエンドリポジトリを用いて接続し、MINTサイトを構築
    • ネット上にMINTサイトを公開

全体の流れさえ理解できれば、サンプルソースコード等をもとに、あとは自分自身でなりができるため、今回は流れの理解に注力しています。

この記事でやらないこと

  • フロントエンド実装の詳細については説明しません。 フロントエンド実装の詳細については説明しません。

  • サンプルのgithub repoがあるため、そちらを読解いただければと存じます。

対象読者

  • thirdwebの使い方を知りたい方
  • MINTサイトを持ちたい方
  • opensea等以外に、ブロックチェーンと連携した自分自身のサイトを作りたい方

この記事では、thirdwebを使ったシンプルなMINTサイトの作り方を紹介しています。 作り方を通して、上記3つのニーズいづれも達成できるように記事を構成しています。

要求知識

  • ターミナル(黒い画面)に抵抗がない方

    • 一部作業で黒い画面を用います。
    • ターミナルは何?というかたは、ターミナルの使い方をご参照ください。
  • NFTの基礎知識

    • NFTについてある程度の基礎知識がある前提で話を進めます。
    • NFTの仕組み等基礎知識については NFTアートの基礎知識 にまとめていますのでご参照ください。
  • 推奨:Webフロントエンドの知識

    • 知識がなくともできるよう極力冗長に説明していますが、基本的な知識がない場合、エラーの対処等が独力では難しい可能性があります。
    • 不明な点はtwitterにメンションなどいただければと存じます。(すぐに対応できない場合/対応できない場合ございます、ご容赦ください)

この記事で作成できるもの

Wallet機能、MINT機能、Collectionの閲覧機能、自分が保有するトークン表示機能の4点を実装できます。他、デプロイしたコントラクトのopenseaでの閲覧や、etherscanでのリンクの設置なども実装できます。

完成版のサイトサンプル

https://nftdrop-example.hanzochang.com/

完成版のソースコード

https://github.com/hanzochang/thirdweb-nftdrop-nextjs

5_000-02.png

作成方法/プロセス概略

詳細説明に入る前に、MINTサイトを作成にあたりどのようなプロセスで作るか、どんな技術を使うかをざっと説明します。

thirdwebとは

thirdwebはコードを書かずにコントラクトをデプロイできるサービスです。作成したコントラクトは独自コントラクトとなります。発行した自分自身がownerとなります。

thirdwebthirdwebでは、NFTに必要なmetadataのIPFSへのアップロード機能もあります。

完成までのプロセス

下記のプロセスでMINTサイト作成を実施していきます。

5_000-01 (1).png

① コントラクトのデプロイ

thirdwebを利用してブロックチェーンにデプロイします。 「NFTDrop」 のコントラクトを利用してデプロイします。NFTDropは ERC721 のコントラクトです。

② Metadata設定 - NFT画像・NFTメタデータのアップロード・販売期間設定

NFTが参照するURLにメタデータと画像をアップロードします。 また販売期間を設定することで、自分以外のユーザーがMINTできるようにコントラクトのデータをセットアップします。

③ フロントエンドの設定

ユーザーがMINTできるUIを作ります。ブロックチェーンと接続します。 reactとnext.jsを用いてフロントエンドを作成します。thirdwebのSDKを用い、ブロックチェーンとの接続部分の実装コストを下げてカンタンに実装します。

④ フロントエンドのデプロイ

作成したフロントエンドをデプロイします。vercelというサービスを用いて、簡単にアップロードします。

サイト公開

これらのプロセスを経るとサイト公開ができます。

技術構成

大きく「Frontend」「Blockchain」「IPFS」で構成されます。

5_000-02.png

フロントエンド

  • react
  • next.js
  • third web SDK

コントラクト

  • ERC721ベースのNFTDropと呼ばれるthirdwebのコントラクト
    • thirdweb経由でデプロイ

ストレージ

  • IPFS
    • thirdweb経由でアップロード

宣伝: ノーコードでNFTサイトを作成したい方

本記事ではMINTサイト構築方法を説明し、プログラマーでなくとも、ミントサイトをデプロイできるように設計しています。 ですが、細かいところで技術的知識が必要となったり、わからない点が出てくると思います。

もっと気軽にMINTサイトやNFT販売サイトを作成した人向けに簡単にサイトをジェネレートできる仕組みを開発中です。現在事前登録中ですので、よろしければご登録ください。

(事前受付中)Web3Generator https://hanzochang.com/web3gen/

https://hanzochang.com/web3gen/スクリーンショット 2022-06-25 21.47.24.png

ここからthirdwebのデプロイからフロントエンドまでの実装を解説していきます。

① コントラクトのデプロイ

前準備: faucet発行

今回テストネットを利用します。 テストネットを利用したことがない方は、事前にテストネット用のトークンを発行しておきましょう。

https://goerlifaucet.com/

22/09/11追記 利用できるテストネットについて

  • (ちょっとした情報なので読み飛ばして結構です)
    • 以前はrinkerbyの利用を前提で記事を書いていましたが、goerliに修正しました。rinkerbyは、ethereumの「the merge」後に廃止されることになったからです。(Rinkebyの他、Kiln Ropstenも廃止)
    • 最近ではテストネットfausetにbotによるアタックもあり、fausetでテストネットでトークンを取得しづらい状態が続いています。自分でマイニングできるサイトやソースコードも用意されているので活用しましょう。
    • https://goerli-faucet.pk910.de/
    • https://github.com/pk910/PoWFaucet

thirdwebでコントラクトを作成

thirdwebのdashboardにアクセスします。

https://thirdweb.com/dashboard

https://thirdweb.com/dashboard

ウォレットを接続します。

5_001-02.png

コントラクト作成ボタンを押下します

5_001-03.png

「ReleaseDrop」を押下します。

5_001-04.png

「NFTDrop」を押下します。

5_001-05.png

「NFTDrop」のデータを入力していきます。

NFTDropコントラクトの基本情報入力画面がでてきます。この段階では、NFTのメタデータのアップロードはありません。ここでは、コントラクト名、シンボル名、説明文、画像、そして取引ごとに発生するフィーの設定が行えます。

なお一度デプロイすると変更はできないので注意です。

5_001-06.png

本記事では下記のように入力しました。なお、Network/Chainは「rinkeby」を選択します。

5_001-07.png

一通り情報を入力したらDeployNowボタンを押下します。

5_001-08.png

Walletが起動するので、Confirmを押下します。

5_001-08-1.png

無事コントラクトの作成が完了すると下記の画面が出ます。

5_001-09.png

これで、コントラクトの作成は完了です! thirdwebを使うと簡単にデプロイできてしまいますね。

💡閑話休題:NFTDropとは

(ここは細かい話なので読み飛ばしてOKです)

Thirdwebには複数のコントラクトが用意されており、NFTDropはそのうちの一つです。

▼ NFTDropを使うとどんなことができるか
  • MINT機能を持ったサイトを作ることができます。
  • MINTには制約を設定できます。販売可能な期間、料金等を設定できます。
  • MINT済みのNFTの一覧を取得し、サイトで表示することができます。
  • MINT済みのNFTは、Opensea等のマーケットプレイスで販売できます。

一点注意があり、NFTDropの場合、ユーザーがMINTできるのは番号順になります。ユーザーが任意のNFTを選んでMINTする、と言うことはできません。

ユーザーが欲しいものを購入する場合は、MarketPlaceコントラクトを活用する必要があります。今回は説明を省きます。

▼ コントラクトの特徴

一言でまとめると、ユーザーがMINTすることを想定したコントラクトで、 MINTのための制約や販売価格や販売期間をきめ細やかに設定できます。

特徴を一覧にすると下記の通りです。

  • ERC721
  • Mintable | ユーザーがMINTできる設計
  • ClaimPhases | ユーザーのMINTにあたって制約を設定できる
  • Reveal | リビール機能に対応
  • 後からmetadataを設定できる | オーナーはNFTのmetadataを後からアップロードできる
  • 後からmetadataを追加できる | 後から追加が可能
  • BatchUpload | まとめてmetadataをIPFSにホスティング
  • 独立URI | NFTのmetadataは共通のURIを持たず、トークン1つずつに対応

② Metadata設定

この項では、NFT画像・NFTメタデータのアップロード・販売期間設定を設定していきます。

NFT画像/メタデータ準備

NFT画像とメタデータの準備をします。 本記事ではサンプルを用意していますので、サンプルを利用していきます。

サンプルのダウンロード

筆者が用意したgoogledriveにアクセスします。

サンプルmetadata https://drive.google.com/drive/folders/1mXmmN_eArKsoXkny_OcH6CNibuvANtrb?usp=sharing

ダウンロードボタンを押下することでサンプルをダウンロードできます。

5_001-10.png

NFT画像/メタデータのアップロード

ダウンロードしたファイルをアップロードします。 デプロイしたコントラクトページに表示されている「Batchupload」ボタンを押下します。

5_001-11.png

ファイルドロップ画面が現れます。

5_001-12.png

先ほどダウンロードしたフォルダを解凍して、ドラッグ&ドロップでアップロードします。

アップロード後、プレビューが表示されます。Nextボタンを押下します。

「Reveal upon mint」を押下します。

「Upload ~NFTs」を押下します。

Walletが起動するので、Confirmを押下して、トランザクションを発行します。

5_001-13.png

5_001-14.png

5_001-15.png

5_001-16.png

5_001-17.png

5_001-18.png

アップロードが完了するとコントラクトのトップが表示されます。画像がアップロードされていたら無事完了です。メタデータや画像はIPFSにホスティングされています。

5_001-19.png

自分でサイトを作る場合は、この画像を自分の作品に置き換えてアップロードしていきます。アップロード方法をより詳しく知りたい方は、thirdweb BatchUploadの使い方により詳しい解説を載せていますのでご参考ください。

thirdweb BatchUploadの使い方

販売期間の設定

アップロードはできました。次に販売期間(Claim Phases)を設定します。 販売期間を設定しないと、ユーザーがMINTすることができません。

ClaimPhaseを追加する

SetClaimPhaseボタンを押下するか、タブの「Claim Phases」を押下します。

5_001-19-2.png

ClaimPhase画面では販売期間を追加できます。複数の販売期間を設定できます。販売期間に応じて価格を変更することや、販売可能なWallet数を設定できます。コントラクト発行サービスPremintと同様な機能を実装できます。

「Add Initial Claim ePhase」ボタンを押下します。

5_001-20.png

5_001-21.png

各種パラメータを入力していきます。

簡単に日本語でパラメータ内容を説明すると、左上から順に

5_001-22.png

  • いつから販売を開始するか
  • 何枚NFTを販売するか
  • いくらで販売するか
  • なんのトークンで販売するか
  • だれ(ウォレット)が購入することができるのか
  • 1回の請求あたり何枚買えるか
  • ウォレットひとつあたり何枚まで買えるか

ウォレットひとつあたり何枚まで買えるか

といったところです。

ひとしきり入力が終わったら「Save Claim Phases」を押下します。

5_001-23.png

Walletが立ち上がるのでConfirmを押下し、トランザクションを発行します。

5_001-24.png

これで、販売期間が設定できました。 thirdwebでの操作は、ひとまずこれで以上です。 次はフロントエンドの設定を説明していきます。

💡閑話休題:Claim Phasesについて

各項目を画像でも解説してみました。

5_001-22-02_修正.png

販売条件は複数設定できます。多くのNFTプロジェクトでは、ホワイトリストやプレミントといった、段階的なNFTリリースを実施しています。ClaimPhase機能を利用すると、PREMINTといった他のサイトを利用することなく、thirdweb発行のコントラクトで、段階的な販売条件を組むことができます。お試しください。

補足

なお「How many seconds do wallets have to wait in-between claiming?」を「unlimited」にすると、 1度トランザクションを発行したユーザーは、2回目発行できなくなります。 ここわかりにくいので、注意です。

ここまでのまとめ

thirdwebでの操作群をおこなってきました。

ここまでで、下記の3つが達成できています。

  • コントラクトのデプロイ
  • メタデータのアップロード
  • 販売期間の設定

この段階で、フロントエンドで、MINTを実行できるようになっています。

次の章からは、フロントエンドでのコントラクトアクセス方法を説明していきます。

③フロントエンド設定

ここからは、コンソール(黒い画面)を利用した操作を含みます。 あまり触ったことのない人でも、とりあえず立ち上げられるよう、なるべく情報をスキップすることなくお伝えできればと考えています。

また この章では、フロントエンドをローカルで動かすことまでを説明 します。 実装のhowは今回説明しません。(実装方法の説明はとても長くなりそうなため)

🗯 エンジニアでない人向け:前提知識まとめ

ここからはコンソール(黒い画面)を使って進めていきます。 Webエンジニアリングの知識が必要です。 なんでもいいからひとまず試してみたい!という方向けに、 事前の環境設定方法を紹介します。

下記が設定できていればokです。

  • ターミナルを起動できる
  • gitがインストールされている
  • node.jsがインストールされている

細かい情報は書ききれないので、下記の情報を手がかりに、 環境設定にチャレンジしてみてください。 なお、もしよろしければ不明な点はtwitterにメンションなどいただければと存じます。

twitter

▼ MAC向け

今さら聞けない!ターミナルの使い方【初心者向け】

https://techacademy.jp/magazine/5155 ターミナルの使い方です

MacにNode.jsをインストール

https://qiita.com/kyosuke5_20/items/c5f68fc9d89b84c0df09 ダウンロードしたソースコードを動かすためのソフトウェアです

VSCodeインストール

https://code.visualstudio.com/download ソースコードを見るためのツールです

yarnをインストールする

https://qiita.com/suisui654/items/1b89446e03991c7c2c3d  サンプルを利用するソフトを管理するツールです

▼ WIN向け

【Windows】Gitの環境構築をしよう!

https://prog-8.com/docs/git-env-win *サンプルソースコードをダウンロードできるツールです。

Node.jsの開発環境を用意しよう!(Windows)

https://prog-8.com/docs/nodejs-env-win *ダウンロードしたソースコードを動かすためのソフトウェアです

yarnをインストールする

https://qiita.com/suisui654/items/1b89446e03991c7c2c3d *サンプルを利用するソフトを管理するツールです

サンプルソースコードの初期設定

リポジトリをダウンロードします。

git clone https://github.com/hanzochang/thirdweb-nftdrop-nextjs.git

対応するgithubURL: https://github.com/hanzochang/thirdweb-nftdrop-nextjs

サンプルのセットアップ

サンプルリポジトリに移動
cd thirdweb-nftdrop-nextjs
パッケージをインストール
yarn install

サンプルの起動

サンプルサイトを起動します
yarn dev
起動したサンプルにアクセスします

http://localhost:3000

成功すると下記の画面が表示されます。

5_002-01.png

現時点では筆者が作成したサンプルのコントラクトに接続されていますので、接続するコントラクトを自分のものに変更します。

自分のコントラクトに接続する

接続先のコントラクトを変更

では、自分のコントラクトでこのフロントエンドを動かしてみましょう。

やりかたは簡単です。

vscodeにて、サンプルソースコードを開き、 .envを変更します。

5_002-03.png

サーバーの再起動

いちど サーバーを落として再起動します。 ターミナルでサーバーを中断します。 ターミナルに移動し、macの場合は「control+c」winの場合は「ctrl+c」で中断します。

中断後、再起動します

yarn dev

いよいよ自分のコントラクトにアクセス!

http://localhost:3000

http://localhost:3000画像がthirdwebでアップロードした画像になっていたら成功です。

5_002-04 (1).png

自分のコントラクトのフロントエンドが立ち上がりました。

MINTをしたり、コレクションを眺めたりしてみましょう。

サンプルで実装されている機能

本サンプルで実装されている機能について簡単に説明します。

Wallet接続ボタン

ブラウザのウォレットに接続するボタンです。 MINTを利用するためには、このボタンでwalletを接続する必要があります。

MINTボタン

wallet接続後有効になります。thirdwebで設定した販売期間に応じて、MINTの挙動が設定されます。

MINT価格がわかります

販売NFTのMINT価格を表示しています。

自分の保有NFT

自分の保有中のNFTがわかります。

現在のMINTできるコレクション一覧

次にMINTされる画像です。まだMINTされていないNFTは半透明に記録されています

④ フロントエンドのデプロイ

では設定したリポジトリを早速ネットへ公開していきましょう。 今回作ったサイトはネットに簡単に公開できます。Vercelと呼ばれるサイトを利用します。

githubにアップロード

今回作成したリポジトリを自分のgithubにアップロードします。

githubリポジトリを作成

githubにアクセスし、新しいリポジトリを作成します。

5_003-01.png

5_003-02.png

githubリポジトリのURLをコピー

作成したリポジトリのアップロード先URLをコピーします。

5_003-03.png

githubにアップロード

コンソールに戻り、アップロード先をgitに追加します。

まずテンプレートのgithubのリンクを削除し

git remote rm origin

その後githubレポジトリのURLを設定します。

git remote add origin <コピーしたリポジトリのURL>

自分のリポジトリにpushし、アップロードします。

git push origin main

これで前準備はOKです。

Vercelのアカウントを取得する

Vercelのアカウントを取得します。 すでにアカウントをお持ちの方は、ログインしてください。

https://vercel.com/

Vercelにアップロードし公開する

NewProjectページに移動します。 新規登録の場合は登録直後に開かれるページです。 元々アカウント持っている人は「New Project」ボタンなどで遷移してきます。

適当なワードをいれて検索します

5_003-05.png

Configure Github Appを選択します。

適当なワードを入れると「Configure Github App」ボタンが出現するので押下します。

5_003-06.png

githubの設定

画面を下の方にスライドしていくとRepositoryAccessが出てきます。

作成したリポジトリ名を検索し、クリックします。

5_003-07.png

Saveを押下します。

5_003-08.png

vercelでリポジトリを読み込み

Vercelに戻り、作成したリポジトリ名で検索します。 でてきた検索結果のImportボタンを押下します。

5_003-09.png

Deployのための設定

無事importが完了すると下記のような画面がでます。 ここからはフロントエンドのデプロイのための設定を解説していきます。

5_003-10.png

enviroment variableという枠があるので、クリックします。

5_003-11.png

ここは値を環境変数と呼ばれる設定値を登録できる場所です。 下記の値のペアを二つ登録していきます。

  • 1つめ
    • NANE: NEXT_PUBLIC_CONTRACT_ADDRESS
    • VALUE: thirdwebで作成したコントラクトのアドレス
  • 2つめ
    • NAME: NEXT_PUBLIC_CHAIN_ID
    • VALUE: 4
    • なおこれはrinkebyのネットワーク番号。本記事はrinkebyを利用しているため。

登録に成功すると下記のようになります。

5_003-12.png

入力し終わったら、Deployを押下します。

しばらく待ちます

公開作業をおこなっています。オレンジ色が緑色になったら、デプロイ完了です。 もしエラーが発生した場合は赤色になります。 (その場合はエラーを見て、ご自身でご解決ください)

サイトが公開されます。

緑色に点灯したらサイト公開完了です。

5_003-14.png

画面に表示されているURLをクリックして、サイトにアクセスしましょう

5_002-04 (1).png

これで公開できました。

(任意)独自ドメインを設定しましょう

「vercel 独自ドメイン」といったワードで検索すると設定方法がでてきますので、そちらをご参照ください。

お名前.comの連携の場合は下記を参考ください。

https://maku.blog/p/9vakw8i/

https://maku.blog/p/9vakw8i/なお無事ドメインを設定できるとDomain一覧が下記のようになります

5_003-15.png

ここまでの一連の流れで、

  • thirdwebでのコントラクトデプロイ
  • thirdwebでのNFTメタデータのアップロード
  • フロントエンドの設定
  • フロントエンドの本番デプロイ
  • 公開

の5つの作業手順を実施しました。

実はここまでの流れで下記ができるようになっています。

  • 独自コントラクトのデプロイ方法
  • 自分のブランドサイト構築

マーケットプレイスを用いることなく、自分の所有コントラクトを使って、自分自身のMINTサイトを作ることができるようになっています。

今回のソースコードをベースに、デザインを改造し、デプロイ先をメインネットにすれば、自分自身の真の意味でのオリジナルNFTを発行できます。

ぜひ、お試しください。

💖 いいね!役になったなと思ったら

twitterフォローお願いします。

twitterにてweb3周辺ツールの情報発信をしていますので、よろしければフォローお願いします。 https://twitter.com/hanz0chang

https://twitter.com/hanz0chang

サービスの事前登録お願いします。

また、上記手順をもっとラクにする「web3generator」なるサービスを開発しています。よろしければ事前登録をしてリリース情報を受け取ってください。お役に立てるかもしれません🙏

https://hanzochang.com/web3gen/

https://hanzochang.com/web3gen/

NFTサイト作成の依頼

直接NFTのサイトの依頼を承っておりますので、お声がけください。 細かい点は要相談でございますが、手っ取り早くMINTサイトの構築が可能です。

依頼フォーム

https://share.hsforms.com/1T6hnOtplQMe0ajI66nYiMwcciec

https://share.hsforms.com/1T6hnOtplQMe0ajI66nYiMwcciec

執筆者の簡単なプロフィール

Webのキャンペーンサイトのプランナー業務から、 Webサービス/ネイティブアプリ/メディアの企画・運営、 またWebサービスの開発業務までの職種を経験してきた者です。Fintech案件を始め様々なDXプロジェクトに関わってまいりました。

現在はフリーランスエンジニアとして、SaaSプロダクトやWeb3プロダクトに関わっています。 ざっくり、Ruby / Ruby on Rails / Typescript / React.js / AWS / Azure / Figma あたりの技術やソフトウェアを用い、実装をしています。

picture
hanzochang - 半澤勇大
慶應義塾大学卒業後、Webプランナーとして勤務。 ナショナルクライアントのキャンペーンサイトの企画・演出を担当。 その後開発会社に創業メンバーとして参加。 Fintech案件や大手企業のDXプロジェクトに関わり、その後個人事業主として独立し、 2023年にWeb3に特化した開発会社として法人化しました。 現在はWeb3アプリ開発を中心にAI開発フローの整備を行っています。
また、趣味で2017年ごろより匿名アカウントでCryptoの調査等を行い、 ブロックチェーンメディアやSNSでビットコイン論文等の図解等を発信していました。
X (Twitter)

お問い合わせはこちらから

ご希望に応じて職務経歴書や過去のポートフォリオを提出可能ですので、必要な方はお申し付けください。
また内容とによっては返信ができない場合や、お時間をいただく場合がございます。あらかじめご了承ください。