アプリ開発

Cover Image for 【Rails API】CSRF 対策をあきらめないでちゃんとやる

【Rails API】CSRF 対策をあきらめないでちゃんとやる

Ruby on Rails を API として、フロントエンドとの間で通信をしようとしたところ、

セッションが保存されなかったり、Can't verify CSRF token authenticity というエラーが出てくることがあります。

多くのページでは解決方法として CSRF 対策をあきらめていますが、 …

Cover Image for WSL から React Native を Android Studio で動かす

WSL から React Native を Android Studio で動かす

React Native というモバイルアプリを作るツールがあります。

そこで作ったアプリを Android Studio のエミュレータで動かすことができます。

React Native のプロジェクトを WSL2(Windows Subsystem for Linux 2) の内部に置くこともできるのですが、 …

Cover Image for ガイスターアプリ開発(6) 勝敗判定

ガイスターアプリ開発(6) 勝敗判定

Python でつくるガイスター、連載第 6 回です。

前回は駒の移動と手番の交代を実装しました。

今回は勝敗の判定と表示をしていきます。 …

Cover Image for ガイスターアプリ開発(5) 駒の移動・ターン交代

ガイスターアプリ開発(5) 駒の移動・ターン交代

Python でつくるガイスター、連載第 5 回です。

前回は初期盤面を生成して描画しました。

今回は駒の移動とターン交代の画面を用意します。 …

Cover Image for ガイスターアプリ開発(4) 初期盤面

ガイスターアプリ開発(4) 初期盤面

Python でつくるガイスター、連載第 4 回です。

前回はマウス操作で駒の初期配置を決められるようになりました。

今回はゲーム本番での初期盤面を描画するところまでやっていきます。 …

Cover Image for ガイスターアプリ開発(3) 駒を配置する画面(マウス操作)

ガイスターアプリ開発(3) 駒を配置する画面(マウス操作)

Python でつくるガイスター、連載第 3 回です。

前回はグリッドやボタンを描画しました。

今回はマウス操作でグリッドに駒を置いたり、ボタンを押したりできるようにします。 …

Cover Image for ガイスターアプリ開発(2) 駒を配置する画面(グリッド・駒・ボタン)

ガイスターアプリ開発(2) 駒を配置する画面(グリッド・駒・ボタン)

Python でつくるガイスター、連載第 2 回です。

前回は pygame の導入とテキスト表示をしました。

今回は駒の配置を決める画面の残りの要素を描画していきます。 …

Cover Image for ガイスターアプリ開発(1) 導入・駒を配置する画面(テキスト)

ガイスターアプリ開発(1) 導入・駒を配置する画面(テキスト)

ガイスターというボードゲームがあります。

お互いが相手の駒が何かわからない状態で取り合うという心理戦の側面を兼ねたゲームです。 …

Cover Image for チェスアプリ開発(20) プロモーションの拡張

チェスアプリ開発(20) プロモーションの拡張

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

前回でフェアリーチェスへのキャスリングの拡張が完了しました。

今回はポーンのプロモーションの拡張をしていきます。 …

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

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

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

前回はキャスリングの条件判定のコードを編集しました。

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

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

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

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

前回はチェス960の初期配置を生成して、基本的な部分は遊べるようになりました。

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

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

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

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

前回は Pygame でゲームに効果音を追加しました。

今回は変則チェスのひとつであるチェス960を追加してみたいと思います。 …

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

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

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

前回まででフェアリー駒の作成やゲーム種類の拡張をすることができるようになりました。

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

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

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

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

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

前回はフェアリー駒を作成しました。

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

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

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

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

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

Cover Image for 【React + Recoil】ちょっとリッチな ToDo アプリ

【React + Recoil】ちょっとリッチな ToDo アプリ

おいしそうなタイトルになってしまいました。

これまで React で文字当てゲームやタイピング練習アプリを作ってきましたが、

今回は ToDo アプリを作成しました。 …

Cover Image for チェスアプリ開発(14) フェアリー駒の作成

チェスアプリ開発(14) フェアリー駒の作成

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

前々回までで通常のチェスが問題なくプレイできるようになり、

前回はコードを整形しました。

今回は、いよいよフェアリーチェスの幕開けです!

ところで、フェアリーチェスってなんでしたっけ? …

Cover Image for 【React 初心者】React でタイピング練習アプリ!

【React 初心者】React でタイピング練習アプリ!

前回、React で文字当てゲームを作りました。 今回は、このようなタイピング練習アプリを作ってみました。 この記事では、このタイピングアプリの実装について解説しながら、…

Cover Image for 【React 初心者】React で文字当てゲーム!

【React 初心者】React で文字当てゲーム!

最近 React を勉強していて、何か簡単なものを作りたいと思って、このような文字当てゲームを作りました。 今回、この記事で実装について解説していきます。 コンポーネントや props はほとんど使っておらず、…

Cover Image for チェスアプリ開発(13) コードの整形

チェスアプリ開発(13) コードの整形

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

前回はチェスの特殊ルールのひとつ、キャスリングを実装しました。

これで通常のチェスは問題なくできるようになったので、今回はコードの整形をしていきます。 …

Cover Image for チェスアプリ開発(12) キャスリングの実装

チェスアプリ開発(12) キャスリングの実装

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

前回はチェスの特殊ルールのひとつ、プロモーションを実装しました。

今回はキャスリングという特殊ルールを実装していきます。 …

Cover Image for チェスアプリ開発(11) プロモーションの実装

チェスアプリ開発(11) プロモーションの実装

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

前回はチェスの特殊ルールのひとつ、アンパッサンを実装しました。

今回はポーンが昇格して強くなるプロモーションを実装していきます。 …

Cover Image for チェスアプリ開発(10) アンパッサンの実装

チェスアプリ開発(10) アンパッサンの実装

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

前回は駒の移動にアニメーションを追加しました。

今回はチェスの特殊ルールであるアンパッサンを実装していきたいと思います。 …

Cover Image for チェスアプリ開発(9) 駒の動きをアニメーションにする

チェスアプリ開発(9) 駒の動きをアニメーションにする

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

前回はマウス操作で駒を動かせるようにしました。

しかし、その駒の移動がカクカクしているので、

今回は駒の移動にアニメーションを追加してスムーズに動いているように表示させます。 …

Cover Image for チェスアプリ開発(8) マウス操作で駒を動かす

チェスアプリ開発(8) マウス操作で駒を動かす

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

前回は Pillow で画像を読み込み、盤面上に駒を表示しました。

今回はマウス操作で駒を動かせるようにしていきます。 …

Cover Image for チェスアプリ開発(7) Pillow で駒を表示

チェスアプリ開発(7) Pillow で駒を表示

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

前回で駒を乗せるための盤面が準備できました。

今回は、盤面に配置する駒の画像を準備して読み込んで画面に表示していきたいと思います。 …

Cover Image for チェスアプリ開発(6) PyOpenGL で盤面を描画

チェスアプリ開発(6) PyOpenGL で盤面を描画

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

前回で機能面はある程度整いました。

しかし、現在はコマンドラインでテキストで絵を描いて表示し、ユーザのコマンドで動かしている状態なので、

インタフェース的にもう少し楽しくしたいですねー。

ということで、今回からは OpenGL というものを使って、画面に絵を描いたりマウス入力を受け付けたりできるようにしましょう! …

Cover Image for チェスアプリ開発(5) チェックメイト・ステイルメイトの判定

チェスアプリ開発(5) チェックメイト・ステイルメイトの判定

Python プログラムで動かすフェアリーチェスアプリ開発、連載第5回です。 前回は自らチェックされに行くような動きができないようにしました。 今回はチェックメイトやステイルメイトを判定できるようにします。…

Cover Image for チェスアプリ開発(4) チェックされに行く動きの禁止

チェスアプリ開発(4) チェックされに行く動きの禁止

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

前回は、ポーンについてその動きの仕組みを見たうえで、

最初の2歩の動きを追加してみました。

今回からはチェックやチェックメイトを判定できるようにしましょう! …

Cover Image for チェスアプリ開発(3) ポーンの最初の動きを追加

チェスアプリ開発(3) ポーンの最初の動きを追加

Python プログラムで動かすフェアリーチェスアプリ開発、連載第3回です。 前回は、先手の駒色と駒の初期配置を修正しました。 今回は、ポーンの最初の動きを付け加えてみましょう。 本来ポーンは、最初の動きだけは2歩まで進むことができます。…

Cover Image for チェスアプリ開発(2) コードの修正

チェスアプリ開発(2) コードの修正

Python プログラムで動かすフェアリーチェスアプリ開発、連載第2回です。 今回は実際にコードを修正しつつ、細かい動作についてみていきたいと思います! なお、このシリーズでは、あまりプログラミングに詳しくない人、はじめたばかりの人にも気軽に読んでもらいたいので、できるだけ初歩的なところから解説していきたいと思っています。…

Cover Image for チェスアプリ開発(1) オリジナルのコードを解読

チェスアプリ開発(1) オリジナルのコードを解読

チェスにはフェアリーチェスと言って、普通のルールのチェスとは異なるルールのものがあります。

また駒もフェアリーチェス独特の面白い駒があったりします。

でもそういうチェスができるアプリってなかなかないんですよね。

ということで、自分で作っちゃおう! …