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

1. みんなのPython勉強会 #22
Mar 8, 2017
阿久津 剛史
Start Python Club
1
私のPython学習奮闘記 #7
〜Webアプリケーション編〜

2. 自己紹介
• 阿久津 剛史
@akucchan_world
• 某メーカー勤務
– 非プログラマ
• Python経験もう少しで3年
– まだまだ初心者ですorz
2

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

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

5. Webアプリに関するStapy講演ログ
5 勉強会#9（2016年2月）
勉強会#7（2015年12月） 勉強会#7（2015年12月）
勉強会#14（2016年7月）

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

7. Webアプリケーションの例
7

8. Connpass
8
と で動いている！

9. クライアントとサーバーの関係
9
ブラウザ
HTML
クライアント
(Client)
モバイル
PC
サーバー
(Server)
プログラム
サーバー
URI
通信
HTTP
データ
CSS (Client-Server System)

10. Web技術の基礎固めにどうぞ
10
hPp://gihyo.jp/book/2016/978-4-7741-7892-9
山本陽平,
「Webを支える技術
- HTTP,URI,HTML,そしてREST」
技術評論社
（2010）

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

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

13. 13 hPps://boPlepy.org/

14. BoPleの4つの機能
14
ルーティング
URLと関数で呼び出される機能を動的に関連づ
けする
テンプレート生成
mako, jinja2など、テンプレートエンジンをサ
ポート
ユーティリティ
フォーム、ファイル管理、クッキー、ヘッダー、
HTTP関連メタデータなどへの容易なアクセス
サーバー
ビルトインの開発用サーバーを提供、WSGI仕
様のHTTPサーバーをサポート

15. Prac^ce over Theory
（理論より実践）
Webアプリを作ってみよう！
15

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

17. 第1章 よくわかるPythonの世界
（鈴木 たかのり）
第2章 これだけは知っておきたい
Python言語はじめの一歩
（清原 弘貴）
第3章 開発環境とチーム開発
（嶋田 健志）
第4章 PyData入門
（池内 孝啓）
第5章 入門Webアプリケーション開発
（関根 裕紀）
第6章 環境構築の自動化
（若山 史郎）
「Pythonエンジニア養成読本」
17 hPp://gihyo.jp/book/2015/978-4-7741-7320-7#toc

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

19. GitHubレポジトリ
19 hPps://github.com/checkpoint/pymook_web_applica^on

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

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

22. app.py
22

23. import部
23

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

25. GETメソッドとテンプレート生成
25
index.tplにbooks, requestを渡す

26. データの登録と更新
26

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

28. 画像地理情報マップ
28

29. GitHubレポジトリ
29 hPps://github.com/takeshi-a/image_map

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

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

32. ポイント1: Google Maps API
Google Maps APIを使って、写真を撮影した位置
をGoogle Map上に表示する。
32

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

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

35. ポイント2: EXIFメタデータの読み取り
35
撮影
EXIFメタデータ
Macの場合
「プレビュー」>「ツール」>
「インスペクタを表示」

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

37. app_tools.get_GPS
37

38. ポイント3: PythonとJavaScriptの壁
38
Google MAP APIのJavaScript APIを利用
app.py map.tpl
Error!
<script>タグ内には、
PythonコードからHTMLテ
ンプレートに変数を引き渡
すタグ（{{ }}）が通らない

39. Coursera: Using Python to Access Web Data
39
hPps://www.coursera.org/learn/python-network-data

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

41. テキストファイルで仲介する
41
@get('/images/map')
def map(db):
...
# テキストデータ生成
geodump(images)
app.py loca^ons.js
<script src="/sta^c/
loca^ons.js"></script>
<script>
func^on initMap() {
...
loca^ons
center
</script>
map.tpl

42. できた！
42

43. より深く理解するには
43
hPp://gihyo.jp/book/2016/978-4-7741-7892-9
露木誠, 小田切篤,
「15時間でわかる
Python集中講座」
技術評論社
（2016）

44. 今日の話が難しいと思った方は・・・
辻真吾
「Pythonスタートブック」
技術評論社
(2010)
44 hPp://gihyo.jp/book/2010/978-4-7741-4229-6

45. 参考文献
• 山本陽平, 「Webを支える技術 ─ HTTP，URI，HTML，
そしてREST」, 技術評論社（2010）
• 鈴木たかのり, ほか, 「Pythonエンジニア養成読本」,
技術評論社（2015）
• 露木誠, 小田切篤, 「15時間でわかるPython集中講
座」, 技術評論社（2016）
• 辻真吾, 「Pythonスタートブック」, 技術評論社（2010）
45

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