中の人が気づいていないパターンでお客様も気づいていない。 #京たけのこ
2022.12.11
おはようございます、日曜日の朝です😳。
この挙動はアウトかもだろというサイトを見つけました。恐らくですが中の人が気づいていないパターンでクライアント側も気づいていないパターンを発見してしまいましたが…。
京たけのこというサイトを参照すると、ページが表示された途端にページの下部まで勝手にスクロールされるという仕様になっています。何時からこのような事になっているか分かりませんが、至急直さないといけないような案件だと思います。これでは商品を買うのも一苦労かと思います🫠。
JavaScriptのコードを見てみると恐らくこのコードが悪さをしているようです…。
// browser window scroll (in pixels) after which the "back to top" link is shown
var offset = 300,
//browser window scroll (in pixels) after which the "back to top" link opacity is reduced
offset_opacity = 1200,
//duration of the top scrolling animation (in ms)
scroll_top_duration = 700,
//grab the "back to top" link
$back_to_top = $('.cd-top');
//hide or show the "back to top" link
$(window).scroll(function(){
( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
if( $(this).scrollTop() > offset_opacity ) {
$back_to_top.addClass('cd-fade-out');
}
});何故、こういう事が起きるかというとChromeさんのキャッシュが大きく影響していて、JSファイル等は最新のデータを取るように設定していないとブラウザ側のデータ処理を再現する仕様になっているからなのです、なので、毎回のように訪問している人には最新のJSファイルが適用されず昔のデータでページが動作して不具合に気づかないのです。
これは稀に起こるヒューマンエラーのようなものです。確認の怠りが原因ですけどね…なかなかChromeのキャッシュは強力なので、クロスブラウザーテストするのをお勧めします。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
browser window, cd-fade-out', cd-is-visible cd-fade-out', cd-is-visible', cd-top, function, gt, if, link, offset, offset_opacity, scroll, scroll_top, scrolling animation, scrollTop, this, var offset, window, 一苦労, 挙動,
CSSファイルの設定を読み込んで一括背景色変更するコード。 #cssfile #javascript #coding #colors
2022.11.30
おはようございます、先日の日曜日は原因不明の体調不良で寝込んでおりました(¦3[▓▓]。
今日は何とか体調が回復したので、CSSファイルの設定コード読み込んで一括背景色変更するプログラムコードを作成しました。※実際、自分のブログ・サイトで動いているコードになります。
<link rel="stylesheet" href="examplestyle.css">導入方法はまずヘッダーに変更したいCSSファイルを記述します。次にbody内に下記のコードを記述します。
<span id="site_description"></span>最後にJSコードを挿入します。JSコードはファイルで読み込むでもベタ書きでも良いのですが、上記のHTMLタグより下に記述してください。そうしないと動作しません😗。
let htmlcode = ["#efefef", "#181B39", "#262a2e", "#192734", "#1c483b", "#bf7800", "#83094f"].map(elm => `<span class='color_code' style='color:${elm}' data-color-code='${elm}'>■</span>`).join("\n");
const basecolor = "#262a2e";
let cookiefn = function (CodeColor) {
let r = document.cookie.split(';');
return r.length ? ((r) => {
let changecolor = "";
for (let ii = 0; ii < r.length; ii++) {
let content = r[ii].split('=');
for (let i = 0; i < content.length; i++) {
if (content[i].replaceAll(" ", "") === "bgcolor_code") {
changecolor = content[i + 1];
}
}
}
return changecolor?changecolor:CodeColor;
})(r) : CodeColor;
};
let old_color = cookiefn(basecolor);
document.getElementById("site_description").insertAdjacentHTML("afterend", htmlcode);
[...document.querySelectorAll(".color_code")].forEach(elm => {
elm.addEventListener("click", function (e) {
color_set(elm.getAttribute("data-color-code"));
});
});
color_set(old_color);
function color_set(color) {
for (let ii = 0; ii < document.styleSheets.length; ii++) {
if (String(document.styleSheets[ii].href).match(/mag_tcd036-child\/style\.css\?ver=/)) {
for (let i = 0; i < document.styleSheets[ii].cssRules.length; i++) {
let element_css_code = document.styleSheets[ii].cssRules[i];
try {
element_css_code.style.backgroundColor = color;
if (color === "#efefef") {
element_css_code.style.color = "#000000";
} else {
element_css_code.style.color = "#FFFFFF";
}
//いらないかも領域🤔👇
document.querySelectorAll("#wp-calendar > tbody > tr > td > a").forEach(elm=>{
elm.style.backgroundColor = "#909091";
});
document.getElementById("searchsubmit").style.backgroundColor = "#000";
document.querySelector("#s").style.backgroundColor = "#909091";
[...document.querySelectorAll("code")].forEach(elm=>{
[...elm.querySelectorAll("span")].forEach(childen_elm=>{
childen_elm.style.backgroundColor = "#565656";
});
});
//いらないかも領域🤔👆
} catch (error) {
}
}
document.cookie = "bgcolor_code=" + color;
}
}
}注意事項：背景色を変更するCSSファイルをJSコードでチェックしています。そのチェックしている部分を外すと全てのCSSファイルの背景色を変えることが可能です。
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
３, body, coding, colors, css, cssfile, description, examplestyle, gt, href, ID, javascript, JS, link, lt, quot, rel, site, span, stylesheet, コード, サイト, ファイル, ブログ, プログラム, ベタ, ヘッダー, 一括, 下記, 不明, 不良, 今日, 体調, 作成, 先日, 内, 原因, 回復, 変更, 実際, 導入, 挿入, 方法, 日曜日, 最後, 背景色, 自分, 記述, 設定,
Yahoo!ニュースをPythonで取得するできました(´・ω・`)ｖ
2020.05.01
早朝、YOUTUBEライブ配信で行ったものはタイトルとリンクが若干異なるところがあったので、修正したソースコードを貼っときます。Python言語少しずつ 少しずつ理解できてきた。
書き方が慣れればPHPより書くのは楽かな。＄の記号がPHPの変数を書く場合、絶対必要になるけどPythonは書かなくて良いからね。
import requests
from bs4 import BeautifulSoup
r = requests.get("https://news.yahoo.co.jp/")
soup = BeautifulSoup(r.content, "html.parser")
#ニュース一覧のテキストのみ抽出
f = open("link.csv",mode = "a")
for t,a in zip(soup.find_all("div", "newsFeed_item_title"),soup.find_all("a", "newsFeed_item_link")):
f.write(t.text + "," + a.get('href') + "\n")
f.close()
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
4, BeautifulSoup, bs, co, content, CSV, find, For, from, GET, html, https, import, in, jp, link, mode, News, open, parser, php, Python, quot, requests, soup, ｖ, Yahoo, youtube, zip, コード, ソース, タイトル, テキスト, ところ, ニュース, もの, ライブ, リンク, 一覧, 修正, 取得, 場合, 変数, 必要, 抽出, 早朝, 書き方, 理解, 若干, 言語, 記号, 配信,
ANA旅割逆算日導きサービスモバイル版：最終
2016.05.04
<!DOCTYPE html>
<html>
<head>
<title>ANA旅割逆算日導きサービス（mobile）</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="jquery-mobile/jquery.js"></script>
<script src="jquery-mobile/jquery.mobile-1.4.5.min.js"></script>
<style>
.ui-page{
background:#73cbe6;
}
</style>
<script>
$(function(){
$("#ckday").click(function(){
//alert($("#day").val().replace(/\-/g,'\/'));
$.ajax({
type: 'POST',
url: "../ana_calendar/json.php",
data:{day:$("#day").val().replace(/\-/g,'\/')},
dataType: 'json',
success: function(obj){
var str = '<ul id="ana_listview" data-role="listview">\n';
str = str + '<li>予定日：' + obj.anaday + '</li>\n';
str = str + '<li>75日［旅割］の予約期日：' + obj.day75 + '</li>\n';
str = str + '<li>55日［旅割］の予約期日：' + obj.day55 + '</li>\n';
str = str + '<li>45日［旅割］の予約期日：' + obj.day45 + '</li>\n';
str = str + '<li>28日［旅割］の予約期日：' + obj.day28 + '</li>\n';
str = str + '<li>21日［旅割］の予約期日：' + obj.day21 + '</li>\n';
str = str + '</ul>\n';
$("#ana_api").html(str);
$("#ana_listview").listview().listview('refresh'); ;
}
});
});
});
</script>
</head>
<body>
<div data-role="page" data-title="ANA旅割逆算日導きサービス（mobile）">
<!--ヘッダー領域-->
<div data-role="header">
<h1>ANA旅割逆算日導きサービス（mobile）</h1>
</div>
<div role="main" class="ui-content">
<input type="date" id="day">
<button id="ckday" class="ui-btn">逆算する。</button>
<span id="ana_api"></span>
</div>
<div data-role="footer">
<h3>Copyright zip358.com</h3>
</div>
</div>
</body>
</html>ANA旅割逆算日導きサービスモバイル版：最終として webから逆算日を導きだすサービスを公開します。
ほんと・・・簡単なものですので 最初からwebで作れたんじゃねぇっていう疑惑が あると思うです。
webｺﾞﾆｮｺﾞﾆｮ…(ﾉﾟдﾟ(;￣Д￣)っていう誘惑は モバイル版のアプリを作る時からありましたが アプリ作るよって言ったので、有言実行ということで 作ってみました。
作った結果ですけど・・・ ウェブで作れるものはウェブで作ったほうが手間暇かからないという事がわかりました。 http://zip358.com/tool/ana_calendar/?［PC］
zip358.com/tool/ANAmobile/?[モバイル] ?
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
1.0, 1.4.5, 8, ANA, charset, content, css, device-width, DOCTYPE, gt, head, href, html, http, initial-scale, jquery, jquery-mobile, link, lt, meta, min, mobile, name, quot, rel, stylesheet, title, UTF-, viewport, Width, サービス, モバイル, 旅割, 最終, 逆算,