マッシュアップ(プログラミング演習)

マッシュアップ

(

)

ウェブコンピューティング 2020年12月23日

今後の予定

• 1/13(

)

–

(1)

(2)

• 1/6(

)

• 1/15(

) 17:00

–

ウェブコンピューティング-プログラミング演習- 2020/12/23

2

【重要】最終発表会のスライド（pdf or pptx）を 次々回1/13の講義開始までに用意して

USBメモリなどで持参してください

詳しくは3~６頁を参照してください（乾）

重要：

1/13

調査課題とプログラミング課題の進捗状況の簡単な発表会

• 発表はひとり1〜2分（時間厳守）

• スライド（pdf or pptx）を（遅くとも）次々回1/13の講義開始まで に用意してください

1. 調査課題

✓ 新しいWebサービスのアイデアの紹介

– 概要、貢献（良さ・面白さ）

– どんなWebサービスをどのように組み合わせるか

2. プログラミング課題

✓ プログラム開発の状況

✓ 動作画面等のスクリーンショット（できれば）

– 入力と出力がわかるように

– 動いているところまでのもので構いません

✓ デモのURLなど

• 合わせて1〜3枚でOK

主にこっちの話

（になると思われる）

中間発表会との違い（スライドの内容）

•

–

–

–

ウェブコンピューティング-プログラミング演習- 2020/12/23

4

プログラミング状況 ターミナル上の動作 ブラウザ上での動作 プログラミングの進捗に応じて適当なスクショをスライドに入れる

スライドの提出方法

•

→ 当日ギリギリまで粘らなくて良い

•

(

)_(

)

•

スライドの提出時の注意点

1. スライドには表紙を用意し、表紙内に名前と学籍番号を記載すること 2. ファイル名は「学籍番号(大文字)_(以降任意).pdf or .pptx」

3. USBメモリはLinuxでは認識しない（かもしれない）

– 念のためWindows10を使ってください

4. トラブルが発生したときのために、すぐコピーし直せる用にしておく

– 提出済みでもデータUSBメモリ等で持参してください – 他人が自由に上書きできる（→勝手に消せる）ため

5. 講義最終日のあと、外部から見えない場所へコピーしたのち削除しま す

6. 来年度のウェブコンピューティングの講義でスライドの一部を引用さ せていただく可能性があります

– 名前等の個人情報は出しません

– 「どうしても嫌だ」と言う方はご連絡ください

7. 前述のスライドの方法でどうしても提出できない・したくない場合は、

asazuma.yuya.r7[at]dc.tohoku.ac.jp へスライドを添付して送付する

ウェブコンピューティング-プログラミング演習- 2020/12/23

6

本日の話

•

–

API

– Web

(2)

松 竹 梅

基本 難しい そこそこ 易しい

根

Pythonプログラミ ングの基本

（×マッシュアップ）

マッシュアップ の基礎 ウェブアプリ

ケーション の基盤 ウェブアプリ

ケーション

↑サンプル

主に竹・松の課題向け

使いたい

API

ウェブコンピューティング-プログラミング演習- 2020/12/23

8

世の中にあるAPIの種類・探し方は分かったけど、

どうやってWebサービスを作ろう？

世の中にあるAPIでは自分のアイディアを実現で きそうにない

設計・開発の基本

スクレイピングしてみよう！

✓

使いたいサービスの

API

• API

–

スクレイピング

html

<table>

レビュー リスト

実装例：BeautifulSoupでスクレイピング

ウェブコンピューティング-プログラミング演習- 2020/12/23

10

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

"""

(https://www.jtnews.jp/) run: python get_movie_review.py > 

*** ***

"""

import sys

import urllib.request import time

import json

from bs4 import BeautifulSoup  # html

def get_movie_review():

    # baseURL

    URL = "http://www.jtnews.jp/cgi­bin/review.cgi"

    for NO in range(1, 1000):

        # baseURL html

        html = urllib.request.urlopen(URL + "?TITLE_NO={}".format(NO)).read()         # html parse

        soup = BeautifulSoup(html, "html.parser") #  lxml html.parser

        # 

        title = soup.findAll("title")[0].get_text().replace(" ­  ", "")         # 

        if len(title) > 0:

      t = title         else:

      time.sleep(2) # dos       continue

        # 

        revs = []

        count = 0

        for rev in soup.findAll("div"):

      if "REV_" in str(rev):

      revs.append(rev.get_text())       count += 1

      if count > 9: # 10       break

        # json

        d = {"id": NO, "title": t, "reviews": revs}

        print(json.dumps(d, ensure_ascii=False))

        #  for l in sys.stdin; + json.loads﴾l﴾ 

        time.sleep(2) # dos

def main():

    get_movie_review()

if __name__ == "__main__":

    main()

web

(.html)

取得した

html

スクレイピングの際の注意

• DoS

–

–

IP

（周りにも迷惑がかかる可能性がある）ので注意

• サンプルは `time.sleep(5)` で対応 → 5秒待つ

• JavaScript

–

URL

–

• selenium.webdriver.PhantomJS() など

–

1

15

17:00 –

演習・レポート課題（計

2

ウェブコンピューティング-プログラミング演習- 2020/12/23

12

(1)

(2)

松 竹 梅

基本 難しい そこそこ 易しい

根

難易度

＞ ＞

＞

復習

(2)

(

)

• Web

– (1)

– Web

• コンソール上での処理のみで構わない

–

–

Web

–

–

–

• 工夫した点，苦労した点，問題，感想等

レポートの内容

復習

(2)

(

)

• Web

– (1)

– Web

–

–

Web

–

–

Web

URL –

–

• 工夫した点，苦労した点，問題，感想等

ウェブコンピューティング-プログラミング演習- 2020/12/23

14

レポートの内容

復習

松・竹の間には・・・

松 まず、ローカルホスト（自

分の

PC

PC

サーバー上へアプリを アップロードし、アプリを

URL

Step1

Step2

•

竹

→

サーバーサイドの基本的な構成

ウェブコンピューティング-プログラミング演習- 2020/12/23

16

ユーザ

静的HTML

APサーバ WEBアプリケーション DB Request

Response

WEBサーバ

動的生成HTML

•

4

サーバーサイド

サーバーサイドの基本的な構成

ユーザ

静的HTML

APサーバ WEBアプリケーション DB Request

Response

WEBサーバ

動的生成HTML

• WEBサーバ : HTTPリクエストを処理しレスポンスを返す

サーバーサイド

• ソフトウェアの例: Apache2, Nginx

サーバーサイドの基本的な構成

ウェブコンピューティング-プログラミング演習- 2020/12/23

18

ユーザ

静的HTML

APサーバ WEBアプリケーション DB Request

Response

WEBサーバ

動的生成HTML

• WEBサーバ :

サーバーサイド

クエリがないリクエストなら静的なHTMLを返す

（リバースプロキシを使う）

• 高速化・負荷の軽減のため（WEBサーバの処理は早い）

サーバーサイドの基本的な構成

ユーザ

静的HTML

APサーバ WEBアプリケーション DB

Request Response

WEBサーバ

動的生成HTML

• APサーバ : WEBサーバとフレームワーク間の通信を担当する

サーバーサイド

• ソフトウェアの例: Gunicorn, uWSGI

サーバーサイドの基本的な構成

ウェブコンピューティング-プログラミング演習- 2020/12/23

20

ユーザ

静的HTML

APサーバ WEBアプリケーション DB Request

Response

WEBサーバ

動的生成HTML

• WEBアプリケーション :

サーバーサイド

• ソフトウェアの例: PHP, Ruby on Rails, Django, Flask,…

リクエストから動的にHTMLを生成する 様々な処理（今回の実験ではAPIの実行）

サーバーサイドの基本的な構成

ユーザ

静的HTML

APサーバ WEBアプリケーション DB Request

Response

WEBサーバ

動的生成HTML

• データベース : データを蓄積する・参照できるようにする

サーバーサイド

• ソフトウェアの例: MySQL, PostageSQL, mongoDB, Redis, …

今回の実験では

…

•

API

• API

HTML

ウェブコンピューティング-プログラミング演習- 2020/12/23

22

WEB

• WEB

WEB

•

•

•

Web

✓ Step1.

– CGI

– Flask

Jinja2

html template

– Pyramid

– Django

✓ Step2. Web

–

–

– AWS

– Microsoft azure – Heroku

サンプルは、

Flask + Heroku

Step1.

Flask

ウェブコンピューティング-プログラミング演習- 2020/12/23

24

1 2 3 4 5 6 7 8 9 10 11 12

import os

from flask import Flask app = Flask(__name__)

@app.route("/") def index():

    return "Hello World!"

if __name__ == '__main__':

    app.run()

app.py

ターミナル上で実行

↑URL

IP

ブラウザに

URL

結果が出力された！

Web

✓ Step1.

– CGI – Flask – Pyramid – Django

✓ Step2. Web

–

–

– AWS

– Microsoft azure – Heroku

サンプルは、

Flask + Heroku

Webサーバー環境を弄れないので python だと厳しい

（Webサーバーを含めた）サーバーの セットアップが必要→難しい＆面倒

Gitで管理でき、かつ無料で使える（制限はある）

Heroku

• https://www.heroku.com/home

ウェブコンピューティング-プログラミング演習- 2020/12/23

26

※

↓python

Heroku

1. Heroku

2. Heroku-toolkit

→

OS

3.

Flask

pip

gunicorn

4.

Git

「

init -> add -> commit

5. Heroku toolkit

I. heroku login II. heroku create

III. git push heroku master

Heroku

•

– Procfile

P

• 実行するアプリケーションやアプリケーションの実行方 法を記述するファイル

– requirements.txt

• アプリケーションが依存するライブラリ

• pip freeze > requirements.txt とかで作る

– runtime.txt

• 実行するpythonのバージョンを指定

ウェブコンピューティング-プログラミング演習- 2020/12/23

28

詳しくはホームページや解説記事参照

実例：

app.py

Heroku

ローカルホスト版

今後の予定

• 1/13(

)

–

(1)

(2)

• 1/6(

)

• 1/15(

) 17:00

–

ウェブコンピューティング-プログラミング演習- 2020/12/23

30

【重要】最終発表会のスライド（pdf or pptx）を 次々回1/13の講義開始までに用意して

USBメモリなどで持参してください

詳しくは3~６頁を参照してください（乾）

演習

•

TA

–

API

……

–

–

Python

• TA

• 浅妻 佑弥：asazuma.yuya.r7 [at] dc.tohoku.ac.jp

• Li Yunmeng：li.yunmeng.r1 [at] dc.tohoku.ac.jp