python学習奮闘記#07 webapp
TRANSCRIPT
![Page 1: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/1.jpg)
みんなのPython勉強会#22
Mar8,2017阿久津 剛史
StartPythonClub1
私のPython学習奮闘記#7 〜Webアプリケーション編〜
![Page 2: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/2.jpg)
自己紹介
• 阿久津 剛史@akucchan_world
• 某メーカー勤務– 非プログラマ
• Python経験もう少しで3年– まだまだ初心者ですorz
2
![Page 3: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/3.jpg)
Agenda
• Webアプリケーションの基本• 例題1.「書籍管理アプリ」• 例題2.「画像地理情報マップ」
3
![Page 4: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/4.jpg)
Agenda
• Webアプリケーションの基本• 例題1.「書籍管理アプリ」• 例題2.「画像地理情報マップ」
4
![Page 5: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/5.jpg)
Webアプリに関するStapy講演ログ
5勉強会#9(2016年2月)
勉強会#7(2015年12月) 勉強会#7(2015年12月)
勉強会#14(2016年7月)
![Page 6: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/6.jpg)
Webアプリケーション
Webアプリケーションとは、Webの技術を利用して構築されたアプリケーションソフトのこと。利用者は操作するWebブラウザや専用のクライアントソフトなどを用いてWebサーバにアクセスし、必要なデータの処理や転送を指示する。技術的には、通信プロトコルにHTTPを、データの表現にHTMLやXMLを用いるアプリケーションソフトの総称。
6
IT用語 e-Words,「Webアプリケーション」hPp://e-words.jp/
![Page 7: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/7.jpg)
Webアプリケーションの例
7
![Page 8: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/8.jpg)
Connpass
8
と で動いている!
![Page 9: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/9.jpg)
クライアントとサーバーの関係
9
ブラウザHTML
クライアント(Client)
モバイル
PC
サーバー(Server)
プログラム
サーバーURI
通信HTTP
データ
CSS(Client-ServerSystem)
![Page 10: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/10.jpg)
Web技術の基礎固めにどうぞ
10hPp://gihyo.jp/book/2016/978-4-7741-7892-9
山本陽平,「Webを支える技術-HTTP,URI,HTML,そしてREST」技術評論社(2010)
![Page 11: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/11.jpg)
Webアプリケーションの機能は多様
• ルーティング• HTMLテンプレート生成• HTTPユーティリティ• サーバー• データベースアクセス• フォーム処理• 動画再生• セキュリティ• セッション管理 など
11
![Page 12: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/12.jpg)
PythonのWebアプリケーションフレームワーク
12
![Page 13: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/13.jpg)
13hPps://boPlepy.org/
![Page 14: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/14.jpg)
BoPleの4つの機能
14
ルーティングURLと関数で呼び出される機能を動的に関連づけする
テンプレート生成mako,jinja2など、テンプレートエンジンをサポート
ユーティリティフォーム、ファイル管理、クッキー、ヘッダー、HTTP関連メタデータなどへの容易なアクセス
サーバービルトインの開発用サーバーを提供、WSGI仕様のHTTPサーバーをサポート
![Page 15: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/15.jpg)
Prac^ceoverTheory(理論より実践)
Webアプリを作ってみよう!
15
![Page 16: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/16.jpg)
Agenda
• Webアプリケーションの基本• 例題1.「書籍管理アプリ」• 例題2.「画像地理情報マップ」
16
![Page 17: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/17.jpg)
第1章 よくわかるPythonの世界 (鈴木 たかのり)
第2章 これだけは知っておきたい Python言語はじめの一歩 (清原 弘貴)
第3章 開発環境とチーム開発 (嶋田 健志)
第4章 PyData入門 (池内 孝啓)
第5章 入門Webアプリケーション開発 (関根 裕紀)
第6章 環境構築の自動化 (若山 史郎)
「Pythonエンジニア養成読本」
17hPp://gihyo.jp/book/2015/978-4-7741-7320-7#toc
![Page 18: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/18.jpg)
書籍管理アプリケーション
18
![Page 19: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/19.jpg)
GitHubレポジトリ
19hPps://github.com/checkpoint/pymook_web_applica^on
![Page 20: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/20.jpg)
まずは動かしてみましょう。
20
![Page 21: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/21.jpg)
フォルダ構成
book アプリケーションフォルダ├──app.py メインプログラム└──views テンプレートフォルダ├──add.tpl データ登録├──base.tpl テンプレート中心部├──edit.tpl データ編集├──footer.tpl フッター├──header.tpl ヘッダー├──index.tpl 一覧表示└──requirements.txt バージョン情報
21
![Page 22: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/22.jpg)
app.py
22
![Page 23: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/23.jpg)
import部
23
![Page 24: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/24.jpg)
run()関数
24
• localhost(hPp://127.0.0.1)• port=8080番• デバッグモード =True• reloader=True
![Page 25: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/25.jpg)
GETメソッドとテンプレート生成
25
index.tplにbooks,requestを渡す
![Page 26: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/26.jpg)
データの登録と更新
26
![Page 27: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/27.jpg)
Agenda
• Webアプリケーションの基本• 例題1.「書籍管理アプリ」• 例題2.「画像地理情報マップ」
27
![Page 28: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/28.jpg)
画像地理情報マップ
28
![Page 29: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/29.jpg)
GitHubレポジトリ
29hPps://github.com/takeshi-a/image_map
![Page 30: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/30.jpg)
こちらも動かしてみましょう。
30
![Page 31: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/31.jpg)
フォルダ構成image_app├──app.py メインプログラム├──app_tools.py importツール├──images.sqlite SQLiteファイル├──readme.md readme├──sta^c 静的ファイルフォルダ│├──image 画像フォルダ││├──*.JPG│└──loca^ons.js 位置情報テキストデータ└──views テンプレートフォルダ├──add.tpl├──base.tpl├──demos.css├──edit.tpl├──footer.tpl├──header.tpl├──index.tpl└──map.tpl
31
![Page 32: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/32.jpg)
ポイント1:GoogleMapsAPI
GoogleMapsAPIを使って、写真を撮影した位置をGoogleMap上に表示する。
32
![Page 33: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/33.jpg)
Ex.SimpleMap
33hPps://developers.google.com/maps/documenta^on/javascript/examples/map-simple
![Page 34: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/34.jpg)
34
• <script>~</script>:JavaScript• 緯度 lat(float):-90<=lat<=90• 経度 lng(float):-180<=lng<=180• APIKEYは独自に取得
![Page 35: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/35.jpg)
ポイント2:EXIFメタデータの読み取り
35
撮影
EXIFメタデータ
Macの場合「プレビュー」>「ツール」>「インスペクタを表示」
![Page 36: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/36.jpg)
app_tools.get_GPS
• file:(Input)GPS情報を取り出すファイルのパス• lat:(Output)画像撮影位置の緯度• lon:(Output)画像撮影位置の経度
36
![Page 37: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/37.jpg)
app_tools.get_GPS
37
![Page 38: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/38.jpg)
ポイント3:PythonとJavaScriptの壁
38
GoogleMAPAPIのJavaScriptAPIを利用
app.py map.tpl
Error!<script>タグ内には、PythonコードからHTMLテンプレートに変数を引き渡すタグ({{}})が通らない
![Page 39: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/39.jpg)
Coursera:UsingPythontoAccessWebData
39hPps://www.coursera.org/learn/python-network-data
![Page 40: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/40.jpg)
DBから抽出したデータをJSファイルへ
40
![Page 41: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/41.jpg)
テキストファイルで仲介する
41
@get('/images/map')defmap(db):
...#テキストデータ生成geodump(images)
app.py loca^ons.js<scriptsrc="/sta^c/loca^ons.js"></script><script>func^oninitMap(){...loca^onscenter</script>
map.tpl
![Page 42: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/42.jpg)
できた!
42
![Page 43: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/43.jpg)
より深く理解するには
43hPp://gihyo.jp/book/2016/978-4-7741-7892-9
露木誠,小田切篤,「15時間でわかる Python集中講座」技術評論社(2016)
![Page 44: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/44.jpg)
今日の話が難しいと思った方は・・・
辻真吾「Pythonスタートブック」技術評論社(2010)
44hPp://gihyo.jp/book/2010/978-4-7741-4229-6
![Page 45: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/45.jpg)
参考文献
• 山本陽平,「Webを支える技術 ─HTTP,URI,HTML,そしてREST」,技術評論社(2010)
• 鈴木たかのり,ほか,「Pythonエンジニア養成読本」,技術評論社(2015)
• 露木誠,小田切篤,「15時間でわかるPython集中講座」,技術評論社(2016)
• 辻真吾,「Pythonスタートブック」,技術評論社(2010)
45
![Page 46: Python学習奮闘記#07 webapp](https://reader030.vdocuments.site/reader030/viewer/2022020203/58ce67931a28ab2f268b6e41/html5/thumbnails/46.jpg)
ご清聴ありがとうございました
46