Python学習奮闘記#07 webapp

みんなのPython勉強会#22

Mar8,2017阿久津　剛史

StartPythonClub1

私のPython学習奮闘記#7　〜Webアプリケーション編〜

自己紹介

•  阿久津　剛史@akucchan_world

•  某メーカー勤務– 非プログラマ

•  Python経験もう少しで3年– まだまだ初心者ですorz

2

Agenda

•  Webアプリケーションの基本•  例題1.「書籍管理アプリ」•  例題2.「画像地理情報マップ」

3

Agenda

•  Webアプリケーションの基本•  例題1.「書籍管理アプリ」•  例題2.「画像地理情報マップ」

4

Webアプリに関するStapy講演ログ

5勉強会#9（2016年2月）

勉強会#7（2015年12月） 勉強会#7（2015年12月）

勉強会#14（2016年7月）

Webアプリケーション

Webアプリケーションとは、Webの技術を利用して構築されたアプリケーションソフトのこと。利用者は操作するWebブラウザや専用のクライアントソフトなどを用いてWebサーバにアクセスし、必要なデータの処理や転送を指示する。技術的には、通信プロトコルにHTTPを、データの表現にHTMLやXMLを用いるアプリケーションソフトの総称。

6

IT用語 e-Words,「Webアプリケーション」hPp://e-words.jp/

Webアプリケーションの例

7

Connpass

8

と　　　　　　　　　　で動いている！

クライアントとサーバーの関係

9

ブラウザHTML

クライアント(Client)

モバイル

PC

サーバー(Server)

プログラム

サーバーURI

通信HTTP

データ

CSS(Client-ServerSystem)

Web技術の基礎固めにどうぞ

10hPp://gihyo.jp/book/2016/978-4-7741-7892-9

山本陽平,「Webを支える技術-HTTP,URI,HTML,そしてREST」技術評論社（2010）

Webアプリケーションの機能は多様

•  ルーティング•  HTMLテンプレート生成•  HTTPユーティリティ•  サーバー•  データベースアクセス•  フォーム処理•  動画再生•  セキュリティ•  セッション管理　　など

11

PythonのWebアプリケーションフレームワーク

12

13hPps://boPlepy.org/

BoPleの4つの機能

14

ルーティングURLと関数で呼び出される機能を動的に関連づけする

テンプレート生成mako,jinja2など、テンプレートエンジンをサポート

ユーティリティフォーム、ファイル管理、クッキー、ヘッダー、HTTP関連メタデータなどへの容易なアクセス

サーバービルトインの開発用サーバーを提供、WSGI仕様のHTTPサーバーをサポート

Prac^ceoverTheory（理論より実践）

Webアプリを作ってみよう！

15

Agenda

•  Webアプリケーションの基本•  例題1.「書籍管理アプリ」•  例題2.「画像地理情報マップ」

16

第1章　よくわかるPythonの世界　　　　（鈴木 たかのり）

第2章　これだけは知っておきたい　　　　　Python言語はじめの一歩 　　　　（清原 弘貴）

第3章　開発環境とチーム開発　　　　（嶋田 健志）

第4章　PyData入門　　　　（池内 孝啓）

第5章　入門Webアプリケーション開発　　　　（関根 裕紀）

第6章　環境構築の自動化　　　　（若山 史郎）

「Pythonエンジニア養成読本」

17hPp://gihyo.jp/book/2015/978-4-7741-7320-7#toc

書籍管理アプリケーション

18

GitHubレポジトリ

19hPps://github.com/checkpoint/pymook_web_applica^on

まずは動かしてみましょう。

20

フォルダ構成

book アプリケーションフォルダ├──app.py メインプログラム└──views テンプレートフォルダ├──add.tpl データ登録├──base.tpl テンプレート中心部├──edit.tpl データ編集├──footer.tpl フッター├──header.tpl ヘッダー├──index.tpl 一覧表示└──requirements.txt バージョン情報

21

app.py

22

import部

23

run()関数

24

•  localhost(hPp://127.0.0.1)•  port=8080番•  デバッグモード　=True•  reloader=True

GETメソッドとテンプレート生成

25

index.tplにbooks,requestを渡す

データの登録と更新

26

Agenda

•  Webアプリケーションの基本•  例題1.「書籍管理アプリ」•  例題2.「画像地理情報マップ」

27

画像地理情報マップ

28

GitHubレポジトリ

29hPps://github.com/takeshi-a/image_map

こちらも動かしてみましょう。

30

フォルダ構成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

ポイント1:GoogleMapsAPI

GoogleMapsAPIを使って、写真を撮影した位置をGoogleMap上に表示する。

32

Ex.SimpleMap

33hPps://developers.google.com/maps/documenta^on/javascript/examples/map-simple

34

•  <script>~</script>:JavaScript•  緯度 lat(float):-90<=lat<=90•  経度 lng(float):-180<=lng<=180•  APIKEYは独自に取得

ポイント2:EXIFメタデータの読み取り

35

撮影

EXIFメタデータ

Macの場合「プレビュー」>「ツール」>「インスペクタを表示」

app_tools.get_GPS

•  file:（Input)GPS情報を取り出すファイルのパス•  lat:(Output)画像撮影位置の緯度•  lon:(Output)画像撮影位置の経度

36

app_tools.get_GPS

37

ポイント3:PythonとJavaScriptの壁

38

GoogleMAPAPIのJavaScriptAPIを利用

app.py map.tpl

Error!<script>タグ内には、PythonコードからHTMLテンプレートに変数を引き渡すタグ（{{}}）が通らない

Coursera:UsingPythontoAccessWebData

39hPps://www.coursera.org/learn/python-network-data

DBから抽出したデータをJSファイルへ

40

テキストファイルで仲介する

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

できた！

42

より深く理解するには

43hPp://gihyo.jp/book/2016/978-4-7741-7892-9

露木誠,小田切篤,「15時間でわかる　　　　Python集中講座」技術評論社（2016）

今日の話が難しいと思った方は・・・

辻真吾「Pythonスタートブック」技術評論社(2010)

44hPp://gihyo.jp/book/2010/978-4-7741-4229-6

参考文献

•  山本陽平,「Webを支える技術 ─HTTP，URI，HTML，そしてREST」,技術評論社（2010）

•  鈴木たかのり,ほか,「Pythonエンジニア養成読本」,技術評論社（2015）

•  露木誠,小田切篤,「15時間でわかるPython集中講座」,技術評論社（2016）

•  辻真吾,「Pythonスタートブック」,技術評論社（2010）

45

ご清聴ありがとうございました

46