AI プロダクトをつくっています。 このサイトもそのひとつです。

私がつくったもの

• プロジェクトを立ち上げて公開
• チャットボットの頭脳：どう探し、どう答えるか
• チャットボットのページを作り直し

• プロジェクトを作成し、Cloudflare Pages にデプロイ
• チャット関数と RAG の大部分：Astra DB、類似度のしきい値、システムプロンプト
• API でのコンテキストアクションとクイック提案、AI ページの作り直し

遊び方

1. 画面の上でカーソルを動かして、白い機体を操縦します。
2. オレンジの Player 2 が援護します。
3. グリッドに敵を描くと、その形で敵がやってきます。

私がつくったもの

• レベルエディターと、そのレベルをゲームで読み込む仕組み
• チームがコードを変更するたびに走る自動チェック
• プレイヤーとサーバーのやりとりを説明する文書

• Python によるマップエディター（JSON 書き出し対応）
• ゲーム側とサーバー側での JSON レベルの読み込み
• GitHub Actions の CI パイプライン
• プロトコルとエディターのドキュメント、サーバー側のスピードブースト

このグリッドは、私が書いたエディターのブラウザ版です。本物はデスクトップツールです。

遊び方

1. 見た目をクリック：なめらか、ピクセル、テキスト。ゲームは止まりません。
2. Player 2 がプレイ中。矢印キーを押すと交代できます。
3. スマホでは画面をスワイプします。

私がつくったもの

• スネークゲーム
• 3つの見た目の最初のバージョン
• 画像素材と、ほかの開発者向けのガイド

• スネーク：キーボード操作、端がつながるフィールド、スコア
• 3つのレンダラーすべての最初のバージョン：SFML、SDL2、ncurses
• SFML と SDL2 用のスプライト、インターフェースのドキュメント

点線は、Player 2 がリンゴまでに計画したルートです。ブラウザ用に描き直しました。ゲーム状態はひとつ、レンダラーは3つ。Player 2 は幅優先探索でルートを計画します。

遊び方

1. 画面上でマウスボタンを押し続けるか、スペースキーを押し続けると上昇します。
2. 離すと下降します。
3. コインを取って、レーザーを避けましょう。

私がつくったもの

• サーバーと、プレイヤーとの接続
• レベルファイルの読み込み
• コイン、障害物、当たり判定
• 勝ち負けの判定

• サーバー：poll() による接続とプレイヤーの管理
• ASCII マップの読み込みと 1920 × 1080 へのスケーリング
• コイン、障害物、当たり判定、スクロール
• 勝利と敗北の条件

ゲームの下の枠に、審判の数値がリアルタイムで表示されます。ゲームの下のパネルはサーバー側の視点です。メッセージ名は本物で、値はここで計算しています。

遊び方

1. 矢印キーかボタンを押すと、コマンドが青いキューに入ります。
2. 時間が来るとサーバーが実行します。金色の食べ物まで歩いて、取ってください。
3. 一度に10個より多く送ると、サーバーは ko と返します。

私がつくったもの

• すべての AI プレイヤーと 3D 表示が接続するサーバー
• プレイヤーごとのコマンド待ち行列と、そのタイミング
• 前進と、ほかの全プレイヤーへのメッセージ送信

• サーバーの構造体、ソケットと poll() ループ、クライアント接続とチーム確認、引数の解析
• グラフィックプロトコルのコマンド：msz、tna、bct、mct、ppo、pnw
• 各クライアントの遅延実行コマンドキュー：10枠、実行時間は周波数から計算
• Forward、Broadcast、Connect_nbr、メモリリークの修正、3D クライアントのネットワーククラス

ブラウザ向けに再現したものです。サーバーのルールを簡略化したコピーがこのページで動いています。本物のサーバーは、TCP でクライアントとやりとりする C のプログラムです。

遊び方

1. チャンピオンを選んでください。もう一方は Player 2 が選びます。
2. 両者が共有メモリに書き込むのを見てください。live と言わなくなったプログラムは取り除かれます。
3. 一時停止してから「1ステップ」を押すと、次に実行される命令を読めます。

私がつくったもの

• 各チャンピオンをファイルから読み込み、共有メモリに配置する部分
• バイトから命令を読み取り、遅延のあとに実行する部分
• 誰が live と言ったかを記録して、まだ残っているプレイヤーを判定する部分

• .cor チャンピオンの読み込みと、10進数・16進数の変換
• アリーナの作成と、チャンピオンの配置
• 命令のデコード、各 live の記録、and・or・xor・aff 命令
• 命令ごとの遅延とエラー処理

ブラウザ向けに再現したもので、命令セットを絞り、このページ用に書いたチャンピオンを3つ用意しました。本物のマシンは C で書かれ、コンパイル済みの .cor ファイルを実行します。

遊び方

1. 言語のカードを選ぶか、リポジトリのファイルをチェックしてください。
2. コミットをプッシュして、各ステップを Jenkins ログと一緒に見てください。
3. 言語をふたつ同時に、言語ファイルなしで、または同じコミットを2回、試してみてください。

私がつくったもの

• 10個の Docker イメージ：5つの言語それぞれに base と standalone をひとつずつ
• インタープリターをソースから自前でビルドする Befunge イメージ
• イメージのビルド方法と使い方を説明するガイド

• C、Java、JavaScript、Python、Befunge 向けの10個の Dockerfile（Dockerfile.base と Dockerfile.standalone）
• マルチステージビルド：あるイメージでコンパイルし、より小さなイメージで実行。Befunge 向けに cmake で cfunge をビルド
• docs/docker_image.md：ビルドコマンド、イメージごとのルール、リポジトリの構成

ブラウザ上での再現で、実際には何もビルドされません。判別ルール、ビルド方法の選択、Dockerfile の手順はプロジェクトのものです。Kubernetes へのデプロイ手順は完成しなかったため、表示していません。

遊び方

1. シーンファイルの数字を変えてください。絵が描き直されます。最初は粗く、だんだん鮮明に。
2. わざとファイルを壊してみてください。エラーが行と問題点を示します。
3. あなたが入力を始めるまで、Player 2 がライト、球、カメラを動かします。

私がつくったもの

• シーンファイルを読む部分：カメラ、球、平面、ライト
• カメラ、図形、ライトをまとめて持つ Scene クラス

• libconfig++ によるシーンの解析：カメラ（解像度、位置、回転、視野角）、球、平面、環境光と平行光源
• Scene クラス：カメラ、プリミティブ、ライトをまとめるひとつのコンテナ
• チームの PrimitiveBuilder を通じた図形の生成

ブラウザ上で再現したものです。シーンの書式はプロジェクトのパーサーに従っています。追加のチェックと絵を描く小さなレンダラーはこのページ用に書いたもので、元にはなかった影もあります。

遊び方

1. ターミナルをクリックし、コマンドを入力して Enter を押します。
2. > や >> で出力をファイルへ、| で別のコマンドへ送れます。
3. cat << END と入力し、何行か書いてから END と打つと、シェルがそれを入力として読みます。

私がつくったもの

• プロンプトのループ：1行読み、実行し、またプロンプトを表示
• PATH のフォルダからプログラムを探して実行する部分
• ビルトインコマンド：cd、env、setenv、unsetenv、exit
• 出力のファイルへの書き出し、<< のあとに入力したテキストの読み込み、あるコマンドの出力を次のコマンドへ渡す仕組み

• getline で読むプロンプト "$> "、fork・execve・waitpid、プログラムがクラッシュしたときのメッセージ（Segmentation fault、Floating exception）
• パス指定・引数なし（HOME）・cd - に対応した cd と PWD・OLDPWD の更新、名前チェックつきの setenv、unsetenv、env、exit
• dup2 と pipe によるリダイレクト > と >>、<< ヒアドキュメント、; 区切り
• ふたつのコマンドをつなぐパイプと、自作の printf ライブラリ

ブラウザ向けに再現したものです。シェルのルールを小さくしたコピーが、仮のファイルシステムといくつかのプログラムとともにこのページで動いています。本物のシェルは、本物のプログラムを実行する C のプログラムです。

遊び方

1. スライダーを動かすか、ルールを選んでください。30 はランダムに見え、90 は三角形を描き、110 は構造を育てます。
2. 小さな四角をクリックすると、ルールの一部が反転します。
3. 本物のプログラムと同じオプションで、コマンドを自分で入力することもできます。

私がつくったもの

• プログラム名のあとに入力したオプションを読み取り、誤ったものは拒否する部分
• 上の行から、新しいセルの行を1行ずつ計算する部分
• 星を使って、行をウィンドウの中央に表示する部分

• 引数の解析：--rule（必須）、--start、--lines、--window（デフォルト80）、--move。不正な引数では終了コード 84
• ルール 30、90、110 の次世代の計算
• 表示ループと Stack プロジェクトの構成

ブラウザ向けに再現したものです。元の Haskell プログラムが受け付けるのはルール 30、90、110 ですが、このページでは 0 から 255 までどのルールでも動きます。

遊び方

1. ボードに描くと、Player 2 は場所をゆずります。
2. ツールバーで色や太さを変えたり、消しゴムを使ったりできます。
3. 「PNG で保存」で絵を残せます。

私がつくったもの

• ウィンドウとツールバーのボタン
• 色と鉛筆の太さの選択、消しゴム
• ヘルプ画面と、絵を画像として保存する機能

• CSFML のウィンドウとツールバー：ボタンごとにスプライト1枚、クリック時の当たり判定
• 8色、鉛筆の半径3種（5、18、35 px）、rgb(22, 22, 22) で塗る消しゴム
• ヘルプのオーバーレイの表示・非表示、ウィンドウのボードを画像ファイルへコピー

C 版をもとに TypeScript でブラウザ向けに再現したもので、色、太さ、消しゴムは同じです。ここでは鉛筆が円と円のすき間を埋め、ファイルは test.jpg ではなく日付つきの PNG になります。

遊び方

1. メッセージと鍵を入力してください。
2. ブロックモードとストリームモードを切り替えて、各バイトの変化を見てください。
3. 復号してみましょう。同じ鍵で XOR すると、元のメッセージに戻ります。

私がつくったもの

• ブロックモードとストリームモードの XOR 暗号化
• テキストと16進数の相互変換
• 各コマンドを適切なアルゴリズムへ送るエントリーポイント

• xor_block と xor_stream：ブロックごとにバイトを逆順（リトルエンディアン）にしてから鍵と XOR
• ストリームモードは最後のブロックをゼロで埋め、復号時に取り除く
• hex_to_bytes と print_hex、動的な stdin の読み取り、xor・aes・rsa に振り分ける main

C 版をもとにブラウザ向けに再現したもので、XOR だけです。短い鍵を繰り返す XOR は授業用の暗号で、本物の秘密は守れません。

遊び方

1. キーを押してください。短く押すと短点、長めに押すと長点です。
2. 1秒以上押すと、その文字が確定します。
3. 入力欄で名前を確認して、ログインしてください（おもちゃです）。

私がつくったもの

• ログイン画面のモールス信号入力
• 短く押すと短点、長く押すと長点、とても長く押すと次の文字
• 文字へのリアルタイム変換と、間違いを直す Backspace

• スペースキーの keydown と keyup で押した長さを測定：200 ms 未満で短点、800 ms 未満で長点、1 s 以上で文字区切り
• モールス表を逆引き用に反転し、押すたびに1文字ずつデコード
• コンポーネントのテンプレートとスタイル、ルート（のちに provideRouter へ移行）

Angular 版をもとに、同じタイミングでブラウザ向けに再現しました。「短点」「長点」「次の文字」ボタンはこのページだけの追加です。アカウントもパスワードもありません。