Ionic 6で Web3.0やってみた 大体いい感じのスライドを作るための無料テンプレート VERSION 3.0 CREATED AND MAINTAINED BY @SANOGRAPHIX ※このページは削除して構いません USE TEMPLATE Click Ionic Meetup #19 Tokyo LT用資料

自己紹介 ● 榊原宏祐 ● 株式会社キネカ 取締役CTO ● Twitterやってるのでフォローお願いします ○ @scrpgil

突然ですが、他のクロスプラットフォー ムFW（Flutter、RNとか）と比較して Ionicの良さはなんだろう？

Ionicで行うすべてのことにおいて、私たちの指針となる原則は、可能な限りオープン Web標準と機能を採用することにより、「プラットフォームを使用する」ことです。実際、 Ionicを選択した場合、実際にはIonicに賭けているわけではありません。あなたはウェ ブに賭けています—世界で最も実績のあるユニバーサルランタイムです。これは、Ionic FrameworkとツールがすべてオープンWebテクノロジーに基づいているためです。こ れは、Ionicアプリの構築に使用するWeb言語（HTML、CSS、JavaScript）から、アプ リ内で実行される標準ベースのUIコンポーネントまでです。 引用：https://ionic.io/resources/articles/ionic-vs-flutter-comparison-guide Web標準であること

● ブロックチェーンのプラットフォームの上で、色々なサービスを展開してるもの ○ NFT ○ Dapps ○ DAO ● 最近だと自民党がNFTを発行したりするようですね。 ○ 岸田トークン：URL WebといえばWeb 3.0がバズってますね

どの記事を見ても、次世代インターネットとか、非中央集権とか、このコインは 価格上がるとか言った情報が多く、実際にプログラミングするとなると、何して 良いかよくわからない。 ただし、Web3.0、キャッチアップしづらい...

LT発表をネタにWeb3を キャッチアップしよう！

● ブロックチェーン ● イーサリアム ● MetaMask Web3界隈のあれこれ

● 分散台帳技術 ○ 世界中のノードで台帳管理 ● 取引履歴を過去からつなげて管理し、改 ざんや、消去に強い。 ● 取引履歴は誰でも閲覧可能で、特定の 管理者がいない(非中央集権) ブロックチェーンとは？

● ブロックチェーンネットワークの一種 ● スマートコントラクトというブロックチェーン上 にプログラムを書き込む機能を持っている。 ○ ERCというRFC的な規格を色々作ってい る。 ○ NFTはERC-721など ● web3.jsを使ってJS上からアクセス可能 イーサリアムとは？

● ブロックチェーン上の自分のアカウント ○ 取引履歴やToken保持数などを記録 ● MetaMaskはイーサリアムに対応した人気の ウォレット ○ アカウント管理や、クライアントアプリとの 接続機能を持つ ● Chrome拡張機能がある ウォレット(MetaMask)とは？

Web3.0のアプリ構成例 スマートコントラクト クライアントアプリ アカウント(ウォレット) Web3.js

● 今回はIonic6+Web3.jsでNFTビューワを作ってみた ○ https://github.com/scrpgil/ionic-react-web3 ● セットアップ ○ ionic start ○ npm install web3 Ionic6＋Web3.jsでアプリを作る

● react-scriptのバージョンを下げましょう。 ○ npm install [email protected] Web3.js + Webpack5は動かない

MetaMaskとの接続 const connectWallet = () => { window.ethereum .request({ method: "eth_requestAccounts" }) .then((result: any) => { console.log(result[0]); setAccount(result[0]); }) .catch((error: any) => { setErrorMessage(error.message); }); }; // window.ethereumはMetaMaskのchrome拡張を入れてると使えるようになる

スマートコントラクト(NFT)の呼び出し 1 const defaultAddress = "0x70fc6b119f24fa14d517C86d334EBaE27E654121"; async function getContractABI(address: any) { if (!abi && !abiPending) { setABIPending(true); setABI(defaultAbi); } else if (abi && web3js) { setABIPending(false); const contract = new web3js.eth.Contract(abi, address); const tokenUri = await contract.methods.tokenURI("1").call(); const res: any = await api.get(tokenUri); console.log(res); } } getContractABI(defaultAddress); // defaultAddressはスマコンのアドレス。事前に書き込みが必要。

スマートコントラクト(NFT)の呼び出し 2 // スマコンの返却結果は、metaデータのURL：https://aa-storage.aahub.org/nft/2.json // metaデータを読み出すと以下のJSONが返ってくる { "description": "The most famous ASCII art(S-JIS Art)", "external_url": "https://openseacreatures.io/3", "image": "https://aa-storage.aahub.org/aa/7465ba9e8275eb7d34d49c35997b1aa8.png", "name": "オマエモナー", "attributes": [] }

NFTを読み出し DEMO https://ionic-react-web3.web.app/

● 色々ハマったけど、出来上がってみたらコード自体は短い ● NFTの表示はできたけど、さあどうする？ ○ ブロックチェーンの利点を活かすにはどうすればよいのだろうか。 作ってみた所感

● 複数NFTを読み出すためには、アカウントのトランザクションを全部読み 出す必要あり。 ○ openseaのAPIを使えば簡単に行える ■ https://testnets-api.opensea.io/api/v1/assets?owner=${address} ■ Web3.jsいらないのでは... ● Web3.jsを使えば、mint(NFTの登録)も行える ○ 時間がなかったので、今回はhardhatを使って実施。 ■ https://github.com/scrpgil/sample-hardhat できなかったこと

● 工数比率 ○ ブロックチェーン周り9割 ○ Ionic1割 ● ただ、1割の工数でそれなりのUI作れるので、やっぱりIonicって良いです ね。 ● ブロックチェーン界隈、インフラレイヤー感はまだあるので、使いやすいク ライアントアプリを色々出せると良さそう。 Ionic要素少ない

ご清聴ありがとうございました