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

# pythonのコーディングに何を使っていますか。Pycarmもいいけど私は、Visual Studio 2017/2019を使っています。
## 多彩なツールを自由に組み込むことができます。今回は、素早くRasipberry pi 用にweb serverを立ち上げるためにBoostrap4用bottle Templateをご紹介します。Visual studio に添付されているbottleWebテンプレートをベースに作成しました。
### Boostrap4にこだわる理由は、スマートフォン用のUIを簡単に作ることができるからです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/dbe3c7b2-ac59-7cc4-5986-ad378e8df85a.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/7d191774-f8eb-42fe-b504-88ab0ad9a399.png)

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)
[https://github.com/yutakahirata/Bottle4Template/tree/master/bottle4/bottle4](https://github.com/yutakahirata/Bottle4Template/tree/master/bottle4/bottle4)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/2c5f134e-08a5-b31d-079f-a6a0247a03dc.png)

```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
```
##<<使い方>>
gitからチェックアウトします。
https://github.com/yutakahirata/Bottle4Template.git

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/fd621da7-f064-ec1b-9128-08c95fb2fb30.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/423377ee-37e8-b3d5-00a8-9f253b8993c4.png)

bottle4を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/d99d7844-5a1d-173a-24d2-a3bd8cf7ccbe.png)

ソリューションを開きます。bottle4.sln

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/8d9c0f04-df9e-5fbe-d7d5-a036489d4df5.png)

プロジェクト->テンプレートのエクスポートを行います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/f18cc8b8-3a06-b520-b1b7-a500acec1a12.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/ef7fe4d6-8864-edf0-c414-db0d0a63955f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/f12dc727-6d52-7231-4bd6-40d6f11ab5c7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/e05cec6c-79e5-bc1d-74ca-8d7b5211c3c0.png)

新しいプロジェクトを作成します。検索エリアにbottle4と入力するとテンプレートが現れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274715/fbf0ecdd-d000-fddb-df86-3ea834b73dca.png)

## Visual studio 2019 communityを用いサクサクプログラムが書けます。

#「いいね!」してね!