koogawa blog

iOS、Android、foursquareに関する話題

メインチェーンとサイドチェーン、そしてレイヤー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を選ぶ理由がなくなってきた気がする

ツイートまとめ

#WWDC22 Meet Apple Maps Server APIs メモ

WWDC 位置情報

developer.apple.com

所感

  • ジオコーディングは何年も前から使えたんだけど、これをServer APIで開放したイメージかな
  • 1日に25,000回まで利用可能。アップルさんがんばった（昔は1時間に2回しか使えなかった）
  • 25,000 は少ない！という声もあるけど、「超える場合は連絡してね」とのことなので、連絡してみたら良いのでは

ツイートまとめ

#WWDC22 Get to know Developer Mode メモ

Xcode WWDC iOS

developer.apple.com

所感

  • なぜDeveloper Modeが必要？というところをもうちょっと詳しく調べてみたい
  • とはいえ、不要な機能を開放しておく必要はないのは確かだよね
  • Distributionされたビルドでは不要とのことだけど、Adhocビルドはどうなんだろ？

ツイートまとめ