コード書き初め、そろそろネタが尽きてきたよ「始め」！？
2022.01.03
コード書き初めは何が良いのかなぁなどと考えておりましたが、やはりこれかなっていう事で文字のグラデーションを徐々に変えてい行くものを作ってみました。IEとかでは動きませんが、最新のChromeやFirefox、エッジなどでは動くかなと思います。ソースコードを写景してみて、コードの動きがわかればソースコードを変更していろいろと試してみてください。
動作はこちらから確認くださいませ。
https://zip358.com/tool/demo51/
尚、このコードは２０２１年の１２月２８日に書いたものになります。
<!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">
<title>Happy New Year 2022</title>
<style>
body{
background-color: black;
}
#HNY{
font-weight: bold;
font-size: 222px;
}
</style>
</head>
<body>
<h1 id='HNY'>Happy New Year 2022</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.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>
let color1 =["40","E0","D0"];
let color2 =["FF","8C","00"];
let color3 =["FF","00","80"];
let postion =[2,0,1];
setInterval(() => {
if((parseInt(color1[postion[0]],16) + 1)<255){
color1[postion[0]] = (parseInt(color1[postion[0]],16) + 1).toString(16);
}else{
color1[postion[0]] = (100).toString(16);
postion[0]--;
}
if((parseInt(color2[postion[1]],16) + 1)<255){
color2[postion[1]] = (parseInt(color2[postion[1]],16) + 1).toString(16);
}else{
color2[postion[1]] = (50).toString(16);
postion[1]--;
}
if((parseInt(color3[postion[2]],16) + 1)<255){
color3[postion[2]] = (parseInt(color3[postion[2]],16) + 1).toString(16);
}else{
color3[postion[2]] = (80).toString(16);
postion[2]--;
}
for(key in postion){
if(postion[key]<=-1){
postion[key] = 2;
}
}
//console.log(`#${color1.join("")}, #${color2.join("")}, #${color3.join("")}`);
document.getElementById('HNY').style = `
color: #FF8C00;
background: -webkit-linear-gradient(0deg, #${color1.join("")}, #${color2.join("")}, #${color3.join("")});
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
`;
}, 70);
</script>
</body>
</html>タグ
12, 2021, 28, 8, cGLonkCQ, charset, Chrome, com, D-, DOCTYPE, Firefox, gt, head, html, https, IE, ja, lang, lt, meta, name, quot, UTF-, viewport, watch, www, youtube, いろいろ, エッジ, グラデーション, コード, こちら, これ, ソース, ネタ, もの, 事, 何, 写, 動作, 変更, 文字, 景, 書き初め, 最新, 確認,
遅いぐらいだけどES2015(ES6)が使い出せそう。js(java script)の話。
2021.09.30
今日は清々しい朝ですね、久しぶりに高知県、晴れましたね。
さて、遅いぐらいだけどES2015(ES6)が使い出せそう。js(java script)の話。田舎では古いブラウザを使用している人が、いたりしてIE（インターネットエクスプローラー）をたまに使用している。だけど今回、 WindowsがWindows11にアップグレードされる事により、IEは廃止されるので堂々とES2015(ES6)以降の技術が使用できるようになる。これで現場は結構、自由に動けるようになるとおもいます。
それぐらいIEは一昔前のものだと思っています・・・。さらばIE！！
ES6ではやっとclassが使用できるようになっているので開発者としては、とても便利ですよ。今までfunctionで書いていたものをclassで置き換えたいぐらいです！！因みにclassの中の関数にはfunctionと記載すると動かないので関数名だけを記載しましょう・・・。
また、ES6対応のブラウザ一覧表はこちらから参照してください。
http://kangax.github.io/compat-table/es6/
最後にサンプルとしてコードを記載します。
https://zip358.com/tool/demo42/
class main{
constructor(foo){
this.name = foo;
}
view() {
document.getElementById("demo42").innerHTML = this.name;
}
}
const m = new main("ES6");
m.view();タグ
11, 2015, 6, 7, 8, class, com, ES, function, https, IE, java, JS, L-, script, T-HGdc, watch, Windows, www, youtube, アップ, インターネット, エクスプローラー, グレード, これ, それぐらい, たま, ブラウザ, もの, 一, 久しぶり, 事, 人, 今回, 今日, 以降, 使用, 便利, 廃止, 技術, 昔, 朝, 現場, 田舎, 自由, 話, 開発者, 高知県,
なるほど、よくわかりました。
2021.02.22
そういう事だったんだね。いまごろ理解する、いろいろな方法で非同期処理ができるだなと、ちなみにIE11でもPromiseは使用することが出来るみたい。そのかわりライブラリを読み込む必要はあるけれど・・・。IE11を開くとエッジを使用しようと勧めてくる。そろそろIEを強制的に削除すればいいのにと思っています。IEだとjsも制限が出てくるだよね。とくにコードを書くときにグレイヴ・アクセントとかいう記号「`」が使用できないのは痛いなと思います。
タグ
11, IE, JS, Promise, アクセント, いま, いろいろ, エッジ, かわり, グレイヴ, コード, こと, とき, ライブラリ, 事, 使用, 処理, 制限, 削除, 同期, 必要, 方法, 理解, 記号,
JavaScriptを再勉強しているのだが、ある疑惑が！？
2020.06.03
JavaScriptを再勉強しているのだが、ある疑惑が生まれた。それはjqueryで良いじゃねぇという疑惑。自分はjsよりjqueryの方が使いやすく感じる。まぁいまの所なのかもしれないが・・・使いやすいですね。
jqueryはいろいろなブラウザ上で動くことをサポートしてくれるライブラリとして普及したのだけど、IEが消滅時効状態のいまではシェア率は下がっていてネイティブJSが良いじゃねぇという動きですが・・・。いやいやjqueryの方が楽だしコードはあまり書かなくて良い。特にイベント処理時のデータの複数受け渡しでは、今の所、JavaScriptよりjqueryの方が楽だと思います。
あと非同期通信とかもね。ajaxで良いじゃねぇとか思いますよ。
最後に動画のJSコードを載せときますね。
document.getElementById("my-textarea").addEventListener("input",()=>{
document.getElementById("view").innerText = document.getElementById("my-textarea").value;
});タグ
addEv, ajax, document, getElementById, IE, javascript, jquery, JS, my-textarea, quot, イベント, いま, いやいや, いろいろ, コード, こと, サポート, シェア, それ, データ, ネイティブ, ブラウザ, ライブラリ, 今, 処理, 勉強, 動画, 同期, 所, 方, 時効, 普及, 最後, 消滅, 状態, 疑惑, 自分, 複数, 通信,
vue.jsとreact.jsをお触りしているのですが?。
2020.02.13
vue.jsとreact.jsをお触りしてみて、どちらが難しいかといえばreact.jsかなと思いますが、すごく難しいわけでもない。vue.jsはjqueryがサクサク使えていて概念も大体把握していて、オリジナルプラグインも作れるよという方にはそれほど難しいとは感じないと思います。vue.jsの概念さえ理解できればあとは、vue.jsの仕様やドキュメントみれば、慣れれば使いこなす事は簡単だと思います。
react.jsは、JSXの事をちゃんと理解すれば使いこなす事はまぁ可能かなと思います。いま、web業界ではreact.jsとかゴニョゴニョ使える人が重宝されるみたいですよ。というか、もうjqueryとかオワコンと都会では業界人が言ってそうですね。ただ、そんな古いコードが田舎では動いてますし田舎の零細企業では、未だにIEの事をいう人がいる。そろそろIEの呪いから解き放たれたいですね…。マイクロソフトはいまの社長さんになってかなりマイクロソフト変わったのでWEB業界では、有り難い存在だと自分は勝手に思ってます。
タグ
IE, jquery, JS, JSX, react, vue, web, あと, いま, オリジナル, オワコン, かな, コード, ゴニョゴニョ, ドキュメント, どちら, プラグイン, マイクロソフト, わけ, 事, 人, 仕様, 企業, 可能, 呪い, 大体, 把握, 方, 業界, 業界人, 概念, 理解, 田舎, 社長, 簡単, 都会, 重宝, 零細,
もし今、自分が小学生だったら自由研究でこんなの作ってると思いたい。
2019.08.24
もし今、自分が小学生だったら自由研究でこんなの作ってると思いたい。
自動で九九表を生成するjQueryなんかを作ってそう。
(いまの小学生が羨ましいなw夏休み一日中ネットに浸っているだろう）
デモサイトはこちら
https://zip358.com/tool/demo5/index-12.php
<!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">
<title>九九表</title>
<link rel="stylesheet" href="../MDB-Free_4.8.5/css/bootstrap.css" >
<link rel="stylesheet" href="../MDB-Free_4.8.5/css/mdb.css" >
<link rel="stylesheet" href="../fontawesome-free-5.9.0-web/css/all.css">
<script src="../jquery/jquery-3.4.1.js"></script>
</head>
<body>
<form>
<div class="form-group">
<label for="exampleInputEmail1">数字を入力してください</label>
<input type="text" class="form-control" id="inp" aria-describedby="inp" placeholder="数字を入力してください(デフォルト(9))">
<small id="emailHelp" class="form-text text-muted">1以下の数字、数字以外、または桁が2桁を超えた場合デフォルトを表示します</small>
</div>
</form>
<span id="tbl99"></span>
<script>
$(function(){
var cc = function(){
var c=$(this).val().match(/[0-9]{1,2}/) && Number($(this).val())>1?$(this).val():9;
$("#tbl99").html(c99(c));
return c;
};
$("#tbl99").html(function(){
c99($("#inp").val(cc));
});
$("#inp").on("keyup",cc);
$("#inp").on("keydown",cc);
});
function c99(c){
var str="<h1><span class="badge badge-primary">九九表</span></h1>";
var x = y = c;
str+="<table class="table table-striped table-dark table-bordered">";
for(var i=1;i<=x;i++){
str+="<tr>";
for(var ii=1;ii<=y;ii++){
var s = i * ii;
str+="<td>" + i + " × " + ii + " = " + s + "</td>";
}
str+="</tr>";
}
str+="</table>";
return str;
}
</script>
</body>
</html>タグ
aria-describedby, cc, content, css, device-width, function, IE, Ii, initial-scale, inp", jquery, lt, match, Number, placeholder, quot, STR, stylesheet", val,
変なコードを書いてしまった。それはいつものこと（笑）
2019.08.10
変なコードを書いてしまった。
PHPにstr_repeatという関数が存在しているのだけど
何のために使用するのか全然わからない。関数の内容は任意の文字を
指定回数、繰り返した文字列として返してくれるというものです。
試しにその関数を使用し変なコードを書きました。
茶目っ気ですので…。これがPCに負担がかかるとか
無限ループとかの処理にすると御縄なんでしょうけど・・・。
サンプルコードはこちらから
https://zip358.com/tool/demo5/index-11.php
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="../jquery.tubular.1.0.1/js/jquery.tubular.1.0.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery.tubular.1.0.1/css/screen.css">
<script>
$('document').ready(function() {
var options = {
videoId: '760lRwLKFF0',
mute: true,
};
$('#bgmovie').tubular(options);
});
</script>
<style>
body{
background-color: #000;
color: #fff;
font-size: 80px;
line-height: 80px;
}
p{
color: #38a9c5;
}
</style>
</head>
<body>
<div id="bgmovie">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<?php
$str = str_repeat("高知 よさこい 踊る,",7);
var_dump(str_getcsv($str));
?>
<p class="oshite" data-oshite="<?=$str?>"style="text-decoration: underline">▼おして知るべし</p>
※おして知るべしをクリックすると7ウィンドウ開きますよ！！
<?php
foreach(str_getcsv($str) as $val){
?>
<?php
}
?>
</div>
<script>
$(function(){
$(".oshite").on("click",function(){
let oshite = $(this).attr("data-oshite").split(",");
for(var i = 0 ; i < oshite.length ; i++){
if(oshite[i]!==""){
window.open("https://twitter.com/search?src=typed_query&q=" + encodeURIComponent(oshite[i]));
}
}
});
});
</script>
<script src='https://vjs.zencdn.net/7.6.0/video.js'></script>
</body>
</html>タグ
--, 11, 358, 5, 7, 8, ９, class, com, demo, DOCTYPE, endif, gt, html, IE, if, index, lt, lt-ie, no-js, PC, php, repeat, STR, tool, zip, いつも, コード, こちら, こと, これ, サンプル, それ, ため, もの, ループ, 任意, 何, 使用, 内容, 処理, 回数, 変, 存在, 指定, 文字, 文字列, 無限, 縄, 茶目っ気, 負担, 関数,
TinyMCE 5.0でwindowManager.openUrl使用してコードの送受信。
2019.08.03
TinyMCE 5.0の記事が好評だったので前回に続き、windowManager.openUrl使用してコードの送受信の内容を記載します。あくまでもサンプルコードです。プログラムなので他にもやり方はあると思います。前回の記事に勘どころは記載していますので割愛します。尚、自分は英語がダメダメですが幸いコードを読む力はある程度あるので何とかなりました。サンプルコードを記載しますので解析してみてください。
PHP＆HTMLコード
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/tool/bootstrap/css/bootstrap.css">
<script src="/tool/jquery/jquery-3.4.1.js"></script>
</head>
<body>
<form method="post">
<textarea name="htmlcode1" class="form-control">
<?php
echo urldecode($_GET["sdata"]);
?>
</textarea>
<input type="button" name="submitbtn" value="htmlcode-submit"class="btn btn-primary">
</form>
<script>
var chageJson = function(data) {
console.log(data);
var JsonData = [];
for (i = 0; i < data.length; i++) {
if(/htmlcode/.test(data[i].name)){
data[i].value = encodeURIComponent(data[i].value);
}
JsonData[data[i].name] = data[i].value
}
//console.log(JSON.stringify(data));
return JsonData;
}
$("[name=submitbtn]").on("click",function(){
data = chageJson($("form").serializeArray());
window.parent.postMessage({ mceAction: 'customAction',data:data});
window.parent.postMessage({ mceAction: 'close' });
});
</script>
</body>
</html>jsコード
(function() {
tinymce.create('tinymce.plugins.btxt', {
init : function( ed, url) {
//console.log(ed);
act = function(e)
{
//console.log("e=",encodeURIComponent(e.selection.editor.getContent()));
ed.windowManager.openUrl(
{
type: 'panel',
title: 'HTMLCODE',
url:url + "/btxt.php?sdata=" + encodeURIComponent(e.selection.editor.getContent()) ,
onMessage:function(api, details){
console.log(e);
//console.log('htmlcode1',decodeURIComponent(details.data.htmlcode1));
// var editorInstance = tinymce.editors[0];
e.selection.editor.setContent(decodeURIComponent(details.data.htmlcode1));
}
}
);
};
ed.ui.registry.addButton('btxt',{
title : 'htmlcode',
text: 'htmlcode',
onAction:function(){act(ed)}
});
},
getInfo : function() {
return {
longname : 'tinymce.plugins.btxt',
author : 'taoka',
authorurl : 'https://zip358.com',
infourl : 'https://zip358.com',
version : '1.0'
};
}
});
tinymce.PluginManager.add('btxt', tinymce.plugins.btxt);
})();タグ
--, 5.0, 7, 8, ９, class, DOCTYPE, endif, gt, html, IE, if, lt, lt-ie, no-js, openUrl, php, quot, TinyMCE, windowManager, コード, サンプル, ダメダメ, プログラム, やり方, 他, 使用, 内容, 前回, 割愛, 力, 勘どころ, 好評, 自分, 英語, 解析, 記事, 記載, 送受信,
やっぱりChromeなんだなぁ・・・いまのブラウザ1位は。
2017.07.28
いまのブラウザの覇王はGoogle Chromeなんだなぁと
ネットの可視化しているサイトを観ていると思う、次にシェアが高いのは
Safariだけど、圧倒的にGoogle Chrome強しですね。
いっその事、みんな同じブラウザを使って欲しい、もしくは
同じふるまいが出来るようにして欲しいですね、ブラウザエンジニアは
同じもので、ブラウザの操作機能は各社違うようにするとか・・・。
特にIEは何だかんだ言って問題児です、特に古いバージョンになると
IEだけ独特の振る舞いしてくれます、IEだけ見栄えが違ったり
動作しなかったりと、フロントエンドエンジニア泣かせかなと感じます。
このグラフ見ていると、まだまだデスクトップは健在なんだということも分かります。
モバイルファーストとか言われているけれど、まだまだデスクトップも頑張っていらっしゃる。
ちなみにグーグルを制するものがウェブを制すると言われていますが、
この頃は、アプリを制するものがウェブを制するとも言われてきています。
要するにアプリ完結の時代が来ていたりします。
専門的な情報を得るには、検索サイトを使わず、アプリを使用して
情報を得るという流れになってきているのだとか。
https://www.youtube.com/watch?v=LUDmC8LrnPk
タグ
Google Chrome, IE, アプリ, アプリ完結, インタフェースデザイン, ウェブ, グーグル, デスクトップ, ブラウザ, ブラウザエンジニア, ふるまい, フロントエンドエンジニア泣かせ, モバイルファースト, 古いバージョン, 問題児, 振る舞い, 覇王, 見栄え,
パスワードのチョメチョメ（***）が見えるソフト（Windows）はこれ(ﾉ´∀｀*)
2015.01.13
パスワードのチョメチョメ（***）が見えるソフト（Windows）はこれです。
PasswordEyeというソフトです、結構、役に立ちます。ちなみにブラウザ上の
パスワードはIE以外は対応してないだとか。あくまでもWindowsソフトのチョメチョメ（***）が
見えるソフトです。ちなみにFirefoxの場合はブラウザ上のパスワード部分が
覗ける拡張アプリが存在したことを覚えています。
余談ですが、よく巷でパスワードが流出したとか言う記事を見かけると思いますが
絶対にDB上からパスワード流出しない会社があります。その中の一つに
グーグル社がはいってるとか・・・・。
パスワードに暗号化をかけるのはどの会社も行っている
事だと思いますが、暗号化したものは基本的に復号化する事が可能だと
思います。そうではないモノのもありますが・・・。どうもグーグル社の場合は
グーグル社のサーバー上でしか復号化できないような仕様になっているらしく
社外にパスワード情報が流出しても復号化は不可能らしいのです。
ちなみに世界的に有名なポータルサイトを列挙しときます。
日本ではYahooのシェア率が高いみたいですが、世界的にはグーグルが
トップです。
追記
たまには日本以外のポータルサイトを覗いてみるのも結構たのしいですよ。
ちなみにこれが国別Yahooのポータルサイトのアドレスです。
https://everything.yahoo.com//world/
タグ
db, Firefox, IE, PasswordEye, Windows, アプリ, グーグル, こと, これ, サーバー, ソフト, チョメチョメ, パスワード, ブラウザ, もの, 一つ, 上, 中, 事, 仕様, 以外, 会社, 余談, 可能, 場合, 存在, 対応, 巷, 役, 復号, 拡張, 暗号化, 流出, 社, 記事, 部分,