@Blog{zip358.com}
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
Qiitaのfeedを取得して表示するだけのコード非同期編？ #phpcode
2022.11.06
おはようございます。昨日の続きのお話ですコードは金曜日に書きました😗。
動画を見ていただければわかるかと思いますが即興で書いたコードです、最後の最後でエラーってる！？ところなんかも編集していない所が伝わってくるかと思います。ちなみに画質HDのフル画面で見ないとコードは見えないかなって思います。
音声も今後入れていくかもしれません。
任意のユーザーを増やしたい場合はmain.jsの先頭行（２行目？）のqiitaIDに任意のIDを追加するだけで取得可能です。解説はなしですけど一応、何をやっているのかそれなりに、わかるように心がけたつもりです。あとは盗んで覚えてください😂。
ソースコードはこちらになります。
<?php
session_start();
$toke_byte = openssl_random_pseudo_bytes(16);
$csrf_token = bin2hex($toke_byte);
$_SESSION['csrf_token'] = $csrf_token;
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
.qiita_feed-list>li {
/* font-weight: bold; */
color: aliceblue;
}
.qiita_feed-list>li>a {
color: aliceblue;
}
body {
background-color: #60b111;
}
.shadow-lg {
box-shadow: 0 1rem 3rem rgba(255, 255, 255, .195) !important;
}
</style>
<title>Qiita-feed</title>
<?php
require $_SERVER['DOCUMENT_ROOT'] . "/header_script.php";
?>
</head>
<body>
<input type="hidden" id="csrf_token" value="<?= $csrf_token ?>">
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="text-light">Qiita-feed</h1>
</div>
</div>
</div>
<div class="container mt-2">
<span id="view"></span>
Copyright <?= date("Y") ?> <a href="https://358tool.com">358tool.com</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
<script src="./js/main.js?<?= time() ?>"></script>
</body>
</html>//qiita feed
["taoka-toshiaki","mpyw","suin"].forEach(id=>{
let data = {
csrf_token:document.getElementById("csrf_token").value,
feedid:[id]
};
let url = "./qiita-feed.php";
qiita_feed(url,data);
});
async function qiita_feed(url, data) {
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify(data)
}
await fetch(url, options).then(response =>
response.json()
).then(resultdata => {
document.getElementById("view").insertAdjacentHTML("beforeend",resultdata.reshtmlcode)
}
).catch(error => {
console.log(error);
}
);
}<?php
session_start();
$obj = json_decode(strip_tags(@file_get_contents("php://input")));
if (isset($obj)) {
if (isset($obj->csrf_token) && $_SESSION["csrf_token"] === $obj->csrf_token) {
$str ="";
foreach ($obj->feedid as $key => $id) {
$str.= '
<div class="row shadow-lg p-3 mb-5 bg-body rounded">
<div class="col-12">
🌿<span class="text-light">://qiita.com/' . xss_d($id) . '/feed :[引用]</span>';
$str .= get_Qiitafeed("https://qiita.com/" . xss_d($id) . "/feed");
$str .= '
</div>
</div> ';
}
$res["reshtmlcode"] = $str;
print json_encode($res);
}
}
function xss_d(mixed $val): mixed
{
if (is_array($val)) {
foreach ($val as $key => $value) {
$val[$key] = htmlentities($value, ENT_QUOTES);
}
} else {
$val = htmlentities($val, ENT_QUOTES);
}
return $val;
}
function get_Qiitafeed(string $feedUrl): string
{
$xml = @simplexml_load_file($feedUrl);
if (isset($xml->entry)) {
$str = "<ul class='qiita_feed-list'>";
foreach ($xml->entry as $key => $val) {
$str .= "<li><a href='{$val->url}'>" . $val->title . "</a></li>";
}
$str .= "</ul>";
}
return $str;
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
2, feed, HD, ID, JS, main, PHPCODE, qiita, qiitaID, あと, エラー, お話, コード, こちら, ソース, つもり, ところ, プル, ユーザー, 今後, 任意, 何, 先頭, 動画, 即興, 取得, 可能, 同期, 場合, 所, 昨日, 最後, 画質, 画面, 編集, 表示, 解説, 追加, 金曜日, 音声,
Qiitaのfeedを取得して表示するだけのコード。 #php
2022.11.05
おはようございます、土曜日の朝ですね😗。
今日は文化の日にQiitaにUPしたfeedを取得して表示するだけのコードを書きました。見た目はこんな感じでQiitaの雰囲気を取り入れたデザインにしています。デモ版として実際にサーバーで起動しているモノです、feedを取得しているユーザーは自分を入れて３人です。
表示する人数が多くなるとページを描画する時間が遅くなるので実質、１０人が限度かも知れないです。もし何人ものユーザーを取得したいと考えている方は表示部分と処理部分を別けて、尚且つ処理部分は非同期処理で変更することを推奨します。
尚、明日には２つに別けたプログラムコードを別記事として記載しますので、しばしお待ち下さいませ🙇。
今回のソースコードはこんな感じになってます。
<?php
function get_Qiitafeed(string $feedUrl){
$xml = @simplexml_load_file($feedUrl);
if(isset($xml->entry)){
print("<ul class='qiita_feed-list'>");
foreach($xml->entry as $key=>$val){
print("<li><a href='{$val->url}'>".$val->title."</a></li>");
}
print("</ul>");
}
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<style>
.qiita_feed-list > li{
/* font-weight: bold; */
color:aliceblue;
}
.qiita_feed-list > li > a{
color:aliceblue;
}
body{
background-color:#60b111;
}
.shadow-lg {
box-shadow: 0 1rem 3rem rgba(255,255,255,.195)!important;
}
</style>
<title>Qiita-feed</title>
<?php
require $_SERVER['DOCUMENT_ROOT'] ."/header_script.php";
?>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12">
<h1 class="text-light">Qiita-feed</h1>
</div>
</div>
</div>
<div class="container mt-2">
<?php
$Id_List = ["taoka-toshiaki","mpyw","suin"];
foreach ($Id_List as $key => $id) {
?>
<div class="row shadow-lg p-3 mb-5 bg-body rounded">
<div class="col-12">
🌿<span class="text-light">://qiita.com/<?=$id?>/feed :[引用]</span>
<?=get_Qiitafeed("https://qiita.com/".$id."/feed")?>
</div>
</div>
<?php
}
?>
Copyright <?=date("Y")?> <a href="https://358tool.com">358tool.com</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>
</body>
</html>
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
10, 2, ３, feed, feedUrl, function, GET, lt, php, qiita, Qiitafeed, string, UP, お待ち, コード, こと, サーバー, ソース, デザイン, デモ版, プログラム, ページ, もの, ユーザー, 人数, 今回, 今日, 何人, 処理, 別記事, 取得, 同期, 土曜日, 変更, 実質, 実際, 感じ, 推奨, 描画, 文化の日, 方, 明日, 時間, 朝, 自分, 表示, 見た目, 記載, 起動, 部分, 限度, 雰囲気,