WSLでの和暦→西暦プログラムの実行

WSLでの和暦→西暦プログラムの実行

①Library→USBメモリー
②USBメモリ-→WSLのディレクトリに
③S_JIS→UTF-8
④Python3の実行(elif07.py)
⑤元号、数字、年(全角)の入力
⑥デリミターは半角(または全角)
⑦数字も半角(または全角)
アイキャッチ画像を参照ください。

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

メニューの追加(Python,lions,NHK超AI入門,Linux,WSL,レジストリ,システムジェネレーションetc.)

メニューの追加(Python,lions,NHK超AI入門,Linux,WSL,レジストリ,システムジェネレーション,Atom,Emacs,markdown,Python,Flask)

「野生の証明」のメニューに「Lions」、「展覧会」、「食事」、「NHK超AI入門」、「Linux」、「WSL」(Windows Subsystem for Linux)、「レジストリ」、「システムジェネレーション」、「Atom」、「Emacs」、「markdown」、「Python」を追加した。
アイキャッチ画像は「Linux」、「WSL」のパスを示している。
①「活動」→「趣味」→「lions」
①-1「活動」→「趣味」→「展覧会」
①-2「活動」→「趣味」→「食事」
②「コンピューター」→「ソフトウェア」→「Deep Learning」→「NHK超AI入門」
③「コンピューター」→「ソフトウェア」→「オペレーティングシステム」→「Linux」(→「Flask」)
④「コンピューター」→「ソフトウェア」→「オペレーティングシステム」→「Windows10」→「WSL」
⑤「コンピューター」→「ソフトウェア」→「オペレーティングシステム」→「Windows10」→「レジストリ」
⑥「コンピューター」→「ソフトウェア」→「システムジェネレーション」
⑦「コンピューター」→「ソフトウェア」→「Editor」→「Atom」
⑧「コンピューター」→「ソフトウェア」→「Editor」→「Emacs」
⑨「コンピューター」→「ソフトウェア」→「Editor」→「markdown」
⑩「コンピューター」→「ソフトウェア」→「言語」→「その他の言語」→「Python(Object指向)」→「Python」

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

外付けHDDにUbuntu(Linux)をインストールする(まとめ・結論)

最近当ブログに外付けハードディスクを使ってUbuntu(Linux)をしたいがどうだろうという目的で訪れるユーザーが増えている。結論から言うと否である。Native Linux用Applicationを使用したい場合などの特別な理由がない限りWSLの使用をお勧めする。

190523

外付けHDDにUbuntu(Linux)をインストールする(まとめ・結論)

最近当ブログに外付けハードディスクを使ってUbuntu(Linux)をしたいがどうだろうという目的で訪れるユーザーが増えている。結論から言うと否である。

① 外付けハードディスクにUbuntuを合計2回インストールした。
② また古いWindows M/CにLinuxを1回インストールした。
③ 現在はBusiness用PCにWSL(Windows Subsystem for Linux)をインストールして使っている。
④ 外付けハードディスクは外国製と国内製の映像録画用HDDで使用した。
⑤ ④はいずれも2~3週間でBoot Errorになった。
⑥ これにより映像用外付けハードディスクはLinuxM/Cとしては不適であるとの結論である。
⑦ ②は1ヶ月半ほど稼働したがそののちBoot Errorを起こした。
⑧ ⑥⑦よりLinuxをインストールすると同じ個所を参照しトラブルを起こしやすい。
⑨ WSLを使ってLinuxを経験したいのなら中古PCで十分との結論に達した。去年(平成30年)の10月インストールして以来現在(令和元年11月3日)まで順調に稼働している。
⑩ Native Linux用Applicationを使用したい場合などの特別な理由がない限りWSLの使用をお勧めする。

linuxConsole

(写真はネットより借用)
以上

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

Atom-WSL-PyCharm相関図

Atom-WSL-PyCharm相関図を簡単にまとめましたので中間報告的に記述します。(長短含めて)

Atom-WSL-PyCharm相関図

2019/01/06
Atom
① 印刷できない。
② Flaskがない。
③ データベースがない。
④ Moduleの管理が難しい。
⑤ Pythonの各属性を色表示できる。
⑥ JupyterのModuleを引き込むことができる。
⑦ Hydrogenでstep by stepのデバッグができる。(◎)
⑧ Windows特にExplorerが生で使える。
⑨ Demo Programが多数存在する。(◎)

WSL(Windows Subsystem for Linux)
① 印刷できない。
② データベースがない。
③ Jupyterのmoduleを引き込むことができない。
④ Step by stepのデバッグができない。
⑤ Windowsとのやり取りがUSB経由である。
⑥ Pythonの各属性を色表示できる。(◎)
⑦ Flask環境下でデバッグできる。(◎)
⑧ Linuxのコマンドがじかに実行できる。(◎)
⑨ Moduleの管理が比較的しやすい。

PyCharm
① Step by stepのデバッグができない。
② 有料でないとSQLite3(DB)が使えない。
③ 慣れていない。
④ Linuxのコマンドが使えない。
⑤ Jupyterとの連携がとりにくい。
⑥ 有料でデータベースが使える。(◎)
⑦ 印刷ができる。(◎)

以上

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

☎登録フォーム

登録フォームのプログラムセットです。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票を!

Flaskを使ったデモの実施

Flask下で開発する各モジュールをPythonプログラム、HTML、CSS、JSでもってデモンストレーションしてみる。

Flaskを使ったデモの実施

Flask下で開発する各モジュールをPythonプログラム、HTML、CSS、JSでもってデモンストレーションしてみる。「Qiita」の記事を参照しながら最初はvimで直前ではemacsで開発した。数学のライブラリが必要な場合はCommand PromptからAtomで開発し通常のPythonはUbuntuの端末でということになる。後で整合性の観点で問題にならなければよいが。MySQL用にAccessを並行して進めているがまだ手についていない。以下短いデモプロで実施した手順を端末の画面などで説明する。

① Demo02.pyを実行(Ubuntu端末で)
② Demo02.pyで呼び出されたJSのmain.js内でalertがダイアログを表示、OKをクリックするとDemo02.py内で引数「多和田投手」が渡されdemo02.htmlの行が表示される。この時style.cssで定義された赤い文字で表示さてバックグラウンドの水色も表示される。またdemo02.htmlで合わせて定義された写真も表示される。
③ Ubuntu画面でdemo02が走った。
④ 実行を止めるにはCtrl + Cで行う。
⑤ 実行が停止された。
⑥ Demo02.htmlをdemo03.htmlとし新たにemacsでそれを編集する。
⑦ EmacsでC-zで一時的に抜ける。そしてUbuntu内でlsコマンドを実施。
⑧ 作業が終わったので「fg」コマンドでemacsに戻る。
⑨ Emacsの作業中のdemo03.htmlが表示される。

この一連の作業で今後開発を進める。

以上

↑人気ブログランキングに参加しています。よろしければ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で取り消し

                 以上

emacs操作画面

↑人気ブログランキングに参加しています。よろしければ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″>