約1週間をかけ、CryptoZombiesをチャプター6まで終わりました。Solidity言語については、かなり勉強させていただきました。チャプター6のフロントエンド構築において、かなり手こずりました^^;フロントエンド構築で以前、Truffleのペットショップ作成のチュートリアルをやっていたのですが、やはりフロントエンドでweb3を叩き始める部分からかなり自分の知識が怪しいということを痛感していました。KnifeJavaScriptはサイトの見た目を動的に操作できるスクリプトみたいな感覚でした。-;ということで早速書籍購入してJavaScriptに慣れ親しんでいる最中です。(Promiseとか、そのあたり、知りませんでした^^;)前置きはさておき、Dappsのフロントエンドを構築する時に、一番シンプルな形でまずは理解をしようと考え、プリミティブなソースコードを考えて実装を行いましたので、その備忘録を綴っていこうと思います。作成するDappsDapssの構想カーシェアのユーザー登録システムみたいなものを作成したいと思います。(petshopのパクリです^^;)ボタンをおして、登録したときにスマートコントラクト内で保持する車の情報に登録した人のアカウントアドレス、レンタル時間、希望レンタル時間を管理してカーシェアをブロックチェーンのスマートコントラクトの契約で自動化できるのでは?と思います。フロントエンド(Webページ)に3台の車が表示されていて、ボタンがあり、それをクリックするとその人のアドレスが登録されるというアプリがいいですね。簡単なDapps構想は理想なので、まずは簡単な機能実装をしたいです。・ブロックチェーンのデータの読み出し・ブロックチェーンへデータの書き込みを体験するということなので、かなり簡略化したものを作成します。・駐車場サイトには登録アドレスの表示項目、「レンタル」ボタンを配置。・車のレンタルしている「アドレス」を格納できる。1がコントラクトからアドレスを取得する機能2がレンタル、というボタンを押すとコントラクトにアドレスを登録する機能です。1がブロックチェーンのデータの読み出し、2がブロックチェーンへデータの書き込みにそれぞれ今回の目標と対応しています。いうことで、まずはスマートコントラクトを作成していきましょう。動作環境truffle:スマートコントラクトを作成するために使用。ganache:ローカルのブロックチェーンを起動。一般的な、localhost:7545で起動します。MetaMask:web3プロバイダーとして使用。ネットワークをcustomでhttp://localhost:7545に設定して使用します。TTtruffleのフロントエンドは使用せずに、普通のWebサーバー(ローカルのフォルダtest-serverを作成して)にindex.htmlとweb3.jsを配置する、という最も原始的な方法にて作成しようと考えました。live-serverでローカルにwebサーバーを立ち上げて動作確認を行いました。live-serverでインストールしておいてください。ちなみに開発環境のパソコンはmacを想定していますので、windowsの方はtruffleファイルの取り扱い部分など、若干違う点があります。スマートコントラクトの作成truffleの新規プロジェクトを作成します。carshareという名前にします。プロジェクトの階層に移動しましょう。carsharetruffleのプロジェクトファイル一式をダウンロードします。init「carshare.sol」を作成してコントラクトを作成します。私はbracketsというテキストエディタで作成しました。作成した「carshare.sol」はプロジェクト内の「contracts」フォルダ内に配置します。//レンタル車の情報を格納するための構造体。//構造体の配列を管理する車の台数分確保。//コンストラクタでとりあえずデプロイ時のアカウントアドレスを入れておく。2);//仮引数の値が配列を上回らないかチェック。CarShare{}としました。Car{}は、構造体として宣言しました。笑シンプルにaddress型のrentalOwner変数のみ入れています。今後いつ登録したか、とか、色々変数を追加して車ごとにデータを管理できるようにするという点でも、構造体を使うメリットがあると思いました。車は3台管理したいので、構造体のCar型を配列で3個作成し、carsとしました。※3台分の配列を確保していますが、今回のフロントエンドでの連携は[0]の1台分しか使用しません。constructorによって、3台とも初期のrentalOwnerをデプロイした時の初期アドレスとします。adoptは、uint型の数値を仮引数としてとり、uint型の値を返すpublcな関数です。requireで仮引数の値が配列の3個よりも大きくならないようにしています。adoptで、仮引数で受けた番号の車にmsg.senderで関数を呼び出したアカウントのアドレスを代入します。このプログラムは、petshopをベースに、CryptoZombiesを見直しながら作成しました。して自分で考えて作ってみるとやっぱり色々な疑問が出てきて良いな、と感じました。超プリミティブなものを目指したので、セキュリティなどはまた次の段階で考えていきたいなと思います。(publicとかprivateを変数とかに指定しないといけないような気もするのでまた調べながらブラッシュアップしたいと思います。言っても、メインネットに宇宙のゴミみたいなのが増えるだけだと思いますが・・・)また、上記コントラクトファイルの他に、次のマイグレーションファイルを準備します。ファイル名は「2_deploy_contract.js」ファイル名の2_deploy_XXXと、ファイル名が重要になってきます。deployer.deploy(CarShare);};2_deploy_contract.jsさらに、今回はGanacheというローカルマシンにブロックチェーンを作ることができるアプリを起動してテストするため、truffle.jsには以下のようにlocalhostのIPと7545のポートを指定します。configuration!};truffle.jsコーディングしたらターミナルからコンパイルしましょう。compileエラーがでなければとりあえずスマートコントラクトの作成はOKです!さて、とうとうブロックチェーンにデプロイする時がきました。Ganacheを起動します。ダウンロードしてない人は以下のリンクからダウンロードしてくださいね。KnifeGanacheを起動すると、10個のアカウントが自動的に100イーサ所持して起動します。Ganacheは自動的にマイニングをするため、トランザクションを発行してもすぐにブロックチェーンに反映されるため、メインネットやテストネットのようにトランザクションがブロックに反映されるまで(15秒程度)待つ必要がありませんので便利です。デプロイを以下のコマンドで行います。migrateそうすると、Ganacheのインデックス0のアカウントのイーサが若干減っていることに気づくと思います。(下の図の赤枠の部分です。)ということで、次の投稿ではデプロイしたスマートコントラクトにアクセスするWebサイトを作成していきたいと思います。◆オススメの書籍ブロックチェーンの概要、スマートコントラクトの概要から、ビットコイン、イーサリアムの違い、イーサリアムのコントラクトを実装するための開発環境構築など、ブロックチェーンアプリケーションの入門にはもってこいの書籍です。クリップぱんだクリップ関連記事ブロックチェーン関連openzeppelin-solidityとフレームワーク名が変わっていた件についてイーサリアムのスマートコントラクトフレームワークOpenZeppelinをインストールするときに名称が新しくなっていたので、Webや書籍のサンプル等でどのように変更したかということを書いています。ブロックチェーン関連truffleでERC20トークン作成するtruffleでプロジェクトを作成し、ERC20トークンをコーディングしてtruffleのテストネットにデプロイするまでを行います。ブロックチェーン関連Gethのインストールから起動まで(mac)Go-Ethereumはブロックチェーンの仕組みなどを実際動かして体感できます。そのとき行った、インストールと起動の備忘録です。ブロックチェーン関連ブロックチェーン関連書籍レビューイーサリアムのスマートコントラクト開発に入門するべく購入した書籍のレビューを書きます。ブロックチェーン関連JavaScript初心者が、Dappsとそのフロントエンドを作りたい2JavaScriptをファッション感覚でしか使用したことのないプログラマのDappsフロントエンド作成奮闘備忘録です。solidityでコントラクト作成できるようになったのに、フロントエンド作成の世界の広さに脱帽したため、色々頑張る備忘録です。フロントエンド編です。ブロックチェーン関連DappsをXサーバーで動かすコントラクトのデータ取得とデータ書き込みをフロントエンドから行う、という内容で書いた記事のコントラクトをRopstenテストネットワークにデプロイしました。参考として記載させていただきます。フロントエンドのコ...スポンサーリンクContactForm7のカスタマイズ4点JavaScript初心者が、Dappsとそのフロントエンドを作りたい2ホームブロックチェーン関連パンダの中のパンダアラサーパンダ、2019年、10年ぶりにDTM再開しました。プログラムのこと、写真のこと、DTMのことなどを不定期にメモしたりします。日々コンテンツ作成にいそしみたいです。どこかで誰かの役に立つ情報になればと思います。写真ACにクリエーター登録しています。パンダの中のパンダさんのプロフィール|写真素材なら「写真AC」無料(フリー)ダウンロードOK無料写真素材を提供する「写真AC」のフリー写真素材は、個人、商用を問わず無料でお使いいただけます。クレジット表記やリンクは一切不要です。Web、DTP、動画などの写真素材としてお使いください。Audiostock(オーディオストック)「パンダの中のパンダ」さんが販売中のBGM(インスト)素材一覧ページです。「Audiostock」では、著作権ロイヤリティフリーの音楽素材が1100円から購入・ダウンロード可能です。35万点以上の高品質BGM・効果音・ボイス・歌もの曲素材や無料音楽素材がmp3やWAVの形式で購入できます。業務効率化pythonC#フォトストックホーム検索トップサイドバーパンダの中のパンダアラサーパンダ、2019年、10年ぶりにDTM再開しました。プログラムのこと、写真のこと、DTMのことなどを不定期にメモしたりします。日々コンテンツ作成にいそしみたいです。どこかで誰かの役に立つ情報になればと思います。写真ACにクリエーター登録しています。パンダの中のパンダさんのプロフィール|写真素材なら「写真AC」無料(フリー)ダウンロードOK無料写真素材を提供する「写真AC」のフリー写真素材は、個人、商用を問わず無料でお使いいただけます。クレジット表記やリンクは一切不要です。Web、DTP、動画などの写真素材としてお使いください。Audiostock(オーディオストック)「パンダの中のパンダ」さんが販売中のBGM(インスト)素材一覧ページです。「Audiostock」では、著作権ロイヤリティフリーの音楽素材が1100円から購入・ダウンロード可能です。35万点以上の高品質BGM・効果音・ボイス・歌もの曲素材や無料音楽素材がmp3やWAVの形式で購入できます。雑記WPプラグインアーカイブ2020年2月62020年1月72019年12月112019年11月52019年8月42019年7月42019年6月52019年4月42019年3月52019年2月32018年12月12018年7月22018年6月62018年5月72018年4月6タイトルとURLをコピーしました。