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で取り消し

                 以上

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

Anaconda無しのHydrogen

先日、Anaconda無しのHydrogenを当コマンドプロンプトにインストールした。これはWSL(Windows Subsystem for Linux)をUbuntu上で実現してPython3を走らせると「No kernel for grammar Python found」になってしまうのを防ぐ手立てになった。

Anaconda無しのHydrogen

先日、Anaconda無しのHydrogenを当コマンドプロンプトにインストールした。
これはWSL(Windows Subsystem for Linux)をUbuntu上で実現してPython3を走らせると「No kernel for grammar Python found」になってしまうのを防ぐ手立てになった。
これは今年の5月から出ていた現象だった。追及しても一人ではどうにもならなかった。
それが今回「Qiita」の記事でコマンドプロンプトにHydrogenをインストールする方法を知りPythonのプログラムをデバッグできる状況になった。
これは私にとって大きな福音である。
アイキャッチ画像はPythonのListとTupleを使ったデバッグの様子である。

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

Windows Subsystem for Linux

Pythonの開発環境でいままでVAIO上でUbuntu(native Linux)を使って行ってきた。しかし今回の内臓HDDも約2か月で壊れてしまった。しようがないので倅に一時は渡したDYNABOOKを返してもらってPCで引き続きPythonで開発することとした。Windows10の安定性を考えてである。

Windows Subsystem for Linux

Pythonの開発環境について、いままでVAIO上でUbuntuをインストールし使ってきた。
しかし今回の内臓HDDも約2か月で壊れてしまった。(外付けHDDは2度クラッシュ)
仕様がないので倅に一時は渡したDYNABOOKを返してもらってPCにて引き続き
Pythonで開発することとした。Windows10の安定性を考えてである。
コマンドプロンプトで仮想環境を作り出し数学関連のライブラリをインストール。
そののち(>atom . )でAtomを呼び出しsin curveなどをプロット。
以下にその手順を述べる。

2018/10/05

① コントロールパネルのWindows Subsystem for Linuxに☑を入れる。
② Ubuntuのインストール
③ Ubuntuにユーザーネーム、PWをセットする。
④ sudo apt updateの実施
⑤ sudo apt upgradeの実施(pip,pip3,python3.6.6も同時にインストールされる)
⑥ sudo apt install emacs
⑦ sudo apt install ibus-mozc emacs-mozc
%emacs &
VcXsrvを起動
デスクトップ上のXlaunchをクリック
%xeyes &
⑧ pip,pip3インストール which pip3→/*****/bin/pip3
⑨ jupyterのインストール
⑩ Anaconda3のインストール
C:\Users\*****\Anaconda3
⑪ Atomのインストール1.31.1
⑫ Atomのセットアップ
⑬ Ipykernelのインストール
⑭ AnacondaなしでAtomのHydrogenをいれる(CMDpromptで >atom . )
→@tomp(2018/10/03)記事参照
( https://qiita.com/tomp/items/af89e0c7aa1a3d07e27f )参照
⑮ 環境変数編集
⑯ Ipythonのインストール
⑰ コマンドプロンプトでPython36のインストール
⑱ Matplotlib等のインストール

問題点、注意点など
 HydrogenでShift+Enterでpip -m …のエラー解決(⑭で解決済み)
 Jupyter notebookでファイルが参照できない
 クロームのLinuxの最終行をクリックしyahooの最後のリンクを読む
 VcXsrvを起動デスクトップ上XLaunchをクリック
 初回時ファイアウォールの設定キャンセル
(libxcb.dll libXau.dll libX11.dll zlib1.dll libcrypto-1_1-x64.dllをセットする)
 Windows・Key+R(「shell:startup」入力)

Atom実行場面(projectの指定)

Matplotlibをインストールしたのちsin curveを描画

pandasのインストールしたのち乱数を発生させてplot


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

NEWマシンのスタビリティー

VAIO Core 2 DuoにUbuntuをインストールしてから17日経った。この間1度起動時に普段と違う動きを一瞬見せたがそれだけであとは安定的に推移している。

NEWマシンのスタビリティー

VAIO Core 2 DuoにUbuntuをインストールしてから17日経った。
この間1度起動時に普段と違う動きを一瞬見せたがそれだけであとは安定的に推移している。
外付けHDDにUbuntuをインストールしたときは新しいHDDにもかかわらず2度ともディスクエラーを引き起こした。
両者はシーゲート・バッファローのTV録画用の500GBのHDDである。
2つともAmazonジャパンで求めたものだが品物にがっかりした。
今度のUbuntuをインストールしたVAIOは8年前Windows7用マシンとして買い求めたものである。

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

新しいLinuxの教科書

今私の読んでいるLinux関連の書籍は表題のものと雑誌Linuxです。

新しいLinuxの教科書

今私の読んでいるLinux関連の書籍は表題のものと雑誌Linuxです。
リンクは「新しいLinuxの教科書」の章立てです。
2018-08-21-新しいlinuxの教科書.markdown
LinuxはUnix系のOSですが筆者が米国滞在中、当時のMINIコンにUnixを移植することになり、相当調査した経緯があります。ディスクのセクターサイズ512と1024の違いがありそのままでは移植できませんでした。
でもこういった経緯からUnixははじめての経験ではありません。
Linuxもまたそういった意味で親近感を持っています。
Pythonの学習よりLinuxの学習のほうが遥かにやりやすいと思っています。

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

みんなのPython

「みんなのPython」の章立てが見ることができます。

みんなのPython

2018-08-20-みんなのpython.markdown
上記リンクをクリックすると「みんなのPython」の章立てが見ることができます。
私は主にこの本の章立てに従ってPythonを習得していきます。

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

System Generation(最終?)

システムジェネレーションその4、Sony VAIO(VGN-NW51FB CORE2Duo)にUbuntuをインストールするまで。TV録画用などの外付けHDDはシステムには向いていないようです。それで中古PC(Windows10)を購入する予定だったがこのマシンは倅に譲りSonyのVAIOを使用。

System Generation(最終?)

システムジェネレーションその4
Sony VAIO(VGN-NW51FB CORE2Duo)にUbuntuをインストールするまで
① 2018/08/16実施
② 自分の必要なモジュールの選定
③ インストール順番を考える
④ ディスクのレイアウトを考える(今回は1パーティション)
⑤ Ubuntu 18.04 LTS 日本語RemixマスターUSBメモリーを使用(ISO-image)
⑥ Live-USBメモリーの作成(既成)
⑦ 内蔵HDDの作成
・パーティションの削除(今回はやらない)
・複数のパーティションの作成(今回は1パーティション)
・fdisk(不要)
・fsck(不要)
・MBRの作成(自動作成)
・1つは’/’
・1つは’/home’(今回は不要)
⑧ Firefoxのお気に入りのインポート(IE11から)
⑨ Firefoxのお気に入り整理(前回のFirefoxのJSONファイルのリストア)
⑩ ・DailyCheck(今回は前回システムのお気に入りのバックアップから復元)
・Software
・Linux
・Ubuntu
・Atom
・GitHub
・Blogetc
・Finance
・Other
⑪ 端末の背景を白地に(編集メニューの→Preference→色)
⑫ タッチパッドを殺す(マウスオンリー)(Doc→デバイス→マウス・タッチパッド)
⑬ emacs,LaTeXのインストール(最後にやる)
⑭ pip,pip3,dumpのインストール(Firefoxコピー・ペースト)
⑮ Python3.6のインストール(Firefoxコピー・ペースト)
⑯ Thunderbird(メールソフト)のセットアップ
⑰ パーティションの中身の印刷(最後の最後にやる)
⑱ 壁紙の設定
⑲ 電源の設定に注意(暗く、ブラックアウトなし)
⑳ Ipythonのインストール(Firefoxコピー・ペースト)
㉑ Jupyter notebookのインストール(Firefoxコピー・ペースト)
㉒ Anaconda3のインストール(Firefoxお気に入りから)
・md5sumの実施(Document参照)
・bashの実施(細心の注意が必要)(Document参照)
㉓ Atomのインストール(Firefoxコピー・ペースト)
・パッケージのインストール(Document参照)
㉔ Gitの設定
㉕ GitHubの設定
㉖ GIMP(GNU Image Manupulation Program)のインストール
㉗ FlightGear(Game)のインストール
※ ⑮、⑳、㉑、㉒と㉓の順番は間違わないように!システム・ジェネレーションを4度もやってしまったので。Atom-Hydrogenでエラーになってしまう。
※ Anaconda3をatomの前にやっておかないと(正常に行われるとあるはずの)アイキャッチ画像にあるようなIpythonやPython3.6のフォルダーの中身が空になってしまうようです。
※ モジュールのインストールは「#」ではなくて「$」で行うほうが良いようです。Anaconda3もユーザーライブラリーに入れたほうが良いようです。たまたまかも知れませんが、IpythonやPython3.6が正常にpathに載ったのもそのせいだと思っています。
※ TV録画用などの外付けHDDはシステムには向いていないようです。それで中古PC(Windows10)を購入する予定だったがこのマシンは倅に譲りSonyのVAIOを使用。(8/18追記)

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

5ヶ年計画

リンクをクリックすると私の5ヶ年計画の文書が見られます。目標、目的はあえて述べません。それは私自身の能力によるからです。

2018-08-17-5ヶ年計画.markdown
上のリンクをクリックすると私の5ヶ年計画の文書が見られます。
目標、目的はあえて述べません。それは私自身の能力によるからです。
1.Atomのパッケージのインストールで
・markdown-writer
・markdown-scroll-sync
・tool-bar
・tool-bar-markdown-writer
を入れておく
2.Atomでmarkdownの文書を作る
3.プレビューする
4.プレビュー画面で右クリック
5.HTML文書作成をクリック
6.Wordpressテキスト画面にHTML文書をドラッグ・アンド・ドロップする
7.リンクが貼られます
以上です。

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