html for kubo semi 2014
TRANSCRIPT
html with bottle for beginners
bottle は作りますCSS については気が向いたら作ります
目次• ベース• 主なタグ• データ読み込み• 結果表示• テーブル• 画像• html内でforループ、if分岐をまわす（リンクはスライドショー時のみ機能）
ベース<html>
<head>タイトルやメタデータなど（最悪書かなくても良い）スタイルシート（ CSS ）は直接ここに書き込んでも OK</head><body>文字、フォームなどのコンテンツ（以降のスライドではこの部分に何を書くかを説明する）</body>
</html>
主なタグ (bottle に必要かもしれないもの）• 見出し
h1 ～ h6 まであり、数字が小さいほど大きな見出しになる。使わなくてもいい。<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>
• テーブル表を書く。座標を入出力させたり、商品の重さや価格を入出力させるときに使える。 →例<table></table>
• グループ化それ自体は意味はないが、タグで囲んだ中をひとまとまりとして、文字サイズや位置などを設定できる。<div></div>
主なタグ (bottle に必要かもしれないもの）• 段落パラグラフを設定する。 SSK さんは使っていたが、別に使わなくてもいい。
<p></p>
• 画像画像ファイルを表示する。 →例<img>
• 改行<br>
• コメントアウト<!-- -->
データ読み込み (get)<form method=“post” action=“/yyy”>
Demand: <input type=“text” name=“demand” value=“5”><input type=“submit” name=“submit” value=“SUBMIT”>
</form>
表示：
データ読み込み (get)<form method=“post” action=“/yyy”>
Demand: <input type=“text” name=“demand” value=“5”><input type=“submit” name=“submit” value=“SUBMIT”>
</form>
form:html でデータを読み込む範囲を指定
データ読み込み (get)<form method=“post” action=“/yyy”>
Demand: <input type=“text” name=“demand” value=“5”><input type=“submit” name=“submit” value=“SUBMIT”>
</form>
action:http://localhost:xxxx/yyy の部分を指定
データ読み込み (get)<form method=“post” action=“/yyy”>
Demand: <input type=“text” name=“demand” value=“5”><input type=“submit” name=“submit” value=“SUBMIT”>
</form>
input: フォームからどんなデータを送るのかを具体的に指定す る
データ読み込み (get)<form method=“post” action=“/yyy”>
Demand: <input type=“text” name=“demand” value=“5”><input type=“submit” name=“submit” value=“SUBMIT”>
</form>
input type:text テキストや数値入力欄を作るsubmit いわゆる送信ボタンを作るcheckbox チェックボックスを作る →例hidden 画面上には表示しない隠しデータ →例file ファイルを参照する →例
データ読み込み (get)<form method=“post” action=“/yyy”>
Demand: <input type=“text” name=“demand” value=“5”><input type=“submit” name=“submit” value=“SUBMIT”>
</form>
input name:送った情報につける名前これを指定しないと bottle 内で扱えない
データ読み込み (get)<form method=“post” action=“/yyy”>
Demand: <input type=“text” name=“demand” value=“5”><input type=“submit” name=“submit” value=“SUBMIT”>
</form>
input value:入力欄の場合はデフォルトで表示させるもの送信ボタンの場合は、ボタンに表示させる文字
データ読み込み (get) チェックボックスの例<form method=“post” action=“/yyy”>
Product: <input type=“checkbox” name=“demand” value=“1”>1<input type=“checkbox” name=“demand” value=“2”>2<input type=“submit” name=“submit” value=“SUBMIT”>
</form>
表示：
データ読み込み (get) チェックボックスの例<form method=“post” action=“/yyy”>
Product: <input type=“checkbox” name=“demand” value=“1”>1<input type=“checkbox” name=“demand” value=“2”>2<input type=“submit” name=“submit” value=“SUBMIT”>
</form>
同じ name のチェックボックスをグループとして、チェックがつけられた value 内のデータをリストとして送る（ bottle 内で受け取るためのメソッドは普通と異なるから注意）
データ読み込み (get) 隠しデータの例<form method=“post” action=“/yyy”>
Demand: 50 <input type=“hidden” name=“demand” value=“50”><input type=“submit” name=“submit” value=“SUBMIT”>
</form>
表示：
データ読み込み (get) 隠しデータの例<form method=“post” action=“/yyy”>
Demand: 50 <input type=“hidden” name=“demand” value=“50”><input type=“submit” name=“submit” value=“SUBMIT”>
</form>
こちらが指定したデータを変更させることなく、 value 内のデータをリストとして送る。② の例では画面に 50 と表示されないが、データは 50 が送られる。
<form method=“post” action=“/yyy”>Demand: <input type=“hidden” name=“demand” value=“50”><input type=“submit” name=“submit” value=“SUBMIT”>
</form>
①
②
データ読み込み (get) ファイル参照<form method=“post” action=“/yyy”>
<input type=“file” name=“demand” value=“50”><input type=“submit” name=“submit” value=“SUBMIT”>
</form>
表示：
bottle 側での値の受け取り• type=“text”, “submit”, “hidden” の場合
a に代入するa = request.forms.get(‘name’)注） name は html の input 内の name で指定したものデータは数字も含めすべて str 型で代入される
• type=“file” の場合a にファイルを格納する
a = request.files.get(‘name’)
• type=“checkbox” の場合a = request.params.getlist(‘name’)とすると、 a に str 型を要素としたリストが代入される
結果の表示 (post)bottle 側で、
return template(‘xxxx.html’, a = model.OpjVal)
としたうえで、 xxxx.html の <body></body> 内にただ{{a}}
とだけ書くのが一番単純な表示の方法。あとはテーブルを使ったり、画像を表示させるなどが可能。
テーブル<table border=“1”>
<tr><th></th><th>weight [g]</th><th>price [Yen]</th></tr><tr><th>Goods 1</th><td>50</td><td>100</td></tr><tr><th>Goods 2</th><td>100</td><td>250</td></tr>
</table>
表示：
テーブル<table border=“1”>
<tr><th></th><th>weight [g]</th><th>price [Yen]</th></tr><tr><th>Goods 1</th><td>50</td><td>100</td></tr><tr><th>Goods 2</th><td>100</td><td>250</td></tr>
</table>
tr: 行をまとめる
テーブル<table border=“1”>
<tr><th></th><th>weight [g]</th><th>price [Yen]</th></tr><tr><th>Goods 1</th><td>50</td><td>100</td></tr><tr><th>Goods 2</th><td>100</td><td>250</td></tr>
</table>
th: 見出し（自動で太文字になる）
テーブル<table border=“1”>
<tr><th></th><th>weight [g]</th><th>price [Yen]</th></tr><tr><th>Goods 1</th><td>50</td><td>100</td></tr><tr><th>Goods 2</th><td>100</td><td>250</td></tr>
</table>
td: セルを作るデータ読み込みのときには、この中に <input> を入れれば よい
テーブル （データ読み込みの例）<form><table border=“1”><tr><th></th><th>weight [g]</th><th>price [Yen]</th></tr><tr><th>Goods 1</th><td><input type=“text” name=“w1”></td><td><input type=“text” name=“p1”></td></tr><tr><th>Goods 2</th><td><input type=“text” name=“w2”></td><td><input type=“text” name=“p2”></td></tr></table><input type=“submit” name=“submit” value=“SUBMIT”></form>
表示：
テーブル （データ読み込みの例）<form><table border=“1”><tr><th></th><th>weight [g]</th><th>price [Yen]</th></tr><tr><th>Goods 1</th><td><input type=“text” name=“w1”></td><td><input type=“text” name=“p1”></td></tr><tr><th>Goods 2</th><td><input type=“text” name=“w2”></td><td><input type=“text” name=“p2”></td></tr></table><input type=“submit” name=“submit” value=“SUBMIT”></form>
事前に入力した数値の数だけ行数や列数を作りたい場合は、html 内で for ループを回す必要がある。 →後で説明
テーブル （結果表示の例）<table border=“1”>
<tr><th></th><th>weight [g]</th><th>price [Yen]</th></tr><tr><th>Goods 1</th><td>{{w1}}</td><td>{{p1}}</td></tr><tr><th>Goods 2</th><td>{{w2}}</td><td>{{p2}}</td></tr>
</table>
bottle の template 内で w1,w2,p1,p2 に指定した値が表示されるreturn template(‘xxxx.html’, w1=50, w2=100, p1=100, p2=250)など
画像<img src=“xxx.png”>
src: 画像データの保存場所を指定する。bottle 内で matplotlib を使って描画、保存したファイルを html で表示するには少し工夫が必要。 →次スライドで説明
画像を表示するには (bottle)@route('/static/images/<filepath:path>', name=‘zzz')def static(filepath):
return static_file(filepath, root='./static/images')
bottle の上の方にこれを書いておく。これは views フォルダと同じ階層に static フォルダがあり、その下層に images フォルダがあるときの表記。name の指定も重要（ html 内で使う）。
画像を表示するには (bottle)matplotlib(pylab) を使ってプロット、または networkx でドローした後、pylab のメソッド savefig を使って画像を保存する。
savefig(‘xxx.png’, format=‘png’)
その後テンプレートで bottle のメソッド url をほかのデータと一緒に渡す。return template(‘xxxx.html’, w1=50, ・・・・ , url=url)
画像を表示するには (html)<img src=“{{url(‘zzz’, filepath=‘xxx.png’)}}”>
url メソッドの第一引数に @route で指定した name を渡す。第二引数に static 関数への引数 = 画像名を渡す。@route('/static/images/<filepath:path>', name=‘zzz')def static(filepath):
return static_file(filepath, root='./static/images')
html 内で for ループ、 if 分岐を回すfor ループも if 分岐も、書きかたは同じ。
% for i in I:～～～～～～% end
% と半角スペースのあとで for 文や if 文を書くと動く。ループや分岐の終わりには % end を置く。これは bottle の template で呼び出した html 内だけの特別仕様。インデントは不要。
% if i in I:～～～～～～% else:～～～～～～% end
html 内で for ループ、 if 分岐を回す• 例 (for)
return template(‘xxxx.htlm’, I=range(5), J=[10,20,30,40,50])
% for i in I:Demand {{i}}: {{J[i]}}<br>% end
表示：
html 内で for ループ、 if 分岐を回す• 例 (if)
return template(‘xxxx.html’, A = [1,2,3,4,5,6], b = 4)
% for a in A:% if a < b:{{a}} is lower than {{b}}<br>% end% end 表示：
html 内で for ループ、 if 分岐を回すfor ループをテーブルに応用すると、入力した値の数だけ行数や列数を楽に増やすことができる。例は 5×3 の入力欄作成。
return template(‘xxxx.html’, N=5, M=3)
<form method=“post” action=“/xxx”><table><tr><th></th>% for m in range(1,M+1):<th>Product {{m}}</th>% end</tr>% for n in range(1,N+1):<tr><th>Customer {{n}}</th>% for m in range(1,M+1):<td><input type=“text” name=“d{{n}},{{m}}”></td>% end</tr>% end</table><input type=“submit” name=“submit” value=“SUBMIT”></form>
html 内で for ループ、 if 分岐を回す
表示：
html 内で for ループ、 if 分岐を回す結果を表示させたいとき（ n,m のタプルをキーとした d という辞書を結果として作っている場合）は、スライド 34 のセル内の
<input type=“text” name=“d{{n}},{{m}}”>を {{d[n,m]}} と置き換えればよい。