超絵しりとり！のソースコードです。本アプリケーションのデモ環境には下記の URL からアクセスしてください
Note デモ環境のサーバを無料版にダウングレードしました。安定しない場合があります。
本アプリケーションの操作方法や概要については下記の URL を参照してください
超絵しりとり！の全体構成は下記の図の通り。
本アプリケーションは、下記の環境で動作確認をしている。
- Node.js v16.x.x
- npm v8.x.x
Warning Node.js v18.x.x を利用した場合では、stability.ai の API リクエスト時に、原因不明のエラーが発生し安定しませんでした。その為、Node.js v16.x.x での動作を推奨します。
検証環境で利用しているコントラクトは、Oasys のテストネット上にデプロイされているコントラクトを利用している。
はじめに下記のサービスにアクセスし、利用に必要な情報を取得する。
| サービス名 | URL | 必要な情報 |
|---|---|---|
| OpenAI | https://beta.openai.com/ | API キー |
| Stability AI API | https://beta.dreamstudio.ai/account | API キー |
| Wallet Connect | https://walletconnect.org/ | プロジェクト ID |
| Google Cloud | https://console.cloud.google.com/ | サービスアカウントキー, バケット名 |
.env.exampleをコピーして、.envを作成する。その後、それぞれのサービスから取得した情報を.envに設定する。
# 本アプリケーションがデプロイされるURL
BASE_URL=localhost:3000
# Generative AIの設定
OPENAI_API_KEY=${OpenAIのAPIキー}
DREAMSTUDIO_API_KEY=${StabilityAIのAPIキー}
# WALLET CONNECTの設定
WALLET_CONNECT_PROJECT_ID=${WALLET CONNECTのプロジェクトID}
# OASYSネットワーク, NFTコントラクトの設定
PICTURE_SHIRITORI_COMPLETE_NFT_CONTRACT_ADDRESS=0xa38e3D0e9635A1B4b027425A130B3662E3A7f1Df
BLOCK_EXPLORER_URL=https://scan.testnet.oasys.games/token/
# Google Cloudのサービスアカウントの暗号化キー
# README.mdの1-2の手順を参考に暗号化キーを作成する
DECRYPT_KEY=${1-2の手順で出力されたkeyの値}
DECRYPT_IV=${1-2の手順で出力されたivの値}
ENCRYPTED_KEY=${1-2の手順で出力されたencrypted.txtの中身}本アプリケーションは Vercel 上で動作しているが、Vercel は設定ファイルのアップロードに対応していないため、GCP の Service Account Key の情報を環境変数として設定できる様にする必要がある。
そのため、まずはじめに GCP からダウンロードした認証情報(service-account-key.json)を、下記のコマンドで暗号化する。
openssl enc -aes-256-cbc -a -in service-account-key.json -out encrypted.txt -k passphrase -p
salt=xxxxxxxxxxxxxxxx
key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
iv=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx出力された key と iv、 encrypted.txtの内容を、それぞれ .env に設定する。
~省略~
DECRYPT_KEY=${1-2の手順で出力されたkeyの値}
DECRYPT_IV=${1-2の手順で出力されたivの値}
ENCRYPTED_KEY=${1-2の手順で出力されたencrypted.txtの中身}以上で事前準備は完了となる。初回のみこちらの手順を行う必要がある。
必要ライブラリをインストール。
npm install開発用サーバを起動する。
npm run devデプロイ環境の起動は、下記のコマンドで行う。
npm run preview