Auth0 で Workload Identity 連携
Cloud Datastore などの Google Cloud リソースにアクセスする際にサービスアカウントを作成することがあります。
サービスアカウントはリソースにアクセスする際に様々な認証方法を使用することができます。
そのうちのひとつがサービスアカウントキーで、これはユーザーがユーザー名とパスワードを使って認証するのと同じような方法です。 …
アプリ開発
Mock Service Worker (MSW) + Storybook の設定手順と使用例
Mock Service Worker (MSW) とは、Service Woker が API リクエストを受け取って、レスポンスを返すことができる API mock ライブラリです。
Introduction - Mock Service Worker Docs
MSW を使えば、Storybook とテストで共通の API mock handler を使用することができて便利です。
Storybook で MSW を使用するにあたっていくつか設定が必要になります。 …
【Rails API】CSRF 対策をあきらめないでちゃんとやる
Ruby on Rails を API として、フロントエンドとの間で通信をしようとしたところ、
セッションが保存されなかったり、Can't verify CSRF token authenticity というエラーが出てくることがあります。
多くのページでは解決方法として CSRF 対策をあきらめていますが、 …
WSL から React Native を Android Studio で動かす
React Native というモバイルアプリを作るツールがあります。
そこで作ったアプリを Android Studio のエミュレータで動かすことができます。
React Native のプロジェクトを WSL2(Windows Subsystem for Linux 2) の内部に置くこともできるのですが、 …
ガイスターアプリ開発(6) 勝敗判定
Python でつくるガイスター、連載第 6 回です。
前回は駒の移動と手番の交代を実装しました。
今回は勝敗の判定と表示をしていきます。 …
ガイスターアプリ開発(5) 駒の移動・ターン交代
Python でつくるガイスター、連載第 5 回です。
前回は初期盤面を生成して描画しました。
今回は駒の移動とターン交代の画面を用意します。 …
ガイスターアプリ開発(4) 初期盤面
Python でつくるガイスター、連載第 4 回です。
前回はマウス操作で駒の初期配置を決められるようになりました。
今回はゲーム本番での初期盤面を描画するところまでやっていきます。 …
ガイスターアプリ開発(3) 駒を配置する画面（マウス操作）
Python でつくるガイスター、連載第 3 回です。
前回はグリッドやボタンを描画しました。
今回はマウス操作でグリッドに駒を置いたり、ボタンを押したりできるようにします。 …
ガイスターアプリ開発(2) 駒を配置する画面（グリッド・駒・ボタン）
Python でつくるガイスター、連載第 2 回です。
前回は pygame の導入とテキスト表示をしました。
今回は駒の配置を決める画面の残りの要素を描画していきます。 …
ガイスターアプリ開発(1) 導入・駒を配置する画面（テキスト）
ガイスターというボードゲームがあります。
お互いが相手の駒が何かわからない状態で取り合うという心理戦の側面を兼ねたゲームです。 …
チェスアプリ開発(20) プロモーションの拡張
Python プログラムで動かすフェアリーチェスアプリ開発、連載第 20 回です。
前回でフェアリーチェスへのキャスリングの拡張が完了しました。
今回はポーンのプロモーションの拡張をしていきます。 …
チェスアプリ開発(19) キャスリングの拡張（曖昧性の排除と駒の再配置）
Python プログラムで動かすフェアリーチェスアプリ開発、連載第 19 回です。
前回はキャスリングの条件判定のコードを編集しました。
今回は曖昧な場合にキャスリングするかどうかの確認をするようにして、キャスリング時の駒の再配置のコードの編集もしていきます。 …
チェスアプリ開発(18) キャスリングの拡張（条件の一般化）
Python プログラムで動かすフェアリーチェスアプリ開発、連載第 18 回です。
前回はチェス960の初期配置を生成して、基本的な部分は遊べるようになりました。
しかしチェス960のキャスリングは通常のキャスリングを拡大解釈する必要があります。 …
チェスアプリ開発(17) チェス960 初期配置の決定
Python プログラムで動かすフェアリーチェスアプリ開発、連載第 17 回です。
前回は Pygame でゲームに効果音を追加しました。
今回は変則チェスのひとつであるチェス960を追加してみたいと思います。 …
チェスアプリ開発(16) 効果音の追加(Pygame)
Python プログラムで動かすフェアリーチェスアプリ開発、連載第 16 回です。
前回まででフェアリー駒の作成やゲーム種類の拡張をすることができるようになりました。
今回は少し横道にそれて、ゲーム内で効果音を鳴らしてみます。
よりゲームっぽくなります。 …
チェスアプリ開発(15) ゲームの切り替え
Python プログラムで動かすフェアリーチェスアプリ開発、連載第 15 回です。
前回はフェアリー駒を作成しました。
今回はさまざまな種類のフェアリーチェスを切り替えられるようにしていきます。 …
Docker 上で Svelte 開発環境を構築する
Docker を使って建てた仮想コンテナ内で Svelte の開発環境を構築する方法をご紹介します。
Docker の導入は済んでいるものとします。 …
【React + Recoil】ちょっとリッチな ToDo アプリ
おいしそうなタイトルになってしまいました。
これまで React で文字当てゲームやタイピング練習アプリを作ってきましたが、
今回は ToDo アプリを作成しました。 …
チェスアプリ開発(14) フェアリー駒の作成
Python プログラムで動かすフェアリーチェスアプリ開発、連載第 14 回です。
前々回までで通常のチェスが問題なくプレイできるようになり、
前回はコードを整形しました。
今回は、いよいよフェアリーチェスの幕開けです！
ところで、フェアリーチェスってなんでしたっけ？ …
【React 初心者】React でタイピング練習アプリ！
前回、React で文字当てゲームを作りました。
今回は、このようなタイピング練習アプリを作ってみました。
この記事では、このタイピングアプリの実装について解説しながら、…
【React 初心者】React で文字当てゲーム！
最近 React を勉強していて、何か簡単なものを作りたいと思って、このような文字当てゲームを作りました。
今回、この記事で実装について解説していきます。
コンポーネントや props はほとんど使っておらず、…
チェスアプリ開発(13) コードの整形
Python プログラムで動かすフェアリーチェスアプリ開発、連載第 13 回です。
前回はチェスの特殊ルールのひとつ、キャスリングを実装しました。
これで通常のチェスは問題なくできるようになったので、今回はコードの整形をしていきます。 …
チェスアプリ開発(12) キャスリングの実装
Python プログラムで動かすフェアリーチェスアプリ開発、連載第11回です。
前回はチェスの特殊ルールのひとつ、プロモーションを実装しました。
今回はキャスリングという特殊ルールを実装していきます。 …
チェスアプリ開発(11) プロモーションの実装
Python プログラムで動かすフェアリーチェスアプリ開発、連載第11回です。
前回はチェスの特殊ルールのひとつ、アンパッサンを実装しました。
今回はポーンが昇格して強くなるプロモーションを実装していきます。 …
チェスアプリ開発(10) アンパッサンの実装
Python プログラムで動かすフェアリーチェスアプリ開発、連載第 10 回です。
前回は駒の移動にアニメーションを追加しました。
今回はチェスの特殊ルールであるアンパッサンを実装していきたいと思います。 …
チェスアプリ開発(9) 駒の動きをアニメーションにする
Python プログラムで動かすフェアリーチェスアプリ開発、連載第 9 回です。
前回はマウス操作で駒を動かせるようにしました。
しかし、その駒の移動がカクカクしているので、
今回は駒の移動にアニメーションを追加してスムーズに動いているように表示させます。 …
チェスアプリ開発(8) マウス操作で駒を動かす
Python プログラムで動かすフェアリーチェスアプリ開発、連載第８回です。
前回は Pillow で画像を読み込み、盤面上に駒を表示しました。
今回はマウス操作で駒を動かせるようにしていきます。 …
チェスアプリ開発(7) Pillow で駒を表示
Python プログラムで動かすフェアリーチェスアプリ開発、連載第 7 回です。
前回で駒を乗せるための盤面が準備できました。
今回は、盤面に配置する駒の画像を準備して読み込んで画面に表示していきたいと思います。 …
チェスアプリ開発(6) PyOpenGL で盤面を描画
Python プログラムで動かすフェアリーチェスアプリ開発、連載第6回です。
前回で機能面はある程度整いました。
しかし、現在はコマンドラインでテキストで絵を描いて表示し、ユーザのコマンドで動かしている状態なので、
インタフェース的にもう少し楽しくしたいですねー。
ということで、今回からは OpenGL というものを使って、画面に絵を描いたりマウス入力を受け付けたりできるようにしましょう！ …
チェスアプリ開発(5) チェックメイト・ステイルメイトの判定
Python プログラムで動かすフェアリーチェスアプリ開発、連載第5回です。 前回は自らチェックされに行くような動きができないようにしました。 今回はチェックメイトやステイルメイトを判定できるようにします。…
チェスアプリ開発(4) チェックされに行く動きの禁止
Python プログラムで動かすフェアリーチェスアプリ開発、連載第４回です。
前回は、ポーンについてその動きの仕組みを見たうえで、
最初の２歩の動きを追加してみました。
今回からはチェックやチェックメイトを判定できるようにしましょう！ …
チェスアプリ開発(3) ポーンの最初の動きを追加
Python プログラムで動かすフェアリーチェスアプリ開発、連載第3回です。 前回は、先手の駒色と駒の初期配置を修正しました。 今回は、ポーンの最初の動きを付け加えてみましょう。 本来ポーンは、最初の動きだけは2歩まで進むことができます。…
チェスアプリ開発(2) コードの修正
Python プログラムで動かすフェアリーチェスアプリ開発、連載第2回です。 今回は実際にコードを修正しつつ、細かい動作についてみていきたいと思います！ なお、このシリーズでは、あまりプログラミングに詳しくない人、はじめたばかりの人にも気軽に読んでもらいたいので、できるだけ初歩的なところから解説していきたいと思っています。…
チェスアプリ開発(1) オリジナルのコードを解読
チェスにはフェアリーチェスと言って、普通のルールのチェスとは異なるルールのものがあります。
また駒もフェアリーチェス独特の面白い駒があったりします。
でもそういうチェスができるアプリってなかなかないんですよね。
ということで、自分で作っちゃおう！ …