☎登録フォーム

登録フォームのプログラムセットです。demo24.py、index24.html、check24.htmlからなります。「・」はスペース2文字分です。

登録フォームのプログラムセットです。

demo24.py、index24.html、check24.htmlからなります。

「・」はスペース2文字分です。

#!/usr/bin/python3
# -*- coding: utf-8 -*-
#demo24.py
from flask import Flask, redirect ,request,render_template

app = Flask(__name__)

@app.route(“/check”)
def check():
return render_template(‘check24.html’)

@app.route(‘/’,methods=[‘POST’])
def index():
・・my_age = int(request.form[“age”])
・・my_name = request.form[“name”]
・・my_email = request.form[“eml”]
・・my_message = “本日は晴天なり。”
・・return render_template(‘index24.html’,age=my_age,name=my_name,eml=my_email,msg=my_message)

if __name__ == ‘__main__’:
・・app.run(debug=True)
****************************************
<!DOCTYPE html> <!– index24.html –>
<html lang=”ja”>
・・<head>
・・・・<meta charset=”UTF-8″>
・・・・<title>登録フォーム</title>
<!– <link rel=”stylesheet” type=”text/css” href=”style.css” /> –>
・・・・<link rel=”stylesheet” type=”text/css” href=”static/css/style-06.css” />
・・・・<!–&#91;if lt IE 9&#93;>
・・・・<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
・・・・<!&#91;endif&#93;–>
・・</head>
・・<body>
・・<h1>登録完了</h1>
あなたの名前は:{{name}}です。</br>
あなたの年齢は:{{age}}才です。</br>
あなたのE-mailアドレスは:{{eml}}です。</br>
<h1>で登録しました。</h1>
demo24.pyからのメッセージは:{{msg}}です。
・・</body>
</html>
****************************************
<!DOCTYPE html> <!– check24.html –>
<html lang=”ja”>
<head>
・・<meta charset=”UTF-8″>
・・<title>登録フォーム</title>
<!– <link rel=”stylesheet” type=”text/css” href=”{{url_for(‘static’, filename=’style.css’)}}” /> –>
・・<link rel=”stylesheet” type=”text/css” href=”static/css/style.css” />
</head>
<body>

・・<form action=”/” method=”post”>
・・・・<h1>登録</h1>
・・・・<input type=”text” name=”name” placeholder=”名前” required/>
・・・・<input type=”number” name=”age” placeholder=”年齢” required/>
・・・・<input type=”email” name=”eml” placeholder=”メールアドレス” size=”30″ maxlength=”40″ required/>
・・・・<button>同意する</button>
・・</form>

</body>
</html>
****************************************
@charset ‘utf-8’; /* style-06.css */
body・・{
・・・・background: silver;
・・・・color: blue;
・・・・margin-left: 2m;
・・・・margin-right: 2m;
}
****************************************

登録入力画面

↑人気ブログランキングに参加しています。よろしければ1票を!

年齢チェックのプログラム

インデントができないので我慢してほしい。これで画像の処理が行われている。

年齢チェックのプログラム

インデントができないので我慢してほしい。
これで画像の処理が行われている。
loginの完成形が下記のリンク先でupした参照してほしい。
neverjpのぶらり日記
 

#demo23.py
#!/usr/bin/python3
# -*- coding: utf-8 -*-

from flask import Flask, redirect ,request,render_template

app = Flask(__name__)

@app.route(“/check”)
def check():
・・return render_template(‘check23.html’)

@app.route(‘/’,methods=[‘POST’])
def index():
・・my_age = int(request.form[“age”])
・・my_name = request.form[“name”]
・・return render_template(‘index23.html’,age=my_age,name=my_name)

if __name__ == ‘__main__’:
・・app.run(debug=True)
****************************************
<!DOCTYPE html> <!– index23.html –>
<html lang=”ja”>
・・<head>
・・・・<meta charset=”UTF-8″>
・・・・<title>20禁のサイト</title>
<!– <link rel=”stylesheet” type=”text/css” href=”style.css” /> –>
・・・・<link rel=”stylesheet” type=”text/css” href=”static/css/style-05.css” />
・・・・<!–&#91;if lt IE 9&#93;>
・・・・<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<!&#91;endif&#93;–>
・・</head>
・・<body>
<h2>Barry Manilow international funclubの資格審査</h2>
・・{% if age >= 20 %}
・・・・Barry命の{{name}}さんは20歳以上なんですね。</br>
・・・・資格審査 pass
・・{% else %}
・・{{name}}さんみたいな未成人はこんなサイト見ちゃダメですよ?
・・{% endif %}

・・</body>
</html>
****************************************
<!DOCTYPE html><!– check23.html –>
<html lang=”ja”>
<head>
・・<meta charset=”UTF-8″>
・・<title>年齢確認</title>
<!– <link rel=”stylesheet” type=”text/css” href=”{{url_for(‘static’, filename=’style.css’)}}” /> –>
・・<link rel=”stylesheet” type=”text/css” href=”static/css/style.css” />
</head>
<body>

・・<form action=”/” method=”post”>
・・・・<h1>Entry</h1>
・・・・<input type=”text” name=”name” placeholder=”名前” required/>
・・・・<input type=”number” name=”age” placeholder=”年齢” required/>
・・・・<button>年齢確認</button>
・・</form>

</body>
</html>
****************************************
@charset ‘utf-8’; /* <style-05.css> */
body {
・・・・background: plum;
・・・・color: firebrick;
・・・・margin-left: 2m;
・・・・margin-right: 2m;
}
****************************************
@charset ‘utf-8’; /* <style.css> */
body {
・・・・background: sandybrown;
・・・・color: darkgreen;
・・・・margin-left: 2m;
・・・・margin-right: 2m;
}
****************************************

データを入力しているところ

20歳以上の場合

20歳未満の入力

20歳未満の表示

↑人気ブログランキングに参加しています。よろしければ1票を!

5ヶ年計画Revise up(ver3.0)

Qiitaに谷CEOの記事が載ったのでそれを参考にAIエンジニアになるための道程表をリバイズアップした。有用な記事、感謝いたします。

5ヶ年計画Revise up(ver3.0)

Qiitaに谷CEOの記事が載ったのでAIエンジニアになるための道程表(5ヶ年計画)をリバイズアップした。
有用な記事感謝いたします。

layout: “post”
title: “5ヶ年計画ver3.0”
date: “2018-12-18 13:38”

AIエンジニアに最低限必要な知識
まずは、AIエンジニアに最低限必要な知識を大きく6つに分けて見ました。
ここでは、将来AIエンジニアとして業務を行うにあたり、大きく分けて6つの内容の基礎知識の全体像を把握してください。

①プログラミングスキル
– Python
– numpy、pandas、matplotlib、scikit-learn、TensorFlowやkeras

この中で特にpandasを使いこなせると良いです。
機械学習を行う上で、データ前処理が必須なのですが、データ前処理を行う上で便利なライブラリです。

②数学
– 微分、線形代数、ベクトル、行列、確率など

③統計の知識
– 標準偏差、分散、確率分布、推定、検定などなど

④機械学習の基礎知識

教師あり学習と教師なし学習
前処理、特徴量設計、学習と評価
単回帰、重回帰分析、最小二乗法、パーセプトロン、ロジスティック回帰
決定木、ランダムフォレスト、サポートベクトルマシン、K-means
ディープラーニングの実装スキル及び知識
scikit-learn
TensorFlowやKerasなどのフレームワークの知識。
scikit-learnで学習済みモデルを作るまでの流れなど。
1.データの収集とデータの前処理欠損値の補完や外れ値の削除。
2.特徴量の設計(特徴量の選択)
3.モデル開発(モデルの選択と学習)
4.モデル評価・・・交差検定、混合行列で評価など。
⑤SQLを使ってデータベースを操作する知識。
– select、insert、update、delete、where、like、limit、sum、avg、max、group by、having、order by、テーブル結合、ビュー、サブクエリ、caseなどなど。

⓺クラウドの知識
– AWSやGCPやAzureなどのクラウドインフラ回りの知識。

大きく6つもあり以外と多いなと思われたかもしれませんが、一度に全てやるのではなく、まずは①と④の2つに絞ることをお勧めします。
理由は、実際にプログラムを書き、目に見える形にすることで継続して学びやすくなるからです。
はじめに理論から入ると独学だと挫折してしまうので。

人工知能を独学で勉強するオススメの方法
必要な知識は前の節で紹介しましたが、どのようにそれらを学べば良いのでしょうか。
①から⑥を学ぶ上で、以下のような順で知識を身につけていくことをお勧めしています。

フェーズ1 pythonによる機械学習プログラミングと人工知能概論を学ぶ。
フェーズ2 機械学習プログラミング。
フェーズ3 Kaggleに挑戦。
フェーズ4 SQL、スクレイピング、クラウドなどの技術も身につける。
フェーズ5 機械学習スキルを活用してプロダクト制作をする。
フェーズ6 教える(多分これはしないと思う)。

このフェーズごとに学んでいくことがもっとも自分自身に負荷をかけず、楽しく学ぶことができると考えています。

フェーズ1ではプログラミング初学者の方を指しております。
もし、プログラミングを初めてという方は是非フェーズ1から目を通してください。

フェーズ2では実際にフェーズ1で学んだ内容をベースに、機械学習プログラミングに関する勉強方法を説明して参ります。
既にscikit-learnを使った機械学習プログラミングを行なっている方は飛ばして頂いても構いません。

フェーズ3ではKaggleといったコンペティションを通じて実践的なプログラミングを学ぶ方法を記述しています。(これもしないと思います)

フェーズ4 機械学習をやる上で、データベースからデータを取り出すことは頻繁に行われますので、SQLの知識は必須です。ここでは、SQLの他にスクレイピング(データ収集用)、クラウドなどの技術の身につけ方を紹介します。(まずはAccessから)

フェーズ5 機械学習スキルを活用してプロダクト制作に取り掛かりましょう。このレベルまで到達した方は、プロダクトを通じて学ぶことが多いです。

フェーズ6 人に教えることで自分の分かっていなかったことが明確になることがあります。なので、友人などに機械学習を教えて自分の理解を深めることもよいでしょう。

以降、6つのフェーズごとに、どのようにこれらに取り組めば良いのか、お勧めの書籍などを紹介しながら説明していきます。

# 開発環境構築

1. PCにIpython、Python、Atom設定
・AtomではPython単体でデバッグ
・WSLとemacsでWebの練習問題をコピペで開発
・WEBのTopページをデザインおよび開発
・Topページ(index.html)の下でdemo.py demo.html demo.css demo.jsを開発
・各demoxx.pyデザイン、demoxx.htmlデザイン、代表.cssデザイン
・モジュール名を標準化
・モジュール一覧表を作成

2. Git、GitHub設定ー協力者選定
・GitHubを勉強(バインダーのもの)

3. ドキュメント計画策定
・モジュール一覧表を作成
・Pythonプログラム・ジャーナル整理
・HTMLジャーナル整理
・JSプログラム・ジャーナル整理

4. 開発計画

1. Python習得計画
2. 実機練習
3. Pythonプログラミング(コマンドプロンプトとWSL上で)
4. デバッグ
5. モデル構築
6. Ipytonデバッグ(WSL上でJupyternotebook)それをAtom環境下で開発(numpy,pandasの習得)

PCにIpython、Pyton、Atom設定

– Toshiba dynabook Satellite B554/K 使用
– ドキュメンテーション
– 開発環境下でテスト
– 逐一ブログアップ

# Git、GitHub設定ー協力者選定

– GiTHub学習
– 協力者要請

# ドキュメント計画策定

– 5ヶ年計画
– 1年間のスケジュール
– 3年間のスケジュール
– 最終計画

# 読書計画

– Qiita掲載中のドキュメント精読(仕掛中)
– オブジェクト指向で何故作るのか(購入済み)
– 新しいLinuxの教科書(購入済みー実機で参照したのち熟読)
– みんなのPython(購入済みー仕掛中、早めに)
– 日経Linux(購入)
– ゼロから作るDeep Learning ―Pythonで学ぶディープラーニングの理論と実装(購入済みー熟読)
– Access学習(住所録作成・MySQL Queryを中心に学習)
– Qiitaでコピペしたドキュメント勉強(仕掛中)
– (プログラミング(Python)、統計的機械学習、深層学習(Deep Learning)、機械学習のための数学、確率・統計)
– やさしく学ぶ 機械学習を理解するための数学のきほん
– Ipython Interactive Computing and Visualization Cookbook(購入済みー最後に)
– その他

↑人気ブログランキングに参加しています。よろしければ1票を!

demo07の別解

関数のそのものをintにしたりstrにしたりすることにより実現しました。

demo07の別解

前の回の正解を表記します。
関数のそのものをintにしたりstrにしたりすることにより実現しました。

↑人気ブログランキングに参加しています。よろしければ1票を!

ADRから入力して画面に演算結果を表示する

Pythonのプログラムを作って入力した2つのパラメータの演算結果を画面に表示する。

ADRから入力して画面に演算結果を表示する

Pythonのプログラムを作って入力した2つのパラメータの演算結果を画面に表示する。
Pythonのプログラムの演算子を変えることによって四則演算にも応用できる。

↑人気ブログランキングに参加しています。よろしければ1票を!

WSLとWin間のコード変換について(コピペ)

2018/12/14下記の記事は間違えでemacs→秀丸エディタではctrl+c(copy)、ctrl+v(paste)が単純にできる。お詫びして訂正いたします。WSL → Win10Proでは(限定的ではあるが)できる。1行の範囲内であれば問題ない。例えばWSL上のエラーメッセージをWin側でググってみるなどといったことは可能。

WSLとWin間のコード変換について(コピペ)

2018/12/11
2018/12/14下記の記事は間違えでemacs→秀丸エディタではctrl+c(copy)、ctrl+v(paste)が単純にできる。お詫びして訂正いたします。

① 2018/12/11現在で以下のことはWindows10Proのカレントバージョンに限定した話である。
② WSL → Win10Proでは(限定的ではあるが)できる。
③ 1行の範囲内であれば問題ない。
④ 例えばWSL上のエラーメッセージをWin側でググってみるなどといったことは可能。
⑤ 画面1はWSLのemacsでコピーしたソースプログラムをWin上で走る「秀丸エディタ」の中にペーストした状態である。なおTerapadではできない。改行コードは80文字のスペースに置き換わる。(調べれば改行の指定などができる可能性もある)
⑥ 画面2はスペースキー80文字をそれぞれ80文字分消去していったものである。
⑦ 画面3はそれを「.py」でセーブしたところである。秀丸エディタにはPythonのモードはないがコメントや「’」で囲われたところなどが色で示される。
⑧ このことからコード量の少ないものには構わないが多くなると実用に耐えない。
⑨ コピーコマンドはCtrl+Shift+C(WSL内で)
⑩ ペーストコマンドはCtrl+Shift+V(Win内で)
⑪ Win10Pro → WSLは基本的にできない。(もっと調べる必要があるが)これをやるには前のほうのブログで示した方法しかないのではないか。(USBメモリ経由で)
⑫ ⑪でペーストしようとすると「F12」を押した状態になる。抜けるにはもう一度「F12」を押す。

以上

画面2

画面3

↑人気ブログランキングに参加しています。よろしければ1票を!

Chrome上のサンプルプログラムをFlaskフレームワークに囲い込む

Windows上のデータ(例えばブラウザ上のサンプルプログラム等)をWSL上の環境のFlaskフレームワークで動作させたい場合、諸画面の操作で行える。

Chrome上のサンプルプログラムをFlaskフレームワークに囲い込む

Windows上のデータ(例えばブラウザ上のサンプルプログラム等)をWSL上の環境のFlaskフレームワークで動作させたい場合、諸画面の操作で行える。

 

画面1

TerapadでChrome上のサンプルプログラムをコピペする。

画面2

USBメモリーにコピペする。

画面3

WSL上でUSBをマウントする。

◎:USBをマウントする

①:USBからカレントディレクトリにモジュールをコピーする

②:Shift_JISのファイルをUTF-8に変換する

③:緑のShift_JISファイル

④:白のUTF-8に変換されたファイル

画面4

emacs上で表示した。

画面5(結果が画面上に表示される)

ADRフィールドにhttp://localhost:5000/?who=岡田次郎<Enter>を入力する。

 

画面1

画面2[/caption]
画面3

画面4

画面5

↑人気ブログランキングに参加しています。よろしければ1票を!

emacsの操作一覧表

カーソルキー、「BackSpace」キー、「DEL」キーが使えるからである。それにほかのソースを多画面で編集できるし、「Search」もできるからである。

emacsの操作一覧表

ここまでPython,HTML,CSS,JSなどの編集には「Vim」を使ってきた。だがモードの切り替えは気を使うしオペミスもあった。そこで「emacs」を今後使うことにした。カーソルキー、「BackSpace」キー、「DEL」キーが使えるからである。それにほかのソースを多画面で編集できるし、「Search」もできるからである。そこで「emacsチュートリアル」からキー操作の部分を抜き出し「コマンド一覧」にしたので参照していただきたい。
2018/12/07
C-<文字>:Ctrlキーを押したまま、<文字>キーを押します
M-<文字>:Altキーを押したまま、<文字>キーを押します
Emacsを終了するにはC-x C-cをタイプします
C-v:次の画面を見る
M-v:前の画面に戻る
C-l:画面を書き直す、カーソルのある行が画面の中央に来る
(p:previous, n:next, f:forward, b:backward)
C-p:前の行へ(↑)
C-n:次の行へ(↓)
C-f:次の文字(→)
C-b:前の文字(←)
“Delback>”:back spaceキー(delete)
C-d:DELキー(delete)
M-f:一単語先へ
M-b:一単語前へ
C-a:行頭へ
C-e:行末へ
M-a:文頭へ
M-e:文末へ
M-<:ファイルの先頭へ M->:ファイルの末尾へ
C-u:数値引数、続いて繰り返し回数、実行したいコマンド
C-g:Emacsを安全に止める
使用不可コマンド:yesの時スペースキー:実行、noの時:nキー
C-x 1:ウィンドウを一つにする
C-u 8 *:********(*を8個入力)
“Del-back>”:カーソル直前の文字を削除(delete)
C-d:カーソルのある文字を削除(delete)
M-“Del-back>”:カーソルの直前の単語を消去(kill)
M-d:カーソルの後ろにある単語を消去(kill)
C-k:カーソル位置から行末まで消去(kill)
M-k:カーソルから文末まで消去(kill)
C-SPCとC-w:最初と最後(直前まで)を指定するとその区間が消去されます(kill)
C-y:消去した文章を復活する操作(yanking)killしたものが再入されます
M-y:さらに前に消去した文章を呼び戻せます
C-x u:取り消し(undo)何度も繰り返せばそのたびに一つ前のコマンドの取り消しです
C-_:C-x uと同じです
C-x C-f:ファイルを開く(find)、続いてファイル名の入力、その途中でC-g(取り消し)
上をタイプすると最下行(ファイル名)をミニバッファと呼びで入力完了
C-x C-f foo→編集後→C-x C-sでセーブ→最後にC-x C-f TUTORIAL.jaでもとに戻る
C-x C-s:ファイルをセーブする
Emacsはファイルの内容をバッファ(buffer)の中に格納する。ファイルを開くと新しいバッファができます。
C-x C-b:バッファのリストを見る
C-x l:バッファのリストを消す
C-x b:バッファを切り替えるためファイル名を入力する
C-x s:いずれかのバッファをセーブする
C-z:一時的にEmacsを抜ける(fgコマンドまたは%emacsでEmacsを再開する)
M-x text-mode:Text modeにする
M-x auto-fill-mode:単語間の分離・禁則処理(トグル)
C-u 80 C-x f:行80文字にする
M-x recover file:yesで自動セーブされたデータの回復
M-x:最下行に”repl s”をタイプで入力
どの文字列をどう置換するか入力のたびにを打つ
C-s:前向き検索(C-r:後ろ向き)、次に検索したい文字列入力―で終了C-g
C-q:フローコントロールを解除する
複数のウィンドウ
C-u 0 C-l:分割する位置にカーソルを移動して(lば小文字のL)
C-x 2:画面を2分割
C-M-v:下のウィンドウをスクロール(MはAltキー)
C-x o:(下のウィンドウにカーソルを移動)o→otherのo(他のウィンドウ)切り替えC-x o
上のウィンドウでC-x lと打って下のウィンドウを消す(自分のいるウィンドウだけにする)
ESC ESC ESC:抜け出しコマンド、ミニバッファからの抜け出しなど

C-h ?:「helpコマンド」、C-gで取り消し

                 以上

↑人気ブログランキングに参加しています。よろしければ1票を!

PythonのFlaskで学ぶ〜プログラムの再利用・ルーティング〜

仕様かバグかわからないが、CSSモジュール名が「style.css」でないとバックグラウンドの色指定ができない。

PythonのFlaskで学ぶ〜プログラムの再利用・ルーティング〜

今、下のリンクを参照しながらFlaskフレームワークを勉強している。
仕様かバグかわからないが、CSSモジュール名が「style.css」でないとバックグラウンドの色指定ができない。
リンクの記事は後程読んでDEMOプログラムを開発しようと思う。
2番煎じだが今回は勘弁してほしい。
PythonのFlaskで学ぶWebアプリケーション制作講座 第3章 〜プログラムの再利用・ルーティング〜

↑人気ブログランキングに参加しています。よろしければ1票を!

昨日のデモで使ったソースデータ

WordPressの都合上インデントは無視します。代わりに「neverjpのぶらり日記」(2018/12/6付け)を参照してください。

============================
demo01.html(/flask/templates
============================
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<link rel=”stylesheet” href=”/static/css/demo01.css”>
<title>Deep Learning first TEST</title>
</head>
<body>
<title>Hello from Flask</title>
{% if name %}
<h1>{{ name }}さん!テンプレートからのHello Worldだよ!</h1>
{% else %}
<h1>テンプレートからのHello Worldだよ!</h1>
{% endif %}

<p>
<img src=”/static/images/0umi1.jpg” alt=”pic01″>
</p>

<script src=”/static/js/main.js”></script>
</body>
</html>
======================
demo01.py(/flask)
======================
from flask import Flask, render_template
app = Flask(__name__)

@app.route(‘/’)
def demo01():
html = render_template(‘demo01.html’, name = ‘児島’)
return html

#デバッグモードで走らせる
if __name__ == “__main__”:
app.run(debug=True)
============================
demo01.css(/flask/static/css
============================
.demo01 {
color: #f00;
}
=========================
main.js(/flask/static/js)
=========================
(function(){
‘use strict’;

alert(‘アラートだよ〜。’);

})();
==============================
挿入写真(/flask/static/images)
==============================
<img src=”/static/images/0umi1.jpg” alt=”pic01″>