例のSNSのリーダー

例のSNS
snack.elve.club

Django使うよ。設定してね。

結果

アレした 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>