cssとjsを動的に読み込むソースコード２。#jscode
2022.11.11
おはようございます、すずめの戸締まりを本日、観に行きますという事で本日はお休み。感想は帰ったら別途書きます。
以前、ファイルを動的に再読み込みする方法という記事を書きまして、この記事がまぁまぁプレビュー数を取ってくれているので、ソースコードを書き直しました。以前と違うのは正規表現を見てくれればわかるかと思いますが、パラメータを初期からもっているJSファイルやCSSファイルは対象外にしている所です。
メンターがいない中、コードを見直したりするのはやっぱ時間がかかるものですね。いつも自分に必要なのはメンターだと思ったりしますが、なんだかそういう人が見当たらないですよね。やはり東京や大阪にいかないと見つけられないのかな？、今ではSNSがあるから見つけやすくなっているものの、自分よりも５０％ぐらい技術力がある人がいないですよね。凄い技術力が上の人は知っているのだけども、そういう人の話を聞いてもさっぱりなので・・・。
近くにいないものなのかな、よく灯台下暗しという言葉もあるからいそうな気がするですけどね🫠。
ソースコードはこちらです。
"use strict";
document.querySelector("button").addEventListener("click",jsandcssreload);
function jsandcssreload(){
let d = (new Date()).getTime();
[...document.querySelectorAll("link")].forEach((elm)=>{
elm.href = elm.href.replace(/(\.css)\??[0-9]{0,}$/,".css?" + d);
});
[...document.querySelectorAll("script")].forEach((elm)=>{
elm.src = elm.src.replace(/(\.js)\??[0-9]{0,}$/,".js?" + d);
});
}タグ
2, 50, css, JS, jscode, SNS, お休み, コード, すすめ, ソース, パラメータ, ファイル, プレビュー, メンター, もの, 上, 中, 事, 人, 今, 以前, 初期, 別途, 大阪, 対象, 必要, 感想, 戸締まり, 所, 技術力, 方法, 時間, 本日, 東京, 正規, 自分, 表現, 観, 記事, 話,
データからページネーションが出来る。 #jscode
2022.11.10
おはようございます、昨日は朝が寒く昼間は暑い日でしたね😗。
さて、データからページネーションが出来るライブラリがある事を知りましたのでそちらの紹介と使い方です。今回、使用したのはPagination.jsというライブラリです。使い方は簡単、下記のようなデータがあった場合、このようなソースコードを書いて使用します😮。
[
{
"id": 1,
"name": "白川 正人",
"hiragana": "しらかわ まさと",
"age": "45",
"bday": "1977年04月10日"
},
{
"id": 2,
"name": "大村 麻衣子",
"hiragana": "おおむら まいこ",
"age": "42",
"bday": "1979年12月11日"
},
{
"id": 3,
"name": "大原 静香",
"hiragana": "おおはら しずか",
"age": "53",
"bday": "1969年06月20日"
},
{
"id": 4,
"name": "吉田 佐代子",
"hiragana": "よしだ さよこ",
"age": "40",
"bday": "1982年05月24日"
},
{
"id": 5,
"name": "宮原 和弘",
"hiragana": "みやはら かずひろ",
"age": "22",
"bday": "2000年04月29日"
},
{
"id": 6,
"name": "伊藤 二郎",
"hiragana": "いとう じろう",
"age": "27",
"bday": "1995年02月18日"
},
{
"id": 7,
"name": "井上 明子",
"hiragana": "いのうえ あきこ",
"age": "55",
"bday": "1967年06月26日"
},
{
"id": 8,
"name": "恩田 雄",
"hiragana": "おんだ ゆう",
"age": "37",
"bday": "1985年09月25日"
},
{
"id": 9,
"name": "山崎 幸志",
"hiragana": "やまざき こうじ",
"age": "29",
"bday": "1993年03月24日"
}
] $.extend($.fn.pagination.defaults, {
className: 'paginationjs-theme-blue',
pageSize: 3
});
let url = "json data のurl";
(async () => {
await fetch(url).then((result) => result.json()).then(
(data) => {
data.reverse();
$('#demo').pagination({
dataSource: data,
callback: function (data, pagination) {
var html = table_make(data);
document.querySelector("#tbl").innerHTML = html;
}
})
}
)
})();
function table_make(data) {
return (data.map((element) => {
let str = "";
str += "<tr>";
str += ((Object.keys(element).map(el => "<td>" + element[el] + "</td>")).join(""));
str += "</tr>";
return str;
})).join("\n");
} <div class="col-12" id="demo">
<table class="table table-dark" id="tbl"></table>
</div>コードを抜粋して書きましたが、このコードを書く事とjsのライブラリとcssファイルもダウンロードするようにして下さいね🫠。
因みに自分はこのライブラリを初めて使用しましたが、結構使いやすいですね。今まで開発ではLaravelなんかのページネーションを使用していた事はありますが、フロント側で出来る事を知り驚きを隠せませんというのは大袈裟ですけど使い道は有るなって思います。
タグ
04, １, 10, 1977, 2, 45, age, bday, hiragana, ID, JS, jscode, name, Pagination, qu, quot, コード, しらかわ, ソース, そちら, データ, ネーション, ページ, まさと, ライブラリ, 下記, 事, 今回, 使い方, 使用, 場合, 日, 昨日, 昼間, 朝, 正人, 白川, 簡単, 紹介,
Gドライブの画像仕分けがGASを使うと楽すぎでした！ #gas #jscode
2022.11.09
おはようございます。昨日は暖か陽気でしたね～？、今日はどうかな？🤔
今日はGoogleドライブで画像仕分けが楽すぎた件を書いていきます。GASとはgoogle apps scriptの略です、このGASを使用するとGmailやスプレッドシート、Googleドキュメント等をプログラムで操作出来ちゃうサービスです。尚、プログラムコードはjavascriptベースになっていてとても書きやすいです。
function imagesDrive() {
//画像を仕分けフォルダID googleドライブURL->adaoiujxzouaunWxz33oam__ （ランダム英数字記号の部分）
const folder = DriveApp.getFolderById('画像を仕分けフォルダID');
//移動先のフォルダID googleドライブURL-> UQIJjaoskamlqaxalp98swq--e （ランダム英数字記号の部分）
const imgfolder = DriveApp.getFolderById('移動先のフォルダID');
let hasfiles = folder.getFiles();
while(hasfiles.hasNext()){
let hasfile = hasfiles.next();
if(/(\.png|\.jpg)$/.test(hasfile.getName())){
hasfile.moveTo(imgfolder);
}
}
}今回、上記のようなコードを書いてサクサクと画像の仕分けを行いました。正規表現パターンを変えたりする事で任意の文字列ファイルだけを別フォルダに移動したりコピー、または削除したりすることも可能です（※コードの追加や変更が必要）。GASのエディタではコード補完機能もあるので初めての方でもプログラマーなら何とかなると思います。
プログラム初心者の方へ、jpg,png,gif等をそれぞれのフォルダに別けたい場合はどのようなコードを書いたら良いでしょうか？上記のコードをヒントにコードを書いてみて下さい。回答に関しては下記に一つの答えとして書いています。
function imagesDrive() {
//画像を仕分けフォルダID googleドライブURL->adaoiujxzouaunWxz33oam__ （ランダム英数字記号の部分）
const folder = DriveApp.getFolderById('画像を仕分けフォルダID');
//移動先のフォルダID googleドライブURL-> UQIJjaoskamlqaxalp98swq--e （ランダム英数字記号の部分）
let folderId = {png:'移動先のフォルダID1',jpg:"移動先のフォルダID2",gif:"移動先のフォルダID3"};
Object.keys(folderId).forEach((keyname)=>{
let imgfolder = DriveApp.getFolderById(folderId[keyname]);
let hasfiles = folder.getFiles();
while(hasfiles.hasNext()){
let hasfile = hasfiles.next();
let r = new RegExp("(\."+ keyname + ")$");
if(r.test(hasfile.getName())){
hasfile.moveTo(imgfolder);
}
}
});
}タグ
33, 39, adaoiujxzouaunWxz, apps, const, DriveApp, folder, function, GAS, getFolderById, Gmail, Google, gt, ID, imagesDrive, javascript, jscode, oam, script, UQIJjao, url, コード, サービス, シート, スプレッド, ドキュメント, ドライブ, フォルダ, プログラム, ベース, ランダム, 今日, 件, 使用, 操作, 昨日, 画像, 略, 移動, 英数字, 記号, 部分, 陽気,