質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • HTML

    11433questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Python 3.x

    9765questions

    Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

  • Django

    1604questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

  • YouTube

    109questions

    YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。

Djangoで一覧に表示されたリスト項目からDetaileページへの遷移

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 401

HIRO150

score 2

 前提・実現したいこと

DjangoでYpuTubeのようなシステムを作っています。
検索キーワードで動画タイトルを一覧表示し、タイトルをクリックすると動画のDetaileページに飛ぶようにしたいです。

 発生している問題・エラーメッセージ

YouTube APIから取得したタイトルとIDを紐付けることができません。
HTML内の動画タイトルにアンカータグをつけ、リンク先のdetaileページに動画タイトルに紐づく動画IDを渡すような機能を実現したいです。

 該当のソースコード

views.py

from django.shortcuts import render
from .search import search

def top_search(request):
    return render(request, "youtube/search.html")

def index(request):
    keyword = request.GET.get("keyword")
    videos_name, videos_id = search(keyword)
    videos = {
        'videos_name':videos_name,
        'videos_id':videos_id
    }
    return render(request, "youtube/search_list.html", videos)

def detaile(request, video_id):
    return render(request, "youtube/detaile.html",{"video_id":video_id})

search_list.html

{% extends "youtube/base.html" %} {% block content %}
<header>
    <h1>検索結果</h1>
</header>
{% for name in videos_name %}
<div>
    <a href="{% url 'youtube:detail' id=videos_id %}">{{ name }}</a>
</div>
{% endfor %} {% endblock %}


search_list.htmlページ

 試したこと

上記コードのままでは、Detaileページにvideos_idのリストが渡されてしまいます。
HTML内のforにてpythonのzip関数も試してみましたが、うまくいきませんでした。

HTMLには辞書型で変数が渡されていると思い、

{% extends "youtube/base.html" %} {% block content %}
<header>
    <h1>検索結果</h1>
</header>
{% for name,id in videos.values() %}
<div>
    <a href="{% url 'youtube:detail' id=id %}">{{ name }}</a>
</div>
{% endfor %} {% endblock %}


のようにしてみましたが、これもうまくいきませんでした。

実現したいことは、リスト表示された動画タイトルをクリックすると、YoutubeのようにDetaileページに飛ぶような設計です。
ご教授お願いします。

 補足情報(FW/ツールのバージョンなど)

Python 3.6.5
Django==2.1.1

補足

views.py内のsearch関数はYouTubeAPIの公式(https://developers.google.com/youtube/v3/code_samples/python?hl=ja#search_by_keyword)のコードを流用しました。

search.py

from apiclient.discovery import build
from apiclient.errors import HttpError
from oauth2client.tools import argparser
from .youtube_data_model import YouTubeData


DEVELOPER_KEY = "MY_DEVELOPER_KEY"
YOUTUBE_API_SERVICE_NAME = "youtube"
YOUTUBE_API_VERSION = "v3"


def youtube_search(options):
    youtube = build(YOUTUBE_API_SERVICE_NAME, YOUTUBE_API_VERSION,
                    developerKey=DEVELOPER_KEY)

    saerch_response = youtube.search().list(
        q=options.q,
        part="id,snippet",
        maxResults=options.max_results
    ).execute()

    videos_name = []
    videos_id = []

    for saerch_result in saerch_response.get("items", []):
        if saerch_result["id"]["kind"] == "youtube#video":
            videos_name.append(saerch_result["snippet"]["title"])
            videos_id.append(saerch_result["id"]["videoId"])

    return videos_name, videos_id


def search(keyword):
    ytdata = YouTubeData(q=keyword, max_results=10)

    try:
        return youtube_search(ytdata)
    except HttpError as e:
        print("An HTTP error %d occurrede::\n%s" % (e.resp.status, e.content))


youtube_data_model.py

class YouTubeData():
    def __init__(self, q, max_results):
        self.q = q
        self.max_results = max_results

戻り値は動画タイトルと動画IDのリストです。
戻り値はvideos_name,videos_idの順番で戻っており、views.py内においても、videos_name,videos_idは正しい値が格納されていることは確認できています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • Meganezaru

    2018/09/05 15:49

    search()の戻り値は、どんな形式でしょうか?nameの配列とidの配列で、順序が同期していることは保証されていますか?

    キャンセル

  • HIRO150

    2018/09/05 16:38

    search()の戻り値はリストです。nameとidの順番が正しく同期されていることが保証されいるかわかりませんが、確認できる範囲であれば全てnameとidの順番は同じでした。よろしくお願いします。

    キャンセル

  • Meganezaru

    2018/09/05 16:41

    配列に、同じタイミングでappendしているので、順序は揃っていますね。

    キャンセル

回答 1

checkベストアンサー

+1

forloop.counter0で、index値が取れます。 idの配列の同じ位置をセットすれば、期待通りに動くと思います。
失礼しました。DjangoのTemplateでは、単純な方法で任意のArray要素にアクセスすることができませんでした。
下記回答は誤りですので、無視してください。

{% extends "youtube/base.html" %} {% block content %}
<header>
    <h1>検索結果</h1>
</header>
{% for name in videos_name %}
<div>
    <a href="{% url 'youtube:detail' id=videos_id[forloop.counter0] %}">{{ name }} </a>
</div>
{% endfor %} {% endblock %}

search()の戻り値として、現状は、二つの配列を返していますが、video_idをキーとして、video_nameを値に持つ辞書の配列にまとめたほうが、わかりやすいかもですね。

 追記

search()の戻り値を辞書にする方法で、できないでしょうか?

def youtube_search(options):
    youtube = build(YOUTUBE_API_SERVICE_NAME, YOUTUBE_API_VERSION,
                    developerKey=DEVELOPER_KEY)

    saerch_response = youtube.search().list(
        q=options.q,
        part="id,snippet",
        maxResults=options.max_results
    ).execute()

    # videos_name = []
    # videos_id = []
    videos = []

    for saerch_result in saerch_response.get("items", []):
        if saerch_result["id"]["kind"] == "youtube#video":
            # videos_name.append(saerch_result["snippet"]["title"])
            # videos_id.append(saerch_result["id"]["videoId"])
            videos.append(
                {"video_id": saerch_result["id"]["videoId"],
                 "video_name": saerch_result["snippet"]["title"]})

    # return videos_name, videos_id
    return videos

view.py

def index(request):
    keyword = request.GET.get("keyword")
    return render(request, "youtube/search_list.html", {'videos': search(keyword)})

search_list.html

{% extends "youtube/base.html" %} {% block content %}
<header>
    <h1>検索結果</h1>
</header>
{% for video in videos %}
<div>
    <a href="{% url 'youtube:detail' id=video.video_id %}">{{ video.video_name }} </a>
</div>
{% endfor %} {% endblock %}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/05 17:26

    ご回答ありがとうございます。コードを参考にさていただきましたが、Could not parse the remainder: '[forloop.counter0]' from 'videos_id[forloop.counter0]' というエラーが出てしました。Django Templateでは配列の指定が[]ではなく、「.」のようでvideos_id.forloop.counter0のように試してみましたが同じくエラーになりました。ご提案のvideo_idをキーとして、video_nameを値に持つ辞書の配列の方法を試してみたいと思います。

    キャンセル

  • 2018/09/05 17:40

    失礼しました・・・
    Arrayを処理する方法で何かないか、調べてみます。

    キャンセル

  • 2018/09/05 17:45

    すいません。こちらでも最大限調べてみます。ありがとうございます。

    キャンセル

  • 2018/09/05 17:56 編集

    template filterを自作するような方法しかなさそうですね・・・
    http://stackoverflow.com/a/29664945/2714931

    戻り値を変更するなら、templateでアクセスすることを考えて、video_id、video_nameともvalueとして持つ辞書の方が良さそうですね。
    {"id":(video_idの値), "name":(video_nameの値)}

    キャンセル

  • 2018/09/05 18:20

    変更例を追記しておきました。
    動作未確認ですので、悪しからず・・・

    キャンセル

  • 2018/09/05 18:28

    追記していただいたコードで無事動作しました!
    最後まで丁寧にありがとうございます。
    大変助かりました!

    キャンセル

同じタグがついた質問を見る

  • HTML

    11433questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • Python 3.x

    9765questions

    Python 3はPythonプログラミング言語の最新バージョンであり、2008年12月3日にリリースされました。

  • Django

    1604questions

    DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

  • YouTube

    109questions

    YouTubeとはユーザーがビデオをアップロード・共有・閲覧できるビデオ共有ウェブサイトです。