Python プログラムで動かすフェアリーチェスアプリ開発、連載第 19 回です。

<pstlk label="前回" to="chess-app-devel-18" />はキャスリングの条件判定のコードを編集しました。

今回は曖昧な場合にキャスリングするかどうかの確認をするようにして、キャスリング時の駒の再配置のコードの編集もしていきます。



 

<toc />

## キャスリングするかどうか確認

キングがルーク方向に１歩だけ動いたとき、

それがキャスリングを意図してのものか、はたまた単に動いただけなのかが曖昧です。

これをはっきりさせるために、「その動きはキャスリングを意図していますか？」とユーザに尋ねるダイアログを表示させます。

この表示には、<pstlk label="第11回" to="chess-app-devel-11/#選択肢を表示する吹き出しを描画" />で作成した吹き出しを利用します。

 

まず、確認が必要な場合とそうでない場合があるので、確認が必要かどうかを示す変数、

そして確認の結果キャスリングすることを選択したかを示す変数を設定します。

```py name=main.py hl_lines=7-10
class Game:
 def __init__(self):
 ...
 # キャスリング
 # キャスリングのポテンシャルが残っているか
 self.can_castling = {'W': [True, True], 'B': [True, True]}
 # キャスリングするかどうかをプレイヤーに確認するか
 self.confirm_castling = False
 # キャスリングできる状態にあるか
 self.do_castling = False
 ...
```

確認が必要な場合とは曖昧な場合、つまりキャスリング完了位置にキングがただ１歩動いた場合ですので、

このときの条件を記述していきます。

```py name=main.py
class Game:
 ...
 def castle_or_not(self, piece, endpos):
 '''
 キャスリングするかしないかを確認するか

 Parameters
 ----------
 piece : obj
 駒．
 endpos : tuple > (int, int)
 終了位置．絶対座標．

 Notes
 -----
 if文の条件式について．

 キングの移動終了位置が，キャスリング終了位置としてありうる4つの位置のうちのいずれかにあてはまる
 and (クイーンサイドキャスリングの条件にあてはまる
 or キングサイドキャスリングの条件にあてはまる)
 and キングの初期位置とキャスリング終了位置のx座標の差 == 1
 and 移動先に駒がない（＝キングが敵駒を取ったのではない）
 '''
 if (endpos in [(2, 0), (self.kind.size - 2, 0), (2, self.kind.size - 1), (self.kind.size - 2, self.kind.size - 1)]
 and (self.castling_requirements(piece, endpos, 0, self.gameboard)
 or self.castling_requirements(piece, endpos, 1, self.gameboard))
 and abs(self.kind.placers[1].index(King) - endpos[0]) == 1
 and endpos not in self.gameboard):
 self.confirm_castling = True
```

次に、この判定をマウスクリック時に行わせ、

```py name=main.py
class Game:
 ...
 def mouse(self, button, state, x, y):
 ...
 # 駒選択
 elif (self.parse_mouse() in self.gameboard
 and not self.prom and not self.confirm_castling):
 ...
 # キャスリングするかしないかの確認
 if self.kind.castling:
 if self.startpos in self.gameboard:
 self.castle_or_not(
 self.gameboard[self.startpos], self.endpos)
 ...
```

キャスリングを確認するときには、吹き出しとボタンで確認ダイアログを作成して表示します。

```py name=utils.py
def draw_castling_confirmation(endpos):
 '''キャスリング確認ダイアログを表示する'''
 draw_balloon(*endpos)
 glColor(1.0, 1.0, 1.0)
 draw_str(2.0, 4.0, 'Castling?')
 draw_button(1.5, 3.0, 3.0, 3.5, 'Yes',
 (1.0, 1.0, 1.0), (0.0, 0.0, 0.0))
 draw_button(4.0, 5.5, 3.0, 3.5, 'No',
 (1.0, 1.0, 1.0), (0.0, 0.0, 0.0))
```

```py name=main.py
class Game:
 ...
 def draw(self):
 ...
 if self.time == 1 and not self.confirm_castling:
 self.main()
 ...
 # キャスリングするかどうかの確認
 if self.confirm_castling:
 draw_castling_confirmation(self.endpos)
 ...
```

表示されたボタンをクリックすることで、キャスリングの意図があるかどうかが確認できます。

```py name=main.py hl_lines=10-22
class Game:
 ...
 def mouse(self, button, state, x, y):
 ...
 # キャスリングするかしないかの確認
 if self.kind.castling:
 if self.startpos in self.gameboard:
 self.castle_or_not(
 self.gameboard[self.startpos], self.endpos)
 if self.confirm_castling:
 if on_square(*self.mousepos, 1.5, 3.0, 3.0, 4.0):
 self.do_castling = True
 self.confirm_castling = False
 self.time = 0
 self.moving = True
 glutIdleFunc(self.idle_move)
 if on_square(*self.mousepos, 4.0, 5.5, 3.0, 4.0):
 self.do_castling = False
 self.confirm_castling = False
 self.time = 0
 self.moving = True
 glutIdleFunc(self.idle_move)
 ...
```

これで確認ができるようになりました。

<postimage src="castling_confirmation" alt="キャスリング確認" />

 

## 駒の再配置

キャスリングした後には、ルークが特定の位置に移動します。

コードでは、もとの位置にあった駒（＝ルーク）を削除して特定の位置に再配置しています。

```py name=main.py
def renew_gameboard(self, startpos, endpos, gameboard):
 '''
 盤面を更新する

 Parameters
 ----------
 startpos, endpos : tuple > (int, int)
 開始位置，終了位置．絶対座標．
 gameboard : dict > {(int, int): obj, ...}
 盤面．
 '''
 color = gameboard[startpos].color
 gameboard[endpos] = gameboard[startpos]
 del gameboard[startpos]
 ...
 # キャスリング
 if (gameboard[endpos].abbr == 'K'
 and abs(startpos[0] - endpos[0]) == 2):
 # クイーンサイド
 # 白
 if endpos == (2, 0):
 del gameboard[(0, 0)]
 gameboard[(3, 0)] = Rook('W')
 # 黒
 if endpos == (2, 7):
 del gameboard[(0, 7)]
 gameboard[(3, 7)] = Rook('B')
 # キングサイド
 # 白
 if endpos == (6, 0):
 del gameboard[(7, 0)]
 gameboard[(5, 0)] = Rook('W')
 # 黒
 if endpos == (6, 7):
 del gameboard[(7, 7)]
 gameboard[(5, 7)] = Rook('B')
```

まず駒の移動先に移動前の駒<tltp label="インスタンス">クラスをもとに作られた実体</tltp>を移してから、もとの位置を削除しています（キングの動き）。

キャスリングが起こるのはキングが２歩動いたときのみであることを利用して条件文を立て、

位置によってキャスリングが起こる箇所を判定し、ルークを消して別の位置に新たなルークを置いています（ルークの動き）。

 

キングの動きに関しては、キングが１歩も動かないこともありえるので、`startpos != endpos`のときのみ`del gameboard[startpos]`を実行するようにします。

そうしないとキングが消えてしまうからです。

ルークの動きのほうは、キャスリング発生の条件を主に`do_castling`によって判定し、

ルークの初期位置にある駒がルークであれば、その駒を消して新たなルークを置いています。

これをもとに拡張して書き換えると、以下のようになります。

```py name=main.py
def renew_gameboard(self, startpos, endpos, gameboard):
 '''
 盤面を更新する

 Parameters
 ----------
 startpos, endpos : tuple > (int, int)
 開始位置，終了位置．絶対座標．
 gameboard : dict > {(int, int): obj, ...}
 盤面．
 '''
 color = gameboard[startpos].color
 gameboard[endpos] = gameboard[startpos]
 del gameboard[startpos]
 if startpos != endpos:
 del gameboard[startpos]
 ...
 # キャスリング
 # キャスリングできるゲームである
 # キャスリング確認中でない
 # キャスリングできる
 # 終了位置指定がある
 if (self.kind.castling
 and not self.confirm_castling
 and self.do_castling
 and None not in endpos):
 rook_init_pos = [pos for pos, piece in enumerate(self.kind.placers[1])
 if piece == Rook]
 size = self.kind.size
 piece = gameboard[endpos]
 # クイーンサイド
 rook_pos = rook_init_pos[0]
 # 白
 if (endpos == (2, 0)
 and piece.color == 'W'
 and (rook_pos, 0) in gameboard):
 if gameboard[(rook_pos, 0)].abbr == 'R':
 del gameboard[(rook_pos, 0)]
 gameboard[(3, 0)] = Rook('W')
 # 黒
 if (endpos == (2, size - 1)
 and piece.color == 'B'
 and (rook_pos, size - 1) in gameboard):
 if gameboard[(rook_pos, size - 1)].abbr == 'R':
 del gameboard[(rook_pos, size - 1)]
 gameboard[(3, size - 1)] = Rook('B')
 # キングサイド
 rook_pos = rook_init_pos[1]
 # 白
 if (endpos == (size - 2, 0)
 and piece.color == 'W'
 and (rook_pos, 0) in gameboard):
 if gameboard[(rook_pos, 0)].abbr == 'R':
 del gameboard[(rook_pos, 0)]
 gameboard[(size - 3, 0)] = Rook('W')
 # 黒
 if (endpos == (size - 2, size - 1)
 and piece.color == 'B'
 and (rook_pos, size - 1) in gameboard):
 if gameboard[(rook_pos, size - 1)].abbr == 'R':
 del gameboard[(rook_pos, size - 1)]
 gameboard[(size - 3, size - 1)] = Rook('B')
```

これでキャスリングの曖昧性の排除、そして駒の再配置ができるようになりました。

<video src="castling1" />

<video src="castling2" />

 

ここ数回分の変更は [GitHub](https://github.com/midorimici/chess-program-for-python-and-OpenGL/commit/06886ba60cbe2856db1e7cc52bc9fba67693c328#diff-6707418c2a43eec365d78e30985aafe1) で見ることができます。

---

フェアリーチェスが作れるようになって、

ゲームによって出現する駒が変わるので、

<pstlk label="次回" to="chess-app-devel-20" />はプロモーションの拡張について書きたいと思います。

お読みいただきありがとうございました～

ではまた<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 19 回です。
前回はキャスリングの条件判定のコードを編集しました。
今回は曖昧な場合にキャスリングするかどうかの確認をするようにして、キャスリング時の駒の再配置のコードの編集もしていきます。
…

チェスアプリ開発(19) キャスリングの拡張（曖昧性の排除と駒の再配置）

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 18 回です。

<pstlk label="前回" to="chess-app-devel-17" />はチェス960の初期配置を生成して、基本的な部分は遊べるようになりました。

しかしチェス960のキャスリングは通常のキャスリングを拡大解釈する必要があります。



今回はキャスリングの部分のコードを書き換えていきます。

拡張前のキャスリングの実装は第12回に載せています。

<relpos link="chess-app-devel-12" />

 

<toc />

## チェス960におけるキャスリング

チェス960におけるキャスリングは、**通常のチェスのキャスリング後のキングとルークの位置と同じになるように**キングとルークを動かします。

つまり、a ファイル（白から見て左側）へのキャスリング（通常のチェスでのロングキャスリング）ではキングが c ファイルに、ルークが d ファイルに移動し、

h ファイル（白から見て右側）へのキャスリング（通常のチェスでのショートキャスリング）ではキングが g ファイルに、ルークが f ファイルに移動します。

キャスリングの条件も通常のチェスと変わりません。

 

通常のチェスと異なるのは、初期位置が異なるために、

キングやルークが全く移動しなかったり、かなり大きく移動したりすることがあるということです。

キングが１歩しか移動しないキャスリングもありえ、その場合は**キャスリングなのかキングが動いただけなのかが曖昧**になります。

そのあたりも考えながらコードに落とし込んでいきます。

 

## キャスリングのコードを編集

通常のチェスのキャスリングの実装は<pstlk label="第12回" to="chess-app-devel-12" />で行いました。

この時点では「キングは必ず２歩移動する」など固定的な性質を利用して書いていた部分がありますので、これを一般化していきます。

 

キャスリングの条件を満たすかどうかを返すメソッドでは、

`common_req`, `piece_req`, `special_req`という３つの条件がすべて`True`のときに`True`を返すようにしていました。

```py name=main.py hl_lines=59,60,63-65,68-75,78-84,87-89,92-99,102-108
def castling_requirements(self, piece, endpos, side, gameboard):
 '''
 キャスリングの条件を満たすとき，True
 side == 0 -> aファイル側
 side == 1 -> hファイル側

 Parameters
 ----------
 piece : obj
 駒．キングでなければ return は False．
 endpos : tuple > (int, int)
 終了位置．絶対座標．
 side : int > 0, 1
 0 -- クイーンサイド
 1 -- キングサイド
 gameboard : dict > {(int, int): obj, ...}
 盤面．

 Returns
 -------
 bool
 '''
 def create_tmp_board(startpos_y, endpos):
 '''
 キングの通過するマスが攻撃されていないことを確認するために，
 キングがそのマスに動いたときに攻撃されるかを見るための
 仮の盤面を出力する
 
 Parameters
 ----------
 startpos_y : int
 開始位置y座標．
 endpos : tuple > (int, int)
 終了位置．絶対座標．

 Returns
 -------
 gameboard_tmp : dict > {(int, int): obj, ...}
 '''
 ...

 def path_is_not_attacked(startpos_y, king_route):
 '''
 キングが通るマスのどれかが相手の駒に攻撃されていれば False を返す
 
 Parameters
 ----------
 startpos_y : int
 開始位置y座標．
 king_route : list > [int, ...]
 キングが通る位置x座標のリスト．

 Returns
 -------
 bool
 '''
 ...

 common_req = (self.can_castling[piece.color][side] # キャスリングに関与する駒が一度も動いていない
 and not self.is_check(piece.color, gameboard)) # キングがチェックされていない
 # 白のキャスリング
 if piece.color == 'W':
 piece_req = (piece.name == 'WK'
 and (7*side, 0) in gameboard
 and gameboard[(7*side, 0)].name == 'WR')
 # クイーンサイド
 if side == 0:
 special_req = (endpos == (2, 0)
 # キングとルークの間に駒がない
 and (1, 0) not in self.gameboard
 and (2, 0) not in self.gameboard
 and (3, 0) not in self.gameboard
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(0, [2, 3])
 )
 # キングサイド
 if side == 1:
 special_req = (endpos == (6, 0)
 # キングとルークの通過するマスに駒がない
 and (6, 0) not in self.gameboard
 and (5, 0) not in self.gameboard
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(0, [6, 5])
 )
 # 黒のキャスリング
 if piece.color == 'B':
 piece_req = (piece.name == 'BK'
 and (7*side, 7) in gameboard
 and gameboard[(7*side, 7)].name == 'BR')
 # クイーンサイド
 if side == 0:
 special_req = (endpos == (2, 7)
 # キングとルークの通過するマスに駒がない
 and (1, 7) not in self.gameboard
 and (2, 7) not in self.gameboard
 and (3, 7) not in self.gameboard
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(7, [2, 3])
 )
 # キングサイド
 if side == 1:
 special_req = (endpos == (6, 7)
 # キングとルークの通過するマスに駒がない
 and (6, 7) not in self.gameboard
 and (5, 7) not in self.gameboard
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(7, [6, 5])
 )

 return common_req and piece_req and special_req
```

このうち`common_req`については編集する必要がありません。

これは「キャスリングに関与する駒が一度も動いていない」および「キングがチェックされていない」ことを保証する変数ですが、

これらはキングやルークの初期位置が関わらないからです。

 

`piece_req`はどうでしょう。

これは「動かす駒が自分のキングであること」と「キャスリングに関与するルークが初期位置にあること」を保証します。

前半は関係しませんが、後半は初期位置が関係してくるので、編集が必要です。

必要になるのはルークの初期位置です。

 

`special_req`も編集が必要です。

これには「キングのキャスリング後の位置」「ルークの通過するマスの座標」「キングが通過するマスの座標」の３つが必要であり、

このうち後ろの２つを変更しなければなりません。

それには「ルークの初期位置」「キングの初期位置」が最低限必要になります。

### ルーク・キングの初期位置を取得する

初期位置といっても x 座標しか使いませんので、それだけ取得できれば十分です。

初期位置は`games`モジュールに定義されている各クラスのプロパティ`placers`に、次のような形で定義されています。

```py
placers = {1: [Rook, Knight, Bishop, Queen, King, Bishop, Knight, Rook],
 2: [Pawn] * size}
```

x 座標はリストのインデックスと等しいので、`enumerate`関数を使って次のように初期位置のリストを取得することができます。

```py
rook_init_pos = [pos for pos, piece in enumerate(placers[1]) if piece == Rook]
king_init_pos = placers[1].index(King)
```

ルークは複数個存在しえますが、キングはひとつしか存在しえないので、`index`を使えばよいでしょう。

 

これらを使って、`piece_req`と`special_req`を書き換えると、例えば次のようになります。

```py ins=4-5 del=2-3 inline_hl=2:4-6;3:5-7;4:4-7;5:5-8
piece_req = (piece.name == 'WK'
 and (7*side, 0) in gameboard
 and gameboard[(7*side, 0)].name == 'WR')
 and (rook_init_pos[side], 0) in gameboard
 and gameboard[(rook_init_pos[side], 0)].name == 'WR')
```

```py ins=1-9,15-16,19 del=12-14,18 inline_hl=18:7-12;19:7-19
gameboard_tmp = copy(gameboard)
# キャスリングに関与するキングとルークは除外して考える
if (king_init_pos, 0) in gameboard_tmp:
 del gameboard_tmp[(king_init_pos, 0)]
if (rook_init_pos[side], 0) in gameboard_tmp:
 del gameboard_tmp[(rook_init_pos[side], 0)]
# キングとルークの通過するマス
king_route = list(range(2, king_init_pos)) + list(range(2, king_init_pos, -1))
rook_route = list(range(3, rook_init_pos[side])) + list(range(3, rook_init_pos[side], -1))
special_req = (endpos == (2, 0)
 # キングとルークの通過するマスに駒がない
 and (1, 0) not in self.gameboard
 and (2, 0) not in self.gameboard
 and (3, 0) not in self.gameboard
 and not any((x, 0) in gameboard_tmp
 for x in king_route + rook_route)
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(0, [2, 3])
 and path_is_not_attacked(0, list(x for x in range(2, king_init_pos))
 )
```

同様にして他の場合についても書き換えると次のようになります。

盤面の大きさはゲームによっては8とは限らないので、`size`から計算しています。

```py name=main.py ins=3-6,15-22,25-27,33-34,37,41-43,45,49-50,53,60-67,70-72,74,79-80,83,87-89,91,95-96,99 del=13-14,30-32,36,44,47-48,52,58-59,73,76-78,82,90,93-94,98 inline_hl=13:4-6;14:5-7;15:4-7;16:5-8;36:7-12;37:7-20;44:8;45:8-11;52:7-12;53:7-27;58:4-6;59:5-7;60:4-7;61:5-8;73:11;74:10-13;82:4-12;83:4-23;90:8-11;91:8-16;98:4-12;99:4-30
def castling_requirements(self, piece, endpos, side, gameboard):
 ...
 size = self.kind.size
 
 rook_init_pos = [pos for pos, piece in enumerate(self.kind.placers[1]) if piece == Rook]
 king_init_pos = self.kind.placers[1].index(King)
 ...
 common_req = (self.can_castling[piece.color][side] # キャスリングに関与する駒が一度も動いていない
 and not self.is_check(piece.color, gameboard)) # キングがチェックされていない
 # 白のキャスリング
 if piece.color == 'W':
 piece_req = (piece.name == 'WK'
 and (7*side, 0) in gameboard
 and gameboard[(7*side, 0)].name == 'WR')
 and (rook_init_pos[side], 0) in gameboard
 and gameboard[(rook_init_pos[side], 0)].name == 'WR')
 gameboard_tmp = copy(gameboard)
 # キャスリングに関与するキングとルークは除外して考える
 if (king_init_pos, 0) in gameboard_tmp:
 del gameboard_tmp[(king_init_pos, 0)]
 if (rook_init_pos[side], 0) in gameboard_tmp:
 del gameboard_tmp[(rook_init_pos[side], 0)]
 # クイーンサイド
 if side == 0:
 # キングとルークの通過するマス
 king_route = list(range(2, king_init_pos)) + list(range(2, king_init_pos, -1))
 rook_route = list(range(3, rook_init_pos[side])) + list(range(3, rook_init_pos[side], -1))
 special_req = (endpos == (2, 0)
 # キングとルークの間に駒がない
 and (1, 0) not in self.gameboard
 and (2, 0) not in self.gameboard
 and (3, 0) not in self.gameboard
 and not any((x, 0) in gameboard_tmp
 for x in king_route + rook_route)
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(0, [2, 3])
 and path_is_not_attacked(0, list(x for x in range(2, king_init_pos)))
 )
 # キングサイド
 if side == 1:
 # キングとルークの通過するマス
 king_route = list(range(size - 2, king_init_pos)) + list(range(size - 2, king_init_pos, -1))
 rook_route = list(range(size - 3, rook_init_pos[side])) + list(range(size - 3, rook_init_pos[side], -1))
 special_req = (endpos == (6, 0)
 special_req = (endpos == (size - 2, 0)
 # キングとルークの通過するマスに駒がない
 and (6, 0) not in self.gameboard
 and (5, 0) not in self.gameboard
 and not any((x, 0) in gameboard_tmp
 for x in king_route + rook_route)
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(0, [6, 5])
 and path_is_not_attacked(0, list(x for x in range(size - 2, king_init_pos, -1)))
 )
 # 黒のキャスリング
 if piece.color == 'B':
 piece_req = (piece.name == 'BK'
 and (7*side, 7) in gameboard
 and gameboard[(7*side, 7)].name == 'BR')
 and (rook_init_pos[side], size - 1) in gameboard
 and gameboard[(rook_init_pos[side], size - 1)].name == 'BR')
 gameboard_tmp = copy(gameboard)
 # キャスリングに関与するキングとルークは除外して考える
 if (king_init_pos, size - 1) in gameboard_tmp:
 del gameboard_tmp[(king_init_pos, size - 1)]
 if (rook_init_pos[side], size - 1) in gameboard_tmp:
 del gameboard_tmp[(rook_init_pos[side], size - 1)]
 # クイーンサイド
 if side == 0:
 # キングとルークの通過するマス
 king_route = list(range(2, king_init_pos)) + list(range(2, king_init_pos, -1))
 rook_route = list(range(3, rook_init_pos[side])) + list(range(3, rook_init_pos[side], -1))
 special_req = (endpos == (2, 7)
 special_req = (endpos == (2, size - 1)
 # キングとルークの通過するマスに駒がない
 and (1, 7) not in self.gameboard
 and (2, 7) not in self.gameboard
 and (3, 7) not in self.gameboard
 and not any((x, size - 1) in gameboard_tmp
 for x in king_route + rook_route)
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(7, [2, 3])
 and path_is_not_attacked(size - 1, list(x for x in range(2, king_init_pos)))
 )
 # キングサイド
 if side == 1:
 # キングとルークの通過するマス
 king_route = list(range(size - 2, king_init_pos)) + list(range(size - 2, king_init_pos, -1))
 rook_route = list(range(size - 3, rook_init_pos[side])) + list(range(size - 3, rook_init_pos[side], -1))
 special_req = (endpos == (6, 7)
 special_req = (endpos == (size - 2, size - 1)
 # キングとルークの通過するマスに駒がない
 and (6, 7) not in self.gameboard
 and (5, 7) not in self.gameboard
 and not any((x, size - 1) in gameboard_tmp
 for x in king_route + rook_route)
 # キングが通過するマスが敵に攻撃されていない
 and path_is_not_attacked(7, [6, 5])
 and path_is_not_attacked(size - 1, list(x for x in range(size - 2, king_init_pos, -1)))
 )

 return common_req and piece_req and special_req
```

`create_tmp_board`の中身も変更しておきます。

```py name=main.py ins=24-26 del=21-23 inline_hl=21:4;22:9;23:5;24:4;25:9;26:5
def castling_requirements(self, piece, endpos, side, gameboard):
 ...
 def create_tmp_board(startpos_y, endpos):
 '''
 キングの通過するマスが攻撃されていないことを確認するために，
 キングがそのマスに動いたときに攻撃されるかを見るための
 仮の盤面を出力する

 Parameters
 ----------
 startpos_y : int
 開始位置y座標．
 endpos : tuple > (int, int)
 終了位置．絶対座標．

 Returns
 -------
 gameboard_tmp : dict > {(int, int): obj, ...}
 '''
 gameboard_tmp = copy(gameboard)
 if (4, startpos_y) in gameboard_tmp:
 gameboard_tmp[endpos] = gameboard_tmp[(4, startpos_y)]
 del gameboard_tmp[(4, startpos_y)]
 if (king_init_pos, startpos_y) in gameboard_tmp:
 gameboard_tmp[endpos] = gameboard_tmp[(king_init_pos, startpos_y)]
 del gameboard_tmp[(king_init_pos, startpos_y)]
 return gameboard_tmp
```


 

これでキャスリングの条件判定は正しく行えるようになりました。

ただし、まだ駒の再配置のコードの変更や、キングが１歩しか移動しない場合の曖昧性の排除が必要です。

長くなってしまったので、それは<pstlk label="次回" to="chess-app-devel-19" />以降にまわしたいと思います。

お読みいただきありがとうございました。

ではまた<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 18 回です。
前回はチェス960の初期配置を生成して、基本的な部分は遊べるようになりました。
しかしチェス960のキャスリングは通常のキャスリングを拡大解釈する必要があります。
…

チェスアプリ開発(18) キャスリングの拡張（条件の一般化）

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 17 回です。

<pstlk label="前回" to="chess-app-devel-16" />は Pygame でゲームに効果音を追加しました。

今回は変則チェスのひとつである[チェス960](https://ja.wikipedia.org/wiki/%E3%83%81%E3%82%A7%E3%82%B9960)を追加してみたいと思います。



 

<toc />

## チェス960とは

チェスの初期配置を一定の条件のもとにランダム化するものです。

ポーンの位置は通常と同じで、残りの駒を次の条件を満たすよう白と黒が対称になるように配置します。

- 同色のビショップは色違いのマスに置く
- キングは自分のルークの間のどこかに置く

この条件を満たすような駒の配置は、

白マスのビショップの配置方法を決め、黒マスのビショップの配置方法を決め、

クイーンの配置方法を決め、そしてナイトの配置方法を決めれば、

キングがルークの間になければならないので、残りのルークとキングの配置は自動的に定まります。

よって合計で

$$
\begin{aligned}
4 \cdot 4 \cdot 6 \cdot {}_5 \mathrm{C} _2
&= 4 \cdot 4 \cdot 6 \cdot 10 \\\\ 
&= 960
\end{aligned}
$$

より 960 通りの方法があります。

これがゲーム名の由来となっています。

通常の配置を除くと959通りになります。

 

## 初期配置生成

このチェス960をゲームに落とし込んでいきます。

まずは初期配置を生成します。

### シャッフルで生成する方法

条件を満たすまでポーン以外の駒の配置をシャッフルで生成する方法です。

```py name=games.py
from random import shuffle

class Chess960:
 '''チェス960'''
 # 盤面のサイズ
 size = 8
 # キャスリングの有無
 castling = True
 # プロモーション先
 promote2 = [Knight, Bishop, Rook, Queen]
 # 駒の配置
 placers = {1: [Rook, Knight, Bishop, Queen, King, Bishop, Knight, Rook],
 2: [Pawn] * size}
 
 def __init__(self):
 # 駒の配置の決定
 while True:
 shuffle(self.placers[1])
 # 2つのビショップのマス色は違わなければならない
 bishops = [pos for pos, piece in enumerate(self.placers[1]) if piece == Bishop]
 if bishops[0] % 2 == bishops[1] % 2:
 continue
 # キングが2つのルークの間にいなければならない
 rooks = [pos for pos, piece in enumerate(self.placers[1]) if piece == Rook]
 if King not in self.placers[1][rooks[0]:rooks[1]]:
 continue
 # 通常の配置と異なる
 if self.placers[1] == [Rook, Knight, Bishop, Queen, King, Bishop, Knight, Rook]:
 continue
 break
 
 # 画像IDの割り当て
 ID = {}
 ...
```

全部で $\frac{8!}{2!2!2!1!1!}=5040$ 通りになるので、最悪 4000 通りほどの無駄が発生します。
### ID を使う方法

[ID番号](https://ja.wikipedia.org/wiki/%E3%83%81%E3%82%A7%E3%82%B9960#%E5%88%9D%E6%9C%9F%E4%BD%8D%E7%BD%AE%E3%81%AE_ID)から配置を割り出す方法があります。

0 - 959 までのランダムな数値を生成してから、対応する配置を生成することで、

無駄なく初期配置を生成できます。

> ID 番号から配置を割り出すには次のようにする。
>
> - ID番号を4で割った剰余は、白枡ビショップの位置を表す: 0 は b ファイル、1 は d ファイル、2 は f ファイル、3 は h ファイル。
> - 前項の商をさらに4で割った剰余は、黒枡ビショップの位置を表す: 0 は a ファイル、1 は c ファイル、2 は e ファイル、3 は g ファイル。
> - 前項の商をさらに6で割った剰余は、（2個のビショップを除いた）6個の空き枡におけるクイーンの位置を表す: 0 は いちばん左の空き枡、5 は いちばん右の空き枡。
> - 前項の商は、0 から 9 の間にある。これを KRN（カーン）コードと呼び、残り5つの枡におけるキング・ルーク・ナイトの位置を表す。

KRN コード|位置
:-------:| ---
0 | N N R K R
1 | N R N K R
2 | N R K N R
3 | N R K R N
4 | R N N K R
5 | R N K N R
6 | R N K R N
7 | R K N N R
8 | R K N R N
9 | R K R N N

（[チェス960 - Wikipedia](https://ja.wikipedia.org/wiki/%E3%83%81%E3%82%A7%E3%82%B9960#%E5%88%9D%E6%9C%9F%E4%BD%8D%E7%BD%AE%E3%81%AE_ID) より引用）

KRN コードの定義が少し面倒です。

キングがルークの間になければならないという制約があるので、ただ単にありえる順列を列挙すればいいというわけではありません。

```py name=games.py hl_lines=1,15-57
from random import randint

class Chess960:
 '''チェス960'''
 # 盤面のサイズ
 size = 8
 # キャスリングの有無
 castling = True
 # プロモーション先
 promote2 = [Knight, Bishop, Rook, Queen]
 # 駒の配置
 placers = {1: [None] * size,
 2: [Pawn] * size}
 
 ID = {}
 
 def __init__(self):
 # 駒の配置の決定
 pos_id = randint(0, 959)
 while pos_id == 518:
 pos_id = randint(0, 959)
 krn = [
 [Knight, Knight, Rook, King, Rook],
 [Knight, Rook, Knight, King, Rook],
 [Knight, Rook, King, Knight, Rook],
 [Knight, Rook, King, Rook, Knight],
 [Rook, Knight, Knight, King, Rook],
 [Rook, Knight, King, Knight, Rook],
 [Rook, Knight, King, Rook, Knight],
 [Rook, King, Knight, Knight, Rook],
 [Rook, King, Knight, Rook, Knight],
 [Rook, King, Rook, Knight, Knight]
 ]

 q, r = pos_id//4, pos_id%4
 self.placers[1][2*r + 1] = Bishop

 q, r = q//4, q%4
 self.placers[1][2*r] = Bishop

 q, r = q//6, q%6
 for i in range(self.size):
 if self.placers[1][i] is None:
 if i == r:
 self.placers[1][i] = Queen
 break
 else: r += 1
 
 for piece in krn[q]:
 self.placers[1][self.placers[1].index(None)] = piece
 
 # 画像IDの割り当て
 for rk in self.placers:
 for fl in range(self.size):
 if self.placers[rk][fl] is not None:
 self.ID['W' + self.placers[rk][fl].abbr] = self.size * rk + fl
 self.ID['B' + self.placers[rk][fl].abbr] = -(self.size * rk + fl)
```

これで初期配置が生成できました。

 

## ゲーム追加

<pstlk label="第15回" to="chess-app-devel-15" />の方法と同様にして、定義したゲームを追加していきます。

```py name=games.py ins=4 del=3 inline_hl=4:9-10
...
# ゲーム選択画面に表示するゲーム
game_dict = {0: (Normal, withUnicorn)}
game_dict = {0: (Normal, Chess960, withUnicorn)}
```

```py name=utils.py ins=4 del=3 inline_hl=4:9-11
...
# ゲーム選択画面に表示するゲーム名
game_name_dict = {0: ('Normal Chess', 'Unicorn')}
game_name_dict = {0: ('Normal Chess', 'Chess 960', 'Unicorn')}
...
```

これでチェス960が遊べるようになりました。

<postimage src="chess960" alt="チェス960 初期盤面" />

ところが、チェス960のキャスリングは少々特殊な処理を加える必要があります。

<pstlk label="次回" to="chess-app-devel-18" />はキャスリング部分の実装をしていきます。

お読みいただきありがとうございました。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 17 回です。
前回は Pygame でゲームに効果音を追加しました。
今回は変則チェスのひとつである<a href="https://ja.wikipedia.org/wiki/%E3%83%81%E3%82%A7%E3%82%B9960" target="_blank" rel="noopener noreferrer">チェス960</a>を追加してみたいと思います。
…

チェスアプリ開発(17) チェス960 初期配置の決定

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 16 回です。

<pstlk label="前回" to="chess-app-devel-15" />まででフェアリー駒の作成やゲーム種類の拡張をすることができるようになりました。

今回は少し横道にそれて、ゲーム内で効果音を鳴らしてみます。

よりゲームっぽくなります。



 

<toc />

## Pygame を導入する

[Pygame](https://www.pygame.org/news) というモジュール集には、ゲーム制作のためのさまざまなモジュールが用意されています。

これを使うと簡単に効果音を鳴らすことができるようになります。

今更ですが描画もできるようです。

（最初から全部 Pygame で実装しろって話よな）

 

pip を使ってインストールします。

`pip install pygame`

 

## 効果音を鳴らす

次に効果音を用意して、ゲーム内で鳴らしてみます。

音声ファイル形式は`wav`にしておきましょう。

`mp3`だとうまくいきません。

 

まずは音声の初期設定をします。

```py name=main.py
...
import pygame
...

# 音声の設定
pygame.mixer.init()
snd = pygame.mixer.Sound
# 各効果音の設定
select_snd = snd('../sounds/select.wav')
move_snd = snd('../sounds/move.wav')
...
```

これで、あとは音を鳴らしたいところで、`select_snd.play()`のように記述するだけです。

 

少ないですが、今回の変更も [GitHub](https://github.com/midorimici/chess-program-for-python-and-OpenGL/commit/8aec761cb64d1c12d8a43705ab0f7d804efbf09e) に上げておきます。

---

<pstlk label="次回" to="chess-app-devel-17" />はチェス960を追加してみたいと思います。

お読みいただきありがとうございました～

ではでは<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 16 回です。
前回まででフェアリー駒の作成やゲーム種類の拡張をすることができるようになりました。
今回は少し横道にそれて、ゲーム内で効果音を鳴らしてみます。
よりゲームっぽくなります。
…

チェスアプリ開発(16) 効果音の追加(Pygame)

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 15 回です。

<pstlk label="前回" to="chess-app-devel-14" />はフェアリー駒を作成しました。

今回はさまざまな種類のフェアリーチェスを切り替えられるようにしていきます。



現在の状態では、スクリプトを起動するとすぐに盤面が表示されて遊べる状態になりますが、

この前にいったんゲーム種類を選択する画面を入れます。

 

選択画面では５行２列、１ページで10種類のゲームを並べることにします。

画面で特定のボタンを押すと、対応するゲームの盤面がセットされてゲームがスタートするようにします。

そのためには、押したボタンによってセットする盤面や駒を変化させることになります。

 

<toc />

## ゲームを定義する

ゲームによって変化するのは、盤面のサイズ、キャスリングの有無、ポーンのプロモーション先、

どの駒がどこに置かれているのかや、画像IDと駒の対応の情報です。

 

これらを定義したクラスをゲーム種類ごとに作成します。

これらのクラスの定義をまとめたモジュール`games.py`を作成します。

```py name=games.py
'''ゲームの種類によって変わる駒の配置や名前、画像IDを記録したモジュール'''

from pieces import *


class Normal:
 '''通常のチェス'''
 # 盤面のサイズ
 size = 8
 # キャスリングの有無
 castling = True
 # プロモーション先
 promote2 = [Knight, Bishop, Rook, Queen]
 # 駒の配置
 placers = {1: [Rook, Knight, Bishop, Queen, King, Bishop, Knight, Rook],
 2: [Pawn] * size}
 # 画像IDの割り当て
 ID = {}
 for rk in placers:
 for fl in range(size):
 if placers[rk][fl] is not None:
 ID['W' + placers[rk][fl].abbr] = size * rk + fl
 ID['B' + placers[rk][fl].abbr] = -(size * rk + fl)


class withUnicorn:
 '''キングサイドのナイトがユニコーンになったチェス'''
 # 盤面のサイズ
 size = 8
 # キャスリングの有無
 castling = True
 # プロモーション先
 promote2 = [Knight, Bishop, Rook, Queen, Unicorn]
 # 駒の配置
 placers = {1: [Rook, Knight, Bishop, Queen, King, Bishop, Unicorn, Rook],
 2: [Pawn] * size}
 # 画像IDの割り当て
 ID = {}
 for rk in placers:
 for fl in range(size):
 if placers[rk][fl] is not None:
 ID['W' + placers[rk][fl].abbr] = size * rk + fl
 ID['B' + placers[rk][fl].abbr] = -(size * rk + fl)
```

クラス名は駒クラス名と異なることに注意します。

画像IDには、各種各色の駒に一意的に整数が割り当てられます。

 

これらのクラスをもとにしてインスタンスを作成し、その属性を元に盤面や駒を設置します。

インスタンス作成のタイミングは、ゲームの種類が決まったとき＝特定のボタンが押されたときですが、

ひとまずインスタンスを代入する変数の宣言をしておきます。

```py name=main.py ins=6-7,10-16,28-35 del=5,19-27
class Game:
 def __init__(self):
 self.playersturn = W
 self.gameboard = {}
 self.place_pieces()
 # ゲームの種類
 self.kind = None
 ...

 def after_deciding_kind(self):
 '''ゲーム種類決定後の処理'''
 # 駒の配置
 self.place_pieces() 
 # 画像の設定
 for name, num in self.kind.ID.items():
 set_img(name, name[0], num)

 def place_pieces(self):
 for i in range(0, 8):
 self.gameboard[(i, 1)] = Pawn(W, 1)
 self.gameboard[(i, 6)] = Pawn(B, -1)
　
 placers = [Rook, Knight, Bishop, Queen, King, Bishop, Unicorn, Rook]
　
 for i in range(0, 8):
 self.gameboard[(i, 0)] = placers[i](W)
 self.gameboard[(i, 7)] = placers[i](B)
 for fl in range(self.kind.size):
 for rk in self.kind.placers:
 # None を指定すれば駒が置かれることはなく次のマスへ進む
 if self.kind.placers[rk][fl] is not None:
 # 白の駒
 self.gameboard[(fl, rk - 1)] = self.kind.placers[rk][fl]('W')
 # 黒の駒
 self.gameboard[(fl, self.kind.size - rk)] = self.kind.placers[rk][fl]('B')
...
```

`after_deciding_kind`メソッドで、インスタンスの属性をもとに駒の配置と画像IDの設定をしています。

 

`Pawn`クラスでは独自にコンストラクタを設定していましたが、

色によって進む方向は明白なので特別に定義する必要はありません。

```py name=pieces.py ins=13 del=6-11
...

class Pawn(Piece):
 abbr = 'P'

 def __init__(self, color, direction):
 self.color = color
 # of course, the smallest piece is the hardest to code. direction should be either 1 or -1, should be -1 if the pawn is traveling "backwards"
 self.direction = direction
 self.name = color + self.abbr
　
 def available_moves(self, x, y, gameboard):
 self.direction = 1 if self.color == 'W' else -1
 ...
```


 

## ゲームボタンを表示する

５行２列にボタンを並べる関数を定義します。

```py name=utils.py
...
def draw_button(left, right, bottom, top,
 letter, back_color=(1.00, 0.81, 0.62), font_color=(0.82, 0.55, 0.28)):
 '''ボタンを描画する

 Parameters
 ----------
 left, right, bottom, top : float
 ボタンの左右下上端の座標．
 letter : str
 ボタン上に描画する文字．
 back_color : tuple or list, default (1.00, 0.81, 0.62)
 ボタンの色．
 font_color : tuple or list, default (0.82, 0.55, 0.28)
 文字の色．
 '''
 glColor(*back_color)
 glBegin(GL_QUADS)
 glVertex(left, bottom)
 glVertex(left, top)
 glVertex(right, top)
 glVertex(right, bottom)
 glEnd()
 glColor(*font_color)
 draw_str((left + right) / 2 - 0.1 * len(letter), (bottom + top) / 2, letter, gap=0.2)


# ゲーム選択画面に表示するゲーム名
game_name_dict = {0: ('Normal Chess', 'Unicorn', 'A', 'B', 'C'),
 1: ('D', 'E', 'F')}


def draw_game_menu():
 '''ゲーム選択メニューを描画する'''
 for i in range(2):
 for j in range(5):
 if i in game_name_dict and j < len(game_name_dict[i]):
 draw_button(4.5*i - 0.5, 4.5*i + 3.0, 6.5 - 1.5*j, 7.5 - 1.5*j,
 game_name_dict[i][j])
...
```

25行目の`0.1`や `0.2`という数値は見え方によって調整します。

これを描画イベント内部で使用します。

```py name=main.py hl_lines=8-10
from utils import *
...

class Game:
 ...
 def draw(self):
 ...
 if self.kind == None:
 draw_game_menu()
 else:
 if self.time == 1:
 self.main()
 ...
 ...
```

これでボタンが表示されました。

<postimage src="game_buttons" alt="ゲームボタン" />

 

## ボタンクリックに対応する

ボタンをクリックしたときに、指定のゲーム種類を内部で登録するようにします。

まず、表示位置に対応するゲームクラスを格納するディクショナリを定義します。

```py name=games.py
...
# ゲーム選択画面に表示するゲーム
game_dict = {0: (Normal, withUnicorn)}
```

表示用に使った`A B C ...`はクラスを作っていないので省いています。

 

これを使ってマウスイベントの処理を書きます。

```py name=main.py hl_lines=2,13-21
...
from games import *
...

class Game:
 ...
 def mouse(self, button, state, x, y):
 ...
 # 左クリック
 if (button == GLUT_LEFT_BUTTON
 and state == GLUT_DOWN):
 try:
 # ゲーム種類選択
 if self.kind == None:
 for i in range(2):
 for j in range(5):
 if i in game_dict and j < len(game_dict[i]):
 if on_square(*self.mousepos, 4.5*i - 0.5, 4.5*i + 3.0, 6.5 - 1.5*j, 7.5 - 1.5*j):
 self.kind = game_dict[i][j]()
 self.after_deciding_kind()
 else:
 ...
 ...
```

これでゲームの選択を実現できました。

ボタンを選択すると盤面と駒が表示されます。

 

今回の変更は [GitHub](https://github.com/midorimici/chess-program-for-python-and-OpenGL/releases/tag/v.1.5) にて公開しています。

---

基本的にこれまで解説してきたことを使えば、フェアリー駒の作成やゲーム種類の拡張をすることができるようになります。

あとは特殊な挙動の駒をどう実装するか、などといった細かい話になってきます。

お読みいただきありがとうございました。

ではまた<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Python プログラムで動かすフェアリーチェスアプリ開発、連載第 15 回です。
前回はフェアリー駒を作成しました。
今回はさまざまな種類のフェアリーチェスを切り替えられるようにしていきます。
…

チェスアプリ開発(15) ゲームの切り替え

Windows 10 Home で Docker を使えるようにする方法について説明します。

 

<toc />

## Windows をバージョン2004に更新する

Windows バージョン2004では WSL2 が利用できるようになりました。



まずは自分の Windows のバージョンを確認します。

`設定＞システム＞バージョン情報`です。

<postimage src="windows-version" alt="Windos バージョン確認" />

「バージョン」が2004、OS ビルドが19018以上になっていることを確認します。

これが満たされていない場合は、手動で更新する必要があります。

 

こちらのページからアップデートができます。

→ [Windows 10 のダウンロード](https://www.microsoft.com/ja-jp/software-download/windows10)

結構時間がかかります。

全体で１時間以上はかかりました。

 

## WSL2 を有効化する

`コントロールパネル＞プログラム＞Windows の機能の有効化または無効化`から、

「Linux 用 Windows サブシステム」にチェックを入れます。

<postimage src="wsl2" alt="WSL2 有効化" />

Docker は Linux 上で動くのでこれが必要です。

 

## Docker Desktop for Windows をインストールする

Docker Hub から Docker Desktop for Windows をダウンロードします。

→ [Docker Desktop for Windows - Docker Hub](https://hub.docker.com/editions/community/docker-ce-desktop-windows/)

Stable（安定版） と Edge（最新版） がありますが、Stable で大丈夫です。

 

ダウンロードしたら`Docker Desktop Installer.exe`を実行してインストーラを起動します。

`Endable WSL 2 Windows Features`にチェックがついていることを確認してインストールを開始します。

インストールが完了したらターミナルで`docker --version`と入力し、

インストールできているか確認します。

 

## BIOS 設定で Virtualization Technology を有効にする

BIOS 設定に入るには、PC の起動直後に何らかのキー（機種による）を連打します。

「(メーカ) BIOS」のように検索すると BIOS 画面表示方法が見つかると思います。

BIOS で、`Virtualization Technology`の項目を`Enabled`に変更します。

 

以上で Docker が使えるようになりました。

Docker Desktop を起動すると使えるようになります。

---

お役に立てれば幸いです。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Windows 10 Home で Docker を使えるようにする方法について説明します。
 
<h2>Windows をバージョン2004に更新する</h2>
Windows バージョン2004では WSL2 が利用できるようになりました。
…

【Docker】Windows 10 Home で Docker をセットアップ

Docker を使って建てた仮想コンテナ内で Svelte の開発環境を構築する方法をご紹介します。

Docker の導入は済んでいるものとします。



 

<toc />

## Docker とは

「コンテナ」と呼ばれる**仮想環境を作成したり編集したりすることができる**ものです。

仮想環境を作ることで、物理的な制約とは無関係な仮想的な環境で作業をすることができます。

 

「イメージ」と呼ばれるものを元にしてコンテナを作成します。

<relpos link="windows10home-docker" />

 

## Svelte とは

JavaScript のフレームワークです。

初版が 2016 年と、React や Vue と比べても比較的新しいものです。

 

HTML、JavaScript とほぼ同じコード形態で書けるために**学習コストが少なく、**

**シンプルに書ける**ことが特徴です。

その名前の表す通り、ミニマムな印象です。

 

関係ないですが、読み方は英語読みだと「スヴェルト」。

私はラテン語風に「スウェルテ」と読むのが好きです。

<relpos link="library-framework-chigai" />

 

## 戦略

目的は「Docker コンテナ内で Svelte 関連ファイルを編集して、コンテナ内で立ち上げた localhost に接続したら変更が反映されている」ことです。

つまり、コンテナ内で vi エディタなどを使ってファイルを編集し、

`npm run dev`コマンドで localhost 立ち上げをし、ブラウザでそこに接続します。

そうすることでホストOS内のファイルを編集することなく、Svelte をいじれます。

 

## 手順

### コンテナ外部の操作

まずは Svelte を導入します。

プロジェクトのディレクトリ名（最後の引数）は任意です。

```bash hide_nums
$ npx degit sveltejs/template svelte-docker-test

$ cd svelte-docker-test
```

コンテナ内で`npx degit`しようとすると`degit`がエラーになってしまったので、

いったんローカルに初期ファイルを置いて、それを Docker コンテナ内に移すことにしています。

 

次にプロジェクトのディレクトリ以下で、イメージ作成のための Dockerfile を作成します。

```docker name=Dockerfile
# Node.js のイメージを元にする
FROM node:14-alpine

# コンテナ内の作業ディレクトリ
WORKDIR /usr/src/app

# ローカルのファイルをコンテナ内にコピー
COPY rollup.config.js ./
COPY package*.json ./

# 必要なパッケージをインストール
RUN npm install

# ローカルのファイルをコンテナ内にコピー
COPY ./src ./src
COPY ./public ./public

# コンテナ内でポートを公開
EXPOSE 5000

# 環境変数でホストアドレスを指定
ENV HOST=0.0.0.0
```

参考：[How to put a Svelte app in a docker container?](https://stackoverflow.com/questions/61106423/how-to-put-a-svelte-app-in-a-docker-container)

このファイルを元にイメージを作成します。

`svelte-image`の部分はイメージ名で、任意です。

```bash hide_nums
$ docker build -t svelte-image .
```

`docker images`コマンドでイメージが作成されたことを確認します。

 

続いて、このイメージを元にコンテナを作成します。

```bash hide_nums
$ docker run -p 5000:5000 --name svelte-container svelte-image
```

`--name`オプションでコンテナに名前（`svelte-container`）をつけています。

`-p`オプションではホストOSのポートとコンテナ内部のポートを接続しています。

`docker ps`でコンテナが起動していることを確認してください。

 

### コンテナ内部の操作

続いて、コンテナ内部に入ります。

```bash hide_nums
$ winpty docker exec -it svelte-container sh
/usr/src/app # 
```

私は Git Bash を使っているので、先頭に`winpty`をつけました。

最後の引数は使用するシェルで、bash だとエラーになるので sh を指定しました。

 

localhost を立ち上げます。

```sh hide_nums
/usr/src/app # npm run dev

> svelte-app@1.0.0 dev /usr/src/app
> rollup -c -w

rollup v2.26.6
bundles src/main.js → public/build/bundle.js...
LiveReload enabled
created public/build/bundle.js in 833ms

[2020-08-28 12:00:00] waiting for changes...

> svelte-app@1.0.0 start /usr/src/app
> sirv public "--dev"

 Your application is ready~! �

 - Local: http://0.0.0.0:5000
 - Network: http://172.17.0.2:5000

────────────────── LOGS ──────────────────


```

ブラウザから`localhost:5000`に接続すると、スタート画面が表示されます。

（表示されている２つの URL ではいずれもうまく接続できませんでした。）

<postimage src="hello-world" alt="Svelte スタート画面" />

 

### ファイルの編集

ファイルの編集もコンテナ内から行います。

ターミナルをもう一つ立ち上げてコンテナ内に入るか、サーバを停止します。

試しに`main.js`を編集してみます。

```sh hide_nums
/usr/src/app # ls
node_modules package.json rollup.config.js
package-lock.json public src
/usr/src/app # cd src
/usr/src/app/src # ls
App.svelte main.js
/usr/src/app/src # vi main.js
```

エディタは vi/vim になると思います。

vim が入っていなかったら`apk add vim`コマンドなどでインストールできます。

 

main.js を編集します。

```js name=main.js ins=7 del=6
import App from './App.svelte';

const app = new App({
 target: document.body,
 props: {
 name: 'world'
 name: 'svelte'
 }
});

export default app;
```

このように編集して再度`npm run dev`コマンドを打つ（別のターミナルで編集した場合はページをリロードする）と、変更が反映されます。

<postimage src="hello-svelte" alt="Hello Svelte" />

これでコンテナ内のコードをいじりまくっても、ローカルにはまったく影響なく開発できるようになります！

---

お役に立てれば幸いです。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

Docker を使って建てた仮想コンテナ内で Svelte の開発環境を構築する方法をご紹介します。
Docker の導入は済んでいるものとします。
…

Docker 上で Svelte 開発環境を構築する

2020年2月28日にこちらのブログを公開してから、180日が経過しました。

開設から半年経過したことになります。

現時点での成果と、それまでにあった色々なことを記録しておきます。



<toc />

## 成果

[Google Analytics](https://analytics.google.com/) によるユーザー数、セッション数、 ページビュー（PV）数のデータ（2/28 - 5/27 は不自然な大量アクセスを除いた推測値、数値は全て概数）です。

期間(90日)|ユーザー|セッション|ページビュー数
---|--:|--:|--:
2/28 - 5/27|230|440|1100
5/28 - 8/25|550|770|1320

いずれの項目も有意に増加しています。

6月あたりから検索流入が増えているので、この増分はほとんどが検索流入によるものだと思います。

 

Google Search Console を見ると、掲載順位が一桁のキーワードも多く、

古い記事もそれで読まれているみたいなので、SEO 的な効果だと思います。

もっとも最近はあまり SEO のことを考えながら書いてないのですが、

分野がニッチだから競合が少ないのかなと思います。

自分で調べても見つからなかったこととかを書いているので…

<postimage src="hugo-css" alt="hugo css 反映されない 検索結果" />

<postimage src="python-chess" alt="python チェス 検索結果" />

やはり公開日が早いものほど掲載順位が高い傾向にあります。

ある程度のラグがあるのは仕方ないみたいです。

 

## 3か月でやったこと

今までは足し算が多かったのですが、今回は引き算がメインだったかもしれません。

### 毎日更新をやめた

一応30日間連続更新は達成できたのですが、これ以上やる意味がないと判断しました。

それからは書きたいことがあったら書くという気まぐれなペースです。

月に５～７記事とか。

<relpos link="blog-mainichi-koshin" />

### Google Adsense をやめた

デメリットがメリットを上回ると判断し、Google Adsense による広告表示を停止しました。

理由をかいつまんで言うと、

- ページの表示速度が遅い
- 管理が面倒くさい
- 誰もクリックしない

やめてからは結構快適です。

<postimage src="pagespeedinsights" alt="PageSpeed Insights" />

ページの表示速度もこの通りです。

<relpos link="adsense-yameta-riyu" />

 

### YouTube をはじめた

動画で説明したほうがわかりやすいものもあるので、

解説動画を YouTube にアップしています。

ブログ記事からもリンクを貼って、多様なメディアに対応するようにしています。

 

ただ YouTube からブログへの流入はあまり期待していません。

<relpos link="seikahoukoku4" />

---

参考になれば幸いです。

では～<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

2020年2月28日にこちらのブログを公開してから、180日が経過しました。
開設から半年経過したことになります。
現時点での成果と、それまでにあった色々なことを記録しておきます。
…

ブログ公開から180日経過したのでいろいろあったことまとめ

jQuery は JavaScript のライブラリで、

ネイティブ JavaScript よりも簡単に書けることや

<tltp label="クロスブラウザ">どのブラウザでも同じ動作をする</tltp>であることからかなり普及してきました。



しかし、あまりにも普及しすぎたためか、

ネイティブの JavaScript よりも主流になった時代があったようです。

「脱 jQuery」という言葉をよく目にすることは、

jQuery は書けるのに JavaScript は書けないような人が一定数いることを示唆しています。

 

<toc />

## JavaScript と言いながら jQuery のコードを載せる

そういう背景があってか、jQuery のコードを載せておいて

JavaScript のコードは載せないというようなウェブサイトが多くあります。

 

それだけならまだしも、**タイトルで「JavaScript で～」と言いながらコードは jQuery** だったり、

本文でも「JavaScript のコードです」と言いながら中身は jQuery のコード、なんてこともままあります。

 

これはもう半分ぐらい詐欺だと思います。

それを書いている本人たちも、たぶん気づいていないんでしょうが。

 

## 何が問題なのか

JavaScript と jQuery は全く別物です。

jQuery を JavaScript と呼ぶのは、東京を日本と呼ぶようなものです。

この２つの違いを知らない初心者がこのようなウェブサイトの jQuery コードを見て、

「JavaScript ってこんな書き方できるんだ～」と思ってしまうかもしれません。

そういう**無駄な誤解や混乱を生むような書き方は避けるべき**です。

 

書くとしたら、「JavaScript のライブラリである jQuery を使うと」のような書き方をするか、

単に「jQuery では」とすべきです。

 

## 変換ツールつくりました

こういう状況下にあるので、参考にしたいウェブサイトがあったのに jQuery で書かれていた場合、

自分で JavaScript に変換するという工程が必要になります。

jQuery を勉強したくない自分としては、手っ取り早く変換できるツールがあれば便利だなと思いました。

そこで日本語と英語で調べてみたのですが、翻訳機のような変換を提供しているサイトは見つかりませんでした。

 

ということで、[こちらのサイト](https://adventar.org/calendars/1075)を参考に、変換ツールを作ってみました。

→ [jQuery -JavaScript Converter](https://jqjsconverter.netlify.app/)

これがかなり挫折と妥協の産物のようになってしまっていて、動作は中途半端なのですが、

どこかで役に立てばいいなと思います…。

これを作るために[公式ドキュメント](https://api.jquery.com/)などを読み込んだので、

だいぶ jQuery に詳しくなってしまいました。

---

お読みいただきありがとうございました。

では<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

jQuery は JavaScript のライブラリで、
ネイティブ JavaScript よりも簡単に書けることや
クロスブラウザであることからかなり普及してきました。
…

jQuery を JavaScript と呼ぶのはやめよう

ターミナルからファイルを開きたいが、

規定のプログラムではなく他のプログラムを指定して開きたいというときのコマンドをご紹介します。



今まではコマンドを使ってエクスプローラを開き、そこからGUI操作していたのですが、

コマンド一本で済ませられないかなーと試行錯誤した結果、うまくいきました。

 

<toc />

## 規定のプログラムで開く場合

規定のプログラムで開く場合は簡単です。

Windows なら`start ファイル名`（コマンドプロンプトならファイル名のみも可）を、

Mac や Linux なら`open ファイル名`のコマンドを打てば、

規定のプログラムで開くことができます。

このとき、ファイル名へのパスはカレントディレクトリからの相対パスを指定します。

 

## 規定ではないプログラムで開く場合

「HTML ファイルはいつも VS Code で開くけど、今はブラウザで開いて確認したい」

というようなときには、規定のプログラム（VS Code）ではないプログラム（ブラウザ）を指定することになります。

 

Windows のコマンドプロンプトなら`start プログラム名 ファイル名`と指定します。

```bash hide_nums
start firefox index.html
```


ファイル名へのパスはカレントディレクトリからの相対パスを指定します。

 

Mac や Linux なら`open -a プログラム名 ファイル名`です。

```bash hide_nums
open -a Firefox index.html
```

こちらもファイル名へのパスはカレントディレクトリからの相対パスで大丈夫だと思います。

 

ここまでは特に問題ないのですが、

問題は Windows で Git Bash を使っているときです。

### Git Bash の場合

答えから言うと、`start プログラム名 $(cygpath -w $(pwd)/ファイル名)`です。

```bash hide_nums
start firefox $(cygpath -w $(pwd)/index.html)
```

 

Git Bash で`start firefox index.html`と打つと、

`index.html`が URL とみなされて`http://www.index.html/`にアクセスしてしまいます。

Chrome でも同様です。

 

そこで絶対パスを指定しなければなりません。

それでいちいち絶対パスを打つのは面倒くさいと思って、

カレントディレクトリのパスを出力する`pwd`コマンドを使いたくなります。

でも`pwd`が出力するパスの形式は Windows のものとは異なります。

```bash hide_nums
$ pwd
/c/Users/username/Documents
```

そこで、パスを Windows 形式に変更するために、`cygpath -w`を使います。

```bash hide_nums
$ cygpath -w $(pwd)
C:\Users\username\Documents

$ cygpath -w $(pwd)\\index.html
C:\Users\username\Documents\index.html
```

コマンドを`$()`または<icode>``</icode>で囲むことで、その出力を別のコマンドに利用することができます。

これで絶対パスを取得できたので、これを引数として`start`コマンドに渡します。

```bash hide_nums
start firefox $(cygpath -w $(pwd)\\index.html)
```

なお、URL のアドレスバーでは`\`は`/`になりますので、

```bash hide_nums
start firefox $(cygpath -w $(pwd)/index.html)
```

でも大丈夫です。

 

## シェルスクリプトで簡略化

とはいえこのながーいコマンドをいちいち打つのは面倒です。

そこで**シェルスクリプト**（Windows ならバッチファイルもあり）です。

シェルスクリプトやバッチファイルはコマンドをまとめたものです。

Git Bash で使うならシェルスクリプトのほうがタイプ数が少ないし相性がいいと思います。

### ファイルを作成

まずシェルスクリプトを入れ込むディレクトリを作成します（任意）。

その中に`.sh`ファイルを作成します。

```bash hide_nums
$ mkdir shellscripts

$ cd shellscripts

$ vi open.sh
```

ファイルの中には次のように書きます。

```bash name=open.sh
#!/bin/bash

file=$1
bro=$2

if [ "$bro" == "c" ]
then
 bro="chrome"
else
 bro="firefox"
fi

start $bro $(cygpath -w $(pwd)/$file)

exit 0
```

`$1` `$2`は引数です。

3-4行目で変数に代入しています。

6-11行目では、ブラウザの指定が`c`のときには Chrome を、

特に指定がなかったときには Firefox をブラウザとして選択するという処理です。

13行目が本体のコマンドです。

### ファイルに権限を付与

ファイルに実行権限がないと直接実行できません。

まず実行権限を確認します。

```bash hide_nums
$ ls -l open.sh
-rwxr-xr-x ...
```

一番左の`-rwxr-xr-x`が権限の状態を表しています。

2-4文字目が所有者の権限を表していて、`rwx`なら読み、書き、実行の権限があるということです。

もし`rw-`のように、実行権限がなくなっていたら、`chmod`コマンドで権限を付与します。

```bash hide_nums
$ ls -l open.sh
-rw-r-xr-x ...

$ chmod 755 open.sh
または
$ chmod u+x open.sh

$ ls -l open.sh
-rwxr-xr-x ...
```

### パスを通す

次にパスを通して、どこからでも実行できるようにします。

シェルスクリプトへのパスを次のように指定します。

```bash hide_nums
$ export PATH="$PATH:/c/Users/username/Documents/shellscripts"
```

コマンドを使わないなら、Windows なら`システム環境変数の編集 > 環境変数 > Path`から追加することもできます。

 

これでどこからでも`open.sh`を使えるようになりました。

`open.sh index.html`と打てば Firefox でカレントディレクトリ以下の`index.html`を立ち上げてくれるようになります。

`open.sh index.html c`とすれば Chrome で立ち上げてくれます。

 

また、`open.sh`としましたが、実は拡張子がなくても動きます。

```bash hide_nums
$ mv open.sh open
```

これで`open index.html`のように、純粋なコマンドと同じような使い方ができるようになります。

こんなに短く書けるなんて感動です！

<relpos link="vim-kensaku-hanni" />

---

参考になれば幸いです。

では～<img className="emoji" draggable="false" alt="👋" src="https://twemoji.maxcdn.com/v/13.1.0/72x72/1f44b.png"/>

ターミナルからファイルを開きたいが、
規定のプログラムではなく他のプログラムを指定して開きたいというときのコマンドをご紹介します。
…