Windows上のデータ（例えばブラウザ上のサンプルプログラム等）をWSL上の環境のFlaskフレームワークで動作させたい場合、諸画面の操作で行える。
Chrome上のサンプルプログラムをFlaskフレームワークに囲い込む
Windows上のデータ（例えばブラウザ上のサンプルプログラム等）をWSL上の環境のFlaskフレームワークで動作させたい場合、諸画面の操作で行える。
画面１
TerapadでChrome上のサンプルプログラムをコピペする。
画面２
USBメモリーにコピペする。
画面3
WSL上でUSBをマウントする。
◎：USBをマウントする
①：USBからカレントディレクトリにモジュールをコピーする
②：Shift_JISのファイルをUTF-8に変換する
③：緑のShift_JISファイル
④：白のUTF-8に変換されたファイル
画面4
emacs上で表示した。
画面5（結果が画面上に表示される）
ADRフィールドにhttp://localhost:5000/?who=岡田次郎<Enter>を入力する。
画面２[/caption]
↑人気ブログランキングに参加しています。よろしければ１票を！
Flask下で開発する各モジュールをPythonプログラム、HTML、CSS、JSでもってデモンストレーションしてみる。
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が表示される。
この一連の作業で今後開発を進める。
以上
↑人気ブログランキングに参加しています。よろしければ１票を！
昨日勉強したEmacsでCSSモジュールを編集してみた。
昨日勉強したEmacsでCSSモジュールを編集してみた。
アイキャッチ画像はバッファのリストを見ているところです。
ESC ESC ESCで抜け出せます。
Vimで編集していたころより圧倒的に扱いやすい。
それに機能が豊富だ。
これでエディティングが捗ることだろう。
↑人気ブログランキングに参加しています。よろしければ１票を！
カーソルキー、「BackSpace」キー、「DEL」キーが使えるからである。それにほかのソースを多画面で編集できるし、「Search」もできるからである。
ここまで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：ファイルをセーブする
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
M-x auto-fill-mode
C-u 80 C-x f：行80文字にする
M-x recover file
M-x：最下行に”repl s
どの文字列をどう置換するか入力のたびに
C-s：前向き検索（C-r：後ろ向き）、次に検索したい文字列入力―
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で取り消し
以上
↑人気ブログランキングに参加しています。よろしければ１票を！
仕様かバグかわからないが、CSSモジュール名が「style.css」でないとバックグラウンドの色指定ができない。
今、下のリンクを参照しながらFlaskフレームワークを勉強している。
仕様かバグかわからないが、CSSモジュール名が「style.css」でないとバックグラウンドの色指定ができない。
リンクの記事は後程読んでDEMOプログラムを開発しようと思う。
2番煎じだが今回は勘弁してほしい。
PythonのFlaskで学ぶWebアプリケーション制作講座 第3章 〜プログラムの再利用・ルーティング〜
↑人気ブログランキングに参加しています。よろしければ１票を！
フレームワークとは？今更聞けないWebフレームワークを始めから丁寧に
上記記事を全面的にコピーさせていただきました。
Web制作などのプログラミングでは、フレームワークを使うことが頻繁にあります。フレームワークの基礎知識や特徴についてみて述べます。
さまざまなシステム開発を効率化してくれる機能群、と表現できます。機能群だけではなく、ソフトウェアの骨組みまでを用意してくれているため、少ないコードで意図する機能やデザインが実現できます。それぞれのフレームワーク特有の書き方を学ぶ必要はあるのですが、プログラミングのビギナーにとって、とてもありがたいものです。
WebサイトやWebアプリケーションなどのフロントエンドを実装するためのWebアプリケーションフレームワークや、プログラムのテストに特化したテスティングフレームワークなど。以降では、特に断りのない限りWebアプリケーションフレームワークについて述べます。
フレームワークは便利だからといって、盲目的に使うことはあまりオススメしません。それは、フレームワークには良いところだけでなく欠点もあるからです。フレームワークの魅力を最大限享受するため、フレームワークのメリットとデメリットについて述べます。
フレームワークの最大のメリットは、何と言っても生産性が向上できることでしょう。フルスタックなフレームワークの場合、すでに必要な機能群が準備されていることになります。フレームワークの書き方がわかっていれば、従来よりも圧倒的に速くプログラムがつくれます。
速いだけではなく、運用管理の工数・コストを減らすことにも効果があります。プログラミングの仕方は千差万別。同じ機能であったとしても、つくる人によってコードは変わってくるもの。これが原因でプログラムの運用管理が大変になることもよくあります。しかしフレームワークを使えばコードの書き方が統一されるため、個々人による違いを大幅に減らせるのです。機能追加や改修もし易くなり、バグが発生するリスクを減らすことにもつながります。
まずあげられるのは、学習コストです。フレームワークはとても便利なのですが、フレームワーク特有のコードが書けなければいけません。つまり、プログラミング言語の書き方だけでなく、フレームワーク特有の書き方についても勉強が必要です。
また、フレームワークではコーディングの量を減らすことができると言いました。これはメリットでもあるのですが、裏を返せばデメリットとも言えます。仕組みがわかっていなくても、その機能を使うことができてしまうからです。プログラミングの技術を上げたいのなら、フレームワークを使わない場合の書き方についても学んでおくこと。
Web関連のプログラミング言語の中ではめっぽう人気のRuby。Ruby on Railsは、Rubyのためのオープンソースのフレームワークです。「設定より規約」や「同じことを繰り返さない」などの設計思想は、他の言語やフレームワークへも影響しているほど世界的に評価されています。
Ruby on Railsを使っている企業としては、クックパッドやWantedly、価格.comなどが有名です。
Reactは、Facebookが開発したJavaScriptのフレームワークです。JavaScriptではGoogle製のAngularJSも有名なのですが、最近ではReactの名前を聞くことも多くなってきました。Reactの設計はFluxを用いていて、Webアプリケーションではフロント側の機能を担当します。Facebookで使われていることからもわかるように、規模の大きなアプリケーションに向いているフレームワークと言えます。
Reactは開発元のFacebookやInstagram、Airbnbなどで利用されています。
Twitter社が公開しているCSSフレームワークです。CSSと聞いてわかるとおり、WebサイトやWebアプリケーションのレイアウトをするための機能が豊富に揃っています。代表的なものとしては、グリッドシステムがあります。Bootstrapでは画面を12分割しています。このグリッドレイアウトを使うことで、CSSのプログラミングに慣れていなくても、自由にページ要素を配置することができるのです。リキッドレイアウトにすることも可能で、スマホ対応などのレスポンシブデザインも簡単に実現できます。
Bootstrapの活用事例としては、ドットインストールやQiita、SlideShareが知られています。
フレームワークとは？今更聞けないWebフレームワークを始めから丁寧に
以上を参照させていただきました。
↑人気ブログランキングに参加しています。よろしければ１票を！
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″>
WSLでFlaskが使えるかテストしてみた。問題なく動いたが注意したい難点かある。以下箇条書きにしたので参照願いたい。約2日間でデモぐらいまでに至った。
WSLでFlaskが使えるかテストしてみた。問題なく動いたが注意したい難点かある。以下箇条書きにしたので参照願いたい。約2日間でデモぐらいまでに至った。
① 前提としてWSLにPython3,Pip3,Flask,nkf,Vimがインストールされているものとする
② Python2は全角文字が使えないから注意が必要
③ Flaskはlocalhost上でHTML、CSS、Python、JSが連携して動く
④ Windows上でエディター（秀丸、TeraPadなど）を使って編集しその後USBメモリーに落としたものをWSL上に転送しnkfを使ってShift-JISをUTF-8に変換する
⑤ ソースの修正はWSL上でVimを使って行う
⑥ ディレクトリ構造はflaskをルートにtemplates,staticその下にcss,js,imagesを配置する
⑦ flaskフォルダーには.pyモジュールを置きtemplatesフォルダーには.htmlファイル、cssフォルダーには.cssモジュール、jsフォルダーには.jsモジュール、imagesフォルダーには.jpg、.gif、.pngなどのモジュールを入れる
⑧ ④マウントの仕方
$ sudo mount -t drvfs f: /mnt/usb/
fドライブにUSBメモリーをマウントする
$ cp -r /mnt/usb/demo01.* ./
USBメモリーのdemo01と付いたモジュールをWSLのカレントディレクトリに転送する
$ cp -r /mnt/usb/main.js ./
USBメモリーのmain.jsをカレントディレクトリに転送する
$ mv main.js static/js/
カレントディレクトリ上のmain.jsモジュールをstatic/jsフォルダーに転送する
⑨ Shift-JISのモジュールをUTF-8にコード変換する（WSL上で）
$ nkf -w < demo01.py > demo01utf.py
変換後demo01.pyにリネームしておく
⑩ demo01の実行の仕方
~/flask$ python3 demo01.py
「pythonのフレームワークのflaskを触ってみた。」を参照させていただきました。
↑人気ブログランキングに参加しています。よろしければ１票を！
負荷が高い場合や静的ページに同時アクセスされることが多い場合はNginx（エンジンエックス）を使うと良いでしょう。
ApacheとNginx（エンジンエックス）、どちらを使うべき？ ApacheとNginxについて、どちらもシェアが高く信頼できるWebサーバーであることは間違いありません。 それでは結局のところ、どちらを使うべきなのでしょうか。 負荷が高い場合や静的ページに同時アクセスされることが多い場合はNginxを使うと良いでしょう。 反対に、負荷が高くなく同時アクセスが少ない場合や早期セットアップが必要な場合はApacheが良いでしょう。 Nginxは処理が早く、消費メモリが少ないという良い事ずくめですが、1つの処理が長すぎるとシステムコールキューにリクエストがたまってしまいパフォーマンスが低下してしまいます。 その為、動的処理や動画コンテンツの配信やデータベース処理等の重い処理をする場合にはApcheが良いとされています。 Nginxについてあとがき: NginxはApacheに引けを取らない、とてもパワフルなWebサーバーです。日本語での情報も増えてきましたし、開発にかかる工数も少ない部類に入ります。 インストールも難しくないので、気になった方はまずはダウンロードして使ってみてはいかがでしょうか？
を参照させていただきました。
スキルセットのFlaskとは？
を参照させていただきました。
↑人気ブログランキングに参加しています。よろしければ１票を！
いい絵を見ると心が豊かになった気がする。フェルメールの生涯35点のうちの9枚が一堂に会した。
先日上野の森美術館で開催中の「フェルメール展」に行ってきた。
人気絵画展ということもあって約20分待ちということであった。
今回は「赤い帽子の娘」が本邦初公開であった。
ちいちゃい油絵であった。
フェルメール展は10年ぶりの鑑賞であった。
その時は「真珠の耳飾りの少女」が公開されて惹きつけられた。
今回は「牛乳を注ぐ女」が目玉だった。
いい絵を見ると心が豊かになった気がする。
フェルメールの生涯35点のうちの9枚が一堂に会した。
小一時間鑑賞したのち昼食をとって家路についた。
↑人気ブログランキングに参加しています。よろしければ１票を！
