Web3 on MoeJue's Blog

Web3 オンチェーン紅包 DApp

Sat, 10 Jan 2026 14:02:35 +0000

これは100%分散型のブロックチェーンお年玉（レッドパケット）アプリケーションです。ユーザーはウォレットを接続し、金額と数量を設定してお年玉を送信し、リンクを通じて他の人と共有して受け取ることができます。すべてのデータと操作はブロックチェーンに基づいており、中央集権型サーバーは一切不要で、プロセス全体が安全、透明、追跡可能です。

興味があれば、GitHubで私のコードをご覧ください：redpacket‑dapp

機能ハイライト

🧧 お年玉の送信: ウォレットを接続後、金額と数量を設定してブロックチェーンにお年玉を送信します。
🎁 お年玉の受け取り: 共有リンクを通じて、他の人はウォレットを接続してブロックチェーンから直接お年玉を受け取ることができます。
🔗 スマートコントラクト: Solidityで書かれた安全なスマートコントラクトがすべてのロジックを処理します。
🌐 マルチチェーン対応: ローカルテストネットとBSCテストネットをサポートします。
💼 Web3統合: MetaMaskウォレットを使用して接続します。
🚀 完全分散型: バックエンドサーバーがなく、すべてのデータはブロックチェーンに保存されます。

技術スタック

フロントエンド：React 19、React Router 6、TypeScript、Vite、Ethers v6
コントラクト層：Hardhat、Solidity 0.8.x
ツール：ESLint、Prettier
バックエンド不要: サーバーへの依存なし ❌

クイックスタート

# 1. プロジェクトの依存関係をインストール
npm install
cd react-dapp && npm install && cd ..

# 2. ローカルブロックチェーンノードを起動
npm run node

# 3. スマートコントラクトをコンパイル
npx hardhat compile

# 4. スマートコントラクトをデプロイ
npm run deploy

# 5. フロントエンドを起動
npm run frontend

ディレクトリ構造

redpacket-web3/
├─ contracts/                # Solidity スマートコントラクト
│  └─ RedPacket.sol
├─ react-dapp/               # React + Vite フロントエンド
│  ├─ src/
│  │  ├─ components/         # 共通コンポーネント（ウォレットボタン、作成フォームなど）
│  │  ├─ config/             # ABI、コントラクトアドレス設定
│  │  ├─ hooks/              # カスタムフック（useWallet）
│  │  ├─ pages/              # ページ（Home、ClaimPacket）
│  │  ├─ styles/             # グローバルスタイル
│  │  ├─ utils/              # Web3 ユーティリティ関数
│  │  └─ App.tsx             # ルーティングとレイアウト
│  ├─ .env.example           # フロントエンドに必要な環境変数説明
│  └─ package.json
├─ scripts/
│  └─ deploy.js              # Hardhat デプロイスクリプト（自動的にフロントエンド設定に書き込みます）
├─ hardhat.config.js
└─ package.json              # ルートディレクトリのスクリプト（Hardhat + フロントエンドをワンクリックで起動）

使用ガイド

お年玉の作成

フロントエンドを開き、右上の「ウォレットを接続」をクリックします。
お年玉の総額と個数を入力すると、アプリケーションがフロントエンドで金額をランダムに分割します。
送信後、MetaMaskでトランザクションを確認し、ブロックの承認を待ちます。
成功後、システムが生成した受け取りリンクをコピーして友人と共有できます。

お年玉の受け取り

共有リンク（URLに /claim/{packetId} が含まれる）を開きます。
同様にまずウォレットを接続し、「クリックして受け取る」をクリックします。
署名確認後、ブロックのパッケージングを待ち、ページに結果と残り個数が表示されます。

環境変数

dapp/.env（開発環境では自動的に無視されます。.env.exampleを参照してください）
- VITE_RPC_URL：フロントエンドが直接接続するノードRPC、デフォルトは http://127.0.0.1:8545
- VITE_CONTRACT_ADDRESS：デプロイスクリプトによって書き込まれたアドレスを上書きできます。
- VITE_CHAIN_ID：フロントエンドが使用するチェーンID（16進数）
root/.env：Hardhatで秘密鍵やBSC RPCを参照する必要がある場合は、既存の記述をそのまま使用できます。

スマートコントラクト（RedPacket.sol）

コアメソッド：

マルチチェーン対応は、想像以上に複雑だ

Sat, 05 Jul 2025 08:20:55 +0000

初めてのマルチチェーンウォレット統合の実践的考察

ようやく時間ができてコードを整理できるようになりました。Web3プロジェクトでマルチチェーンウォレット接続機能を導入する際、主にEthereum、Polygon、BSC、Solanaが関わってきます。一見すると「互換性のあるロジックをいくつか追加するだけ」のように思えますが、実際に実装してみると、多くのことが思ったほど単純ではないと気づきました。

this.networkConfigs = {
    ethereum: {
        chainId: '0x1', // 1
        chainName: 'Ethereum Mainnet',
        nativeCurrency: {
            name: 'Ethereum',
            symbol: 'ETH',
            decimals: 18
        },
        rpcUrls: ['https://eth-mainnet.public.blastapi.io'],
        blockExplorerUrls: ['https://etherscan.io']
    },
    polygon: {
        chainId: '0x89', // 137
        chainName: 'Polygon Mainnet',
        nativeCurrency: {
            name: 'MATIC',
            symbol: 'MATIC',
            decimals: 18
        },
        rpcUrls: ['https://polygon-rpc.com'],
        blockExplorerUrls: ['https://polygonscan.com']
    },
    bsc: {
        chainId: '0x38', // 56
        chainName: 'BNB Smart Chain',
        nativeCurrency: {
            name: 'BNB',
            symbol: 'BNB',
            decimals: 18
        },
        rpcUrls: ['https://bsc-dataseed.binance.org'],
        blockExplorerUrls: ['https://bscscan.com']
    }
}

マルチチェーンは単に「複数のウォレットをサポートする」ことではない

最も強く感じたのは、チェーンが異なればウォレットのインタラクション方法も異なり、SDKの考え方すら違うということです。イーサリアムエコシステムでは統一されたWeb3.jsで多くのロジックを処理できますが、Solanaになると、完全に別のシステムであることがわかります。プロバイダーの接続、接続フロー、PublicKeyの構築方法が異なり、ネットワークの遅延や安定性までもがユーザー体験に影響を与えます。

Web3.0とは何か？ブロックチェーンとの関係は？

Mon, 17 Jun 2024 12:59:22 +0000

また一つ、よくわからない言葉が出てきましたね-_-。以下に要点をまとめてみました。

web3.0とは何か

Web 3.0（Web3）は、次世代のインターネットの発展方向であり、より分散化され、ユーザーがコントロールし、データが保護されるネットワーク環境を構築することを目指しています。これまでのWeb 1.0（静的なウェブページ）やWeb 2.0（動的でインタラクティブなウェブページやソーシャルメディア）とは異なり、Web 3.0の核心的な理念と技術には以下の側面が含まれます。

非中央集権化：

ブロックチェーン技術：Web 3.0の核心はブロックチェーン技術であり、すべての取引やデータの変更を記録する分散型台帳を提供します。これは、データが単一の中央サーバーによって管理されるのではなく、複数のノードに分散されることを意味します。
分散型アプリケーション（DApps）：これらのアプリケーションはブロックチェーンネットワーク上で実行され、中央集権的な管理者が存在しません。DAppsのユーザーは、仲介機関を介さずに直接取引や対話を行うことができます。

ユーザーコントロールとデータ保護：

自己主権型アイデンティティ：Web 3.0では、ユーザーは自身のデジタルアイデンティティとデータを完全にコントロールできます。暗号技術を通じて、ユーザーは誰が自分のデータにアクセスできるか、またそのデータをどのように使用するかを決定できます。
データ所有権：ユーザーのデータは分散型ネットワーク上に保存され、大手企業による集中管理ではなく、ユーザー自身がデータの所有権を持ちます。

スマートコントラクト：

自動実行プロトコル：スマートコントラクトは、ブロックチェーン上で実行される自動化されたプロトコルであり、特定の条件が満たされると自動的に実行されます。この技術は、金融取引、サプライチェーン管理、法的な契約など、さまざまなシーンで利用できます。
相互運用性：Web 3.0は、異なるブロックチェーンや分散型ネットワーク間の相互運用性を実現し、データや資産が異なるプラットフォーム間でシームレスに移動できるようにすることを目指しています。

トラストレスと透明性：

トラストレスなメカニズム：Web 3.0はブロックチェーン技術を通じてトラストレスなメカニズムを実現します。つまり、参加者はお互いを信頼したり、第三者の仲介者に依存したりすることなく、安全な取引や対話を行うことができます。
透明性：すべての取引やデータの変更はブロックチェーン上に記録され、公開され透明であり、改ざん不可能です。これにより、信頼性とセキュリティが向上します。

Web 3.0の応用シーン

分散型金融（DeFi）：スマートコントラクトとブロックチェーン技術を通じて、貸付、取引、投資などの仲介者を必要としない金融サービスを提供します。
デジタルアイデンティティ：ユーザーは自身のデジタルアイデンティティを作成・管理し、個人データのアクセスと使用をコントロールできます。
サプライチェーン管理：ブロックチェーン技術を通じて、サプライチェーンの透明性と追跡可能性を実現し、偽造や詐欺を防止します。
コンテンツ制作と配信：アーティスト、ミュージシャン、作家は、直接視聴者と対話し取引を行うことで、より公平な収益分配を得ることができます。

では、ブロックチェーンとは何か？

ブロックチェーン技術は、分散型台帳技術（Distributed Ledger Technology, DLT）の一種であり、取引や情報を記録するための改ざん不可能で非中央集権的なデータベースです。ブロックチェーン技術の核心的な考え方は、非中央集権的な方法でデータの安全性、透明性、信頼性を実現することです。

ブロックチェーンの基本原理

ブロック（Block）：
- ブロックは取引記録を含むデータパッケージです。各ブロックには複数の取引と、そのブロックを一位に識別するためのハッシュ値が含まれています。
- ブロックには前のブロックのハッシュ値も含まれており、これによりすべてのブロックが鎖のようにつながり、ブロックチェーンを形成します。
チェーン（Chain）：
- ブロックはハッシュ値によって相互に連結され、チェーン構造を形成します。各ブロックが前のブロックのハッシュ値を含むため、ブロックチェーン内のデータを改ざんすることは非常に困難です。
- あるブロックのデータを変更しようとすると、そのブロックおよびそれに続くすべてのブロックのハッシュ値が変化するため、これらすべてのブロックのハッシュ値を再計算する必要があり、これはほぼ不可能です。
非中央集権化（Decentralization）：
- ブロックチェーンネットワーク内のすべてのノード（コンピュータ）は、ブロックチェーンの完全なコピーを保持しており、これらのコピーはコンセンサスメカニズムによって一貫性が保たれています。
- 中央機関がブロックチェーンを管理・制御することはなく、データはすべてのノードによって共同で維持されます。
コンセンサスメカニズム（Consensus Mechanism）：
- ブロックチェーンネットワークは、すべてのノードがブロックチェーンの状態について合意に達することを保証するためにコンセンサスメカニズムを使用します。一般的なコンセンサスメカニズムには、プルーフ・オブ・ワーク（Proof of Work, PoW）やプルーフ・オブ・ステーク（Proof of Stake, PoS）があります。
- プルーフ・オブ・ワーク（PoW）：マイナーが複雑な数学的問題を解くことで取引を検証し、ブロックチェーンに追加します。問題を解くには大量の計算能力が必要であり、これによりブロックチェーンのセキュリティが確保されます。
- プルーフ・オブ・ステーク（PoS）：バリデーターが保有する暗号資産の量やその他の要因に基づいて取引を検証し、それに応じた報酬を得ます。
暗号技術（Cryptography）：
- ブロックチェーンは、データの安全性とプライバシーを確保するために暗号技術を使用します。各取引は公開鍵と秘密鍵を使用して署名・検証され、正当な所有者のみが取引を開始できるようにします。

ブロックチェーンのメリット

セキュリティ：
- データは複数のノードに分散されているため、単一障害点がなく、攻撃者がデータを改ざんすることは困難です。各ブロックには前のブロックのハッシュ値が含まれており、一つのブロックを改ざんするにはチェーン全体を変更する必要があるため、コストが非常に高くなります。
透明性：
- ブロックチェーン上のすべての取引記録は公開されており、誰でも閲覧できます。取引記録は改ざん不可能であり、システムの透明性と信頼性を高めます。
非中央集権化：
- 中央管理機関が存在せず、すべてのノードが平等にネットワークの維持・管理に参加するため、単一の支配や権力の集中を防ぎます。
改ざん耐性：
- データが一度ブロックチェーンに書き込まれると、それを改ざんすることは非常に困難であり、データの完全性と真正性が保証されます。

ブロックチェーンの応用シーン

暗号資産（仮想通貨）：
- ビットコイン（Bitcoin）は、最初で最も有名なブロックチェーンアプリケーションであり、非中央集権的な方法でピアツーピアの電子現金システムを実現します。
- イーサリアム（Ethereum）は、暗号資産の取引だけでなく、スマートコントラクトの実行もサポートしており、ブロックチェーンの応用範囲を広げています。
サプライチェーン管理：

Web3.0ベースのブロックチェーン画像アップロード

Mon, 17 Jun 2024 12:57:43 +0000

始める前に、まず基本的な概念を簡単に理解しましょう。以下のいくつかの点にまとめました。Web3.0とは何か、ブロックチェーンとどのような関係があるのか？（前回の記事がここで役立ちますね）

要件：PythonベースのWeb 3.0画像アップロードシステムを開発します。このシステムは、ユーザーが画像をアップロードし、その画像を分散型ネットワークに保存し、同時にトランザクション情報をブロックチェーンに記録することを可能にします。もともとは遊びで書いていたもので、ユーザー認証やファイル操作を統合した完全な管理システムにして、「画像アップロードサービスの最終的な解決策」にしようと考えたこともありましたが、実際にやってみるとあまり現実的ではないことに気づき、断念しました。しかし、私は昔から画像にこだわりがあるのです。

ステップの概要

環境設定：Pythonを使用して開発し、必要なPythonライブラリをインストールします。
IPFS統合：画像をIPFSにアップロードし、画像のCID（Content Identifier）を取得します。
ブロックチェーン統合：IPFSのCIDをブロックチェーンに記録します。
Webインターフェース：Flaskを使用して、ユーザーが画像をアップロードできるWebインターフェースを作成します。

詳細なステップ

1. 環境設定

必要なPythonライブラリをインストールします：

pip install flask web3 ipfshttpclient

2. IPFS統合

IPFS（InterPlanetary File System）は、ピアツーピアのファイルストレージプロトコルです。ipfshttpclientライブラリを使用してIPFSネットワークと対話できます。

まず、IPFSノードをインストールして実行していることを確認してください。まだIPFSをインストールしていない場合は、IPFS公式サイトでインストールガイドを見つけることができます。

以下は、画像をIPFSにアップロードするコード例です：

import ipfshttpclient

def upload_to_ipfs(file_path):
    client = ipfshttpclient.connect('/ip4/127.0.0.1/tcp/5001')
    res = client.add(file_path)
    return res['Hash']

3. ブロックチェーン統合

web3.pyライブラリを使用してIPFSのCIDをブロックチェーンに記録します。ここではイーサリアム（Ethereum）をサンプルブロックチェーンとして使用します。

以下は、IPFSのCIDを保存するための簡単なスマートコントラクトの例です：

pragma solidity ^0.8.0;

contract IPFSStorage {
    mapping(address => string[]) public userCIDs;

    function storeCID(string memory cid) public {
        userCIDs[msg.sender].push(cid);
    }

    function getCIDs() public view returns (string[] memory) {
        return userCIDs[msg.sender];
    }
}

このコントラクトをコンパイルしてデプロイした後、以下のPythonコードを使用してスマートコントラクトと対話します：