python学習奮闘記#07 webapp
Post on 19-Mar-2017
461 Views
Preview:
TRANSCRIPT
みんなの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
top related