結果

アレした pic.twitter.com/qfcXjg125Y

— elve (@elve_hatena) 2021年7月22日

ユーザー名にマウスカーソル当てるとユーザーの自己紹介が出るヨ！

mysite\polls\models.py

pollsが何なのかは知らない。サンプル通りにやったらできたフォルダなのだ・・・。

from django.db import models
# Create your models here.
class USERS(models.Model):
id = models.CharField(primary_key=True,max_length=40)
created_at = models.DateTimeField()
updated_at = models.DateTimeField()
user_id = models.CharField(max_length=40)
description = models.CharField(max_length=300)
name = models.CharField(max_length=40)
class TWEETS(models.Model):
id = models.CharField(primary_key=True,max_length=40)
created_at = models.DateTimeField()
updated_at = models.DateTimeField()
user_id= models.CharField(max_length=40)
in_reply_to_text_id= models.CharField(max_length=40)
in_reply_to_user_id= models.CharField(max_length=40)
text= models.CharField(max_length=200)
user_name = models.CharField(max_length=30,null=True)
user_description =  models.CharField(max_length=300,null=True)

mysite\polls\views.py

from django.shortcuts import render
import requests
from polls.models import USERS,TWEETS
import datetime
def get_username(my_user_id):
try:
user = USERS.objects.get(user_id = my_user_id)
username=user.name
userdescription=user.description
except USERS.DoesNotExist:
username = my_user_id
userdescription=""
return {'username':username,'userdescription':userdescription}
def index(request):
url = "https://versatileapi.herokuapp.com/api/user/all"
users = requests.get(url).json()
USERS.objects.all().delete()
for user in users:
USERS.objects.create(
id = user['id'],
created_at = datetime.datetime.fromisoformat(user['_created_at']) ,
updated_at = datetime.datetime.fromisoformat(user['_updated_at']) ,
user_id = user['_user_id'],
description = user['description'],
name = user['name'])
url = "https://versatileapi.herokuapp.com/api/text/all?$orderby=_created_at desc&$limit=20"#全部取得すると重いので・・・
tweets = requests.get(url).json()
TWEETS.objects.all().delete()
for tweet in tweets:
Uid = tweet['_user_id']
my_user = get_username(Uid)
TWEETS.objects.create(
id = tweet['id'],
created_at = datetime.datetime.fromisoformat(tweet['_created_at']) ,
updated_at = datetime.datetime.fromisoformat(tweet['_updated_at']) ,
user_id = Uid,
in_reply_to_text_id = tweet['in_reply_to_text_id'] if 'in_reply_to_text_id' in tweet  else "",
in_reply_to_user_id = tweet['in_reply_to_user_id'] if 'in_reply_to_user_id' in tweet  else "",
text = tweet['text'],
user_name = my_user['username'],
user_description= my_user['userdescription'])
TWEETS.objects.order_by('created_at').reverse()
output = {'tweets': TWEETS.objects.all()}
return render(request, 'polls/index.html',output)

mysite\mysite\settings.pyに追記

# https://kokiblog.com/2019/09/12/django_css/
# https://blog.fantom.co.jp/2021/01/23/name-os-is-not-defined/
import os
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "static"),
]

mysite\polls\static\style1.css

/*https://kokiblog.com/2019/09/12/django_css/*/
/*https://saruwakakun.com/html-css/reference/box*/
body {
background-color: #B2EBF2;
font-family: sans-serif;
}
h1{
width: 80%;
margin: 0 auto;
padding: 0.5em 1em;
max-width: 500px;
}
.box27 {
width: 80%;
position: relative;
margin: 2em auto;
padding: 0.5em 1em;
border: solid 3px #62c1ce;
max-width: 500px;
}
.box27 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box27 p {
margin: 0;
padding: 0;
}
.add-time {
text-align : right;
}
/*https://www.jungleocean.com/programming/190308tooltip-css*/
.tooltip1{
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
font-size: 17px;
background: #62c1ce;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
cursor: pointer;
display: inline-block;
}
.tooltip1 p{
margin:0;
padding:0;
}
.description1 {
display: none;
position: absolute;
padding: 10px;
font-size: 12px;
line-height: 1.6em;
color: #fff;
border-radius: 5px;
background: #000;
width: 200px;
}
.description1:before {
content: "";
position: absolute;
top: 0%;
right: 95%;
border: 15px solid transparent;
border-top: 15px solid #000;
margin-left: -15px;
transform: rotateZ(90deg);
}
.tooltip1:hover .description1{
display: inline-block;
top: 0px;
left: 80px;
}

mysite\polls\templates\polls\index.html

<!DOCTYPE html>
<!--https://kokiblog.com/2019/09/12/django_css/-->
{% load static %}
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="UTF-8">
  <title>index.html</title>
  <link rel="stylesheet" href="{% static 'style1.css' %}">
</head>
<body>
<h1>test</h1>
{% for tweet in tweets %}
<div class="box27" id="{{tweet.user_id}}">
<div class="tooltip1">
<p>{{tweet.user_name}}</p>
<div class="description1">{{tweet.user_description}} </div>
</div>
<p>{{tweet.text}}</p>
<p class="add-time">{{tweet.created_at}}</p>
</div>
{% endfor %}
</body>
</html>