Ionic 6でWeb3やってみた

Transcript

1. Ionic 6で Web3.0やってみた 大体いい感じのスライドを作るための無料テンプレート VERSION 3.0 CREATED AND MAINTAINED BY @SANOGRAPHIX ※このページは削除して構いません USE TEMPLATE Click Ionic Meetup #19 Tokyo LT用資料
2. 自己紹介 • 榊原宏祐 • 株式会社キネカ 取締役CTO • Twitterやってるのでフォローお願いします ◦ @scrpgil
3. 突然ですが、他のクロスプラットフォー ムFW（Flutter、RNとか）と比較して Ionicの良さはなんだろう？
4. Ionicで行うすべてのことにおいて、私たちの指針となる原則は、可能な限りオープン Web標準と機能を採用することにより、「プラットフォームを使用する」ことです。実際、 Ionicを選択した場合、実際にはIonicに賭けているわけではありません。あなたはウェ ブに賭けています—世界で最も実績のあるユニバーサルランタイムです。これは、Ionic FrameworkとツールがすべてオープンWebテクノロジーに基づいているためです。こ れは、Ionicアプリの構築に使用するWeb言語（HTML、CSS、JavaScript）から、アプ リ内で実行される標準ベースのUIコンポーネントまでです。 引用：https://ionic.io/resources/articles/ionic-vs-flutter-comparison-guide Web標準であること
5. • ブロックチェーンのプラットフォームの上で、色々なサービスを展開してるもの ◦ NFT ◦ Dapps ◦ DAO • 最近だと自民党がNFTを発行したりするようですね。 ◦ 岸田トークン：URL WebといえばWeb 3.0がバズってますね
6. どの記事を見ても、次世代インターネットとか、非中央集権とか、このコインは 価格上がるとか言った情報が多く、実際にプログラミングするとなると、何して 良いかよくわからない。 ただし、Web3.0、キャッチアップしづらい...
7. LT発表をネタにWeb3を キャッチアップしよう！
8. • ブロックチェーン • イーサリアム • MetaMask Web3界隈のあれこれ
9. • 分散台帳技術 ◦ 世界中のノードで台帳管理 • 取引履歴を過去からつなげて管理し、改 ざんや、消去に強い。 • 取引履歴は誰でも閲覧可能で、特定の 管理者がいない(非中央集権) ブロックチェーンとは？
10. • ブロックチェーンネットワークの一種 • スマートコントラクトというブロックチェーン上 にプログラムを書き込む機能を持っている。 ◦ ERCというRFC的な規格を色々作ってい る。 ◦ NFTはERC-721など • web3.jsを使ってJS上からアクセス可能 イーサリアムとは？
11. • ブロックチェーン上の自分のアカウント ◦ 取引履歴やToken保持数などを記録 • MetaMaskはイーサリアムに対応した人気の ウォレット ◦ アカウント管理や、クライアントアプリとの 接続機能を持つ • Chrome拡張機能がある ウォレット(MetaMask)とは？
12. Web3.0のアプリ構成例 スマートコントラクト クライアントアプリ アカウント(ウォレット) Web3.js
13. • 今回はIonic6+Web3.jsでNFTビューワを作ってみた ◦ https://github.com/scrpgil/ionic-react-web3 • セットアップ ◦ ionic start ◦ npm install web3 Ionic6＋Web3.jsでアプリを作る
14. • react-scriptのバージョンを下げましょう。 ◦ npm install react-scripts@4.0.3 Web3.js + Webpack5は動かない
15. 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拡張を入れてると使えるようになる
16. スマートコントラクト(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はスマコンのアドレス。事前に書き込みが必要。
17. スマートコントラクト(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": [] }
18. NFTを読み出し DEMO https://ionic-react-web3.web.app/
19. • 色々ハマったけど、出来上がってみたらコード自体は短い • NFTの表示はできたけど、さあどうする？ ◦ ブロックチェーンの利点を活かすにはどうすればよいのだろうか。 作ってみた所感
20. • 複数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 できなかったこと
21. • 工数比率 ◦ ブロックチェーン周り9割 ◦ Ionic1割 • ただ、1割の工数でそれなりのUI作れるので、やっぱりIonicって良いです ね。 • ブロックチェーン界隈、インフラレイヤー感はまだあるので、使いやすいク ライアントアプリを色々出せると良さそう。 Ionic要素少ない
22. ご清聴ありがとうございました