Solidity Compiler IDE

Name: Solidity Compiler IDE
Author: nirholas

ローカル

github.com/nirholas開発ツール283 週間前に更新

リポジトリ

Solidity Compiler IDE について

Lyra Web3 Playground は、ブラウザーで動作するオープンソースの Web3 学習・開発プラットフォームです。Solidity IDE、Web サンドボックス、テンプレート、チュートリアルを備え、初心者や Web 開発者、学生、教育者を対象としています。npm でローカル実行できます。

主な機能

01複数のコンパイラーバージョンに対応したブラウザー版 Solidity IDE
02HTML、React、Vue、Python に対応した Web サンドボックス
0340 以上のスマートコントラクトテンプレート
0450 以上のインタラクティブなチュートリアル
05ウォレット不要の JavaScript VM へのデプロイ
06多言語インターフェースとアクセシビリティ機能

活用シーン

01ブラウザー上でコントラクトをコンパイル・デプロイし Solidity を学習する
02テンプレートを使って dApp のプロトタイプを作成する
03インタラクティブな例を使ってブロックチェーンを教える

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

インストール方法は未掲載です

このサーバーのパッケージやリモートエンドポイントはまだ取得できていません。プロジェクトの README の手順に従ってください。

リポジトリ

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

Lyra Web3 Playground

✨ 制作: nich | GitHub | X/Twitter

[![Repository](https://img.shields.io/badge/source-github-blue)](https://github.com/nirholas/lyra-web3-playground) [![TypeScript](https://img.shields.io/badge/TypeScript-5.0-blue)](https://www.typescriptlang.org/) [![React](https://img.shields.io/badge/React-18-61dafb)](https://react.dev/) [![Accessibility](https://img.shields.io/badge/a11y-WCAG%202.1%20AAA-purple)](docs/ACCESSIBILITY.md) [![i18n](https://img.shields.io/badge/i18n-10%20languages-orange)](docs/ARCHITECTURE.md) [![Author](https://img.shields.io/badge/Author-nich-ff69b4)](https://x.com/nichxbt)

包括的なオープンソースの Web3 学習プラットフォーム。 プロフェッショナルな開発環境、AI 支援ツール、セキュリティテスト、コラボレーション機能を、すべてブラウザ上で利用できます。

GitHub でソースを入手

ホスティングに関する注意: lyra.works のホスト版デモは、ホスティングの移行中のため現在オフラインです。リポジトリをクローンして npm install && npm run dev を実行すると、以下のすべての環境を http://localhost:3000 で利用できます。

🛠️ 開発環境

プロフェッショナル IDE

ツール	説明	リンク
Web Sandbox	React、Vue、Python、ライブプレビュー、Vim モードを備えたフル機能の Web IDE	`/ide?type=web`
Solidity IDE	マルチバージョンコンパイラ（0.6.x ～ 0.8.24）を備えたスマートコントラクト IDE	`/ide?type=solidity`
Full-Stack Playground	コントラクト + フロントエンド + ライブプレビューで完全な dApp を構築	`/fullstack-demo`
Interactive Sandbox	AI アシスタント、テンプレート、テストネットデプロイを備えた IDE	`/sandbox`

Innovation Lab（実験的）

http://localhost:3000/innovation を開くか、サンドボックスで「Innovation Mode」を有効にしてください:

機能	能力
AI Code Whisperer	リアルタイムの脆弱性検出、音声操作、自動修正の提案
Contract Time Machine	バージョン履歴、ブランチ、状態シミュレーション
Security Testing Lab	リエントランシー、フラッシュローン、オーバーフロー攻撃に対してコントラクトをテスト
Collaborative Arena	AI チームメイトとコーディングし、チャレンジに参加
Neural Gas Oracle	ML を活用したガス予測と最適化
Cross-Chain Deployer	自動ブリッジ設定で 8 以上のチェーンにデプロイ

♿ アクセシビリティ（WCAG 2.1 AAA）

包括的なアクセシビリティサポート:

機能	説明
Dwell Click	ホバーでクリック — マウスボタンは不要
Reading Guide	カーソル位置に追従する水平線
Color Blind Filters	1型色覚、2型色覚、3型色覚に対応
Text-to-Speech	速度・ピッチを調整してコンテンツを読み上げ
Cognitive Support	簡易モード、フォーカスモード、タイムアウトの延長
Code-to-English	Solidity を平易な英語の説明に翻訳

完全なドキュメントについては ACCESSIBILITY.md を参照してください。

すべてのツールへのクイックアクセス

ツール	URL	説明
IDE Hub	`/ide`	Web Sandbox または Solidity IDE を選択
Web Sandbox	`/ide?type=web`	HTML/CSS/JS/React/Vue/Python IDE
Solidity IDE	`/ide?type=solidity`	スマートコントラクト開発
Interactive Sandbox	`/sandbox`	AI アシスタント付きサンドボックス
Contract Playground	`/playground`	テンプレートベースのコントラクトエディタ
Learning Playground	`/learn`	インタラクティブなチュートリアル
Full-Stack Demo	`/fullstack-demo`	コントラクト + フロントエンドビルダー
Innovation Lab	`/innovation`	実験的な AI 機能
Markets	`/markets`	リアルタイムの暗号資産価格と DeFi データ
Explore	`/explore`	コミュニティプロジェクトのギャラリー

🎯 これは誰向けですか？

あなたは...	Lyra ができること...
🌱 まったくの初心者	ステップバイステップのチュートリアルで Solidity を学べます
💻 Web 開発者	使い慣れたツールで Web3 に移行できます
🎓 学生	ガス代をかけずにスマートコントラクトを練習できます
🔧 ビルダー	テンプレートを使って dApp をすばやくプロトタイプできます
👩‍🏫 教育者	インタラクティブな例でブロックチェーンを教えられます

⚡ 30 秒で始める

npm install && npm run dev を実行し、以下のオプションを 1 つ選んでください。

オプション 1: チュートリアルを閲覧する

http://localhost:3000 を開きます
任意のチュートリアルまたは例をクリックします
すぐにコーディングを始められます

オプション 2: Solidity IDE を試す

http://localhost:3000/ide を開きます
スマートコントラクトを書くか貼り付けます
「Compile」をクリックしてから「Deploy」をクリックします（JavaScript VM を使用するため、ウォレットは不要です）

オプション 3: チュートリアルに沿って進める

http://localhost:3000 を開きます
「Learn Web3 Development」までスクロールします
自分のレベルに合ったチュートリアルを選びます

🎮 ここでは何ができますか？

学習のために

📖 50 以上のチュートリアル — 「ブロックチェーンとは何か？」から高度な DeFi まで
🎯 インタラクティブな例 — 読むそばからコードが実行されます
💡 即時フィードバック — エラーと結果をすぐに確認できます
🏆 進捗の記録 — 前回の続きから再開できます

構築のために

⚡ Solidity IDE — 数秒でコンパイルとデプロイができます
📝 40 以上のテンプレート — トークン、NFT、DAO、DeFi
🤖 AI dApp ビルダー — 作りたいものを説明するとコードが生成されます
🔗 マルチチェーン — Ethereum、Polygon、Base、Arbitrum など

すべての人に

🌍 10 言語 — 英語、スペイン語、中国語、アラビア語など
♿ 完全なアクセシビリティ — スクリーンリーダー、キーボード操作、色覚サポート
🌙 ダークモード — 目にやさしい
📱 モバイル対応 — どんなデバイスでも学習できます

📚 学習パス

🌱 ブロックチェーンは初めてです

ホームページ (/) の「What is Ethereum?」チュートリアルから始めます
「Your First Smart Contract」(/) に進みます
Hello World の例 (/example/hello-world) を試します

💻 JavaScript はわかるので、Solidity を教えてください

ホームページ (/) の「Solidity for JS Developers」を読みます
JavaScript と Solidity を並べて比較します (/)
Simple Token を構築します (/example/erc20-token)

🚀 dApp を構築したいです

ホームページ (/) の AI dApp ビルダーを使ってアイデアを説明します
または IDE (/ide) のテンプレートから始めます
テストネットにデプロイしてコミュニティと共有します

✨ 機能

🎮 プレミアムコードサンドボックス（新機能！）

世界クラスの IDE — CodePen、JSFiddle、Remix に匹敵します
Web サンドボックス: HTML、CSS、JS、React、Vue、Python を使ったマルチファイルプロジェクト
Solidity IDE: フル機能のスマートコントラクト開発環境
分割ペインレイアウト — ドラッグでサイズ変更できます
デバイスプリセット — レスポンシブテスト用（デスクトップ／タブレット／モバイル）
変更時の自動実行 — ライブプレビュー付き
コンソールパネル — log／warn／error をキャプチャします
設定パネル: テーマ、フォントサイズ、Vim モード、自動保存など

🎮 インタラクティブコードプレイグラウンド (`/playground`)

マルチファイルエディタ — ファイルタブ付き（HTML、CSS、JS、Solidity、JSON など）
デュアルペインレイアウト — ライブホットリロードプレビュー付き
コンソールキャプチャ — コードからの console.log/warn/error をリアルタイムで確認できます
ファイル管理 — ファイルの作成、削除、切り替えができます
AI によるコントラクト生成 — 自然言語のプロンプトから生成します
40 以上のスマートコントラクトテンプレート — すぐにデプロイできます
ワンクリックデプロイ — 対応する任意のブロックチェーンへ

🔧 Solidity 開発（新機能！）

複数の Solidity バージョン（0.6.x ～ 0.8.24）
リアルタイムコンパイル — エラー／警告をハイライト表示します
任意のネットワークへデプロイ（JS VM、Sepolia、Goerli、Mumbai、Mainnet）
インタラクティブなコントラクト UI — 関数を直接呼び出せます
トランザクション履歴 — ガスの追跡付き
ABI／Bytecode をコピー — ワンクリックで
キーボードショートカット（Ctrl+S でコンパイル）

🛠️ フルスタックサンドボックス (`/sandbox`)

ファイルツリーナビゲーションとワークスペース管理
HTML/CSS/JS プロジェクト向けのライブホットリロード付きWeb プレビューパネル
プレビュー iframe からのコンソールログキャプチャ
デプロイ済みスマートコントラクト向けのコントラクト操作パネル
コード提案のためのAI アシスタント統合
イノベーションモード — AI Whisperer、Time Machine、Exploit Lab などの実験的機能
ワークスペースのエクスポート/共有をワンクリックで

📚 スマートコントラクトテンプレート

カテゴリ別の40 以上のすぐに使えるテンプレート:
- ERC-20、ERC-721、ERC-1155 トークン
- DeFi (ステーキング、ボールト、DEX)
- NFT マーケットプレイスとミンティング
- ガバナンスと DAO
- クロスチェーンブリッジ

📖 充実したチュートリアル

初心者から上級者まで対応する50 以上のチュートリアル [進行中]
インタラクティブな例を交えたステップバイステップガイド
トピック: Solidity の基礎、DeFi の仕組み、セキュリティパターン、ガス最適化

🔗 マルチチェーン対応

Ethereum、Base、Polygon、Avalanche、BSC、Arbitrum
Solana 統合
Monad テストネット対応

🧹 トークン統合ツール

ウォレット間のダストトークンをスイープ
マルチチェーンのトークン管理
ガス効率の良いバッチ操作

🎨 モダンな UI/UX

ダーク/ライトモード
完全レスポンシブデザイン
パワーユーザー向けのキーボードショートカット
ボトムナビゲーションによるモバイル最適化

♿ アクセシビリティ - WCAG 2.1 AAA を超えて (新機能!)

私たちは標準的なアクセシビリティをはるかに超えています。私たちのシステムには、Web3 を真にすべての人にとってアクセシブルにする未来的な機能が含まれています:

クイックプロファイル (ワンクリックプリセット):

👓 弱視 • 🦯 全盲 • 🦻 聴覚障害 • 🖐️ 運動障害 • 🧠 認知

視覚機能:

ハイコントラストモード、大きなテキスト (最大 200%)、カスタムカラー
色覚異常フィルター: 1型色覚、2型色覚、3型色覚など
リーディングガイド: カーソルを追従する水平線で読みやすく
OpenDyslexic フォント: ディスレクシアの読者向けに特別に設計

運動アクセシビリティ:

ドウェルクリック: ホバーでクリック - マウスボタン不要
大きなクリックターゲット (最大 64px)、スティッキーキーシミュレーション
Alt+A のクイックアクセスによる完全なキーボードナビゲーション

認知サポート:

シンプルインターフェースモード、フォーカスモード、アニメーションの削減
タイムアウトの延長、読書速度の調整
明確で一貫したレイアウト

スクリーンリーダーとオーディオ:

ARIA ライブリージョンがすべてのアクションを通知
テキスト読み上げ: 調整可能な速度/ピッチでコンテンツを読み上げ
コードから自然言語へ: コードを平易な英語に翻訳

開発者向け:

ドラッグ可能なフローティングアクセシビリティボタン
カスタム設定のエクスポート/インポート
完全なキーボードショートカット対応

完全なドキュメントは ACCESSIBILITY.md をご覧ください

🤖 AI 搭載 dApp ビルダー (新機能!)

自然言語 → フルスタック dApp の生成
プロンプトから Solidity + HTML + CSS + JavaScript を生成
スマートコントラクトテンプレート: トークン、NFT、DAO
ステップバイステップのガイダンス付きインタラクティブなチュートリアル形式エディター
テストネットへの直接デプロイ

🌐 コミュニティ機能 (新機能!)

プロジェクトの共有: ユニークな共有リンクで作品を公開
ギャラリーの探索: コミュニティのプロジェクト、テンプレート、チュートリアルを発見
いいねとコメント: 他の開発者の作品と交流
プロジェクトのフォーク: 他の人のコードを基に構築
ウォレット認証: ウォレットを接続してコミュニティ機能にアクセス
コードの埋め込み: 共有プロジェクトを自分のウェブサイトに埋め込み

🌍 国際化 (新機能!)

10 言語をすぐにサポート
英語、スペイン語、中国語、フランス語、ドイツ語、日本語、韓国語、ポルトガル語、ロシア語、アラビア語
アラビア語向けの RTL サポート
ナビゲーションの言語セレクター
言語設定の永続化

📊 マーケットデータ統合 (新機能!)

暗号資産のライブ価格: CoinGecko からのリアルタイムデータ
DeFi 分析: DeFiLlama からのプロトコル TVL、利回り
チェーン統計: チェーン別 TVL、トレンドコイン
マーケットページ: /markets での包括的なマーケット概要

🚀 クイックスタート

前提条件

Node.js 18+
npm または yarn

インストール

# Clone the repository
git clone https://github.com/nirholas/lyra-web3-playground.git
cd lyra-web3-playground

# Install dependencies
npm install

# Start development server
npm run dev

ブラウザで http://localhost:3000 を開きます。

環境変数

このアプリは設定なしでも動作しますが、ウォレットログイン、バックエンド API、RPC アクセス、および Supabase を利用する機能には認証情報が必要です。サンプルファイルをコピーして値を入力してください:

cp .env.example .env

変数	用途
`VITE_PRIVY_APP_ID`	ウォレット / メールログインに使用する Privy アプリケーション ID
`VITE_API_URL`	バックエンド API のベース URL（デフォルトは `http://localhost:3001`）
`VITE_INFURA_API_KEY`	読み取り専用の RPC 呼び出し用の Infura プロジェクト ID
`VITE_SUPABASE_URL`	Supabase プロジェクト URL
`VITE_SUPABASE_ANON_KEY`	Supabase の anon（公開）キー

VITE_ プレフィックスが付いた値はすべてクライアントバンドルにインライン展開されるため公開されます。秘密鍵やサーバーのシークレットを .env に絶対に記載しないでください。サーバー側のシークレットは server/.env に記載します（server/.env.example を参照）。

本番用ビルド

npm run build
npm run preview

🏗️ プロジェクト構成

├── src/
│   ├── components/     # React components
│   │   ├── Accessibility/    # Comprehensive a11y system
│   │   │   ├── AccessibilityButton.tsx  # Floating button
│   │   │   ├── AccessibilityPanel.tsx   # Settings panel
│   │   │   ├── DwellClick.tsx           # Click-by-hovering
│   │   │   ├── ReadingGuide.tsx         # Line highlighter
│   │   │   └── ColorBlindFilters.tsx    # Color blind support
│   │   ├── CodePlayground/   # Monaco editor & compiler
│   │   ├── Tutorial/         # Tutorial system
│   │   ├── Sandbox/          # Premium sandbox IDEs
│   │   │   ├── WebSandbox.tsx       # Web dev sandbox
│   │   │   ├── SoliditySandbox.tsx  # Solidity IDE
│   │   │   ├── UnifiedSandbox.tsx   # Generic sandbox wrapper
│   │   │   └── ShareModal.tsx       # Project sharing modal
│   │   ├── Playground/       # Full-stack dApp playground
│   │   ├── FullStackPlayground/  # AI dApp builder
│   │   └── Consolidation/    # Token consolidation
│   ├── pages/          # Route pages
│   │   ├── SandboxPage.tsx   # Premium IDE selection
│   │   ├── ExplorePage.tsx   # Community project gallery
│   │   ├── SharedProjectPage.tsx  # View shared projects
│   │   ├── MarketsPage.tsx   # Market data dashboard
│   │   └── ExamplePage.tsx   # Example with sandbox toggle
│   ├── services/       # API services
│   │   ├── community.ts      # Sharing, likes, comments, forks
│   │   └── marketData.ts     # CoinGecko & DeFiLlama integration
│   ├── hooks/          # Custom React hooks
│   │   └── useMarketData.ts  # Market data hooks
│   ├── stores/         # Zustand state management
│   │   ├── accessibilityStore.ts  # 40+ a11y settings
│   │   ├── i18nStore.ts           # 10 languages + RTL
│   │   ├── themeStore.ts          # Dark/light mode
│   │   └── walletStore.ts         # Wallet connection
│   ├── styles/
│   │   ├── index.css             # Main styles
│   │   └── accessibility.css     # 580+ lines a11y CSS
│   ├── examples/       # Code examples (web3, ai)
│   └── utils/          # Helper functions
│       └── contractTemplates.ts  # 40+ contract templates
├── server/             # Backend API (optional)
├── docs/               # Documentation
└── public/             # Static assets

🛠️ 技術スタック

カテゴリ	技術
フロントエンド	React 18、TypeScript、Vite
スタイリング	TailwindCSS
エディター	Monaco Editor
Web3	ethers.js v6、viem
状態管理	Zustand（persist 使用）
i18n	カスタムストア（10 言語 + RTL）
アクセシビリティ	カスタム a11y システム（WCAG 2.1 AAA+）
データベース	Supabase
テスト	Vitest
デプロイ	Vercel、Netlify、Docker

📖 ドキュメント

ドキュメント	説明
はじめに	ブロックチェーンが初めての方はここから！
クイックスタートガイド	ローカルで起動して実行する
IDE ガイド	すべての開発環境と URL
サンドボックスガイド	プレミアムサンドボックス機能
イノベーションラボ	AI と実験的な機能
プレイグラウンド	すべてのプレイグラウンドコンポーネント
アーキテクチャ概要	システム設計
バックエンド API	API リファレンス
デプロイガイド	独自のインスタンスをデプロイする
セキュリティ	セキュリティの実践
アクセシビリティ	A11y の機能と使用方法

❓ よくある質問

何かインストールする必要はありますか？

いいえ！ npm run dev を実行し、ブラウザで http://localhost:3000 を開くだけです。すべてブラウザ上で動作します。

暗号資産やウォレットは必要ですか？

いいえ！暗号資産がなくても学習と練習ができます。IDE にはブロックチェーンをローカルでシミュレートする「JavaScript VM」モードがあります。実際にデプロイする準備ができたら、MetaMask とテストネットの ETH（無料）が必要になります。

これは無料ですか？

はい、無料で実行できます。隠れた費用もプレミアムプランもありません。利用条件については LICENSE ファイルをご覧ください。

エラーが出ます。どうすればいいですか？

エラーメッセージを確認してください - 通常は何が問題なのかが書かれています
Solidity のバージョンがコードと一致していることを確認してください
よくある問題については /faq を確認してください
解決しない場合はissue を作成してください

自分の授業やワークショップで使えますか？

もちろんです！これは主な用途の一つです。特定のサンプルへのリンクを共有でき、学生はブラウザ上で一緒にコーディングできます。セットアップは不要です。

実際のネットワークにデプロイするにはどうすればいいですか？

MetaMask をインストールします
フォーセットからテストネットの ETH を入手します（無料）
Lyra でウォレットを接続します
ネットワークを選択します（例：Sepolia、Mumbai）
「Deploy」をクリックします - コントラクトがブロックチェーン上に配置されます！

バグを見つけました / 提案があります

ぜひissue を作成してください！すべてのフィードバックを歓迎します。

🤝 コントリビューション

コントリビューションを歓迎します！以下の詳細についてはコントリビューションガイドをご覧ください：

行動規範
開発ワークフロー
プルリクエストのプロセス
コーディング標準
アクセシブルなコミットメッセージ - スクリーンリーダーと認知アクセシビリティのために設計された形式を使用しています

コミットメッセージの形式

[type] Clear description in plain English (emoji at end) 🎉

例：[add] Keyboard navigation for dropdown menus ♿

なぜこの形式なのか？

テキストが最初 - スクリーンリーダーは絵文字の名前を読み上げるため、意味が先に来ます
平易な言葉 - 認知障害のある開発者にとってわかりやすい
一貫性 - ロービジョンのユーザーがすばやく読み取れます

完全なガイドラインについては CONTRIBUTING.md をご覧ください。

初心者向けの issue

始めるには good first issue というラベルの付いた issue をチェックしてください。

📄 ライセンス

🙏 謝辞

インスピレーションを与えてくれた Remix IDE
コントラクト標準を提供してくれた OpenZeppelin
Web3 開発者コミュニティ

このプロジェクトが役に立ったと思ったら、ぜひ ⭐ を付けてください

nich が ❤️ を込めて制作

ドキュメント

完全なドキュメントサイト：https://nirholas.github.io/lyra-web3-playground/

はじめにでは、インストールと初回実行について説明しています。
サンプルには、コピー＆ペーストできるスニペットがあります。

スター履歴

Markdown 対応

ログインしてコメント

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

入門ガイドを読む

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。