@Blog
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
レンダリングのちらつきを無くしました、あとはアップロード際に.
2025.07.20
おはようございます.レンダリングのちらつきを無くしました、あとはアップロード際に画質劣化するワードプレスの対応を行えばひとまず、このサイトは改善しないつもりでいます.因みにレンダリングのちらつきがどのような時に発生するかと言えば、背景色の切り替えを行っているところです.
ベースは黄緑色の背景色にしているのですがJSで背景色の切り替えが出来るようにしています.切り替えると切り替えた色をローカルで持つって再度訪問された時に切り替えた色にJSでレンダリングしていたのですが、その時にちらつきが発生していました.
理由は分かっていたけど今の今まで放置していました.切り替えて使っているユーザーがどれぐらいいるのか把握していなかっただけど、自分は背景色を黒にしているのでやっぱ気になるという事で先日の休みを使用して切り替えました.
フロントエンドな作り例えばヘッドレスCMS等で作っていたら色の切り替わりを行っても何らちらつきとは無縁ですがね.今回はかなりベターな対応をしたのだけど、もっと良い方法はないかと思っています.
明日へ続く
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
アップ, あと, エンド, サイト, つもり, ところ, どれ, プレス, フロント, ベース, ベター, ヘッド, ユーザー, よう, レス, レンダリング, ローカル, ロード, ワード, 今回, 休み, 作り, 使用, 先日, 切り, 切り替え, 劣化, 対応, 把握, 改善, 放置, 方法, 明日, 替わり, 無縁, 理由, 画質, 発生, 緑色, 背景, 自分, 訪問,
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, あと, エラー, お話, コード, こちら, ソース, つもり, ところ, プル, ユーザー, 今後, 任意, 何, 先頭, 動画, 即興, 取得, 可能, 同期, 場合, 所, 昨日, 最後, 画質, 画面, 編集, 表示, 解説, 追加, 金曜日, 音声,
PS3とかPS4を液晶ディスプレイに繋げれば出力されるじゃないか
2016.01.18
PS3とかPS4を液晶ディスプレイに繋げれば出力されるじゃないか？と思いつき、HDMI端子のある液晶ディスプレイに繋いだところ表示できました。音声内蔵のHDMIディスプレイが、必要。もしくは音声出力は外部スピーカーへ出力するHDMI液晶ディスプレイなら表示は可能なようです。実際、何が得か？？テレビが必要ないということです。例えば、PS4を繋いでいる状態でネット共有の出来るブルーレイレコーダーがあれば録画した映像は見えるようになりライブ映像が視聴可能なレコーダーであればPS4とレコーダーの電源をONにしていればテレビに繋がなくとも視聴が可能なります。よって、テレビが無い環境でもブルーレイレコーダーと液晶ディスプレイとPS4などを揃えればTV＆ゲームが視聴できる環境が整います。ちなみに、ブルーレイレコーダーと液晶ディスプレイがあれば、テレビは必要ないという事も言えます。ただし、画質はテレビよりは良くないと思います。ちなみにHDMI端子のない液晶ディスプレイにHDMIからDMIへ変換する端子で取り付けても映像は出力されますが、音声は出力されません。あくまでも、HDMI端子のある液晶ディスプレイの話です。
追記2021年：今では当たり前の話になりましたね。因みにPS4からゲーム中継などが出来るようになっていますよね、時代流れは進む一方です。
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
３, 4, HDMI, ON, PS, TV, いま, ゲーム, こと, スピーカー, ディスプレイ, テレビ, ところ, ネット, ブルーレイ, ライブ, レコーダー, 事, 何, 共有, 内蔵, 出力, 可能, 外部, 実際, 得, 必要, 思, 映像, 液晶, 状態, 環境, 画質, 端子, 表示, 視聴, 録画, 電源, 音声,