koogawa blog

iOS、Android、foursquareに関する話題

Truffleでdeployする前にガス代を見積もる方法

Blockchain

Gas estimation on mainnet · Issue #3367 · trufflesuite/truffle · GitHub

$ truffle migrate --dry-run

のようにdeploy時に --dry-run オプションを付ければガス代をシミュレーションできるらしい。

ただし、多少の誤差はあるっぽい。

Truffle dry-run on Ethereum Main reports different gas cost (less) than actual deployment gas - Ethereum Stack Exchange

↓こちらの記事も参考になりました。

truffle - What is the real price of deploying a contract on the Mainnet? - Ethereum Stack Exchange

MetaMaskをインストールしてテストネットのFaucetを使ってみる

Blockchain

MetaMaskは、Ethereum系ブロックチェーンの通貨やNFTを一括で補完・管理できるソフトウェアウォレットであり、ブラウザ拡張機能版とモバイルアプリ版がある。(Wikipedia) https://ja.wikipedia.org/wiki/MetaMask

MetaMaskインストール

https://metamask.io/ からMetaMaskのWebブラウザ拡張をインストールできる。

セットアップ中にシークレットリカバリーフレーズが発行されるが、これは絶対に外部に公開してはいけないことを覚えておこう。

セットアップが完了すると、0xf3e6f572d9e062C0C39C2AE0A3B56466a09626a2 のようなウォレットアドレスが発行される。このアドレスは公開しても問題ない。（ちなみに、このウォレットアドレスは私koogawaのものなので、テストネットで送金のテストをしてもらっても構わない。なんならメインネットで投げ銭してもらうのも歓迎である）

Faucet

Faucet（フォーセット）とは、開発者がスマートコントラクトをテストするためにテスト用のイーサを無償で配布する仕組みである。Faucetはネットワークごとに複数存在する。例えばRinkebyの場合は下記サイトが利用できる。

成功すると、WalletにEtherが入金される。

他のテストネットについては、MetaMaskの「購入＞テストフォーセット＞Etherを取得」からもFaucetを探せるのでぜひ試してほしい。

メインチェーンとサイドチェーン、そしてレイヤー1およびレイヤー2について理解したことをまとめてみる

Blockchain

間違っていたら教えて下さい。むしろ、ツッコミを期待しています。

Truffle + React Boxで簡単なスマートコントラクトを体験してみる

Blockchain

ブロックチェーンに 1 のような整数を書き込むだけのサンプルを見つけたので、動作手順をメモしておきます。 とりあえずスマートコントラクトを体験してみたい！という人におすすめです。

※MetaMaskをインストールしてない場合は下記記事を参考にインストールを完了してください

記事執筆時の環境

  • Node.js v12.9.0
  • Truffle v5.5.19
  • MetaMask v10.17.0

Truffle

まずは Truffle をインストール。

$ npm install truffle

zshだと、インストール後に truffle を実行しても "zsh: command not found: truffle" になってしまう問題が発生することがある。その場合は このあたりを検索するといろいろと対処法が出てくる。

Truffleには、Dappを作るのに便利なボイラープレートがたくさん用意されている。

Truffle Boxes - Truffle Suite

今回はその中の「React Box」を使うことにする。（Reactの知識があることが望ましい）

適当なディレクトリを作り、React Boxをunboxする。

$ truffle unbox react

すると、次のようなディレクトリ構造が作られる。

truffle/contracts/SimpleStorage.sol が今回重要となるソースコードである。.sol という拡張子の通り、Solidityという言語で書かれている。

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;

contract SimpleStorage {
  uint256 value;

  function read() public view returns (uint256) {
    return value;
  }

  function write(uint256 newValue) public {
    value = newValue;
  }
}

Solidityに関する詳しい解説は省略するが、このSolidityでやっているのは下記の通りである。

  • SimpleStorage というコントラクトを定義
  • value という uint256 型の状態変数を用意
  • read() でvalue` の値を読み込む
  • write() で value 型の値をブロックチェーンに書き込む

状態変数とは、コントラクトの永続ストレージにデータを格納するためのものである。つまり、この例では write() を実行するたびにデータを格納するトランザクションが発生し、同時にガス代も発生する。変数を書き換えるためにお金を払う必要があるというブロックチェーンの仕組みは最初驚くことであろう。

public や view 等のワードも重要な意味を持つので、ぜひ調べてみて欲しい。

deploy

コントラクトをdeployするには truffle migrate --network (NetworkName) コマンドを使う。このコマンドを実行すると内部的にコンパイルも行われる。コンパイルだけしたい場合は truffle compile コマンドを使うと良い。

deployの際は、予めネットワークの設定が必要になる。詳しくは下記記事を参照して欲しい。

Infuraを利用してTruffleからRinkebyに接続してみる - koogawa blog

ここではテストネットであるRinkebyにdeployすることにする。

$ truffle migrate --network rinkeby

deployが成功すると、コントラクトアドレスやガス代などがコンソールに出力される。このログから、スマートコントラクトをdeployするだけでもお金が必要ということがわかる。deployされたスマートコントラクトはetherscanのサイトから参照できる。

https://rinkeby.etherscan.io/address/0x74c7382e11311530757bedb953d7f302cfaef417

実行

deployまでできたので、次はWebブラウザからコントラクトを実行してみる。client ディレクトリに移動して次のコマンドを入力し、Webサーバを起動しよう。

$ npm run start

自動的にブラウザが立ち上がり、localhost:3000 が表示される。

ためしに「write()」ボタンに適当な整数を入力し、マウスでクリックするとMetaMaskが起動する。

ガス代を確認し「確認」をクリックするとトランザクションが開始し、しばらくするとトランザクションが完了した通知が送られてくる。

これで SimpleStorage の value 、すなわちブロックチェーンにデータを書き込むことができたわけである🎉 「read()」をクリックすると、value が書き換わっていることが確認できるはずだ。

フロントエンドからどのようにスマートコントラクトを実行したのか、については client/src 以下をじっくり読んで、ところどころ書き換えてみると理解が深まると思う。

ガス代

今回はテストネットを利用したのでガス代を気にする必要はなかった。しかし、メインネットにコントラクトをdeployする場合はそれなりのEtherが必要になるの。じっくり開発環境でテストを実施してからdeployすることをおすすめする。

Infuraを利用してTruffleからRinkebyに接続してみる

Blockchain

マネージドイーサリアムノードのサービスプロバイダであるInfuraを利用して、TruffleからRinkebyに接続する設定をメモする。

Infuraサインアップ

まずは https://infura.io/register にアクセスして、アカウントを作成する。最初にプロジェクトを作成するが、名前は何でも良い。

「MANAGE KEY」を押すとAPI KEYが表示されるのでそれをメモする。

truffle-config.js

Truffleの設定ファイルである truffle-config.js を開き、networks: {} の中にRinkebyセクションを追加する。

    rinkeby: {
      provider: () => {
        return new HDWalletProvider(
          mnemonic,
          `https://rinkeby.infura.io/v3/${infuraProjectId}`
        );
      },
      network_id: "*"
    },

また、上の方にある

require('dotenv').config();
const mnemonic = process.env["MNEMONIC"];
const infuraProjectId = process.env["INFURA_PROJECT_ID"];

const HDWalletProvider = require('@truffle/hdwallet-provider');

の行もコメントアウトする。

見て分かる通り dotenv、HDWalletProvider を使うのでそれぞれインストールする。

npm install dotenv
npm install @truffle/hdwallet-provider

HDWalletProvider はデプロイプロセスで利用できるプロバイダを作成するためのライブラリである。プロバイダを作成するためには、InfuraのAPI KEYおよびシークレットリカバリーフレーズ（ニーモニックとも呼ばれる）にアクセスする必要がある。そこで、環境変数を使ってアクセスできるようにしておく。

！！注意：シークレットリカバリーフレーズは絶対に公開しないように！！

$ export MNEMONIC="<あなたのシークレットリカバリーフレーズ>”
$ export INFURA_PROJECT_ID="<INFURAのAPIKEY>”

ここまで設定すれば、truffle migrate --network rinkeby などのコマンドを用いてRinkebyに接続できるようになる。

#WWDC22 What's new in MapKit メモ

WWDC 位置情報

developer.apple.com

所感

  • pointOfInterestFilter、 showsBuildings、 showsTrafficなどdeprecated になるMKMapViewのプロパティがあるので、MapKit使っている開発者は見ておくべき
  • アップルさんのデモもUIKitで作られていたので、地図アプリはまだフルSwiftUIで作るのはしんどいのかもしれない
  • サンプルコードがとてもよくできているのでいちどビルドしてみるのをおすすめします

ツイートまとめ

#WWDC22 Hello Swift Charts メモ

SwiftUI iOS WWDC

developer.apple.com

所感

  • SwiftUIとの相性が良く、直感的に記述できそう
  • Apple標準ということでダークモード、voiceOver、Dynamic Type、ローカライズ、マルチプラットフォーム対応が楽そう
  • そろそろUIKitを選ぶ理由がなくなってきた気がする

ツイートまとめ