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

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

ウェブコンピューティング

2020

12

2

演習の前に

-

PC

-

API

- https://webservice.recruit.co.jp/register/

-

URL

-

演習の課題：マッシュアップとは？

• マッシュアップ (Web プログラミング )

複数の

Web

API

Web

Web

• Web サービスの API

マッシュアップサービスを企画・作成してもらいます

• 実演の課題

演習

実際に API を利用した

アプリケーションを作ってみよう！

–

1

15

17:00

–

lec-webcomp[at]googlegroups.com

- (1)

(2)

演習・レポート課題（計 2 題）

(1) 調査課題

(2)

松 竹 梅

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

根

(1) 調査課題

• 公開されている Web サービスについて調査し，そ れらをマッシュアップした新たな Web サービスの アイディアを提案せよ（少なくとも１つ）．

–

Web

✓

–

Web

–

–

などを存分にアピールしてください

API を利用した過去の例 (1)

• 提案サービス

–

3km

5000

• 利用した Web サービス

– Google Maps API (Google Geocoding API)

•

–

API

•

• 利点

–

API を利用した過去の例 (2)

「ホットペッパーグルメ」

「文字を読める

Slackbot

画像の中の文字を抽出し、

その文字を出力できる。 お店のジャンルや予算などの 様々な条件を指定して検索が できる。

(2) プログラミング課題

• 目的

–

API

• 言語： Python3 ( 推奨 )

–

–

Python3

(2)

松 竹 梅

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

根

→

(2) プログラミング課題

• 目的

–

API

(2)

松 竹 梅

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

根

Python

（×マッシュアップ）

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

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

ケーション

(2) プログラミング課題 ( 根 )

• サンプルプログラムを参考に，学校検索を行うプ ログラムを作成せよ．（検索クエリの種類は問わ ない）

–

–

Web

–

–

–

•

レポートの内容

(2) プログラミング課題 ( 梅 )

• 「職業検索（サンプル）と学校検索（根）」を マッシュアップせよ（組合せ方は問わない）

（なお、片方のみ（職業 or 学校）と他のAPIをマッシュアップしたものでも良い

→ もしかして「竹」？）

–

–

Web

–

–

–

•

レポートの内容

(2) プログラミング課題 ( 竹 )

• (1) 調査課題において提案した Web サービスを実際

に行うプログラムを作成せよ．（シェル上での処 理のみで構わない）

–

–

Web

–

–

–

•

レポートの内容

(2) プログラミング課題 ( 松 )

• (1) 調査課題において提案した Web サービスを実際 に行うプログラムを作成し， Web ブラウザ上で動 作を行えるようにせよ．

–

–

Web

–

–

Web

URL –

–

•

レポートの内容

–

1

15

17:00

–

lec-webcomp[at]googlegroups.com

- (1)

(2)

演習・レポート課題（計 2 題）

(1) 調査課題

松 竹 梅

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

根

(2)

環境設定

• 設定ファイル & サンプルプログラムをダウンロー ドしてください

– http://www.cl.ecei.tohoku.ac.jp/publications/2020/

WebComp2020.zip

• 演習室の PC でなく、自前の PC やサーバーで作業し てもらっても差し支えありません（が、故障等の 責任は負いかねます）

• プログラミングができる人はドンドン先に進んで

OK です

( 自前 PC 向け )Windows での環境構築

• Windows

Unix-like

WSL

– Windows Subsystem for Linux

•

Windowsの機能の有効化

• “Linux用Windowsサブシステム”にチェックを入れる

• PC

( 自前 PC 向け )Windows での環境構築

• Microsoft Store

“Ubuntu”

• “Ubuntu”

”

”

•

( 自前 PC 向け )Windows での環境構築

• “win

+ x” -> “i”

“win

+ r”

”powershell”

•

”bash”

– 初回はユーザ名とパスワードの設定を要求される

– 今後の実験はbashと入力した先の環境で行う（毎回やる必要がある）

•

(

)

– sudo apt update

– sudo apt install python3 python3-pip

– echo alias python=¥“python3¥” >> ~/.bashrc #コピペ厳禁(バグるので) – echo alias pip=¥“pip3¥“ >> ~/.bashrc #コピペ厳禁

– source ~/.bashrc

( 自前 PC 向け )Windows での環境構築

•

• “

”

•

”

”

• Bash起動後に日本語が確認できればOK

計算機管理室の環境

• 計算機室のデフォルト Python -> Python2.7

❌ : Python3

(→ 難しいし、面倒)

⭕️ : Python3

の

Python3

皆さんの計算機室アカウント

(

Python2.7

TA

Python3

setup.sh

python3

( 演習室 PC 向け ) 環境設定

✓

setup.sh

-

- sh ./setup.sh - source ~/.bashrc

- Pythonの環境設定とpip(Pythonのパッケージ管理ソフト)がセット

✓

1. “python –V” 実行時 ”Python 3.6.・・・” と出力されればok 2. 端末上で “pip list” でエラーを吐かなければok

✓

- setup.sh では、~/.bashrcと~/.config/pip/pip.conf を再設定しています - 即ち、自分自身で環境を弄っている人は要注意!!

- 誤って実行してしまったときは、バックアップを自動的に取るようになっ

上手く動かない場合は（早めに）TAを呼ぶ

( 演習室 PC 向け ) 環境設定（具体例 * ）

*__MACOSXはただのゴミ

*

解凍

ディレクトリ移動

セットアップ実行

( 演習室 PC 向け ) 環境設定

• 動かない人へ

– setup.shの対応シェルはbashのみです

• Bash 以外を使用している人へ

- 単にPATHを貼ってるだけなので、setup.shを参照して、自身が 使用しているシェルの設定ファイルを適当にいじってください

–

– “pip list”でwarningが出る！

• 実用上は問題ありません。

• 鬱陶しい場合は、~/.config/pip（ディレクトリ）を作成した上で、

WebComp2020 内の.pip.conf を pip.conf（ピリオドを取る）として コピーすると消せます。

上手く動かない場合は（早めに）TAを呼ぶ

pip に関して

• pip は python のパッケージ管理ソフトです。

• 使い方

–

• pip install

–-user

–

• pip search

–

• pip list

詳しくは

https://pip.pypa.io/en/stable/user_guide/

自分のディレクトリに インストールする

まずはサンプルプログラムを動かそう！

$ python search_job_json.py

2

2

--- No. 1 ---

【職業】航空機・船舶技術者・研究者

【説明】航空機や船舶の技術開発や研究を行う

【資格】技術士＜国＞

【学問】機械工学 航空・船舶・自動車工学 システム・制御工学 電子工 学 環境工学 応用物理学

--- No. 2 ---

【職業】電気通信技術者・研究者

【説明】現代社会では欠かせない通信やネットワークに関する様々な技 術や研究開発を行う。

【資格】工業英語能力検定試験 電気通信の「工事担任者」＜国＞ 電気 通信主任技術者＜国＞

【学問】通信工学 応用物理学

←

→

サンプルプログラム (search_job_json.py: 1/2)

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

27

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

"""

# python search_job_json.py     

"""

import sys  # 

import urllib.request #  URL import urllib.parse #  URL import json    #  JSON API

def create_work_info(index, work_node):

#Web

    return """­­­­­­ No. {} ­­­­­­

 {}

 {}

 {}

 {}""".format(index, #  No.

      work_node["name"], #        work_node["desc"], # 

      " ".join([l["name"] for l in work_node["license"]]), #        " ".join([s["name"] for s in work_node["subject"]])  #        )

def create_result_info(json_result):

#Web

    return "{} {} ".format(

      json_result["results"]["results_available"], #  ~

      json_result["results"]["results_returned"]   #  ~       )

def main():

    #  API Web

    url = "http://webservice.recruit.co.jp/shingaku/work/v1/?{}".format(

        urllib.parse.urlencode(

      {"key"     : "382312f6b1fe7a75",       #  API ﴾ db*3+9﴾

       "keyword" : " ".join(sys.argv[1:]),   # 

       "format"  : "json"      #  JSON       }))

    f_url = urllib.request.urlopen(url).read()

    json_result = json.loads(f_url.decode("utf­8"))   #  JSON

    # 

    print(create_result_info(json_result))

    for index, work in enumerate(json_result["results"]["work"]): #enumerate  ﴾   index         print(create_work_info(index+1,work))

    return

サンプルプログラム (search_job_json.py: 2/2)

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

"""

# python search_job_json.py     

"""

import sys  # 

import urllib.request #  URL import urllib.parse #  URL import json    #  JSON API

def create_work_info(index, work_node):

#Web

    return """­­­­­­ No. {} ­­­­­­

 {}

 {}

 {}

 {}""".format(index, #  No.

      work_node["name"], #        work_node["desc"], # 

      " ".join([l["name"] for l in work_node["license"]]), #        " ".join([s["name"] for s in work_node["subject"]])  #        )

def create_result_info(json_result):

#Web

    return "{} {} ".format(

      json_result["results"]["results_available"], #  ~

      json_result["results"]["results_returned"]   #  ~       )

def main():

    #  API Web

    url = "http://webservice.recruit.co.jp/shingaku/work/v1/?{}".format(

        urllib.parse.urlencode(

      {"key"     : "382312f6b1fe7a",       #  API ﴾ db*3+9﴾

       "keyword" : " ".join(sys.argv[1:]),   # 

       "format"  : "json"      #  JSON       }))

    f_url = urllib.request.urlopen(url).read()

    json_result = json.loads(f_url.decode("utf­8"))   #  JSON

    # 

    print(create_result_info(json_result))

    for index, work in enumerate(json_result["results"]["work"]): #enumerate  ﴾  index         print(create_work_info(index+1,work))

    return

if __name__ == "__main__":

    main()

実際に動かしてみよう

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

29

•

– 取得した「リクルートのAPIキーに変更する」

–

utf-8 形式で保存する事

• 実行方法

「

python search_job_json.py

2 …

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

"""

# python search_job_json.py     

"""

import sys  # 

import urllib.request #  URL import urllib.parse #  URL import json    #  JSON API

def create_work_info(index, work_node):

#Web

    return """­­­­­­ No. {} ­­­­­­

 {}

 {}

 {}

 {}""".format(index, #  No.

      work_node["name"], #        work_node["desc"], # 

      " ".join([l["name"] for l in work_node["license"]]), #        " ".join([s["name"] for s in work_node["subject"]])  #        )

def create_result_info(json_result):

#Web

    return "{} {} ".format(

      json_result["results"]["results_available"], #  ~

      json_result["results"]["results_returned"]   #  ~       )

def main():

    #  API Web

    url = "http://webservice.recruit.co.jp/shingaku/work/v1/?{}".format(

        urllib.parse.urlencode(

      {"key"     : "382312f6b1fe7a",       #  API ﴾ db*3+9﴾

       "keyword" : " ".join(sys.argv[1:]),   # 

       "format"  : "json"      #  JSON       }))

    f_url = urllib.request.urlopen(url).read()

    json_result = json.loads(f_url.decode("utf­8"))   #  JSON

    # 

    print(create_result_info(json_result))

    for index, work in enumerate(json_result["results"]["work"]): #enumerate  ﴾  index         print(create_work_info(index+1,work))

    return

# APIキー（自分で取得する）

実際に動かしてみよう

$ python search_job_json.py

2

2

--- No. 1 ---

【職業】航空機・船舶技術者・研究者

【説明】航空機や船舶の技術開発や研究を行う

【資格】技術士＜国＞

【学問】機械工学 航空・船舶・自動車工学 システム・制御工学 電子工 学 環境工学 応用物理学

--- No. 2 ---

【職業】電気通信技術者・研究者

【説明】現代社会では欠かせない通信やネットワークに関する様々な技 術や研究開発を行う。

【資格】工業英語能力検定試験 電気通信の「工事担任者」＜国＞ 電気 通信主任技術者＜国＞

【学問】通信工学 応用物理学

ターミナル上

サンプルプログラムについて

• 利用している Web サービスの仕様は？

どんな検索ができるのか？

どんな出力をするのか？

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

"""

# python search_job_json.py     

"""

import sys  # 

import urllib.request #  URL import urllib.parse #  URL import json    #  JSON API

def create_work_info(index, work_node):

#Web

    return """­­­­­­ No. {} ­­­­­­

 {}

 {}

 {}

 {}""".format(index, #  No.

      work_node["name"], #        work_node["desc"], # 

      " ".join([l["name"] for l in work_node["license"]]), #        " ".join([s["name"] for s in work_node["subject"]])  #        )

def create_result_info(json_result):

#Web

    return "{} {} ".format(

      json_result["results"]["results_available"], #  ~

      json_result["results"]["results_returned"]   #  ~       )

def main():

    #  API Web

    url = "http://webservice.recruit.co.jp/shingaku/work/v1/?{}".format(

        urllib.parse.urlencode(

      {"key"     : "382312f6b1fe7a",       #  API ﴾ db*3+9﴾

       "keyword" : " ".join(sys.argv[1:]),   # 

       "format"  : "json"      #  JSON       }))

    f_url = urllib.request.urlopen(url).read()

    json_result = json.loads(f_url.decode("utf­8"))   #  JSON

    # 

    print(create_result_info(json_result))

    for index, work in enumerate(json_result["results"]["work"]): #enumerate  ﴾  index         print(create_work_info(index+1,work))

    return

if __name__ == "__main__":

    main()

サンプルプログラムの

API

API

Web サービスの仕様（入力）

http://webservice.recruit.co.jp/shingaku/reference.html

↑

URL

（つまり、Webブラウザで正しく入力 すれば、何かしらの出力が返って来る）

「

API

+

URL

APIエンドポイント

検索クエリ

→

*検索クエリは各パラメータが

「必須かどうか」に着目する

Web サービスの仕様（出力）

（

xml

→

(2) プログラミング課題 ( 根 )

• サンプルプログラムを参考に，学校検索を行うプ ログラムを作成せよ．（検索クエリの種類は問わ ない）

–

–

Web

–

–

–

•

レポートの内容

根の出力（例）

• 住所を入力するとその住所を含む学校を出力する プログラム

python search_school.py 仙台市青葉区荒巻

3件の学校が見つかりました。最初の3件を表示しています。

--- No. 1 ---

【 学 校 】宮城教育大学

【キャンパス】

【 学 部 】教育学部 --- No. 2 ---

【 学 校 】東北大学

【キャンパス】片平キャンパス 雨宮キャンパス 星陵キャンパス 川内キャンパス 青葉山キャンパス

【 学 部 】文学部 教育学部 法学部 経済学部 理学部 医学部 歯学部 薬学部 工学部 農学部 --- No. 3 ---

【 学 校 】赤門鍼灸柔整専門学校

【キャンパス】

【 学 部 】柔道整復科 柔道整復科第二部 鍼灸科第二部 鍼灸指圧科 鍼灸科第一部

課題（根）に関して

✓ リクルートの学校検索 API を使うのが便利

– http://webservice.recruit.co.jp/shingaku/school/v1

✓ 改造方法

1.

2.

(create_work_info)

API

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

36

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

"""

# python search_job_json.py     

"""

import sys  # 

import urllib.request #  URL import urllib.parse #  URL import json    #  JSON API

def create_work_info(index, work_node):

#Web

    return """­­­­­­ No. {} ­­­­­­

 {}

 {}

 {}

 {}""".format(index, #  No.

      work_node["name"], #        work_node["desc"], # 

      " ".join([l["name"] for l in work_node["license"]]), #        " ".join([s["name"] for s in work_node["subject"]])  #        )

def create_result_info(json_result):

#Web

    return "{} {} ".format(

      json_result["results"]["results_available"], #  ~       json_result["results"]["results_returned"]   #  ~       )

def main():

    #  API Web

    url = "http://webservice.recruit.co.jp/shingaku/work/v1/?{}".format(

        urllib.parse.urlencode(

      {"key"     : "382312f6b1fe7a",       #  API ﴾ db*3+9﴾

       "keyword" : " ".join(sys.argv[1:]),   # 

       "format"  : "json"      #  JSON       }))

    f_url = urllib.request.urlopen(url).read()

    json_result = json.loads(f_url.decode("utf­8"))   #  JSON

    # 

    print(create_result_info(json_result))

    for index, work in enumerate(json_result["results"]["work"]): #enumerate  ﴾  index         print(create_work_info(index+1,work))

    return

↓ まずこの部分を書き換える

注意

• API にはアクセス制限がある場合が多い

–

– MediaWiki API

• There is no hard and fast limit on read requests, but we ask that you be

considerate and try not to take a site down. Most sysadmins reserve the right to unceremoniously block you if you do endanger the stability of their site.

– Google Custom Search API

• For CSE users, the API provides 100 search queries per day for free.

• 多くの API は使用するために登録が必要

–

twitter, …

–

–

今後の予定

• 12/2( 今回 )

–

• 12/16( 水 ) # ２週間後 # （３分程度）

–

(1)

(2)

• 1/13( 水 ) # ４週間後 # （３分程度）

–

(1)

(2)

• 12/9( 水 ) ・ 12/23( 水 ) ・ 1/6( 水 ) 演習

• 1/15( 金 ) 17:00

–

演習

• わからないところがあれば TA にどんどん聞いてく ださい！

–

API

……

–

–

Python

• TA と連絡先

Cc

•

asazuma.yuya.r7 [at] dc.tohoku.ac.jp

• Li Yunmeng

li.yunmeng.r1 [at] dc.tohoku.ac.jp

補足： Python に関して (1/4)

• for 文や if 文の開始時に「 { (e.g. C 言語 ) 」の代わ りに「 : 」を置き，インデントで範囲を指定

• for 文は配列（リスト）の要素を順に取り出す

for i in [-1,0,1,2]:

if I > 0:

c += 1 print(i)

print(”Number of N is {}”).format(c)

インデント→ 出力

-1 0 1 2

Number of N is 2

↓ ☓ループの回数 ○配列

実行結果

補足： Python に関して (2/4)

• def( 引数 ) は関数定義

def create_work_info(index, work_node):

-

create_work_info

• json 形式はハッシュ ( 辞書 ) 形式として格納される

–

key

value

D = { ”code”: ”a12”, ”urls”:{”mobile”: ”http…”, ”pc”:” …}

print(D[“code”]) -> “a12”

–

API

create_work_info

”license”

”subject”

ハッシュのvalueにハッシュを記述可能

→ 階層構造を表現 key value

補足： Python に関して (3/4)

• enumerate は現在のループ番号を取得する

for n, i in enumerate([”a”,”b”,”c”]):

print n, i

_{0 a}

1 b 2 c

• トラブルシューティング

–

1.

2.

3.

4.

✓

- エラーの場所が分かる

✓

TA

-

n

i

90%

補足： Python に関して (4/4)

• Python2 系について

– Python2

2020

– Python2

3