かえるるる(@kaeru_nantoka)です。
自作Djangoアプリの制作過程で YouTube Data
API (https://developers.google.com/youtube/v3/) を扱うことがあり、この時にハマったことと解決策を書いていきます。
前提として、今回のDjangoアプリは
project名:myTutorial
app名:api
であるとして読み進めください。
- 目次
- ほしい値 (目的)
- videoIdとは?
- 何ができるの?
- 解決策(お急ぎの方はここからお読みください!)
- どうつまづいたか
- まとめ
- 内容
1. YouTube Data API を叩いて得られるオブジェクトの中に、
「 videoId 」というものがあります。本エントリではDjangoアプリでこれを取得してHTML上に表示します。
2. videoIdとは「M7lc1UVf-VE」のようなもので動画一つ一つを識別する一つのタグのようなものです。
(ちなみにこれはYouTube公式のサンプル動画のID)
3. videoIdで何ができるの?
以下のようなものをhtmlに埋め込む。
<iframe width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
すると、
このように簡単に動画をWebページ上に表示できます!
赤太字で表したのがこの動画のvideoIdです。
4. 解決策
お待たせしました本エントリの本題です。
まず、実際に書き込むのは、
api/urls.py (デフォルトでは無いので要作成)
api/views.py
myTutorial/urls.py
の3つです。
*(api/urls.py)
from django.urls import path
from api import views
app_name = 'api'
urlpatterns = [
path('foge/hoge/', views.hogehoge, name='hogehoge'),
]
*(api/views.py)
import json, requests
from django.http import HttpResponse
def youtube_search(request):
YouTube_API_KEY = "Your_API_KEY"
url = "https://www.googleapis.com/youtube/v3/search?key=" + YouTube_API_KEY + "&part=snippet&q=" + (検索ワード) +"&type=videos"
headers = {"content-type": "application/json"}
r = requests.get(url, headers=headers)
data = r.json()
vId = data["items"][1]["id"]["videoId"]
return HttpResponse(vId)
*(myTutorial/urls.py)
from django.contrib import admin
from django.urls import include,path
urlpatterns = [
path('admin/', admin.site.urls),
path('api/', include('api.urls')), # 追加
]
これで、localhost/api/foge/hoge/ で検索すると
webページ上に M7lc1UVf-VE が表示されます!
5. 私がつまずいたのは取得したオブジェクトの要素を取得するところです。
data["items"][1]["id"]["videoId"]
とあるように、videoIdは返り値dataの中のitemsという要素の2つ目の中のidの中にあります。
私は当初 JavaScript でAPIを叩いていたのですが、JSはオブジェクトの要素にアクセスする時、
data.items[1].id.videoId
というようにアクセスします。
Pythonのrequestsを使ってみる!
といった記事はよく見かけたのですがその要素を取得することにフォーカスした記事を見つけられなかったので本エントリを書いたのでした。
6. まとめ
オブジェクトの要素を取得する方法。
JS => data.items[1].id.videoId
Python => data["items"][1]["id"]["videoId"]
以上です!