irigon//code ── 自分好みにコーディングをノーコードで
irigon//code は、ブロックを組み合わせる「ノーコード」の操作と、本物のソースコードを書く「コーディング」を、ひとつの画面で行き来できる開発環境です。ブロックで作ったものはコードとして読め、コードの変更はブロックにも反映されます。HTML・CSS・JavaScript・TypeScript・Python・Ruby・PHP・Java・Go・JSON など、多くの言語のサンプルが入っているので、「プログラムとは何か」を触りながら学べます。インストールは不要で、ブラウザで開くだけです。
この頁でできること
- ブロックと本物のコードを行き来：ブロックの組み立てとソースコードが同期する
- 多くの言語のサンプル：HTML・CSS・JavaScript・TypeScript・Python・Ruby・PHP・Java・Go・JSON ほか
- ライブプレビュー：作った Web ページがすぐ見える。コンソールとエラー診断つき
- かんたん結線：ボタンで文字を変えるなどの定番の動きを、ブロックをつなぐだけで作れる
- 保存：プロジェクトは端末の保存領域に残る
画面の構成
- エクスプローラー：フォルダとファイルのツリー。新規ファイルやフォルダを作れます。
- ブロックパレット：ドラッグしてブロックを組み立てます。入れ子の階層に挿入でき、自由に書くコードブロックも追加できます。
- コードエディタ：ブロックと同期するソースコード。操作の取り消し／やり直し（Ctrl＋Z／Ctrl＋Y）に対応します。
- ライブプレビュー：作った Web ページの表示がすぐ見えます。プレビューやエディタは、それぞれ縦いっぱいに広げられます。
- コンソールとエラー診断：実行した結果や、エラーの場所を表示するパネルがあります。
- かんたん結線：ボタンを押したら文字を変える、入力欄の文字をリストに追加する、といった「よくある動き」を、ブロックをつなぐだけで作れます。結線の連携マップを開いて、全体を眺めることもできます。
サンプルプロジェクト
最初に選べるサンプルは、まっさらな「クリーン空プロジェクト」のほか、本格的な Web サイト作り（ヒーロー画面とカードの画面）、Todo と API のアプリ、SaaS ダッシュボード、AI チャットボット、Java の在庫管理、パスワード認証とハッシュ化の仕組み、Rust・C++・Haskell・SQL といった言語の例などです。サンプルは、動かして中身を読んだり、書き換えたりして学ぶための教材として使えます。
対応する言語
| 用途 | 言語 |
|---|---|
| Web 画面を作る | HTML・CSS・JavaScript・TypeScript |
| サーバー側の処理 | PHP・Python・Ruby・Java・Go |
| データ | SQL・JSON |
| その他の言語の例 | Rust・C++・Haskell |
それぞれの言語について、仕様書と教本の画面があり、ブロックの意味や書き方を調べられます。Python は、ブラウザの中で動く WebAssembly 版（Pyodide）につなぐこともできます。ブラウザの中で動く仕組みなので、実際のサーバーや OS で動かした場合と細かい挙動が違うことがあります。
学び方の例
- まず「クリーン空プロジェクト」で、ボタンを押したら文字が変わる動き（ボタン押下→画面の書き換え）を、ブロックで作る。
- 横のコードを見て、どんな文字が並んだのかを読む。1 行だけ書き換えて、結果がどう変わるか確かめる。
- サンプルの Web サイトで、色や文字を変えて、プレビューに反映されるのを見る。
- 慣れたら、Python や Go など、別の言語のサンプルを動かして、書き方の違いを比べる。
授業などで使う場合は、成果物の「修了証」のページを発行して保存する機能もあります。
外部のライブラリについて
irigon//code は、利用者が必要なときだけ、外部のライブラリを取り込めます（例：Three.js、Chart.js、React、Matter.js、Tailwind CSS、Python の WebAssembly 版）。利用者が取り込みの操作をしたときにだけ、それぞれの配信元（jsDelivr・esm.sh・Tailwind CSS の配信元など）に接続します。くわしくはプライバシーポリシーの第7条の4をご覧ください。
保存と安全
作ったプロジェクトは、ブラウザの保存領域（この端末の中）に残ります。ブラウザの記録を消すと消えることがあるので、残したいものは書き出して保存してください。ひとりで使う機能なので、年齢を問わず使えます。
なお、このサイトの以前の「つくるーる」（絵のルールでゲームを作る機能）は、この irigon//code に置き換わりました。irigon//code は開発中で、サンプルや機能は今後も増やします（更新履歴）。
irigonjp.net プラットフォームの設計思想と技術アーキテクチャ
irigonjp.net は、「放課後、誰かしらがいる公園」および「知的好奇心と創造性の回復」を理念として開発・運営されているブラウザ完結型の多機能ウェブプラットフォームです。特別なソフトウェアのインストールや会員登録を必要とせず、パソコン・タブレット・スマートフォンの標準ウェブブラウザから即座にすべてのシミュレーション、制作スタジオ、学習ツール、ゲームを利用できます。
1. 物理計算・音響合成・アルゴリズムの自社実装
当サイトに搭載されている各コンテンツは、ブラックボックス化された外部ゲームエンジンに頼らず、ブラウザ標準の Canvas API、Web Audio API、Web Crypto API、および純粋な JavaScript による独自の数値計算・物理モデルとして実装されています。たとえば物理サンドボックス「SANDBOX」では、セルオートマトンと流体・熱力学モデルを組み合わせ、熱伝導、沸騰と凝結、理想気体に近い圧力計算と容器の応力破壊、風成運搬による砂丘形成、蒸発と降雨の水循環、植物から捕食者に至る生態系ピラミッドを 1 秒間に数十回のステップでリアルタイムに計算しています。また作曲スタジオ「KANADE」では、AudioWorklet によるリアルタイム波形合成とマルチトラック・ミキシング、エフェクトチェーン、WAV/MIDI 書き出しをブラウザ内だけで完結させています。
2. 教育・学習における活用と探求型アプローチ
受け身で映像を見るだけでなく、「自ら条件を変えて仮説を立て、結果を観察・計測する」という探求型の学びを重視しています。理科実験ガイド（圧力・熱・風と運動）では、小学校から高等学校までの理科・物理・地学の単元に対応する実験手順と考察ポイントを掲載しています。また統合開発環境「irigon//code」では、ビジュアルブロックによるノーコード操作と実際のソースコード（HTML/CSS/JavaScript/Python/Go/Rust 等）が双方向にリアルタイム同期し、プログラミング初学者から本格的なアルゴリズム学習まで段階的にステップアップできる環境を提供しています。
3. プライバシー保護・情報セキュリティ・青少年保護の取り組み
当サイトは「不要な個人情報を集めない・保持しない」方針を徹底しています。ひとり用のゲームや制作ツールはアカウント登録不要で利用でき、作品の保存や進行記録は原則として端末内のストレージで処理されます。運営者のサーバーは、アクセス元の IP アドレスそのものを個人の記録としては保存せず、不正の対策には日ごとに変わる識別用の印だけを使います。なお、アクセス解析や広告の配信では、利用する各サービスが IP アドレスなどを取り扱います（詳しくはプライバシーポリシー）。コミュニティ機能（投稿・チャット）については 13 歳以上の利用を前提とし、利用規約への同意、言葉の見張り、ワンクリックでのミュート・ブロック、通報窓口を整備することで、安全な交流環境を維持しています。
関連ページ：ゲーム・機能の紹介一覧・サイトについて・遊び方ガイド・SANDBOX の科学・おうちの人へ・遊ぶときの約束・運営者情報・お問い合わせ・利用規約・プライバシーポリシー・更新履歴