$30 off During Our Annual Pro Sale. View details »

Ionic 6でWeb3やってみた

scrpgil
May 29, 2022
49

Ionic 6でWeb3やってみた

scrpgil

May 29, 2022
Tweet

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. ご清聴ありがとうございました