ゲームスタート はじめに 前回の続きです。前編では２手目まで条件式で指示を与えていました。 ３手目からはミニマックス法もどきで、コンピュータ側の全通りの手を調べて勝つ手があればそれを打ちます。次のプレイヤーのターンも全通り調べて、負ける手があ…
ゲームスタート はじめに 今回は、Q学習やミニマックス法などの機械学習を使わずに一から人工知能を作っていきます。人間側で全て指示を与えるタイプの一昔前のＡＩで、自ら学習することはできません。 １手目と２手目は条件式で指示を与えます。 下の図でマ…
はじめに 今回はソースコードを一から見直して作り直します。新たに追加したいのはこちらです。 クリックイベントの整理 ドロップアンドドラッグの実装 スマホのタップにも対応 こちらから遊べます。 http://startpython.pythonanywhere.com/game2/ クリック…
はじめに ２戦目の初期駒と先攻後攻を変更しました。「もう一回遊ぶ」で持ち駒をランダムにしてましたが赤と青の差があったので、赤と青の持ち駒は同じにしました。先攻が圧倒的に有利なので負けた方を次戦の先攻にしました。 変更前のソースコード # ゲーム…
はじめに ブラウザ上で動く三目並べを作っていきます。とりあえず試作品が完成したのでソースコードを載せていきます。細かい解説は省略します。 動作環境 Windows10Python 3.7.5Flask 1.1.1Brython 3.8.7 作業フォルダ/ ├ game1/ │ ├ templates/ │ │ └ game…
はじめに 三目並べをブラウザ上で動かすにはどうしたらいいか考えました。本当はJavaScriptを使うのがいいのでしょうが、Brythonモジュールを使えばJavaScriptの代わりができるみたいです。 動作環境 Windows10Python 3.7.5Flask 1.1.1Brython 3.8.7 作業フ…
２月を振り返って ブログの更新はしばらく間が空いてしまいましたが、プログラミングの勉強は続けています。今やっているのは三目並べの変化系でテレビなどで紹介されていたアレです。 JavaScriptを使わずにPythonのモジュール「Brython」というのを使ってブ…
はじめに まず、５×５の盤面での「五目並べ」を作成してみます。前回の「三目並べ」を少し変更するだけで完成しました。それほど難しくはなかったです。 実行してみましたが時間がかかりすぎます。メモリ不足でフリーズしてしまいました。 ３手先まで読むよ…
こちらのサイトを参考にさせていただきまいた。 qiita.com 最後に全てのソースコードを載せておきます。今回新しく学べたことを解説していきます。前回「考えるマッチ箱」でコピペなしでプログラム作成してみたのですが今回「こうすればよかったんだ」と新し…
はじめに 実践で「再帰関数」を使ってみようと思ったのですが、少し気になったことがあったのでもう少し詳しく学んでいきます。 応用（動きを追いかける） 前回の最後の例を少し変えました。 def func4(n): if n >= 3: return for i in range(2): #print("n=…
はじめに 「ゲーム木」を扱う上で「再帰関数」はほぼ必須っぽかったので詳しく勉強していきます。 再帰関数とは 自分自身を呼び出す関数です。そもそも「再帰」という言葉で検索することは少ないと思います。「def関数内で自分自身の関数を使う」「def内でル…
はじめに 三目並べに限らず、チェスや将棋などの対戦ゲームでは何手目か先まで読んで一番良い手を打ちます。もし最後までの全通りを読めれば最強です。 それをコンピュータでやってしまおうというのが今回の試みです。 木構造（ツリー構造）とは？ 局面が枝…
考えるマッチ箱 前回、「マッチ箱」に三目並べを学習させました。2097個のマッチ箱と勝負して果たして勝てるかという実験です。 先手を入力できるように変更したソースコードがこちらです。 import random import csv # csvファイルを読み込む with open("ma…
はじめに 前回、「考えるマッチ箱」というコンピュータを使わずに三目並べを学習する方法を学びました。 start-python.hateblo.jp 今回はその学習手順をPythonでプログラミングしていきます。 ソースコード import random import csv # csvファイルを読み込…
AIとは？ AI（エーアイ）とは人工知能のことです。Artificial Intelligence（人工的な知能）です。『「言語の理解や推論、問題解決などの知的行動を人間に代わってコンピューターに行わせる技術」、または、「計算機（コンピュータ）による知的な情報処理シ…
画像１ はじめに Webアプリが完成したので全ソースコードを載せることにしました。 こちらから実際に操作できますのでお試しください。 http://startpython.pythonanywhere.com/blog/ ユーザー名とパスワードを何も入れずにログインするとゲストでログインで…
はじめに 前回の続きで、今回は「別のユーザーの投稿は編集・削除不可」と「検索の機能」を追加していきます。 おまけ：絶対位置を中央寄せにする方法「left: 0; right: 0; を追加する」 別のユーザーの投稿は編集・削除不可： データベースにユーザー名を追…
はじめに 前回の続きで、今回は編集画面を作って更新と削除の機能を追加していきます。 おまけ：CSSが反映されないときの対処法「リロードをshift+F5で行う」 目標： インデックス画面の「サンプル１」をユーザー名に変更 編集画面のレイアウトを作成 編集画…
はじめに インデックス（見出し）画面と入力画面のレイアウトが出来上がったので、以前にログイン画面を作成したWebサイトに追加・変更していきます。 以前の内容はこちら start-python.hateblo.jp 動作環境 Windows10Python 3.7.5Flask 1.1.1 作業フォルダ/…
はじめに 今回はボタンを押すとメニュー一覧が表示されるメニューボタンを作成します。CSSだけで（Javascriptは使わずに）ヘッダー部分に配置します。 ソースコード base.html <link rel="stylesheet" type="text/css" href="/static/base.css"> <header> <h3 id="user_name">レイルーク＠ふたり暮らし</h3> <div class="menu_box"> <label id="menu" for="toggle">メニュー</label> </div></header></link>
はじめに 今回はメニューボタンを作成します。フッター部分に、リストを一行で配置して外枠を付けてリンクできるようにします。前から少し気になってた「フッターの余白が消えない問題」も解決していきます。 ソースコード base.html <link rel="stylesheet" type="text/css" href="/static/base.css"> <footer> <ul> <li>ホーム</li> <li>検 索</li> <li><a href="/blog/create">新規作</a></li></ul></footer></link>…
はじめに Pythonのjinja2モジュールの使います。（HTMLだけでは機能しません） PythonのFlaskでWebサイトを作る時に、複数のページで同じ内容（ヘッダーやフッターなど）を利用することが多いです。jinja2モジュールを使って共通テンプレートを作成しておく…
はじめに 今回は記事の入力画面を作成します。写真や画像をファイルから選択して張り付けます。ファイル選択の部分はJavascriptを使います。 動作環境 Windows10メモ帳Google Chrome 作業フォルダ/ ├ static/ │ ├ back_image.jpg │ ├ edit.css │ └ edit.js └…
はじめに 今回は画像を表示させる場所についてです。文章を左に、画像を右に表示してみたいと思います。CSSで「float」を使う方法です。少しハマったところもあったので詳しく解説していきます。 文字の右に画像を表示する方法 float: right; /*右に寄せる*/…
ヘッダーとフッターとは？ 「<header>~</header>」「<footer>~</footer>」はHTML5から新たに追加された要素で、それまでは「<div id="header">~</div>」「<div id="footer">~</div>」と書くのが一般的だったらしいです。以前の書き方との違いはわかりませんでした。 <body> <p>ヘッダーの上</p> <header> <p>ここはヘッダーです<p> </header> <h1>表題</h1> <footer> <p>ここはフッターです<p> </footer> <p>フッターの</p></body>…
はじめに 今回は新規登録画面を作っていきます。完成したら「Pythonanywhere」へアップロードします。ログイン画面とほとんど同じなのでCSSは使いまわします。 動作環境 Windows10メモ帳Google Chrome 作業フォルダ/ ├ static/ │ ├ image.jpg │ ├ newcomer.c…
結論 HTMLファイルの<head>~</head>の部分にこれを入れればオッケーです。 <meta name="viewport" content="width=device-width,initial-scale=1"> 通常はスマホで画面を表示する時に、自動で縮小して全体を表示するため小さく表示されてしまいます。幅の初期値960pxをスマホの幅（320～414px：iphon6~8は375px）に合わせて縮小するためです。</meta>…
はじめに 前回のログイン画面を新しく作り直します。今回からCSSを本格的に勉強してします。新しく出てきた命令を「【保存版】CSS 逆引き辞典（初心者用 随時更新予定）」に追加していきます。 Twitterのログイン画面を参考にゼロから作りました。 動作環境 …
使い方 「CSSの説明書（スタイルシートリファレンス）」「CSS命令一覧」「CSSプロパティ一覧」と、いろいろありますがやりたい事をどう命令するのかがわからないと調べられません。何度も同じことを調べて同じサイトに辿り着くことが多かったので、自分で見…
http://startpython.pythonanywhere.com/ こちらから実際に操作できますのでお試しください。（ユーザー名・パスワードは普段お使いのもの以外にしてください。セキュリティーは保証できません。） はじめに Webアプリに必要になることが多い「ログイン機能…
