マッシュアッププログラミング演習演習の課題：マッシュアップとは？•...

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

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

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

演習の前に

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

-演習室のPCにログインするアカウントを持っていない人は、必要であればアカウントを配布するので前に取りにきて下さい

-サンプルプログラムのためのAPIキーを取得しましょう- https://webservice.recruit.co.jp/register/

- 上のURLからリクルートのサービスを使えるように登録- 発行に少し時間がかかる可能性があるので、早めに取得推奨

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

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

• マッシュアップ (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)プログラミング課題

• 目的

– 自分自身でプログラミングを行い，自分自身でAPIを叩いてみよう！



松竹梅


根

Pythonプログラミングの基本

（×マッシュアップ）

マッシュアップの基礎

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

ウェブアプリケーション

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

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

– プログラムの概要（特に何を入出力とするのか）

– 利用したWebサービスの情報

– プログラムのソース

– 実行例（３つ以上）

– 考察

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


レポートの内容

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

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

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

→ もしかして「竹」？）





– 考察




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

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

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





– 考察




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

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




– 作成したWebサービスのURL


– 考察




– 提出締切： 1月 15日（金）17:00

– 提出先： lec-webcomp[at]googlegroups.com

- (1)と(2)をメールに添付して提出

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


(1) 調査課題

松竹梅


根


環境設定

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

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

WebComp2020.zip

• 演習室のPCでなく、自前のPCやサーバーで作業し

てもらっても差し支えありません（が、故障等の責任は負いかねます）

• プログラミングができる人はドンドン先に進んでOKです（以降の説明を必ずしも聞く必要はありません）


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

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

• WindowsでUnix-likeな環境を使いたい場合，WSLが便利– Windows Subsystem for Linux


• コントロールパネルを開き，“プログラム → Windowsの機能の有効化または無効化” を選択

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

• PCを再起動する



• Microsoft Storeを開き，“Ubuntu”で検索

• “Ubuntu”のページを開き，”入手”ボタンを押す

• インストール後，再起動


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

• “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


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

• デフォルトだと日本語が文字化けしてしまうのでフォントを変える

• “フォント” から日本語が含まれてそうなフォントを選択

• バー上で右クリックし”プロパティ”を選択

• 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)


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" : "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("utf8")) # 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()

サンプルプログラム(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

"""


"""

import sys #





#Web

return """ No. {}

{}

{}

{}






)


#Web




)

def main():

# API Web



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



}))



#




return

if __name__ == "__main__":

main()

実際に動かしてみよう


• テキストエディタを起動し、サンプルプログラムを開く

– 取得した「リクルートの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

53

54

55

"""


"""

import sys #





#Web

return """ No. {}

{}

{}

{}






)


#Web




)

def main():

# API Web



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



}))



#




return

if __name__ == "__main__":

main()

# 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

"""


"""

import sys #





#Web

return """ No. {}

{}

{}

{}






)


#Web




)

def main():

# API Web



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



}))



#




return

if __name__ == "__main__":

main()

サンプルプログラムのAPIについて話すが、見るべき箇所はどのAPI

でもだいたい同じ

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

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


↑実態は「URL」にアクセスしているだけ（つまり、Webブラウザで正しく入力すれば、何かしらの出力が返って来る）

「APIエンドポイント + 検索クエリ」で実際にアクセスするURLを作成

APIエンドポイント

検索クエリ

→

*検索クエリは各パラメータが「必須かどうか」に着目する

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

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


（xmlの出力例）→階層構造として出力される

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

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





– 考察




根の出力（例）

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


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の出力をするように変更


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

"""


"""

import sys #





#Web

return """ No. {}

{}

{}

{}






)


#Web




)

def main():

# API Web



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



}))



#




return

if __name__ == "__main__":

main()

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

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

注意

• 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, …

– 登録からAPIキー発行まで時間のかかる場合も（〜二週間？）

– 課題を出す直前の登録だとキーの取得が提出までに間に合わない事も！？


今後の予定

• 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

↓☓ループの回数 ○配列実行結果


• def(引数) は関数定義


- ２つの引数を入力とする関数 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


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

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

print n, i


出力 0 a

1 b

2 c

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

– 多いエラー

1. 誤字・脱字

2. 全角スペース

3. インデント

4. 文字コード誤り

5. 環境設定ミス

✓ エラー出力を確認- エラーの場所が分かる

✓ 解決できなければ、遠慮なくTAに聞く-バグ取りに「１人で」長時間悩まない！

n にループ番号iにリストの要素

が格納される

90%


• Python2系について

– Python2系のサポート期限は2020年まで

– Python2系と3系では文法も違う


マッシュアップ プログラミング演習演習の課題：マッシュアップとは？•...

Documents

マッシュアッププログラミング演習演習の課題：マッシュアップとは？•...