500万詰将棋の答えを将棋エンジンで解くことを試みる

さて

自分のサイトにやねうらおうさん提供の500万局の詰将棋局面を任意に表示できるページを前回作成したわけだが、詰め手順まではついていない。 これはもともと提供される局面にも回答は添付されていないのであって、基本的にはじぶんで解くか(それほど難しい問題はそれほど無い)さもなくば将棋エンジン(やねうらおうなど)を自分のパソコンに導入して局面をsfenではりつけて検索させれば回答は導け出せますという使い方が前提になっているわけだ。

自分のサイトでもページからsfenを取得できるので詰将棋が解ける環境を自分のパソコン上に持っていればいいことになる。

ただ前にも書いたが、サイトのページ上で回答もそのまま見ることができるようになれば便利なことは確かである。

これを実現しようとすると最初に考えるのは詰将棋を解くAPIを用意してWeb PageからオンデマンドそのAPIを叩けに行けば良いという方法。 これにはAPIを供給するサーバーが必要になる。  すこし探してみたらClaude.ai関連のMCPサーバーの実装で将棋エンジンとブリッジするサーバー構築をexpressを使った形ですでにGitHubにあげている方がいた。azumausu/shogi-mcp

実際にこれでサーバーを作成し、やねうらおうを導入してみたら、うまく作動することは確認できた。  でもやはり、サーバーを常にスタンバイさせておかなければならない、という課題は残るし、リアルタイムに詰みを返せるような高速のエンジンを動かすためのバーチャルマシンはそれなりのスペックのものが必要になる。  こちらは最低限のリソースとマシンスペックでサイトを運営するのを旨としているので、方針がそぐわない。

よって考え方を切り替え、時間がかかってもよいので退職以来3年間眠っている業務用のノートパソコンでひたすら局面を解析させて500万問の詰め手順を導き出し、これをデータベースのテーブル上に格納してここから答えを引き出す方針で進めることにした。

これを行うためには、ノートパソコンで将棋エンジンを起動し、これに局面を送って、詰みの回答を読み取ることを延々と繰り返すというスクリプトが必要になる。

なので、以下Pythonのお勉強の続きをすることになったわけです。

将棋のEngineと通信する部分のモジュールを以下のような構成で考える。

将棋エンジン(やねうらおう)をサブプロセスで起動する。
このプロセスにstdioを通じて詰将棋を解いてね、というコマンドを送り 答えをいただく。
これを問題の数だけ繰り返す。
すべて終わったらサブプロセスを終了

ちなみにこのエンジンを起動させたあと、コンソールで詰将棋を解くためには、
まず “usi” コマンドを送って、”usiok”が戻ってくるのをまってUSIプロトコルが働くことを確認し、そののち setoption name xxx value yyyというフォーマットでオプション類を設定する。

これが終わったら、以下のプロセスを問題の数だけ繰り返す。
”isready”を送ってエンジンの局面を初期化”readyok”と返ってくるのを待つ。
“position sfen sfen文字列” と送って局面を通達。
“go mate” で詰み検索を開始。
stdoutに返されてくるinfo文字列を読み解きこの中に mate xx (xx は例えば11手詰めならば11)  という文字が含まれていれば、所定手数の詰みを見つけたということなので ”stop”コマンドを送信して検討をストップさせ、文字列の中から詰め手順だけ抜き出して親プロセスに返す。 (親プロセスで画面表示するなりファイルにセーブするなりデータベースに書き込むなりの処理をする)

すべて終了したらサブプロセスを終了しスクリプトも終了

ということだと思うので、この考えをもとに実際に書いてみました

ヘルパーFunction その1。 詰めたよ、という文字列が所定手数になっているかの確認。11手詰めのはずの詰めだと13手とか17手の詰めの解答が最初戻ってくるのでそれを無視するためのもの。 ただし、11手詰めのはずなに9手とか7手で詰みます、といってくることがあることがわかったので所定手数以下の文字列についても正解と判断するようになっている。

start_engineという関数は将棋エンジンをsubProcessで起動し、option設定を終えたのちにこのプロセスオブジェクトをメインプログラムに返す。`

ちなみにEngineとOptionsについては以下をメインにて定義する。非力なノートパソコンで走らせるのでThreadをデフォルトの4から2にしないとエンジンが固まることがあった。FV_SCALEは水匠の推奨値。定跡ファイルは必要ないのでno_bookを指定

このプロセスオブジェクトででエンジンが動いているので、stdin/stdoutのパイプを使って交信することができるようになる。

Send_command関数でSFENの局面をエンジンに渡し回答を得るのだが、そのためのヘルパー関数を用意する

initialize_engine関数ではstopを送って探索を終了させたのち、isreadyを送って局面値を初期化する。  try_mate_againではisreadyを送らず、go mateを送るので、そのときメモリー上にある局面を改めて探索して詰みを探す。
query_mate関数はsfen文字列をpositionとしてセットし、go mateを送って詰みの探索開始するためのもの

send_commandsはこれらのヘルパーを使いながら詰みを検索。

swipe_printはコンソールで、画面がスクロールしないように同じ行に出力を重ねていくヘルパー関数

で、send_commandを500万回繰り返せばすべての解答が得られるはず

stop_engine関数でエンジンを終了しサブプロセスを終了。proc.communicateはプロセスの終了処理も行ってくれる。

で、下のスクリプトでは上の関数を適宜に呼び出して、mate11.sfenの最初の500行を解いてみている。 その結果をみながら、上のsend_commandの中身は何度か修正している。 

いつまで待っても所定手数の詰みが見つけられない、という可能性もあることがわかったのでタイムアウトを設けることにした。 最初はThreadingでタイムアウトを生じさせ、このときKeyboardInterruptを生成してこれを処理する手法を試してみたがCTL-Cが乗っ取られるのがどうも気に食わない。 async.ioライブラリーも読んでみたがブロックIOとどのように整合させてよいのかがよくわからない。 ので最初はどろくさくWhileループの中で時間をチェックして一定時間たっていたらbreakするという簡単な方法で書いてみた。 ただし、これポーリングで時間を見ているだけなので、ループ中のstdout.readline()がブロックしている限り時間切れにはならない。タイムアウト15秒くらいまでなら、だらだらと文字列が出力されているようなのでとりあえずハングすることはないとたかをくくって書いてみたら問題なく動いている。 これで良しにしようと思っていたが、さらに日を置いて調べてみたら、os.set_blockingという関数を見つけた。Linuxのみに対応かと思ったら、WindowsのpipeにもPython3.12から対応しました、となっていて、これはラッキー。 これをつかうとstdioがブロックされなくなり、readline()で何もないときには空の文字列が返ってくるようになるので、Timeoutも割り込みなどの処理を使うことなく検知できるようになった。 また、エンジン、検討途中でドツボにはまって正解がなかなか出せなくなる、ということも起こるということを経験的に知った。この場合は出力を待つよりも一度ご破算にして解答を聞き直すとすぐに正解にたどり着くような現象が多くみられた。(実に人間のようである)のでタイムアウトをやたら長くするより、リトライと組み合わせたほうが効率が良いと考えリトライも追加。たいてい2回か3回のリトライで正解にたどり着くようだが、中には30回目40回目のリトライで正解、というケースも500問中2問や3問発生し、それでも正解にたどり着かなかった場合はあきらめて、最後に読んだ文字列を取得するようにしてみた。何回か試してみたが、試すごとにエンジンがドツボにはまる問題には、ある程度の一貫性はあるものの、前回30回以上リトライした問題が次のRunでは最初のトライで解答がでてきたり、このあたりのランダム性は不思議だなあと思うのである。この設定による500問11手詰めの探索で、全問に11手の(またはそれ以下)詰め手順が返されてくるのはタタイムアウトを15秒以上、リトライ回数を50回マックスくらいにすればよさそうだ。タイムアウトをもっと長くすれば確実性は増しそうだが、全部の問題を解く時間がどんどん長くなる。プログラムの出力を見ていると、9割以上の問題は2,3秒で指定手数の正解が出てしまうのであるが、つまずいてリトライが30回発生する問題は解くのに10分かかってしまうということである。またリトライ無しにすれば全問にかかる時間は少なくなるが不完全な(13手詰め以上の)解答が増えてくる。とりあえず時間節約のため、全部解かせたあとで、11手詰めになっていない問題をあとから再度検索させる方法も考えたが、2度手間になってしまうので時間がかかっても全問指定手数の解答までたどり着く方向で考えることにしたのだが、 この実験結果から試算すると11手詰めの問題100万個すべてに11手以下の詰みをみつけるのには最低2か月はかかりそうだ。 ちなみに3手詰めのほうはリトライなどはさすがに発生してしないので4日ほどで終わりそうである。

なにせノートブック用2コア4スレッドのスカイレークという非力なCPUの上にRAMも8ギガバイトである。遅いのは致し方がない。改めて500万問という数字の理不尽さをしみじみ感じてしまうと同時にCPUの性能のちがいが顕著に見えてくる将棋エンジンのコンピューターパワーの使いたおし方は凄いなあと思う。

とにかく、mysqlのテーブルに出力された文字列を書き込むパイソンスクリプトも別途作成し、上記のスクリプトを組み合わせて、500万問を3手詰めから順番になめていくメインプログラムを起動させたのが三日前。画面をブランクにし、ひっそりたたずむノートパソコン。 ときおり、画面を開いてはコンソール上に出てくる問題番号を見て進行状況を確認しております。 うんうん、まだ3手詰のあたりは順調だが道は長い。(長すぎる!)

500万局の詰将棋

やねうらおさんの233万局面の定跡ファイルを最近使わせてもらったのだが、そのとき、彼のブログで5年も前に3手詰めから11手詰めまでの実戦詰将棋局面を500万例ほど生成して、これをテキストファイルを圧縮した形で無償公開されていることに気が付いた。で、 将棋盤に表示できるようなユーティリティーが欲しい旨のコメントをしている読者もいるみたいだし, これも早速自分のサイトのページに応用させてもらおうかと思った次第である。

で、まずは提供されている圧縮ファイルだが、解凍するとmate3.sfen, mate5.sfen, mate7.sfen, mate9.sfen, mate11.sfen の5つのファイルがでてくる。 それぞれテキストファイルであり、中身はsfen 書式で書かれた局面情報が1行1局面で記述されている。

これをweb siteのページにランダム、あるいは手数と行番号を指定して将棋盤のグラフィックスとして表示させたいわけである。

すべてのデータをブラウザに読み込ませるわけにはいかないので、データ自体はサーバー側に持たせ、ブラウザからは手数と行番号を指定してサーバーに問い合わせ、該当するSFEN一行を取得させて将棋盤上の駒として描画させる、という手法で実現させる。 サーバーでのデータ検索を最適化させるためにmysqlデータベースのテーブルにデータを格納して使う。

データテーブルは一つとして、コラムは手数と問題、各手数の問題カウント、および 通し番号として記録するとしてテーブル構成は以下となる。

FieldTypeNullKeydefaultextra
idINTNOPRIMARYnullauto increment
sfenvarchar(120)YESnull
moveintYESMULnull
rowintYESMULnull

このテーブルをまず作っておき、ここにテキストファイルからデータを流し込むわけだ。 で、今度こそPythonを使って見ようとPyCharmを立ち上げ(個人で使う分には無料なんだよね)ブラウザの検索機能で情報を拾いまくりながら、以下のプログラムを作った。

move と counterで検索することになるので、これらのフィールドはインデックスを作成しておく。

20行以上のパイソンを書いたのはおそらく初めてだが、 なるほどユーザーが多いわけだ。

このパイソンスクリプトを走らせてみる。 上のコードでは各行にスラッシュが8個ある、のと、スペースで分解したアレイ素子の因子が4つになる、というのを valid SFENの簡易判定基準とし、それ以外の行はスキップする構造にしてあったのだが、なんとここで10件近くのスキップが発生した。 テキスト行の情報も表示するようになっていたので ファイルをのぞいてみると、sfenが2行くっついた、つまり改行が抜けている個所が何件かあるのが分かった。 プログラムで生成したはずのファイルに何故にこのようなイレギュラリティが発生するのか不思議ではある。 とにかく手作業でこれらの行を分割し、テーブルをいったん削除して再度の挑戦を行った。Pythonのmysql connectorが優秀なのか、パソコンのハードを更新したからなのかはよくわからないが、500万件10分もかからず終わってしまった。

実は500万件なかったのである。mysqlのデータベースが言うには実際には以下の件数の局面が入っていた。ただこれで目くじら立てるのは野暮というものだ。

3手 998,405件
5 手998,827件
7 手999,071件
9 手999,673件
11 手999,998件

サーバーにPHPでAPIポイントをつくり、例えば /api/mate/3/1245というようなHTTPリクエストをサーバーに送れば、3手詰め、1245行目のsfenがjson formatでかえってくるような仕組みを作る。

ブラウザ側のほうはReactとほぼ同じように使えるPREACTをViteとTypeScriptのTool chainを使用しバタバタと書き上げて、出来上がったのがこのページ。 上の数字をもう一度よく見てもらいたいが、 200問くらいの問題集でも一冊全部解くのはなかなか根気がいるのに、いったい誰がこの圧倒的な数の暴力に立ち向かうというのだ?(ちなみに私は高校時代に買った内藤詰将棋200選をまだ全部解いてない)

やねうらおさんのブログにもかいてあるのだが、これは妙手が入った詰将棋とは違って実戦詰将棋的な問題集になる。 ほとんど並べ詰めのようなものもあれば、少し考える必要のあるものもある。 しかしなのだ。 例えば、この局面 ランダムにピックアップしたものだが、

9手詰め 第88,592問目

最初に2二金打ち、同金としてから4二桂成 同玉以下は 尻にと金をすべらせていってからの飛車成りまでの送り詰めで9手と言っても難しい詰めではない。 詰将棋だと言って出されれば級位者でも解ける問題だ。 ただ実戦となるとこの局面で4五の桂馬が5三と3三を封鎖しており、さらに金を捨てて、3一の金をどかせれば尻金で詰む、そして4一と金のとき5二玉と逃げれば6一飛成で早く詰む、と局面の駒配置がよく見えなければ詰めようとも思わないわけで、実際これくらいの局面で3切れのShogi warsでは初段、下手すると2段レベルとの対戦でも手駒の金は温存したいと、初手から4二桂成と角を取ってくる可能性は自分の経験から言ってかなり高い。

だとすると、この類の局面を大量にながめて勘を鍛えておくことは棋力向上の役に立つのかもしれない。

それはさておき、ここまでできたなら将棋エンジンもつけて回答も導きだせるようにしたらどうだと言われそうだが、残念ながらそちらのほうの知見は自分はまったく持っていないのであった。思うにサーバーにエンジンを実装してというかバーチャルマシンを一台、それもパーフォーマンスの高いやつを立ち上げて将棋エンジンを常駐させ、これのAPIをたたいて正解を求めるというようなイメージなんだが、いかにもリソース費用がかかりそうだ。lishogiのサイトなどは実現しているみたいだが、どうしているのだろうか。 そのうちだれかが無料のAPIサービスを提供してくれないかと無想するわけである。

AIにコードを書いてもらって失敗した話

将棋の局面を記述する書式にSFENという記述方式がある。
これは盤上の駒の配置、手番、先手と後手の持ち駒、手数などがコンパクトに文字列にまとめられたもので、Kyokumen.jpの局面検索に使われていたり、将棋エンジンの定跡ファイルにも使われていたりする。

SFENの書式についてはこの記事にうまく説明されている。

今回、YaneuraouさんがMIT Licenseで新たに公開された233万手の定跡ファイルをみたところ、後手番の局面がなく、先手後手盤面を反転して検索する方法がとられている。つまり、 例えば初期画面から後手が3四歩と指した局面が先手番として登録されている。 屋根裏王のエンジンにはflippedBoardというパラメーターがあり、これをOnするだけで対応するよう設計されているのだが、定跡ファイルをブラウザで将棋盤上に表示させる自分のWebページに追加するためには、後手の手番の時に検索をかけるSFENの局面を反転させてサーバーに問い合わせる必要が生じた。サーバーから帰ってくる候補手も同様に、例えば2六歩を8四歩などと反転させる必要がある

最初の局面を反転させる部分、TypeScript関数として用意すると以下のようになる。

 

このコードで何をやっているかというと

1.まずは SFEN文字列をスペースをデリミターとして文字列アレイに分解する。
2.それぞれのアレイ因子を board, turn, hands, moveCountという変数にわりあてる。 ちなみにMoveCountは今回の定跡ファイルに使用するにはゼロに置き換える必要がある。(上のコードでは未反映)
3.board(駒の盤面位置情報)をさらにdelimeter ‘/’ で各列に分解したアレイを生成
4. array.reverse()を使って列順をひっくり返す。上段の列が下段に、下段の列が上段になる。
5.さらに、さらに各列の文字列を一文字づつに分解してアレイを作る。
6.大文字の駒(後手の駒)を小文字(先手の駒)、小文字の駒(先手の駒)を大文字に置換する
7.array.reduce()を使って、+シンボル(成り駒)因子と次の駒の因子を繋げて一つのアレー因子にまとめる

8. これを.reverse()で左右反転
9. 各列のアレイを文字列に変換
10。各列の文字列アレーをを’デリミター/’で接合し、一つの文字列を生成。→flippedBoard
11. 手番もひっくり返す (flippedTurn)
12. 持ち駒を先手と後手入れ替える (pivotHands) この部分、使ったロジックは以下のとおり

B3Ps14pを S14Pb3pとしたい。
まずは大文字小文字を入れ替える
b3p2S14P (flipped)
最初の大文字のインデックスを取ればよいと思えるが、数字がついた場合(2S)となっていた場合はNG
なので文字列を逆転させてみる
P41S2p3b reversed
これで最初の小文字のインデックスを取る。上の例だと5。文字列長さ8なので 8-5=3
secondPart =flipped.slice(0,3) = b3p
firstPart = flipped.slice(3) =2S14P
これを組み立てる
final = firstPart+secondPart = 2S14Pb3p
うまくいっているのでは?

先手の持ち駒だけの場合 例えば 2P
小文字のインデックスはマイナス1 この場合は処理をスキップ
後手の持ち駒だけの場合 例えば14p 逆転文字列での小文字のインデックスは0 この場合も処理をスキップ

13 .flifppedboard flippedTurn flippedHands moveCountを一つの文字列につなぎ合わせ、この値を返す
とまあ、書いてしまえば簡単な作業の連続だが、実はこのコード、最初AIに聞いて提示されたものが動かなくて、修正を入れ始めたら、結局七割がたは書き直してしまった、というものになる。

最初、Brave Brouserの検索窓に ”Given sfen string, write a javascript function that returns flipped sfen” と打ったらあっさり回答をよこしたのでこれをTypeScriptに書き直し、そのまま定跡ファイルに使ってみたのだた、局面検索がまったくヒットしなかった。  コードを解析して分かったことはAIがくれた回答は上記のステップから 7,8そして12の処理が抜けていた。その結果盤面の上下反転はしたが、そのあとが左右反転をしていないため、ミラーイメージになってしまい、さらに持ち駒があった場合は先手と後手が逆のまま。 Webページの仕組みはこのsfenをサーバーに送ってサーバーのデータベースからこのsfenに対応するmoves情報を返してもらい、次の指し手の候補をリストアップするというものなので、ミラーイメージの局面照会にはヒットする候補手はありませんという答えしか返ってこない。

AIはSFENが何たるかをあまり理解できないまま、WEBに落ちている情報をかき集めて使ったようで、プロンプトで、SFENの定義から始め、期待されるアウトプットのイメージをしっかり伝えておかなければだめだったか。

逆に良いねと思ったのはアレイやオブジェクトの関数をチェイニングして記述する、いわゆるFunctionalな書き方になっていてスマートである。 これは真似したい。

とにかく、AIに仕事をさせたら、今の時点では検証が大事なわけだが、それなら最初から提供されたコードは参考までに留めておいて、実際に使うコードは自分で書いたほうが楽しいかもね(仕事でプログラミングしている人はこうは言えまい)。

追記:Yaneuraouさんからflipsfenをpythonで作成した時の顛末のリンクを教えていただいた。 https://yaneuraou.yaneu.com/2023/12/15/chatgpt-wrote-a-program-to-flip-a-shogi-board/  同じようなところでハマっているんだ、と可笑しくなった半面。 ちょっと待て、これは2年前の記事。 これを読んでいたらこんなに時間を使わなくてもよかったじゃん とも思った次第。

やねうらおうの定跡ファイルをサイトに使ってみた

ずーっと海外に住んでいて、将棋を指す相手がいなく、ヒカルの碁でネット碁の存在を知り、 こんなものがあるんだ、と検索して、Kurnickというゲームサイトを見つけ、そこでネット将棋を始めてみたら、みんな結構無茶苦茶な指し方をするのにびっくりして、英語の将棋入門サイトを作成したのが、今から17年くらい前、最初は静止画像をべたべたはりつけ、ブログに毛が生えたようなサイトだったが、フラッシュアプリを使った将棋盤というのが世の中にあるのがわかり、これを使って詰将棋やら最初の数手の説明、定跡の説明なんかをしていた。
割と早い段階で、フラッシュが駆逐されそうだということに気が付き、JavaScriptを勉強してフラッシュ無しでも動く将棋盤を自前で作成して自分のサイトで使い始めた。これがもうかれこれ12年以上前。これが幸いしてFlashが完全終息 した際のインパクトは避けることができた。

当時はそれなりに海外の将棋入門者の役にたったのではと思っているのだがそのうちYouTubeにHidetchさんが英語の将棋入門チャンネルを開き、さらに81道場を開設するにいたって、これは時代が変わったと悟った。 今ではほかのリソース、例えばYoutubeに上がる将棋の動画などもさらに充実し、DiscordではカロリーナのShogi Harborなど。 加えて自分もそろそろ終活を考慮しはじめるべき歳なのでこのサイト、もう閉じようかと思ったりするのだが、Statsを見るとまだ世界中からぼちぼちロボットではなく人間のアクセスがある。のでなんとなく続けている。 それにページを更新するごとにPHPの新しい使い方とかTypeScriptの勉強にもなるので、頭の老化防止にもつながっているような気がする。→どちらかというとこれが現在一番のモチベーションになっている。

最近何気にWikipediaの将棋の項目(英語版)を観たら外部リンクのリストの最初に自分のサイトが載っていて驚いた。ますます閉じにくくなった。

このサイトの中で何度か書き直しているページの中に、初めの数手の内容をまとめようとしたページがある。 最初はYamajunさんのサイトにある棋譜にリンクしていた。  しかしながら他のサイトへのリンクというのは実にあてにならないもので、 このリンクを含むリンク先の大部分が2019年時点で消失していた。 2009年当時Webの90%を占めていたFlash Player base のサイトが ほぼ全滅したのが大きいと思われる。
ならば自前でつくろうと考え、やり直しを重ねたこのページ。 一応形にはなったが、これは掘り下げていけばいくほど、もっと広げていきたい衝動に駆られる。

最近 やねうらお さんのGithubでやねうら王に使われている定跡の4年前のレベルのものが公開されているのに気が付いた。 自由にお使いくださいと書いてある。前にNHKの将棋講座の特集でだれかが将棋ソフトの作者さんたちは気前が良すぎるんですと言っていたが、まったくだ。  定跡フォーマットを見るとSFEN + move(s)の繰り返しのテキストファイルだ。 幸いSFENの読み込みと書き出し機能は自作のWeb用将棋盤表示アプリにすでに実装ずみなので、このファイルをそのまま使わせてもらってWebで定跡表示ができるのではないかと思いついた。

遠い昔 やねうらお さんというハンドルネームの方の、将棋界の内情を色々批評していたブログを見ていたようなきがするのだが、同一人物かどうかはさだかではない。 ただ、今や将棋プログラム界のドンとでもいえるような大活躍をされているようである。 5歳のときにTK‐80を使って8080のニーモニックを覚えたと書いているのを見ると、多分 自分より20歳くらい若い働き盛りなのでありましょう。自分がTK-80に触ったのはまだ日本にいたころ、取引先の業者がNECの代理店をやっていて、「遊んでみて」と持ってきたのが最初だ。モニターのルーチンを使ってスクロール表示をくるくる回しただけで満足して 終わったような気がする。

ともあれ、定跡ファイルをばらしてMySqlデータベースに落とし込んでみた。Pythonを覚える良い機会と思ったがコマンドラインでもPHPが使えることを思い出し、コードもあっさりかけてしまったので、Pythonの学習はまたもやお預けだ。(ファイルサイズが87メガバイトの大定跡ファイルは、MySQLに落とし込むのにPHPをコマンドラインで実行させて4~5時間ほどかかった。 専用サーバーではなく、他の業務と兼用なので、こんなものなのかもしれない)

局面数指し手数
やねうら王定跡(2016)130,182155,443
やねうら王大定跡(2016)428,2442,433,672
やねうら王テラショック【WCSC29】285,463512,860
各定跡ファイルの持つ局面数と指し手数

Web ServerにSFEN文字列を送るとと候補手のアレィをリスポンスとして返してくれるようなAPIを作成し、ページを追加してみた

我ながら GUI デザインのセンスが無いなあと思うのは毎度のことだが、 面白いなとおもったのは最初の定跡(説明によるとFloodGateで収集した棋譜を24手まで統計的にまとめたもの)の初手の頻度が人間の指す初手の頻度とほぼ一致していた点。2016年当時ということもあるのだろうが、ソフトというのは、もっと自由な手を指すのかと思っていた。この統計頻度の高い指し手を選び続けて行くと先手左美濃対後手四間飛車になる。 こういう風に指すんですねえ。
一方局面評価をしまくって精選したという100Tera Shock定跡なるデータファイルのほうでは評価値が高い指し手を選び続けると横歩取りに誘導される。

大定跡は一番充実しているはずなのだが、評価値の高い指し手を選んでいってもはやばやと定跡から外れるケースが多い。 原因は Mysqlへの落とし込みに失敗しているか、最初から定跡ファイルがそういう作りになっているかのどちらかだがよくわからない。ただ、下の表に示したように、初期局面1にたいし、二番目の(一手目)局面が14種類、三番目の局面(2手目)が56種類 と多くなっていくものの局面数が、指数関数的には広がっていないので結構枝をはらっているのはわかる。でも第一候補の次の指し手が無いというのはなんかおかしい。 暇ができたら見直してみます。

11
214
356
4135
5323
6678
71289
81922
92714
103623
114812
125995
137181
148407
159741
1611136
1712492
1814160
1915731
2017425
2118979
2220500
2321883
2423224
2524374
2625479
2726567
2827704
2928792
3029952
3131001
3231954

これだけの局面数と指し手を評価して枝をはらっていくというのは相当にリソースと時間が必要になると思うのだけど、それをgithub上にポンと公開してくれているのは 大丈夫ですか、と思ってしまう。恩恵にあずかっているわけですが。

Python Generator

>>> def make_counter(x):
	print('entering make_counter')
	while True:
		yield x
		print('incrementing x')
		x = x + 1

		
>>> counter = make_counter(2)
>>> counter

>>> next(counter)
entering make_counter
2
>>> next(counter)
incrementing x
3
>>> next(counter)
incrementing x
4
>>> next(counter)
incrementing x
5
>>> def fib(max):
	a,b = 0,1
	while a < max: yield a a,b = b, a + b >>> for n in fib(1000):
	print(n,end = ' ')

	
0 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 987 
>>> list(fib(1000))
[0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987]
>>> 

Python Generator の話

React Revisited after version 16.8

React というのは DOMの内容を簡単に操作しようという JavaScriptのライブラリーの一つだが、Shadow DOMという概念を導入し、JQueryのようにコマンドごとの実行でDOMを書き換えることはせず、Shadow DOMにある程度書き込んでおいてから描画する直前にまとめてDOMに書き込む。なので軽快に動作する、というのが売り。

数年前に覚えようとしたのだが、 二点腑に落ちないところがあって、結局、Vue.jsという他のLibraryを愛用(溺愛)するに至った。

その二点というのが

1.JSXという新しい概念の導入。 一見するとHTMLなのだがHTMLではなく、XML書式をJavaScriptで理解できるようにしたプリプロセッサ。この一見HTMLというのがくせもので、class= はJSの予約用語ゆえに使えずclassName=にしなければならないなど、細かいところで違っていて気持ちがわるい。(これに比べてVueのTemplateはまごうことなきHTMLの拡張)

2.コンポーネントで操作できる変数(State)を使うためにはコンポーネントをClass表記してsetState()という関数を使って管理しなければならない。

というもの。

その後 「JSXは単なるJavaScriptの関数表現」という開発チームの解説をYoutubeでみて ストンと納得できるものがあったものの、 二つ目のJavaScriptにClassが必要というのがなんとも納得いかない(個人の意見です)身としては今いち手が出せずにいた。 Class表記をするあまり、 thisの多用を行い、しかもそのContextを明示するためにClass Constructorに this.function=this.function.bind(this) を書きまくるというのがなんとも切ない。

しかしながら、 Reactの勢いは侮りがたいものがある。 特にMicrosoftのOffice開発系の方たちは Office UI GraphicsのComponentに「Reactは正義!」という感じで使いまくっている。 SharePoinitの JavaScript Frame workも Reactびいきがすごい。

で、最近React-client-appというCLIでReactのScaffoldingが簡単にできます、という記事をよく見るので、実際どれくらい簡単なんだいと試してみたら、 生成されるScaffoldingのComponentがClass表記ではなくfunction表記になっている。 あれ、これって、Stateful Componentは Class表記しなければいけないんじゃなかったっけ、と思ったが、 実はReactも進化していた。

Version 16.8から Hooksという機能が追加されて Functional ComponentでもStateの管理ができるようになっていた。 そして今まで、 Functional Component = Stateless Component, Class Componnet=Stateful Componentとなっていたものが、 どちらを使ってもよいようになっている。 Reactのサイトにも将来の開発にはFunctional Componentを使うのがおすすめと書いてある。 なので、React-client-appもDefaultで生成するコードはクラスレスになっていたわけだ。

紹介ページ https://reactjs.org/docs/hooks-intro.html にあるコードをみれば一目瞭然だが、クラス表記のようなConstructorもなければ、this. でメンバー指定をすることもない。 非常に簡単。 ただ、このHookを使ったクラスレスのステートフルコンポーネントの作り方、オフィシャルサイト以外で解説しているサイトはまだ少ない。

この

const [ var1, setVar1]=useState('this is variable one');

で気をつけなければいけないのは Var1が複数メンバーから構成されるオブジェクトだった場合、

const [obj1,setObj1]=useState({member1:"this is member 1", member2:"this is member 2"})

のように Obj1を宣言したときに、

setObj1({member2:"this is member 2 modified"})

とやってもsetState()と違って、オブジェクトの他のメンバー(Key)とマージしてくれない。上の例ではmember1が消えてしまう。

セット関数には元のstateがパラメータとして渡されているのを利用して、

setObj1(s=>({ ...s, member2:"this is member 2 modified"}))

とスプレッド表記を使ってマージしてあげる必要がある。(上のサイトにはObject.createを使うのも可と書いてある)

また、いわゆる ComponentWillMountなどのLife Cycle hookの代わりには描画毎に発火するuseEffect()を使えと書いてある。 このHookは発火を限定するために二つ目のパラメータ―で発火する条件を指定できる。 ファイルデータを読み込むなど、あるいはイベントリスナーを設定するなど、一回だけ発火させたい場合、 このパラメーターを空のアレイで渡してあげることで実現できる。(なんとなくハックっぽいが)

useEffect(()=>{Data を読み込む云々}, [])

他にも何種類かのHooksが用意されているが、 演習用にアプリを書いてみると、上の二つのHookだけで、それなりのものができる。

すでにJSXへのアレルギーはなくなっているので、クラスを使わなくてよいReactという選択は結構魅力的です。

すべてにVue.jsを使いたいのはやまやまなれど、SharePoint関連においてMicroSoft が Reactありきの開発を推しているというのはやはり大きい。

Using Vue with WebPack

I wanted to transfer my existing script to WebPack bundle.  The application is a simple page that uses  Vue.js.   Note that I only read Introduction part of Vue and started using it.  At that time, I did not even know the concept of Vue component files .  Thus my application was entirely in one JavaScript file.

I rewrote it using typescript.   WebPack bundling was necessary to make it work.

I had to decipher minor (but important) detail on NPM’s Vue  module that should be used along with WebPack. 

If I were to use a Vue package from node_modules/ and bundle it with WebPack, then the default module that will be used is Runtime-only ES module build (vue.runtime.esm.js.)

Now this verbiage is coming from VueJs.org V2 guide
https://vuejs.org/v2/guide/installation.html#Terms


” If you need to compile templates on the client (e.g. passing a string to the template option, or mounting to an element using its in-DOM HTML as the template), you will need the compiler and thus the full build:”

This applies to ‘getting started example’ code where  you use template directly on target html file, such as 

<div id="app"> {{message}} </div>

According to Vue documentation, runtime only module is 30% lighter and when I write my code in such a way that it utilize component file (*.vue), then  using vue-loader will precompile all the templates into render function (for those within component file)  so the default settings wil be not an issue.   Issue is when I create a new instance  of the view . 
Again, according to the guide

// this requires the compiler
new Vue({
template: '{{ hi }}'
})

// this does not
new Vue({
render (h) {
return h('div', this.hi)
}
})


If I use the first method but did not configure webpack to use full version of Vue module, resulting bundle file  is missing template compiler and I will be staring at the blank page.  In this situation,  looking into  source with F12 looks something like this

<body><!-- function(a,b,c,d) {.......} --></body>


Then how do I configure Webpack  so that it knows to bundle the full version of vue module instead of runtime-only module?  It was spelled right in the guide above.

module.exports = {
          // ...
          resolve: 
                {
                   //.....,
               alias: {'vue$': 'vue/dist/vue.esm.js' }
               //.......
      }

I needed to add  ‘alias’ clause to  the ‘resolve’ section of module.exports.  (for webpack v2 and above)
WebPack will then bundle full version of Vue module(vue.esm.js). 

Since I didn’t use .vue files for this project and put everything in a single html file, I did not  need to use ‘vue-loader’ either.
So this is a minimal requirement for Vue to work with WebPack.

Vue.js has a very detailed documentation which is good. All I needed was to read it through and understand the meaning of it (lol).  

By the way, another way to make it work is not tell WebPack about Vue at all.

  1. add script tag in your HTML writeup pointing to Vue CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


    2. Then tell Typescript  that ‘Vue’ is a global object

declare let Vue:any

Yes, use the bundler but not bundle the module. It sounds strange but it works

String.replaceで知らなかった件

User がノート欄にやたら長いリンク先をそのまま張り付けて、SharePointのリストの表示が著しく損なわれるという現象が自分の管理するサイトコレクションで何件か発生している。 ユーザー教育を行ってリンクの説明を別途短文入力してください、というのは簡単だが、だまって従ってくれるような従業員ばかりではない。 そこで長いリンクを見つけたら強制的に短い文字列に置き換えてしまう、という仕掛けをJavaScriptで書いてしまえばよいのだと思いつき、 試してみた。 結果、以下のような関数を記述し、これを描画時に呼び出す形で解決した。

function shortenAnchor(text) {

    if (text===null) {
        return "";
    }
    let testPattern = /(<a.*?href=.+?>)(.*?)(<\/a?>)/g;

    function replacer(match, p1, p2, p3) {
        if((p2.length)>30) {
            p2 = p2.slice(0, 25) + '...';
        }
        return [p1, p2, p3].join('');
    }

    return text.replace(testPattern, replacer);
}

このコードで何をやっているか。 まずtestPatternを正規表現(RegExp)で記述する。 RegExpで a tag elements をグローバルにトラップする。トラップしたエレメントはタグの前の部分、中身のテキスト部分、タグの後ろの部分にグループわけされ、それぞれの文字列は$1,$2,$3として利用可能になる。( a tag element 全体のマッチは$&)。 そして、あとは String.replaceを使ってマジックをおこすわけだが、Implementationを試行錯誤している最中に 二つ目のパラメーターが実は関数でもよいのだ、というのを本日初めて知ったわけで、それを使ってうまく書くことができた。 ここに関数を使うと、以下の引数が この順番で使えるようになる。 まずは TestPatternそのもののマッチ $&, それぞれグループ分けした部分のマッチ $1,$2,$3。 よって match,p1,p2,p3として利用可能にしておく。実はこの後ろにIndexなどのパラメーターも続くのが、今回は必要がないので無視。 
この replacer という関数ではこの中身の文字列$2(p2)の長さが30文字以上あった場合、最初の25文字以下を切り捨て点三つ…を最後に追加するというもの。 この関数自体を二つ目の引数として使う。 Testしてみたら一発で完動したので感動(おやじギャグです)

普通はString.replaceというと

"this is a pen".replace("this","that") //=>"that is a pen"

という簡単な使い方は知っていたし、 最初のパラメーターを正規表現にすれば $& $1 etc., などのパラメーターを使ってかなり柔軟な置き換えなどができることも知っていて使ってはいたのだが、まさか関数まで使えるとは思っていなかった。 これは素晴らしい、と思った次第

TypeScript その2

年末の休暇を利用してtypeScriptの演習を続行中。 現在まで理解できたところをとりあえず列挙。
nodejs が導入されている必要あり。

npm install typescript -g

これで tscコマンドが使えるようになる。

tsc example.ts

そして、これでexample.ts から example.jsがトランスパイルされる。

プロジェクトフォルダー内で

 tsc init

とやると、コンパイラー設定用のtsconfig.jsonが作成され規定値が設定される。例えば、出力のJavaScriptのレベルが

<pre>”target”:”es5″</pre>

などと記述されている。またコードをトランスパイルしたときのエラーの出力設定などもできる。今のところ全く変更の必要のないレベルでトライアル中。

TypeScript は 基本的には JavaScriptのsuper setなのだが、 ’let’, ‘const’, ‘arrow function ()=>’, ‘ … spread operator’,’Template strings’ などes2015の書式が既にサポートされている。 なのでexample.tsではこれらの言語機能を使ってプログラムを書き、tscでトランスパイルすると、これらの表記をまだサポートしていない現行のブラウザでも動くようなJavaScriptに書き換えてくれる。上のConfig例ではes5レベルのコードに置き換わる。 つまりBabelと同じような使い方ができる、。

type safeなので 異なったタイプの変数へのアサインは論外としてもその可能性が生じそうなコードにはエラー表示が鬼のようにでる。例外処理とか、Interface定義を記述して対処すると満足して何も言わなくなってくれるので、バグの可能性のあるコードを書く可能性が低くなる。