(Pythonで作って学ぶ) Youtube の動画リストを作るアプリの開発  第4回

作って学ぶ Python
Youtube の動画リストを作るアプリの開発 
第4回 (全2回予定)
金子純也
(Morning Project Samurai 代表)
第20回 Morning Project Samurai 定例ミーティング資料 (c) Junya Kaneko

目次
• MPS とは
• Why Python?
• 本シリーズの目標と進
• 前回の復習
• UML を用いたクラスの表現 (クラス図)
• urllib を用いた Youtube ページ検索の復習
• http モジュールを用いた HTML の解析

Morning Project Samurai (MPS)
• Morning 
- 土曜の朝を有意義に
• Project 
- プロジェクト指向
• Samurai 
- 謙虚に学習 
- プロジェクトをバッサバッサ 
と斬りまくる
プロジェクト
リーダー
シップ
メンバー
シップ
成果
人脈
UP!
UP!
UP!
キャリア
知識・技術
UP!
UP!

MPS で主に使う言語
特に規定なし
(プロジェクト依存)
しばらくは Python がメイン

ぶらサボり
(東京メトロオプンデータコンテスト出展作品)
Python + Django で開発

我々の今後の主な活動の一部
• ぶらサボりのコードの理解
• ぶらサボりのアップデート・リファクタリング
• ぶらサボりの海外展開（Burasabori Abroad）
• ダイワハウスのスマートハウスコンテスト
• 手軽な情報交換デバイス

Python 人気上昇中
(出典: http://news.mynavi.jp/news/2014/10/03/017/)
Dropbox, Instagram.

目次
• MPS とは
• Why Python?
• 本シリーズの目標と進
• 基本的な用語の定義の復習
• Python プログラム始めの第一歩の復習
• オブジェクト
• 関数の復習
• クラスとクラスの継承の復習

本シリーズで作成するアプリ
Youtube の動画を検索して
検索結果の動画URLリストを表示するアプリ

応用場面
コンテスト参加者の投稿動画リストを作りたい！
(http://bit.ly/metroodc_sheets)
ガンダム関連動画を集めたまとめサイトを作りたい！
なまけもの関連動画を一気にダウンロードするアプリを 
作りたい！
Q. あなたは何を検索して、その結果をどう利用しますか？

さらなる応用場面
Youtube 以外のサービスからの動画リスト取得
Yahoo からの株価情報取得
ぐるなびなどの API サービスの利用
etc.

アプリ作成に必要な知識と技術
• Python プログラミングの基礎概念 
- プログラムの動作原理（インタプリタ） 
- プログラムの構成要素（オブジェクト、クラス、関数、etc.）
• Python によるネットワークプログラミングの基礎 
- urllib モジュールを用いた HTTP 通信
• 文字列解析の基礎 
- http モジュールを用いた HTML の解析
• プログラムで現実問題を解決するコツ（応用力）

前回までに学修した事項

前回復習した事項

今回学修する事項
• UML を用いたアプリケーションデザイン

次の単語を説明してみよう！
• オブジェクト
• クラス
• インスタンス
• 継承
著作権保護のため削除

オブジェクト
コンピュータのメモリ上に保存されたもの
例: 整数、文字列、リスト、関数、クラス、インスタンス

クラスの定義と使用
定義
呼び出し
class クラスの名前:
def __init__(self, 引数1, 引数2, …) 
初期化処理
def 関数の名前1(self, 引数1, 引数2, …)
関数の処理
instance = クラスの名前(引数1, 引数2, …)
instance.関数の名前1(引数1, 引数2, …)

クラスとインスタンス
ピカチュウ
(クラス)
class Pikachu:
ピカチュウ1
(インスタンス)
ピカチュウ2
ピカチュウ3
Pikachu()
Pikachu()
Pikachu()
ピカチュウのレシピ
実際のピカチュウ
著作権保護のため削除著作権保護のため削除著作権保護のため削除

クラスの継承
すでに存在するクラス（レシピ）をもとに、
新しいクラスを作ること
☆基となるレシピの定義は自動的に引き継がれる！
☆機能の追加、上書きが可能！

継承の仕方
class 新しいクラスの名前(基となるクラスの名前): 
def 追加する機能の名前1(self, 引数1, 引数2, …) 
機能の定義
def 上書きする機能の名前(self, 引数1, 引数2, …)
機能の定義

Aha, Come on!
著作権保護のため削除著作権保護のため削除

モデルとは？？ 
UML (Uniﬁed Modeling Language)
Model: 
A physical, mathematical, or otherwise logical representation
of a system, entity, phenomenon, or process.
(http://msco.mil/)
システムや、その要素、現象、プロセスをロジカルな方法で 
表現したもの
例: F=ma

なぜモデルを作るのか？
UML (Uniﬁed Modeling Language)
Modeling and Simulation:
The use of models […] to develop data as a basis for  
making managerial or technical decisions.
(http://msco.mil/)
(効率よく)マネジメントまたは技術的な意思決定をするため 
- 安価、安全、短期間にシステムの検証が可能 
- 開発チーム内外で正確な情報共有が可能
適用例:
• 原発やロケット等の大規模で危険なシステムの開発
• チームワークを必要とされる開発

UML の構成要素
• 構造図 
- クラス図、オブジェクト図、コンポーネント図、etc.
• 振る舞い図 
- ユースケース図、アクティビティー図、状態遷移図、etc.
• 相互作用図 
- シーケンシャル図、コミュニケーション図、etc.
Unify: To make into a unit or a coherent whole 
(http://www.merriam-webster.com/)

クラス図
アプリの静的な構造をクラスとクラス間の関係という 
観点からモデル化する
denki_shock(self, enemy: Pokemon)
_hp: Integer = 35
_denki_shock_pp: Integer = 10:
Pikachu
get_damage(self, amount: Integer)
_hp: Integer
Pokemon
hakai_kousen(self, enemy: Pokemon)
_hp: Integer = 91
_hakai_kousen_pp: Integer = 5
Kairyu

クラス図のメリット
• アプリの全体像を見渡すことができる
• アプリを整理されたクラス群で構成することができる 
(開発、保守が容易)
• クラスの抽象化を考えやすい 
(使い回しの効く部品の作成が容易)

クラスの書き方
Q: ピカチュウクラスとカイリュウクラスを書いてみよう！
メソッド名(引数名: 引数の型, …): 戻り値の型
メソッド名(引数名: 引数の型, …): 戻り値の型
属性名: 属性の型 = 初期値
属性名: 属性の型 = 初期値
クラス名

ピカチュウクラス
class Pikachu:
def __init__(self): 
self._hp = 35 
self._denki_shock_pp = 10
def get_damage(self, amount):
self._hp = self._hp - amount
def denki_shock(self, enemy):
enemy.get_damage(10)
self._denki_shock_pp =  
self._denki_shock_pp - 1

開発者になった気持ちで
見比べてみよう！
_hp: Integer = 35
Pikachu
_hp: Integer = 91
Kairyu
気づいたことがあったら 
発表してほしいケロ！

_hp: Integer = 35
Pikachu
_hp: Integer = 91
Kairyu
ヒント: なにか面倒臭そうなところ、ないですか？
気づいたことがあったら 
発表してほしいケロ！

_hp: Integer = 35
Pikachu
_hp: Integer = 91
Kairyu
同じ機能がある！

カイリュウクラス
class Kairyu:
def __init__(self): 
self._hp = 91 
self._hakai_kousen_pp = 5
def get_damage(self, amount):
self._hp = self._hp - amount
def hakai_kousen(self, enemy):
enemy.get_damage(50)
self._hakai_kousen_pp =  
self._hakaikousen_pp - 1

二回も同じコード書かないといけないケロか？
_hp: Integer = 35
Pikachu
_hp: Integer = 91
Kairyu

否！！！
Python に ⚪⚪ あり！！！

否！！！
Python に継承あり！！！

ポケモンアプリのクラス構造的改善
_hp: Integer = 35
Pikachu
_hp: Integer
Pokemon
_hp: Integer = 91
Kairyu
get_damage メソッドは一度書くだけで良くなった！ 
(ポケモンが256匹いても一度だけ書けば良い)
継承を表す矢印

ポケモンアプリのクラス構造構造的改善
_hp: Integer = 35
Pikachu
_hp: Integer
Pokemon
_hp: Integer = 91
Kairyu
継承を表す矢印
Q. なにか感じたことがありますか？UMLのメリットなど。

Viva UML
コードを書く前に、効率良いアプリのデザインが可能 
- コードは煩雑で全体像が見えにくい 
- コードを書くのには時間がかかる (書き直すとさらに) 
- 沢山の可能なアプリの構造を一気に議論できる 
- UML の意味さえ知っていれば、与えられた UML の 
図をもとに誰でもアプリが作れる (チームワーク、外注)

パッケージ (モジュール)
Pokemon
_hp: Integer = 35
Pikachu
_hp: Integer
Pokemon
_hp: Integer = 91
Kairyu

パッケージのネスト
PokemonApp
Pokemon People

Youtube の動画検索結果を表示する
1. Youtube の動画を検索
2. 検索結果を表示する

Youtube の動画を検索 (今まで)
Youtube に動画の検索を依頼
Youtube から返って来る検索結果の受け取り

Youtube の動画を検索
Youtube に動画の検索を依頼
Youtube から返って来る検索結果の受け取り
Q. 図を達成するために必要なオブジェクトは？？

Q. 検索してみよう！
さすが先生！
ドンピシャ
Python のバージョンっぽい。
我々のは3.4。要注意！

Q. ドキュメントを読んで必要な
部分を取り出してみよう！
youtube の検索結果のアドレス
に変えたら良いっぽい！
urlopen っていう名前がもう
臭すぎ！

結果の表示
<button class="yt-uix-button yt-uix-button-size-small yt-uix-button-default yt-uix-button-empty yt-uix-button-
has-icon no-icon-markup addto-button video-actions spf-nolink hide-until-delayloaded addto-watch-later-
button-sign-in yt-uix-tooltip" type="button" onclick=";return false;" title="後で見る" role="button" data-video-
ids="xxLKleKNgNU" data-button-menu-id="shared-addto-watch-later-login"><span class="yt-uix-button-arrow
yt-sprite"></span></button>
has-icon no-icon-markup addto-button addto-queue-button video-actions spf-nolink hide-until-delayloaded
addto-tv-queue-button yt-uix-tooltip" type="button" onclick=";return false;" title="TV キュー" data-video-
ids="xxLKleKNgNU" data-style="tv-queue"></button>
</a></div><div class="yt-lockup-content"><h3 class="yt-lockup-title"><a href="/watch?v=xxLKleKNgNU"
class="yt-uix-tile-link yt-ui-ellipsis yt-ui-ellipsis-2 yt-uix-sessionlink spf-link " data-
sessionlink="itct=CCEQ3DAYAiITCMHclK6f0sICFYh2WAodSZ8AIij0JFI55p2x5Lqs44Oh44OI44Ot44Kq44O844OX
44Oz44OH44O844K_5rS755So44Kz44Oz44OG44K544OI" title="トイレステーション" rel="spf-prefetch" aria-
describedby="description-id-936864" dir="ltr">トイレステーション</a><span class="accessible-description"
id="description-id-936864"> - 長さ: 2:55。</span></h3><div class="yt-lockup-byline">作者: <a href="/channel/
UCczFMTMArOKaXK8fqUqPGrw" class=" yt-uix-sessionlink spf-link g-hovercard" data-
ytid="UCczFMTMArOKaXK8fqUqPGrw" data-name="" data-
sessionlink="itct=CCEQ3DAYAiITCMHclK6f0sICFYh2WAodSZ8AIij0JA">CoCoRoStation</a></div><div class="yt-
lockup-meta"><ul class="yt-lockup-meta-info"><li>1 か月前</li><li>視聴回数 16 回</li></ul></div><div class="yt-
lockup-description yt-ui-ellipsis yt-ui-ellipsis-2" dir="ltr">駅や車内で急にトイレに行きたくなった事、ありません
か？トイレステーションを使えば緊急時に誰でも・素早く・簡単に<b>東京メトロ</b>各駅（周辺） ...</div></div></
div></div></li>

プログラムが書けるということ
頭の中にいろんな問題解決方法を蓄えている
自分で解決方法を模索することができる
1. すでに誰かが同じような問題を解いていないか 
上手く調べることができ、 
見つけた解決方法を自分の問題に合うよう 
カスタマイズできる
2. 誰も解いていない問題の場合、解決方法を 
創出することができる
＋

Youtubeの動画検索結果の表示
div></div></li>

作成するアプリ
youtube の動画検索結果から
「投稿者、動画の名前、動画のURL」
から構成されるリストを作るアプリ
Youtube の動画検索結果の解析

問題解決までのステップ
1. 得たい結果に必要なデータを明らかにする
2. 解析する (必要なデータを含む) データの特徴を 
明らかにする
3. 解析するデータの特徴に合わせて、出力したい 
データを得るための方策を考える（検索する）
4. 実装する

ステップ1. このデータの特徴は？
div></div></li>

みんなの回答
動画のタイトル・・・title=,

回答例
• データは HTML
• title, /channel, /watch?v= がフックになりそう

ステップ3: 方策を考える
• データの特徴 
- データは HTML 
- title, /channel, /watch?v= がフックになりそう
Q. どんな処理をすれば、リストが作れそう？？

みんなの回答

回答例
HTML を解析して、title, /channel, /watch?v= を 
繰り返し見つけ出しては、それらの近くにある 
動画のタイトル、投稿者の名前、動画のURL  
を抜き出せばいい！

回答例
繰り返し処理
文字列検索処理
条件分岐
文字列の抜き出し処理

HTML 解析方法の検索

まずは、簡単な例を見る

まずは、簡単な例を見る
使用するのは HTMLParser クラス
継承を用いて解析に必要な機能を 
自分で追加するらしい
名前から考えると、
開始タグ (<hoge>) を発見した時に呼び出される
メソッドっぽい。
全体像を把握したら、実際に打ち込んで動かしてみる！ 
Youtube の検索結果を使って動かしてみる！

自分ができたことと、 
達成すべきことのギャップを埋める
Q. ここまででできたことは？
Q. まだたりないところは？？
Q. ギャップを埋める方法は？
上記の問いに繰り返し自分自身で答えながら
プログラムを実装することによってアプリができる

あとはみんなで考えてみるケロ！
繰り返し処理
文字列検索処理
条件分岐
文字列の抜き出し処理
ディスカッションするケロ∼。
質問大歓迎ケロ！

(Pythonで作って学ぶ) Youtube の動画リストを作るアプリの開発  第4回

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to (Pythonで作って学ぶ) Youtube の動画リストを作るアプリの開発  第4回

Similar to (Pythonで作って学ぶ) Youtube の動画リストを作るアプリの開発  第4回 (20)

More from Project Samurai

More from Project Samurai (20)