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票を!

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のオペレーション

昨日勉強したEmacsでCSSモジュールを編集してみた。

Emacsのオペレーション

昨日勉強したEmacsでCSSモジュールを編集してみた。
アイキャッチ画像はバッファのリストを見ているところです。
ESC ESC ESCで抜け出せます。
Vimで編集していたころより圧倒的に扱いやすい。
それに機能が豊富だ。
これでエディティングが捗ることだろう。

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

WEBフレームワークとは?

フレームワークとは?

フレームワークとは?今更聞けないWebフレームワークを始めから丁寧に
上記記事を全面的にコピーさせていただきました。

Webフレームワークとは?

Web制作などのプログラミングでは、フレームワークを使うことが頻繁にあります。フレームワークの基礎知識や特徴についてみて述べます。

さまざまなシステム開発を効率化してくれる機能群、と表現できます。機能群だけではなく、ソフトウェアの骨組みまでを用意してくれているため、少ないコードで意図する機能やデザインが実現できます。それぞれのフレームワーク特有の書き方を学ぶ必要はあるのですが、プログラミングのビギナーにとって、とてもありがたいものです。
WebサイトやWebアプリケーションなどのフロントエンドを実装するためのWebアプリケーションフレームワークや、プログラムのテストに特化したテスティングフレームワークなど。以降では、特に断りのない限りWebアプリケーションフレームワークについて述べます。

フレームワークのメリットとデメリット

フレームワークは便利だからといって、盲目的に使うことはあまりオススメしません。それは、フレームワークには良いところだけでなく欠点もあるからです。フレームワークの魅力を最大限享受するため、フレームワークのメリットとデメリットについて述べます。

メリット

フレームワークの最大のメリットは、何と言っても生産性が向上できることでしょう。フルスタックなフレームワークの場合、すでに必要な機能群が準備されていることになります。フレームワークの書き方がわかっていれば、従来よりも圧倒的に速くプログラムがつくれます。
速いだけではなく、運用管理の工数・コストを減らすことにも効果があります。プログラミングの仕方は千差万別。同じ機能であったとしても、つくる人によってコードは変わってくるもの。これが原因でプログラムの運用管理が大変になることもよくあります。しかしフレームワークを使えばコードの書き方が統一されるため、個々人による違いを大幅に減らせるのです。機能追加や改修もし易くなり、バグが発生するリスクを減らすことにもつながります。

デメリット

まずあげられるのは、学習コストです。フレームワークはとても便利なのですが、フレームワーク特有のコードが書けなければいけません。つまり、プログラミング言語の書き方だけでなく、フレームワーク特有の書き方についても勉強が必要です。
また、フレームワークではコーディングの量を減らすことができると言いました。これはメリットでもあるのですが、裏を返せばデメリットとも言えます。仕組みがわかっていなくても、その機能を使うことができてしまうからです。プログラミングの技術を上げたいのなら、フレームワークを使わない場合の書き方についても学んでおくこと。

フレームワークの具体例3つ

Ruby on Rails

Web関連のプログラミング言語の中ではめっぽう人気のRuby。Ruby on Railsは、Rubyのためのオープンソースのフレームワークです。「設定より規約」や「同じことを繰り返さない」などの設計思想は、他の言語やフレームワークへも影響しているほど世界的に評価されています。
Ruby on Railsを使っている企業としては、クックパッドやWantedly、価格.comなどが有名です。

React

Reactは、Facebookが開発したJavaScriptのフレームワークです。JavaScriptではGoogle製のAngularJSも有名なのですが、最近ではReactの名前を聞くことも多くなってきました。Reactの設計はFluxを用いていて、Webアプリケーションではフロント側の機能を担当します。Facebookで使われていることからもわかるように、規模の大きなアプリケーションに向いているフレームワークと言えます。
Reactは開発元のFacebookやInstagram、Airbnbなどで利用されています。

Bootstrap

Twitter社が公開しているCSSフレームワークです。CSSと聞いてわかるとおり、WebサイトやWebアプリケーションのレイアウトをするための機能が豊富に揃っています。代表的なものとしては、グリッドシステムがあります。Bootstrapでは画面を12分割しています。このグリッドレイアウトを使うことで、CSSのプログラミングに慣れていなくても、自由にページ要素を配置することができるのです。リキッドレイアウトにすることも可能で、スマホ対応などのレスポンシブデザインも簡単に実現できます。
Bootstrapの活用事例としては、ドットインストールやQiita、SlideShareが知られています。

フレームワークとは?今更聞けないWebフレームワークを始めから丁寧に
以上を参照させていただきました。

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

WSLでFlaskを走らせる

WSLでFlaskが使えるかテストしてみた。問題なく動いたが注意したい難点かある。以下箇条書きにしたので参照願いたい。約2日間でデモぐらいまでに至った。

WSLでFlaskを走らせる

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を触ってみた。」を参照させていただきました。

pythonのフレームワークのflaskを触ってみた。

次の写真をはっきり見るにはneverjpのぶらり日記へ

JSアラート


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

ApacheとNginx(エンジンエックス)、どちらを使うべき?

負荷が高い場合や静的ページに同時アクセスされることが多い場合はNginx(エンジンエックス)を使うと良いでしょう。

ApacheとNginx(エンジンエックス)、どちらを使うべき? ApacheとNginxについて、どちらもシェアが高く信頼できるWebサーバーであることは間違いありません。 それでは結局のところ、どちらを使うべきなのでしょうか。 負荷が高い場合や静的ページに同時アクセスされることが多い場合はNginxを使うと良いでしょう。 反対に、負荷が高くなく同時アクセスが少ない場合や早期セットアップが必要な場合はApacheが良いでしょう。 Nginxは処理が早く、消費メモリが少ないという良い事ずくめですが、1つの処理が長すぎるとシステムコールキューにリクエストがたまってしまいパフォーマンスが低下してしまいます。 その為、動的処理や動画コンテンツの配信やデータベース処理等の重い処理をする場合にはApcheが良いとされています。 Nginxについてあとがき: NginxはApacheに引けを取らない、とてもパワフルなWebサーバーです。日本語での情報も増えてきましたし、開発にかかる工数も少ない部類に入ります。 インストールも難しくないので、気になった方はまずはダウンロードして使ってみてはいかがでしょうか?

いま話題のWebサーバー「Nginx」とは?

を参照させていただきました。

スキルセットのFlaskとは?

【Python】フレームワークFlaskの基本をマスター

を参照させていただきました。

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

Vermeer展

いい絵を見ると心が豊かになった気がする。フェルメールの生涯35点のうちの9枚が一堂に会した。

Vermeer展

先日上野の森美術館で開催中の「フェルメール展」に行ってきた。
人気絵画展ということもあって約20分待ちということであった。
今回は「赤い帽子の娘」が本邦初公開であった。
ちいちゃい油絵であった。
フェルメール展は10年ぶりの鑑賞であった。
その時は「真珠の耳飾りの少女」が公開されて惹きつけられた。
今回は「牛乳を注ぐ女」が目玉だった。
いい絵を見ると心が豊かになった気がする。
フェルメールの生涯35点のうちの9枚が一堂に会した。
小一時間鑑賞したのち昼食をとって家路についた。

立て看板

フェルメール展を示す看板

ミニ海鮮丼

ミニ海鮮丼と盛そばセット

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