はじめに
こんにちは、kurotakyです。先月からSUZURIでNFTコンテンツでオリジナルグッズの作成と販売ができるようになりました。
タイトルにある「スリスリー」とは、この機能リリースを皮切りとしたSUZURIにおけるWeb3領域への取り組みを指すプロジェクト名です。SUZURIのキャラクターである忍者スリスリ君とWeb3(ウェブスリー)をかけて、スリスリーというプロジェクト名が生み出されました。当記事内では「NFTコンテンツからグッズを作って販売できる機能」そのものを指す言葉として読んでいただければと思います。
今回、ペパボ3推進室からはじめてのリリースとなりましたが、機能を開発するにあたって工夫したことを各メンバーにコメントしてもらいました。
Web3に関する取り組みを始めることについてはなぜGMOペパボがWeb3への取り組みを始めるのか - ペパボテックブログをぜひご一読ください。
スリスリーのバックエンドまわり
CTO室鹿児島エンジニアリングチームの@akhtです。普段はGMOレンシュの開発をしつつ、社内でブロックチェーンやWeb3を盛り上げるためにあれこれやっています。今回は主にバックエンド部分を担当しました。
アドレスを取得する
ユーザーが作成(または保有)しているNFTをSUZURIの画面上に表示するために、まずはユーザーのEthereumアドレスを取得する必要があります。フロント側でMetaMaskからアドレスを取得し、それをバックエンドに渡してNFTを取得します。
ここで気をつけないといけないのが、フロントから渡されたアドレスを本当にそのユーザーが管理しているのか確認する必要があるということです。バックエンドへのリクエストを改ざんすれば、他人のアドレスを自分のものだと偽って提出できてしまいます。
今回は q9f/eth.rb というgemを利用し、バックエンドで生成したメッセージ文字列に対してMetaMaskで署名してもらい、署名に用いられたアドレス(正確には秘密鍵)が提出されたものと一致するかを検証しています。
NFTを取得する
アドレスに紐付くNFTを取得するために OpenSea API と Moralis API を利用しています。スリスリーでグッズ化できるNFTは、自分が制作者であるか、制作者ではないが商用利用許諾を得ているものです。前者をカバーするためにOpenSea API、後者をカバーするためにMoralis APIを利用しています。
OpenSea APIはRate Limitが厳しいためキャッシュしたり、IPFSプロトコルに対応していないブラウザのためにURIを変換したりと細かな工夫をしていますが、基本的にはAPIを使えばNFTが簡単に取得できてとても便利でした。
SUZURIに組み込む
NFTの一覧が取得できたら、あとは画像からグッズを作れるようにするだけです。ここが一番むずかしいところですが、もちろん「画像からグッズを作る」というのは既にSUZURIが実現している機能です。それがSUZURI〜♪。そこにうまく乗っかりつつ、NFT固有の情報を扱えるように少し改修をして、無事にリリースすることができました。
SUZURIのコードをちゃんと触るのは今回が初めてでしたが、ドキュメントがしっかり書かれていたのと、わからないことはなんでもすぐに教えてくれたSUZURIエンジニアの皆さんの協力もあってスピード感のある開発ができたかなと思います。とても楽しかったですね🥳
スリスリーのフロントまわり
CTO室鹿児島エンジニアリングチームの@kurehajimeです。普段はカラーミーショップで決済画面まわりの開発を行っているのですが、ふと気がついたらSUZURIにNFT連携機能を組み込んでいました。自分が主に関わったのはプロトタイプの開発とフロント部分です。
デザインシステムのありがたさ
スリスリーの開発は「とりあえず試しにやってみよう」とPoC的にプロトタイプをつくるところからスタートしました。自分は今までSUZURIの開発をやったことがなかったので、外部Developer向けのAPIを外からたたいて動作するものを実装し、必要最小限の機能が実現できることを実証できてからSUZURIに組み込んでいくアプローチを取りました。
PoCが実装が完了したタイミングで「これもう完成でしょ」と技術者にありがちな勘違いをしてしまいましたが、そこからプロダクション水準に持っていくところでもいろいろとやはり苦労しました。初めて触るコードベースに組み込むのが大変なのは言わずもがな、どうUIを組み上げていくのかも勝手が分かりません。SUZURIの機能としてリリースするのだから、当然SUZURI全体と調和を取れた形で組み込む必要があります。
ここで威力を発揮したのがデザインシステムです。SUZURIにはNachiguroというデザインシステムが用意されており、あらかじめ用意されているReactのComponentを組み合わせていくだけで他のSUZURIの画面と調和が取れた形でUIを構築できます。
開発当初は「どうやったらSUZURIらしくなるんだ…」と頭を悩みましたが、SUZURIのエンジニアやデザイナーの方々からNachiguroを教えてもらい、デザインシステムの威力を目の当たりにしました。
確認ダイアログ
SUZURIの資産と皆さんの手を借りてなんとか無事リリースすることができました。しかしこれで終わりとはいきません。そこから先が本番です。
スリスリーのサービスの説明を聞いて「NFTを持っているからと言って勝手にグッズを作って良いの？駄目じゃないの？」と思われる方もいるかもしれません。その通りです。勝手に作ってはいけません。ちゃんと許諾が必要です。
このことはサービスの告知ページにも、アイテム作成時の注意書き（2カ所）にも、利用規約にも書いているのですが、それでも見落としてしまう人はどうしても出てきてしまいます。
「サービスとしては適切に情報を提示している」という考えもありますが、トラブルが繰り返し起こればSUZURIが今まで積み上げてきたクリエイターさんからの信頼を損ねてしまいますし、商品を削除するための手間もかかってしまいます。
そこで、リリース後のアップデートでアイテム作成時の確認ダイアログを追加しました。単純にOKボタンやチェックボックスを用意するだけでは無意識にクリックして先に進んでしまう人が出てきてしまうので、ラジオボタンで根拠を選択させるようにしています。これにより、うっかり権利を侵害してしまう人はほぼ防げるようになったのではないかと思います。
利用規約まわりの話については、 次の章の@kamedaさんの方から詳しい説明があります。
利用規約について
法務担当の亀田です。
法務では、SUZURIを利用する上で関わる部分としては、主に利用規約の改定を担当させていただきました。
NFTを巡る法律関係はまだまだ未解明・未整理な部分が多く、利用規約の文言もどのようにしたら良いのか先例もなく、当初は不安もありました。
しかし、正解のない分野に取り組めることへのワクワク感もありました。
ペパボ内で技術的観点と法的観点の双方向からの議論を重ね、少しずつ、こうしたらよいのではないかというペパボとしての考えを明確にしつつ、利用規約の形に落とし込んでいきました。そして、既存の規定で対応できる事項についても、NFTに関わる事項については、敢えて（注意喚起・問題提起の意味を込めて）明示的に利用規約に記載することにしました。
法律の分野に限ったことではありませんが、まだ方法論が確立していない未知の分野に対するアウトプットは、事後的にもっと良いものに取って代わられることがあったとしても（むしろ、その繰り返しによって議論は深まっていくのだと思っています。）、議論の対象を世の中に提供・提示したという意味において、社会全体の前進にとって大きな意義があることだと考えています。そのため、今回の利用規約の内容も、唯一絶対の不変の正解というものではなく、世の中の議論の流れを受けて、これからもどんどん変化・成長していくべきものだととらえています。
ペパボ法務は、これからも、事業部門で実行したい施策が未知の分野に関わるものであったとしても、新しいルールを自分たちが形成するんだという意気込みで、まだ見ぬ課題に果敢に挑戦していこうと思っています。
まとめ
これからもSUZURIだけでなく、GMOペパボの様々なサービスでWeb3に関する取り組みを進めていきます。クリエイターのみなさんがこれからもワクワクできるように、ものづくりのハードルを下げ、人類のアウトプットを増やすことにつながる体験を提供していきたいと思っております。