Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
形四のWebアプリ作ってみた
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
西村 備山
February 25, 2026
Technology
7
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
形四のWebアプリ作ってみた
2026.02.21 デジもく会 での発表
西村 備山
February 25, 2026
More Decks by 西村 備山
See All by 西村 備山
SPRESENSEで可愛いロボット ~ H/W・S/W設計のポイント
lipoyang
0
48
イチから作る超軽量な音声合成
lipoyang
0
13
製作物紹介 & 小ネタ集
lipoyang
0
5
パワポを操作してカンペを表示するスカウター型デバイス
lipoyang
0
13
マイコンとデジファブによる創作電子楽器の製作
lipoyang
0
43
GitHub Copilot 対 Cursor
lipoyang
0
42
つくろか!3 出展について
lipoyang
0
12
光る縄文土器を作る
lipoyang
0
76
IoT渾天儀で太陽の運行を知る
lipoyang
0
2k
Other Decks in Technology
See All in Technology
AIとペアプロを始める。人とのペアプロをやめる。ペアプロの良さを改めて知る。もっと好きになった。 / Rediscovering Pair Programming
honyanya
1
210
Driving AI Adoption Using In-House GPUs to Serve Qwen
po3rin
2
440
When Does a Local Qwen Start to Break
morshoto
0
170
はじめてのDatabricks:技術者向けワークショップ / beginner-workshop
databricksjapan
PRO
0
150
最新技術に積極チャレンジ!EKS共通基盤のこれまでとこれから
daitak
0
300
動画配信アプリでの Engage SDK 導入 — TVer Android が Play ストアにコンテンツを届けるまで
techtver
PRO
0
100
[DroidKaigi 2026] Making UI specifications visible: Android UI development in the AI agent era supported by Compose Screenshot Testing and galleries
syarihu
0
560
Backstageでつくるセルフサービスな社内開発基盤
kikunosuke75
1
240
Tab5をRubyで動くパソコンにする
kishima
1
180
AIエージェントの開発・提供におけるセキュリティリスクの論点と対策
flatt_security
1
560
Bet AI Day 2026丨AIを「使う」から、AIが「働く」へ ― LayerXが進める「組織AI」の社会実装
layerx
PRO
2
2.2k
AndroidでHDRメディアを「壊さずに」扱う
chigichan24
0
390
Featured
See All Featured
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
68
57k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
aleyda
1
2.2k
Making Projects Easy
brettharned
120
6.7k
How to make the Groovebox
asonas
2
2.4k
For a Future-Friendly Web
brad_frost
183
10k
B2B Lead Gen: Tactics, Traps & Triumph
marketingsoph
0
230
What the history of the web can teach us about the future of AI
inesmontani
PRO
1
680
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Automating Front-end Workflow
addyosmani
1369
210k
Measuring Dark Social's Impact On Conversion and Attribution
stephenakadiri
2
270
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.5k
Exploring anti-patterns in Rails
aemeredith
3
490
Transcript
2026.02.21 デジもく会 西村備山 (@lipoyang) 形四のWebアプリ作ってみた
自己紹介 •デジもく会 •奈良県在住 •組込み系技術者 西村備山 (@lipoyang)
形四とは? 白黒4つのコマで正方形をつくるボードゲーム 「形四」ゲームの解説 dnjiro's 9VAe blog より
既存の形四アプリ 「形四96番勝負」 by @dnjiro さん Android / Chromebook 版(Google Play)
Windows版 (keishi96w.zip) Mac版 (keishi96m.zip) Amazon Fire タブレット版(Amazonアプリストア) X68000 Z版(kc96x.zip)
まずは C# で自作 • Windows用フォームアプリ • 以前作ったオセロのアプリを改造して作成 • ひとまず動くようになるまで 9時間
(さすがに生成AIの速さには勝てない) • 形四96番勝負 相当のUIに作りこむ
KCSharp https://github.com/lipoyang/KCSharp ←レベル7は かなり強いぞ
Webアプリ版も作ってみた • UIは JavaScript で記述 • 思考エンジンは Rust で記述 •
Rust → WebAssembly にビルド • ネイティブアプリと遜色ない速度
WebKC ↓こちらで遊べます
ネット対戦機能がほしい • 人間 VS 人間 のネット対戦 • ソフト vs ソフト
のネット対戦 • 通信仕様どうする? • サーバどこに立てる?
またね~ Twitter: @lipoyang GitHub: lipoyang SlideShare: lipoyang http://lipoyang.net
高速化の工夫 • ミニマックス法 → アルファ・ベータ法 (アルゴリズムの改良) • 二次元配列 → ビットボード
(データ構造の改良) • 動的なオブジェクト生成をなるべく減らす • 無駄に同じ計算を繰り返さない。(メモ化)
静的評価関数 自乗形四率 (Square Keishi Rate) を以下のように定義 4つの石の座標を P i =
(x i , y i ) (i = 1, 2, 3, 4) とする。 相互の距離の自乗は D(P i , P j ) = (x i – x j )2 + (y i – y j )2 その最大値を D max 、最小値を D min とするとき 自乗形四率 k = D min / D max は 0 < k ≦ ½ であり、 四点が正方形をなすとき k = ½ となる。 どれだけ正方形に近いかの簡易な指標となる。
ヒューリスティック • 「必殺形」全30パターン (トリプル中パンチ) • 「恐怖系」全12パターン (大パンチ + ダブル中パンチ) •
これを評価関数に取り入れるのは… • 判定処理が面倒すぎて断念。 ( パターンは 回転、反転、平行移動 もありうる )