More than 5 years have passed since last update.

python のコーディングにVisual studio 2019 Community Bottole Template

Posted at 2019-08-19

pythonのコーディングに何を使っていますか。Pycarmもいいけど私は、Visual Studio 2017/2019を使っています。

多彩なツールを自由に組み込むことができます。今回は、素早くRasipberry pi 用にweb serverを立ち上げるためにBoostrap4用bottle Templateをご紹介します。Visual studio に添付されているbottleWebテンプレートをベースに作成しました。

Boostrap4にこだわる理由は、スマートフォン用のUIを簡単に作ることができるからです。

例えば、スマートフォンやタブレット用ボタンスイッチAPPを作るには、

routes.py に追加

routes.py

@route('/btn')
@view('btn')
def btn():
    return dict(
        year=datetime.now().year
    )

btn.tpl　テンプレートをを作成

% rebase('layout.tpl', title='Home Page', year=year)

<main role="main">
      <div class="container" style="margin:2em;">
		% ix=0
		% for j in range(4):
        <div class="row" style="margin:1em;">
		% for i in range(4):
          <div class="col-md-3">
			<button data-i={{ix}} class='btn btn-outline-primary btn-lg btn-block'style='height:100px;'><h1>ボタン{{ix}}</h1></button>
			%ix=ix+1
		</div>
		% end
		</div>
		% end
        <hr>
      </div> <!-- /container -->

    </main>
	<script>
	$(function(){
		$('#flipclock').FlipClock({clockFace: 'TwentyFourHourClock'});
		var on=0;
		$('.btn').click(function(){
			if($(this).hasClass('btn-primary')) { //off
				$(this).removeClass("btn-primary");				
				$(this).addClass("btn-outline-primary");
				on=0;
			} else { //on
				$(this).removeClass("btn-outline-primary");
				$(this).addClass("btn-primary");
				on=1;
			}
			$.ajax({
				type: "POST",
				url: "/relay",
				data: {
				"id":$(this).attr('data-i'),
				"cmd": on,
				"relay":$(this).attr('data-i')},
				success: function(data){}
			});
		});
	});
	</script>

ファイルをgithubに置いておきます。
https://github.com/yutakahirata/Bottle4Template/tree/master/bottle4/bottle4

tree.txt

　　bottle4
    │  app.py
    │  bottle4.pyproj
    │  bottle4.pyproj.user
    │  requirements.txt
    │  routes.py
    ├─static
    │  ├─content　#その他必要なスタイルシートを追加します。
    │  │      bootstrap-grid.css
    │  │      bootstrap-grid.css.map
    │  │      bootstrap-grid.min.css
    │  │      bootstrap-grid.min.css.map
    │  │      bootstrap-reboot.css
    │  │      bootstrap-reboot.css.map
    │  │      bootstrap-reboot.min.css
    │  │      bootstrap-reboot.min.css.map
    │  │      bootstrap.css
    │  │      bootstrap.css.map
    │  │      bootstrap.min.css
    │  │      bootstrap.min.css.map
    │  │      jumbotron.css
    │  │      site.css
    │  │
    │  ├─fonts    #boostrap4では、不必要
    │  │      glyphicons-halflings-regular.eot  
    │  │      glyphicons-halflings-regular.svg
    │  │      glyphicons-halflings-regular.ttf
    │  │      glyphicons-halflings-regular.woff
    │  │
    │  └─scripts　その他のスクリプト(java scriptをここに配置)
    │          bootstrap.bundle.js
    │          bootstrap.bundle.js.map
    │          bootstrap.bundle.min.js
    │          bootstrap.bundle.min.js.map
    │          bootstrap.js
    │          bootstrap.js.map
    │          bootstrap.min.js
    │          bootstrap.min.js.map
    │          jquery-1.10.2.intellisense.js
    │          jquery-1.10.2.js
    │          jquery-1.10.2.min.js
    │          jquery-1.10.2.min.map
    │          jquery.validate-vsdoc.js
    │          jquery.validate.js
    │          jquery.validate.min.js
    │          jquery.validate.unobtrusive.js
    │          jquery.validate.unobtrusive.min.js
    │          modernizr-2.6.2.js
    │          respond.js
    │          respond.min.js
    │          _references.js
    │
    ├─views
    │      about.tpl
    │      contact.tpl
    │      index.tpl
    │      layout.tpl