Python ミニマックス法で五目並べに挑戦します（AIプログラミング 第8回）

はじめに まず、5×5の盤面での「五目並べ」を作成してみます。前回の「三目並べ」を少し変更するだけで完成しました。それほど難しくはなかったです。 実行してみましたが時間がかかりすぎます。メモリ不足でフリーズしてしまいました。 3手先まで読むようにプログラムを変更しました。（深さを3に変更しました） 上手く動きました。（5手先までで時間がかかって待つのは限界です） 5×5の盤面での五目並べは引き分けにしかなりません。（勝敗が付かないです） 次に、5×5の盤面での「四目並べ」を作成しました。5手先まで読むようにしています。そこそこいい勝負？はするのですがかなり弱いです。できれば7手先まで読ませるよ…

Pythonで人工知能搭載の三目並べが完成しました（AIプログラミング 第7回）

こちらのサイトを参考にさせていただきまいた。 qiita.com 最後に全てのソースコードを載せておきます。今回新しく学べたことを解説していきます。前回「考えるマッチ箱」でコピペなしでプログラム作成してみたのですが今回「こうすればよかったんだ」と新しく気づけたことが多かったです。「下手でも動く方法を自分で考える」⇒「人の作ったソースコードを参考にする」⇒「新しい発見がある」 この流れが勉強するのには一番良さそうに感じました。 繰り返しリストの作成 # 盤面の初期化 board = [" "] * 9 board = [' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '…

Python 再帰関数をもう少し詳しく学ぶ（AIプログラミング 第6回）

はじめに 実践で「再帰関数」を使ってみようと思ったのですが、少し気になったことがあったのでもう少し詳しく学んでいきます。 応用（動きを追いかける） 前回の最後の例を少し変えました。 def func4(n): if n >= 3: return for i in range(2): #print("n=", n,"i=", i) # 再帰 func4(n+1) print("n=", n,"i=", i) return func4(0) 値の表示を「再帰」の後にもってきてみました。 for文に書き直して考えてみます。 for i in range(2): for j in range(2): …

Python 再帰関数をわかりやすく解説（AIプログラミング 第5回）

はじめに 「ゲーム木」を扱う上で「再帰関数」はほぼ必須っぽかったので詳しく勉強していきます。 再帰関数とは 自分自身を呼び出す関数です。そもそも「再帰」という言葉で検索することは少ないと思います。「def関数内で自分自身の関数を使う」「def内でループしている」などで検索していて「再帰関数」という言葉が出てくることが多いと思います。 基本（前回のおさらい） 例： def func(n): if n <= 0: return n return n + func(n-1) print(func(10)) 実行してみると「55」（1から10までの和）が表示されました。 print(func(10))…

ミニマックス法はわかったけどソースコードがわからない（AIプログラミング 第4回）

はじめに 三目並べに限らず、チェスや将棋などの対戦ゲームでは何手目か先まで読んで一番良い手を打ちます。もし最後までの全通りを読めれば最強です。 それをコンピュータでやってしまおうというのが今回の試みです。 木構造（ツリー構造）とは？ 局面が枝分かれして木のようなデータ構造のことをいいます。（始まりを「根（ルート）」、分かれ道を「枝（エッジ）」、次の局面を「節点（ノード）」、最終局面を「葉（リーフ）」と呼ぶことが多いです） 「ここに打てば相手はこう打ってきて、次はあそこに打とう」「こっちに打てばあそこに打たれたら負ける」と人が考えるのを「ゲーム木（木構造）」といい、機械学習などでよく使われます。…

学習したマッチ箱と勝負する（AIプログラミング 第3回）

考えるマッチ箱 前回、「マッチ箱」に三目並べを学習させました。2097個のマッチ箱と勝負して果たして勝てるかという実験です。 先手を入力できるように変更したソースコードがこちらです。 import random import csv # csvファイルを読み込む with open("matchbox.csv", "r", encoding="Shift_jis") as f: reader = list(csv.reader(f)) print("マッチ箱の数：", len(reader)) # 繰り返し処理（試行回数） for step in range(10): # 盤面 board_1…

Pythonで三目並べを学習させる（AIプログラミング 第2回）

はじめに 前回、「考えるマッチ箱」というコンピュータを使わずに三目並べを学習する方法を学びました。 start-python.hateblo.jp 今回はその学習手順をPythonでプログラミングしていきます。 ソースコード import random import csv # csvファイルを読み込む with open("matchbox.csv", "r", encoding="Shift_jis") as f: reader = list(csv.reader(f)) print("マッチ箱の数：", len(reader)) # 繰り返し処理（試行回数） for step in ra…

簡単な人工知能を作ってみる（AIプログラミング 第1回）

AIとは？ AI（エーアイ）とは人工知能のことです。Artificial Intelligence（人工的な知能）です。『「言語の理解や推論、問題解決などの知的行動を人間に代わってコンピューターに行わせる技術」、または、「計算機（コンピュータ）による知的な情報処理システムの設計や実現に関する研究分野」ともされる。』==Wikipediaより引用== AIの定義 実はまだ専門家の間でも定まっていないらしいです。「知能を持つ機械」とも言われますし、「知能の定義が明確でないので、人工知能も定義できない」という意見もあります。その中で「考える機械」ってのが一番しっくりきました。画像認識、音声認識、自動…

FlaskでWebアプリが完成しました！（全ソースコードはこちらです）

画像1 はじめに Webアプリが完成したので全ソースコードを載せることにしました。 こちらから実際に操作できますのでお試しください。 http://startpython.pythonanywhere.com/blog/ ユーザー名とパスワードを何も入れずにログインするとゲストでログインできます。 ※ユーザー名・パスワードは普段お使いのもの以外にしてください。セキュリティーは保証できません。 関連記事 HTML メニューボタンの作り方2（CSSでメニュー一覧を開く・閉じる、表示・非表示） HTML メニューボタンの作り方1（CSS フッターの謎の隙間をなくす方法） HTML 共通テンプレートを…

FlaskでWebアプリを作成 続き3（ユーザーの編集・削除と検索の機能をアップデートまで）

はじめに 前回の続きで、今回は「別のユーザーの投稿は編集・削除不可」と「検索の機能」を追加していきます。 おまけ：絶対位置を中央寄せにする方法「left: 0; right: 0; を追加する」 別のユーザーの投稿は編集・削除不可： データベースにユーザー名を追加 タイトル表示の方法を変更 編集画面の修正（ゲストはゲストの投稿を編集・削除できる） 検索の機能： ヘッダーに検索ボックスを作成 フッターの検索ボタンを修正（フォーカスの移動） 検索ワードで絞り込み処理 1．データベースにユーザー名を追加 「models.py」のSQLiteでデータベースを追加します。 user = Column(S…

FlaskでWebアプリを作成 続き2（編集と削除の機能をアップデートまで）

はじめに 前回の続きで、今回は編集画面を作って更新と削除の機能を追加していきます。 おまけ：CSSが反映されないときの対処法「リロードをshift+F5で行う」 目標： インデックス画面の「サンプル1」をユーザー名に変更 編集画面のレイアウトを作成 編集画面へ移動 編集画面で更新処理 編集画面に削除ボタン ゲストは更新・削除をできないように 1．「サンプル1」をユーザー名に変更 「index.html」の「<h3>サンプル1</h3>」を消してタイトルの部分に「タイトル ＠ユーザー名」にすることにしました。 server.py（変更部分） #「/diarysave」へアクセスがあった場合「/b…

FlaskでWebアプリを作成 続き1（インデックス画面と入力画面を機能させてアップデートまで）

はじめに インデックス（見出し）画面と入力画面のレイアウトが出来上がったので、以前にログイン画面を作成したWebサイトに追加・変更していきます。 以前の内容はこちら start-python.hateblo.jp 動作環境 Windows10Python 3.7.5Flask 1.1.1 作業フォルダ/ ├ blog/ │ ├ templates/ │ │ └ blog/ │ │ ├ base.html ・・・（1） │ │ ├ edit.html ・・・（4） │ │ ├ index.html ・・・（3） │ │ ├ newcomoer.html │ │ └ top.html │ ├ mo…

HTML メニューボタンの作り方2（CSSでメニュー一覧を開く・閉じる、表示・非表示）

はじめに 今回はボタンを押すとメニュー一覧が表示されるメニューボタンを作成します。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> <input type="checkbox" id="to…

HTML メニューボタンの作り方1（CSS フッターの謎の隙間をなくす方法）

はじめに 今回はメニューボタンを作成します。フッター部分に、リストを一行で配置して外枠を付けてリンクできるようにします。前から少し気になってた「フッターの余白が消えない問題」も解決していきます。 ソースコード 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> <li><a href="/blog/logout">ログアウト</a></li…

HTML 共通テンプレートを作成する（HTMLで変数、if文、for文の使い方）

はじめに Pythonのjinja2モジュールの使います。（HTMLだけでは機能しません） PythonのFlaskでWebサイトを作る時に、複数のページで同じ内容（ヘッダーやフッターなど）を利用することが多いです。jinja2モジュールを使って共通テンプレートを作成しておくと、複数のページからテンプレートを呼び出して使えるので便利です。また、jinja2を利用してPythonでの変数をHTMLに読み込む方法も解説していきます。 jinja2での共通テンプレートの使い方 {% extends "ファイル名" %} ベース（基本）となる「HTMLファイル」で共通テンプレート（ヘッダーやフッターの…

HTML 入力画面を作成（CSSでファイル選択した画像を表示する方法）

はじめに 今回は記事の入力画面を作成します。写真や画像をファイルから選択して張り付けます。ファイル選択の部分はJavascriptを使います。 動作環境 Windows10メモ帳Google Chrome 作業フォルダ/ ├ static/ │ ├ back_image.jpg │ ├ edit.css │ └ edit.js └ edit.html ソースコード edit.hrml <!DOCTYPE html> <link rel="stylesheet" type="text/css" href="static/edit.css"> <script src="static/edit.js…

CSSで文字の右に画像を表示する方法／画像を背景に指定する

はじめに 今回は画像を表示させる場所についてです。文章を左に、画像を右に表示してみたいと思います。CSSで「float」を使う方法です。少しハマったところもあったので詳しく解説していきます。 文字の右に画像を表示する方法 float: right; /*右に寄せる*/ 画像サイズを固定（自動で縮小・拡大）させる場合は「width: 300px; /*画像サイズを固定*/」を使います。 「HTMLファイル」での文字の記述場所は、「float」で指定した「画像（要素）」の後ろに記述します。 <h3>サンプル3</h3> <img src="static/images/sample3.gif"> <…

CSSでタイトルとメニュー画面を固定する（ヘッダーとフッターの使い方）

ヘッダーとフッターとは？ 「<header>~</header>」「<footer>~</footer>」はHTML5から新たに追加された要素で、それまでは「<div id="header">~</div>」「<div id="footer">~</div>」と書くのが一般的だったらしいです。以前の書き方との違いはわかりませんでした。 <!DOCTYPE html> <body> <p>ヘッダーの上</p> <header> <p>ここはヘッダーです<p> </header> <h1>表題</h1> <footer> <p>ここはフッターです<p> </footer> <p>フッターの下</p…

新規登録画面をサクッと作成してアップロード／Flask Blueprintを利用した時のCSSファイルとjsファイルの保存場所

はじめに 今回は新規登録画面を作っていきます。完成したら「Pythonanywhere」へアップロードします。ログイン画面とほとんど同じなのでCSSは使いまわします。 動作環境 Windows10メモ帳Google Chrome 作業フォルダ/ ├ static/ │ ├ image.jpg │ ├ newcomer.css │ └ newcomer.js └ newcomer.html アップロードのことを考えて「static」フォルダを作りました。 ソースコード newcomer.html <!DOCTYPE html> <meta name="viewport" content="wid…

作成したPC向けのサイトをスマホ対応にする方法（スマホでWebサイトを開くと小さく表示されてしまう問題）

結論 HTMLファイルの<head>~</head>の部分にこれを入れればオッケーです。 <meta name="viewport" content="width=device-width,initial-scale=1"> 通常はスマホで画面を表示する時に、自動で縮小して全体を表示するため小さく表示されてしまいます。幅の初期値960pxをスマホの幅（320～414px：iphon6~8は375px）に合わせて縮小するためです。そこで表示領域をdevice-width（その機種の横幅）に設定することで縮小することなくそのままの大きさで表示できます。「initial-scale=1」は倍率のこと…

HTML ツイッター風のログイン画面を作成する（CSSでレイアウトの調整）

はじめに 前回のログイン画面を新しく作り直します。今回からCSSを本格的に勉強してします。新しく出てきた命令を「【保存版】CSS 逆引き辞典（初心者用 随時更新予定）」に追加していきます。 Twitterのログイン画面を参考にゼロから作りました。 動作環境 Windows10メモ帳Google Chrome 作業フォルダ/ ├─ login.html ├─ login.css └─ login.js cssとjsのファイル名がバラバラだと探すのが大変だと思ったので同じ「login」にしました。 HTMLの解説 login.html <!DOCTYPE html><link rel="style…

【保存版】CSS 逆引き辞典（初心者用 随時更新予定）

使い方 「CSSの説明書（スタイルシートリファレンス）」「CSS命令一覧」「CSSプロパティ一覧」と、いろいろありますがやりたい事をどう命令するのかがわからないと調べられません。何度も同じことを調べて同じサイトに辿り着くことが多かったので、自分で見直す用に「逆引き辞典」を作ることにしました。 とりあえず「何を」「どうする」で調べられるようにしてみます。随時覚えたことを更新していきます。 なにを？ ※特定の要素に見つからないときは「要素全体（共通）」にある場合があります。 基本の書き方 要素全体（共通） 特定の要素 文字 テキストボックス ボタン 画像 基本の書き方 要素（タグ、ID、クラス）に…

Flask-Loginを使わずにログイン画面を実装する（Blueprintsでパス指定やSECRET_KEYを設置する方法）

http://startpython.pythonanywhere.com/ こちらから実際に操作できますのでお試しください。（ユーザー名・パスワードは普段お使いのもの以外にしてください。セキュリティーは保証できません。） はじめに Webアプリに必要になることが多い「ログイン機能」を勉強していきます。複数のWebアプリを実行するために「Blueprints」を使用しましたが、結構行き詰ったところがありました。同じような苦労をした方にも参考になればうれしいです。 動作環境 Windows10Python 3.7.5Flask 1.1.1 作業フォルダ/ ├ blog/ │ ├ template…

祝100記事／1月の振り返り

100記事達成しました！ なんと！この記事が100記事目です。長いようであっという間でもあります。 記事数が増えてくるとわからないところを見返して調べるとこも多くなってきました。とりあえず昔のコードもナンバリングして残してあるので、そのコードから引っ張ってきて新しく利用する機会もでてきます。 もしブログをせずにプログラミングの勉強だけ進めていたら「あれ？これ昔やったけどどうだったっけ？」とコードもなくまたググっていたことでしょう。現在プログラミングの勉強中の方はどのようにしてるか気になるところです。（いい方法があれば教えてほしいです。）これからプログラミングを始める方も是非ブログなどで経過や詰…