gt | zip358.com - パート 3

tailwind-cssで画面中央に表示するクラスはこれ、中央表示でググっても。

2022.02.08

この頃、Bootstrapからtailwind-cssに変えようと奮闘中で勉強中です。そんな中でググっても中々ヒットしなかった事を紹介します。

tailwind-cssで画面中央に表示する方法を中央表示でググっても画面中央表示がヒットしなかったのは、少しやっかいだなって思いました。何でも検索出来るGさんですが、何度か自分はNot Foundページを見たことがあります。つい最近のNot Foundページは、こんな感じ釣り堀？で釣りをしている宇宙人さんみたいなが表示されます、そしてちょっとした操作が出来ます😌。

脱線した話をもとに戻して…tailwind-cssで画面中央に表示したい場合は、このクラスを付与すると良いですよ😏。

<div class="h-screen w-screen flex justify-center items-center">
    <p>center</p>
</div>

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2022年02月08 06:15日

タグ

Bootstrap, center&lt, div class, div&gt, gt, Gさん, h-screen w, justify-center items-center&quot, lt, Not Foundページ, p&gt, quot, screen flex, tailwind-css, クラス, もと, 奮闘中, 感じ釣り堀, 操作, 画面中央,

コード書き初め、そろそろネタが尽きてきたよ「始め」！？

2022.01.03

Logging

コード書き初めは何が良いのかなぁなどと考えておりましたが、やはりこれかなっていう事で文字のグラデーションを徐々に変えてい行くものを作ってみました。IEとかでは動きませんが、最新のChromeやFirefox、エッジなどでは動くかなと思います。ソースコードを写景してみて、コードの動きがわかればソースコードを変更していろいろと試してみてください。

Rewind 2021 – Love of the Code

動作はこちらから確認くださいませ。

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>

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2022年01月03 06:00日

タグ

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, いろいろ, エッジ, グラデーション, コード, こちら, これ, ソース, ネタ, もの, 事, 何, 写, 動作, 変更, 文字, 景, 書き初め, 最新, 確認,

WordPressのapply_filtersを使うと便利ですよ。

2021.11.29

Logging

明日（2021/11/30）は高知県は雨が降るそうです、冬の雨はあまり自分は好きではないです・・・。どんより曇り空よりかはマシですけどね。

さて「WordPressのapply_filtersを使うと便利ですよ。」というお話です、有名なプラグインにはapply_filtersが大体あるので、それを使ってプラグインに自分のオリジナル処理を割り込むことが可能です。では、 apply_filtersはどんな動作をするかと言えば、独自のフィルターを登録するときに使用します。

なので、add_actionを使って登録されている独自のフィルター名を参照することで外部のプラグインに変更処理を行うこと等が可能になります。

<?php apply_filters( $tag, $value, $var ... ); ?>

<?php add_action( $hook, $function_to_add, $priority, $accepted_args ); ?>

apply_filtersとadd_filterがどういう物なのかを完結に説明しているサイトが有りましたので、リンクを記載しときます。

https://blog.z0i.net/2016/11/apply-filters-add-filter.html

余談：ある有名なプラグインのコードを読んでいて、自分がプラグインを作るときにもapply_filtersなどを記載しておくと開発者に使用していただける確率は高くなるなと感じました。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年11月29 05:42日

タグ

11, 2021, 30, Action, Add, apply, filters, function, gt, hook, lt, php, tag, To, value, var, WordPress, オリジナル, お話, こと, それ, とき, フィルター, プラグイン, まし, 使用, 便利, 冬, 処理, 動作, 参照, 可能, 変更, 外部, 明日, 曇り空, 有名, 登録, 自分, 雨, 高知県,

JS（javaScript）ファイルを動的に再読み込みする方法。

2021.10.13

Logging

今日は朝からメールで書類提出してクラウドワークスの仕事に何か良いものはないかなどを見ておりましたがありません?。

さて、JS（javaScript）ファイルを動的に再読み込みする方法のオリジナルコードを書きましたので、お裾分けします。前々の会社で JS（javaScript）ファイルを動的に再読み込みしないとJSが動作しないという何ともやるせない気持ちの仕様があり、その時は人様のコードを拝借して使っていましたが、今日はクラウドワークスなどの案件もないのでちゃちゃっと自分でコードを書きました?。同じように困っている方はご使用くださいな?

https://zip358.com/tool/demo67/

ちょっと愚痴?
そもそも前々の会社のオリジナルMVCはいろいろと欠陥だらけで且つ仕様書もない、何が正解なのかも教えてもらえない中、修正やらしていたので本当に大変でした。聞いても明確に答えてもらえないのは正直な所、大変です。後任にはちゃんと教えていたら良いのですがね。

"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);
    });    
}

上手く行かなかった場合の対応．

[...document.querySelectorAll('script')].forEach(elm => {
        let script = document.createElement('script');
        script.src = elm.src;
        document.body.appendChild(script);   
});

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年10月13 11:09日

タグ

'src', addEventListener, createElement, css, document.querySelector, document.querySelectorAll, elm, foreach, getTime, gt, href, javascript, jsandcssreload, quot, quot;button&quot, quot;use, script, src.replace, strict&quot, 後任,

数珠繋ぎにTweet（リプライ）するPHP言語のコードは意外にも簡単。

2021.08.28

Logging

先日、高知県はコロナ感染症が111人になったそうです。早くコロナワクチン接種?2回目を打ちたいです、ただファイザー社のワクチンなのでデルタ株のウィルスは軽症化させるだけで無症状や感染しないようにはならないという事です。それでも重症化を防げるので打たないより打った方が良いですね?。なお、混合ワクチン接種が結構無敵だとか？インドではDNAワクチン接種を世界初で承認したみたいですね。新たな変異種も防ぐことが出来れば一気にDNAワクチン接種が世界的に進みそうです。

さて、前置きはここまでとして、数珠繋ぎにTweet（リプライ）するPHP言語のコードは意外にも簡単に書けました、なお、TwitterOAuthというライブラリを使用して呟いています。

作った経緯は数珠繋ぎにする方法などは調べてもヒットしなかったので記載しようと思ったわけです。今回の方法でアファリエイトなどを紹介などや長文のツイートが行えるなどいろいろな用途に使えるかと思います。

※このソースコードはコマンドライン（CUI）から叩かないと（実行）、動かない仕様になっています。

<?php
require_once("../vendor/autoload.php");
use Abraham\TwitterOAuth\TwitterOAuth;
if ($argv[0]) {
    require_once "./tw-config.php";
    $connection = new TwitterOAuth(CONSUMER_KEY, CONSUMER_SECRET, ACCESS_TOKEN, ACCESS_TOKEN_SECRET);
    date_default_timezone_set('Asia/Tokyo');
    $affiliate = json_decode(file_get_contents("./affiliate.json"));
    $id = null;
    foreach ($affiliate->{date("w")} as $key=>$val) {
        $str = $id?array("status"=>$affiliate->{date("w")}[$key]->txt,"in_reply_to_status_id"=>$id):array("status"=>$affiliate->{date("w")}[$key]->txt);
        $res = $connection->post("statuses/update",$str);
        $id = $res->id;
    }
}

{
    "0": [
        {
            "txt": ""
        },
        {
            "txt": "2"
        },
        {
            "txt": "3"
        }
    ],
    "1": [
        {
            "txt": "1"
        },
        {
            "txt": "2"
        },
        {
            "txt": "3"
        }
    ],
    "2": [
        {
            "txt": "1"
        },
        {
            "txt": "2"
        },
        {
            "txt": "3"
        }
    ],
    "3": [
        {
            "txt": "1"
        },
        {
            "txt": "2"
        },
        {
            "txt": "3"
        }
    ],
    "4": [
        {
            "txt": "1"
        },
        {
            "txt": "2"
        },
        {
            "txt": "3"
        }
    ],
    "5": [
        {
            "txt": "1"
        },
        {
            "txt": "2"
        },
        {
            "txt": "3"
        }
    ],
    "6": [
        {
            "txt": "1"
        },
        {
            "txt": "2"
        },
        {
            "txt": "3"
        }
    ]
}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年08月28 08:03日

タグ

$affiliate, argv, Asia, connection, CUI, date, foreach, gt, json_decode, lt, null, php require_once, quot, TwitterOAuth, txt, use AbrahamTwitterOAuthTwitterOAuth, val, vendor, アファリエイト, コマンドライン,

WEBスクレイピングで日経平均株価の値を取得するPHPプログラム

2021.05.26

Logging

WEBスクレイピングで日経平均株価の値を取得するPHPプログラムです。下記のようなブログラムを応用してクラウドワークスなどの案件（データ取得の案件）を自分は請け負っています。現在のWEBスクレイピングの相場は1-5万円ぐらいです。PHP言語ではJSがOFFの状態をスクレイピングするのでJS(java script)が動作して表示されているものは取得できないのが難点です。そのような場合はPhantomJSを使用すると良いらしいですが、こちら開発が終了しているライブラリになります。

WEBスクレイピングで日経平均株価の値を取得するPHPプログラム

大手の企業はJSがOFFの状態でも表示できるように設計されている事が多いので大体のデータは取得可能です、例外として大手のショッピングサイト（ECサイト）では、JSをゴリゴリと使用している場合もあるのでスクレイピングする前にブラウザで見栄えの検証（java script OFFの状態）することをオススメします。

<?php
	//WEBスクレイピング
	$url = "https://stocks.finance.yahoo.co.jp/stocks/detail/?code=998407.O";
	$html = file_get_contents($url);
	$dom = new DOMDocument();
	$html = mb_convert_encoding($html, "HTML-ENTITIES", 'UTF-8');
	@$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
	$xpath = new DOMXPath($dom);
	print $xpath->query("//*[@id=\"root\"]/main/div/div/div[1]/div[2]/div[1]/div[2]/div[2]/p[2]/span")->item(0)->textContent;

追記：スクレイピング先のコードが変わればデータは取得出来なくなりますので、ソースコードの変更が必要です。

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年05月26 04:26日

タグ

$dom-&gt, div, dom, gt, gt;textContent, HTML-ENTITIES&quot, item, loadHTML, lt, mb_convert_encoding, NODEFDTD, NOIMPLIED, PhantomJS, php, print, query, quot, quot;root, XPath, プログラム,

Anglesharpというライブラリの話。

2021.03.13

Logging

久しぶりに技術的なお話の記事を書きます。AnglesharpというのはC#などでスクレイピングするときにスクレイピングを補助してくれるライブラリで結構人気のあるライブラリなるようです。スクレイピングするコードは下記のようになります。この書き方が至ってシンプルで書きやすいのではないかなと思っています。

http://anglesharp.github.io/

var Url = $"https://zip358.com/";
var querySelector = $"#index_post_list > li.clearfix.num1.type1 > div > h3";
var document = BrowsingContext.New(Configuration.Default.WithDefaultLoader()).OpenAsync(Url).Result;
var element = document.QuerySelector(querySelector);
Console.WriteLine($"blogtitle is {element.InnerHtml}");

このライブラリはとても良いのですが、一つ問題があります。スクレイピングするのですが・・・これjavascriptがOFFの状態でスクレイピングされるのですね。どうもこのコードではJSがONにはならないようですね。因みに自分はそのことを知っていなかったのでどハマリしました。大手の検索サイトなどはjavascriptがOFFの状態でも閲覧できるようになっている事を知りました、試しにブラウザをOFFの状態にしてみるとソースコードがかなり違っていてJSのONの状態とは情報が差異がある事が理解できると思います。

Anglesharpのコンフィグ設定（init）でエージェントなどを設定してあげると上手くJSがONの状態をスクレイピングすることが可能なのかもしれません。動画を見る限りではまだかもしれません・・・。

AngleSharp NET Headless Browsing

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年03月13 04:47日

タグ

１, ３, 358, anglesharp, BrowsingContext, clearfix, com, Configuration, default, div, document, element, gt, https, index, li, LIST, new, num, OpenAsync, POST, QueryS, querySelector, quot, result, type, url, var, WithDefaultLoader, zip, お話, コード, シンプル, スク, とき, ピング, ライブラリ, レイ, 下記, 久しぶり, 人気, 書き方, 補助, 記事, 話,

asyncとawaitとthenの関係と使い道。

2021.01.27

Logging

asyncとawaitとthenの関係と使い道は？まず、関係性はこの3つでまぁ一つの役割を果たすと考えても良いかもしれません。どんな時に使うかは、例えば、innerHTMLに計算した値を渡したいとか…。いや違うな。同期処理として使うのが正解ですね。尚、asyncとawaitで同期処理とする。

ちなみにIE11では動かない処理なので氣をつけてご使用ください。今どき、IE11なんてと思うかもしれないけど、使っている人がいるから・・・。

document.getElementById("btn").addEventListener("click", async (e) => {
	test1();
	test2();
	test3();
	await test1();
	await test2();
	await test3();
});

function test1() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 1");
			resolve('1');
		}, 3000);
	});
}
function test2() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 2");
			resolve('2');
		}, 2000);
	});
}
async function test3() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 3");
			resolve('3');
		}, 100);
	});
}

IE11を使っているパターン、例えば社長や上司がシニア世代だったりするとIE11をいまだに使っていたりする。そもそもWindows10にIE11がインストールされている時点で悪だ・・・と思う開発者もいるはずです。そろそろマイクロソフト、IE11なんてものを強制的に削除するようなバージョンアップをして戴きたいと思ってます。それぐらい問題だと。あと、IE11で引っかかったことがあります。新しいブラウザでは下記のコードをHTMLに記入すると察してくれてjsファイルを読み込んでくれるが、IE11は違うのだ。

<script src="./assets/js/common.js"></script>

これじゃ読み込んでくれない。厳密に書かないとファイルを読み込んでくださらない。やっぱ早くIE11の撲滅を願う。

<script type="text/javascript" src="./assets/js/common.js"></script>

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2021年01月27 07:47日

タグ

'src', addEventListener, assets, async, asyncとawait, await, await test, common.js&quot, document.getElementById, gt, innerHTML, lt, quot, quot;btn, quot;text, resolve, setTimeout, then, 撲滅, 氣,

Yahoo japanサイトのコロナ情報リンク集です。好評に付きVer2。

2020.12.21

Logging

Yahoo japanサイトのコロナ情報リンク集です。好評に付きバージョン2を
作成しました。見た目はこんな感じです。県名をクリックするとYahoo!japanのコロナサイトの
画面が開きます(遷移します)。ほんとは、Yahoo!データをウェブスクレイピングしようと思ったのですが、別にそこまでする必要はないかなと思いとどまり、いまに至っています。
データは国もJSONで公開していますのでわざわざ作ることもないのですけど、自分が見やすいように、時間があれば改善していきます。

追記：時間があったので改善しました。

https://zip358.com/tool/COVID-19-japan/

var ken_json = {};
fetch("./assets/js/ken47.json").then(response => response.json()).then((data)=>{
	let ken = [];
	for (const key in data) {
		ken.push("<a href='#' onClick='c19(\"" + "https://hazard.yahoo.co.jp/article/covid19" + data[key].roman +"\")' onmouseover='c19_f(\"" + data[key].roman.toUpperCase() + "\",\"red\")'' onmouseout='c19_f(\"" + data[key].roman.toUpperCase() + "\",\"#fff\")'>" + data[key].name + "</a>");
	}
	document.getElementById("covid19-link-list").innerHTML = ken.join(",");
	for (const key in data) {
		document.getElementById(data[key].roman.toUpperCase()).setAttribute("fill","#fff");
	}
});

function c19(url){
	window.open(url,"_blank");
}
function c19_f(kenid,color){
	document.getElementById(kenid).setAttribute("fill",color);
}

{
	"1": {
		"name": "北海道",
		"roman": "hokkaido"
	},
	"2": {
		"name": "青森",
		"roman": "aomori"
	},
	"3": {
		"name": "岩手",
		"roman": "iwate"
	},
	"4": {
		"name": "宮城",
		"roman": "miyagi"
	},
	"5": {
		"name": "秋田",
		"roman": "akita"
	},
	"6": {
		"name": "山形",
		"roman": "yamagata"
	},
	"7": {
		"name": "福島",
		"roman": "fukushima"
	},
	"8": {
		"name": "茨城",
		"roman": "ibaraki"
	},
	"9": {
		"name": "栃木",
		"roman": "tochigi"
	},
	"10": {
		"name": "群馬",
		"roman": "gunma"
	},
	"11": {
		"name": "埼玉",
		"roman": "saitama"
	},
	"12": {
		"name": "千葉",
		"roman": "chiba"
	},
	"13": {
		"name": "東京",
		"roman": "tokyo"
	},
	"14": {
		"name": "神奈川",
		"roman": "kanagawa"
	},
	"15": {
		"name": "新潟",
		"roman": "niigata"
	},
	"16": {
		"name": "富山",
		"roman": "toyama"
	},
	"17": {
		"name": "石川",
		"roman": "ishikawa"
	},
	"18": {
		"name": "福井",
		"roman": "fukui"
	},
	"19": {
		"name": "山梨",
		"roman": "yamanashi"
	},
	"20": {
		"name": "長野",
		"roman": "nagano"
	},
	"21": {
		"name": "岐阜",
		"roman": "gifu"
	},
	"22": {
		"name": "静岡",
		"roman": "shizuoka"
	},
	"23": {
		"name": "愛知",
		"roman": "aichi"
	},
	"24": {
		"name": "三重",
		"roman": "mie"
	},
	"25": {
		"name": "滋賀",
		"roman": "shiga"
	},
	"26": {
		"name": "京都",
		"roman": "kyoto"
	},
	"27": {
		"name": "大阪",
		"roman": "osaka"
	},
	"28": {
		"name": "兵庫",
		"roman": "hyogo"
	},
	"29": {
		"name": "奈良",
		"roman": "nara"
	},
	"30": {
		"name": "和歌山",
		"roman": "wakayama"
	},
	"31": {
		"name": "鳥取",
		"roman": "tottori"
	},
	"32": {
		"name": "島根",
		"roman": "shimane"
	},
	"33": {
		"name": "岡山",
		"roman": "okayama"
	},
	"34": {
		"name": "広島",
		"roman": "hiroshima"
	},
	"35": {
		"name": "山口",
		"roman": "yamaguchi"
	},
	"36": {
		"name": "徳島",
		"roman": "tokushima"
	},
	"37": {
		"name": "香川",
		"roman": "kagawa"
	},
	"38": {
		"name": "愛媛",
		"roman": "ehime"
	},
	"39": {
		"name": "高知",
		"roman": "kochi"
	},
	"40": {
		"name": "福岡",
		"roman": "fukuoka"
	},
	"41": {
		"name": "佐賀",
		"roman": "saga"
	},
	"42": {
		"name": "長崎",
		"roman": "nagasaki"
	},
	"43": {
		"name": "熊本",
		"roman": "kumamoto"
	},
	"44": {
		"name": "大分",
		"roman": "oita"
	},
	"45": {
		"name": "宮崎",
		"roman": "miyazaki"
	},
	"46": {
		"name": "鹿児島",
		"roman": "kagoshima"
	},
	"47": {
		"name": "沖縄",
		"roman": "okinawa"
	}
}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年12月21 01:49日

タグ

19, 2, 358, 47, assets, com, covid, fetch, gt, https, JAPAN, JS, json, ken, quot, response, then, tool, var, ver, www, Yahoo, zip, ウェブ, クリック, こと, コロナ, サイト, スク, そこ, データ, バージョン, ピング, ほんと, リンク集, レイ, わざわざ, 作成, 公開, 国, 好評, 必要, 情報, 感じ, 改善, 時間, 画面, 県名, 自分, 見た目, 追記, 遷移,

Yahooが567（コロナ）の情報を取り扱っているそれも県単位でURLまとめたよ。

2020.12.20

Logging

Yahooが567の情報を取り扱っている。567（コロナ）を県単位で情報を配信しているまとめリンクサイトを作りましたので、ご自由にお使いください。
リンクはこちらです。https://zip358.com/tool/demo28/

ソースコードとJSONを貼っときます。IT土方さんみたいな事をした?。

<script>
	fetch("./assets/js/ken47.json").then(response => response.json()).then((data)=>{
		let ken = [];
		ken.push('<div class="list-group">');
		for (const key in data) {
			ken.push("<a  class='list-group-item list-group-item-action' href='https://hazard.yahoo.co.jp/article/covid19" + data[key].roman + "' target='_"+ data[key].roman +"'>" + data[key].name +":::https://hazard.yahoo.co.jp/article/covid19" + data[key].roman + "</a>");
		}
		ken.push("</div>");
		document.getElementById("covid19-link-list").innerHTML = ken.join("")
	});
</script>

{
	"1": {
		"name": "北海道",
		"roman": "hokkaido"
	},
	"2": {
		"name": "青森",
		"roman": "aomori"
	},
	"3": {
		"name": "岩手",
		"roman": "iwate"
	},
	"4": {
		"name": "宮城",
		"roman": "miyagi"
	},
	"5": {
		"name": "秋田",
		"roman": "akita"
	},
	"6": {
		"name": "山形",
		"roman": "yamagata"
	},
	"7": {
		"name": "福島",
		"roman": "fukushima"
	},
	"8": {
		"name": "茨城",
		"roman": "ibaraki"
	},
	"9": {
		"name": "栃木",
		"roman": "tochigi"
	},
	"10": {
		"name": "群馬",
		"roman": "gunma"
	},
	"11": {
		"name": "埼玉",
		"roman": "saitama"
	},
	"12": {
		"name": "千葉",
		"roman": "chiba"
	},
	"13": {
		"name": "東京",
		"roman": "tokyo"
	},
	"14": {
		"name": "神奈川",
		"roman": "kanagawa"
	},
	"15": {
		"name": "新潟",
		"roman": "niigata"
	},
	"16": {
		"name": "富山",
		"roman": "toyama"
	},
	"17": {
		"name": "石川",
		"roman": "ishikawa"
	},
	"18": {
		"name": "福井",
		"roman": "fukui"
	},
	"19": {
		"name": "山梨",
		"roman": "yamanashi"
	},
	"20": {
		"name": "長野",
		"roman": "nagano"
	},
	"21": {
		"name": "岐阜",
		"roman": "gifu"
	},
	"22": {
		"name": "静岡",
		"roman": "shizuoka"
	},
	"23": {
		"name": "愛知",
		"roman": "aichi"
	},
	"24": {
		"name": "三重",
		"roman": "mie"
	},
	"25": {
		"name": "滋賀",
		"roman": "shiga"
	},
	"26": {
		"name": "京都",
		"roman": "kyoto"
	},
	"27": {
		"name": "大阪",
		"roman": "osaka"
	},
	"28": {
		"name": "兵庫",
		"roman": "hyogo"
	},
	"29": {
		"name": "奈良",
		"roman": "nara"
	},
	"30": {
		"name": "和歌山",
		"roman": "wakayama"
	},
	"31": {
		"name": "鳥取",
		"roman": "tottori"
	},
	"32": {
		"name": "島根",
		"roman": "shimane"
	},
	"33": {
		"name": "岡山",
		"roman": "okayama"
	},
	"34": {
		"name": "広島",
		"roman": "hiroshima"
	},
	"35": {
		"name": "山口",
		"roman": "yamaguchi"
	},
	"36": {
		"name": "徳島",
		"roman": "tokushima"
	},
	"37": {
		"name": "香川",
		"roman": "kagawa"
	},
	"38": {
		"name": "愛媛",
		"roman": "ehime"
	},
	"39": {
		"name": "高知",
		"roman": "kochi"
	},
	"40": {
		"name": "福岡",
		"roman": "fukuoka"
	},
	"41": {
		"name": "佐賀",
		"roman": "saga"
	},
	"42": {
		"name": "長崎",
		"roman": "nagasaki"
	},
	"43": {
		"name": "熊本",
		"roman": "kumamoto"
	},
	"44": {
		"name": "大分",
		"roman": "oita"
	},
	"45": {
		"name": "宮崎",
		"roman": "miyazaki"
	},
	"46": {
		"name": "鹿児島",
		"roman": "kagoshima"
	},
	"47": {
		"name": "沖縄",
		"roman": "okinawa"
	}
}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年12月20 12:00日

タグ

39, 47, 567, assets, class, const, data, div, fetch, For, gt, in, IT, JS, json, ken, key, let, list-grou, list-group, list-group-item, lt, push, quot, response, script, then, url, Yahoo, コード, こちら, コロナ, サイト, ソース, それ, まとめ, リンク, 事, 単位, 土方, 情報, 県, 配信,

文字の置き換えはよく使うjavascript「吾輩は猫である。」

2020.12.06

Logging

文字の置き換えはよく使う。いろいろな参考書にも文字の置き換えは出てくる基本中の基本だ、そしてコレは結構使うことがある、とくに商品名を整理するときなど、連番に命名を置き換えるなどに使用することがある。EC系のシステム開発ではデーターベースへ製品名（product name）を登録するときなどによく使うのである?が、製品名や商品番号が整っていないのは、よくあることだ、だがしかしコレが中小企業の現実なのである。

この頃、再帰処理を使うことが少なくなってきて、何でも良いから再帰処理に当てはまる題材をじぶんに課すべきだと思う今日このごろです?

<p>吾輩は猫である、名前はまだない。</p>
<p>吾輩は猫である、名前はまだない。</p>
<button class="btn btn-primary" id="btn" type="button">名前はまだない？</button>

<script>
	document.getElementById("btn").addEventListener("click",(e)=>{
		var object= document.querySelectorAll("p");
		for (const key in object) {
			
			if (object.hasOwnProperty(key)) {
				const element = object[key];
				(element).innerText = (element).innerText.replace("名前はまだない。","名前は猫はちだ。");
			}
		}
	});
</script>

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年12月06 08:05日

タグ

btn, btn-primary, button, class, EC, gt, ID, javascript, lt, name, product, quot, type, いろいろ, こと, コレ, システム, じぶん, データー, とき, ベース, 中小企業, 今日このごろ, 使用, 再帰, 処理, 参考書, 名前, 吾輩は猫である, 命名, 商品, 基本, 整理, 文字, 現実, 番号, 登録, 系, 製品, 連番, 開発, 頃, 題材,

外部VPSサーバーからさくらレンタルサーバーのDBに接続する方法。

2020.12.04

Logging

外部VPSサーバーからさくらレンタルサーバーのDB（データベース）に接続する方法は下記のコードだけでは上手く動かない。だけど、tmpファイルを生成時にパーティションにu+xの権限を与えればこのコードは要件をみたします。因みにプロセスが残ったままになるので接続が終わったら、プロセスを削除してあげてください。なのでどのプロセスを削除する機能として追加しないと使えないかな？、時間があれば完成したコードをアップします。

なお、変数の初期値はご自身で入れてください。あとポート開放やexpectが入っていない場合はyumなどでインストールする必要もあります。

<!DOCTYPE html>
<html lang="en">

<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.5.2/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
	<link rel="stylesheet" href="assets/css/style.css">
	<title>ssh sqli</title>
</head>

<body>
	<?php
	print ssh_sqli_connect();
	?>
	<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.5.2/js/bootstrap.min.js"></script>
</body>

</html>
<?php
function ssh_sqli_connect()
{
	global $dblink,$dbname,$sshuser, $sshhost, $sshpassword,$host,$sshport;
	$ret = null;
	$cmd = "#!/usr/bin/expect -f
set timeout 3
expect -c \"spawn ssh -f -N -L $sshport:$host:3306 $sshuser@$sshhost -oStrictHostKeyChecking=no
expect \\\"$sshuser@$sshhost's password:\\\"
send \\\"$sshpassword\\n\\\"
\"
";

	$tmpfname = tempnam(sys_get_temp_dir(), 'ssh');

	$handle = fopen($tmpfname, "w");
	fwrite($handle, $cmd);
   	shell_exec("sh $tmpfname");
	sleep(3);
	$dblink = db_connect();
	try{
		for($id = 1 ;$id<=99;$id++){
			$ret = $dblink->query("SELECT * FROM $dbname.X.xtbl where $dbname.X.xtbl.id=$id;");
			if ($cnt = (int) mysqli_num_rows($ret)) {
			  $row = mysqli_fetch_assoc($ret);
			  print ($row["id"].", ".$row["name"]);
			}
		}
	}catch(PDOException $e){
		echo "失敗: " . $e->getMessage() . "\n";
	}

	fclose($handle);
	unlink($tmpfname);

	db_close();
	return "未完成";
}

function db_connect()
{
	global $dblink, $host, $user, $password, $dbname,$sshport;
	try {
		$dblink = new  mysqli("127.0.0.1", "$user", $password, $dbname ,$sshport);
		//$dblink->set_charset("utf8");
		return $dblink;
	} catch (PDOException $e) {
		echo "接続失敗: " . $e->getMessage() . "\n";
	}
}

function db_close()
{
	global $dblink;
	$dblink->close();
}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年12月04 06:35日

タグ

8, charset, db, DOCTYPE, en, expect, gt, head, html, lang, lt, meta, name, quot, tmp, UTF-, vie, VPS, yum, アップ, インストール, コード, ご自身, サーバー, さくら, データベース, パーティション, ファイル, プロセス, ポート, まま, レンタル, 下記, 初期, 削除, 場合, 変数, 外部, 完成, 必要, 接続, 方法, 時間, 権限, 機能, 生成, 要件, 追加, 開放,

サブドメインをワイルドカードで割り付ける方法：熨斗（のし）

2020.11.15

Logging

サブドメインをワイルドカードで割り付ける方法を記載します。まず初期の設定としてAレコードを下記のように設定します。ドメイン名はご自分のドメイン名に変更ください。バリューも任意に設定ください。

*.example.com 123.123.123.123

次にVirtualhostsを下記のように設定します。%1の部分がサブドメインの値が入ってきます。これで出来上がりです。因みにSSL認証はどうするれば良いのかという人にヒントを記載します。「ワイルドカードSSL認証」などとググると方法が記載されているHPに行き当たると思います。そちらを試すと容易にワイルドカードのSSLも出来ちゃうですね?

<VirtualHost *:80>
  ServerName www.example.com
  DocumentRoot "/var/www/html/example.com"
  ErrorLog /var/log/httpd/example.com_error_log
  <Directory "/var/www/html/example.com">
    AllowOverride All
  </Directory>
</VirtualHost>
<VirtualHost *:80>
  ServerName example.com
  ServerAlias *.example.com
  VirtualDocumentRoot "/var/www/html/subdomain/%1"
  ErrorLog /var/log/httpd/sub.example.com_error_log
</VirtualHost>

案外簡単で拍子抜けひともいるかも知れないですが、これで何かのサービスを作ることは可能かと思いますよ。どうぞお試しあれ。

因みにexample.comというドメインは存在します、参考書や参考サイトなどで使われる「例えばサイト」は存在します。玄人志向の方はtestなどのドメイン名を使わずに上記のドメイン名を使用します。それには理由があるのです、察しがいい人は分かるかと思いますが、安全でないサイトへ飛んでしまったりする人がいるためです。あとダミー画像を生成したいのなら、Placehold.jpを使用すると良いですよ。運用しているのはソフテルという日本の会社です?

追記でSSL認証も書いときますね。Let’s Encryptでワイルドカード証明書の場合はこんな感じです。まず、certbotが入っているということが前提としてあります、無い場合はインストールしてください。まず最初に下記のコマンドを打ちます。ドメイン名は自分用に変えてください。

certbot certonly --manual \
-d *.example.com -m mail@example.com --agree-tos --manual-public-ip-logging-ok \
--preferred-challenges dns \

このような内容が表示されますので、TXTレコードの設定を行います。英語が分からなければコピペして翻訳アプリにかけてください。

_acme-challenge.example.com XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

TXTレコードが設定されたどうかの確認はMSDOSなどで下記のコマンドを打ちます。設定が完了された場合はVALUEの値が返ってきます。

nslookup -type=TXT _acme-challenge.example.com 8.8.8.8

上手く通ったあと、エンターを打ち次に進みます。上手くいくとpemが生成されましたよというメッセージが出るのでその階層をコピーします。コピーしたものを元にApacheのVirtualhostのconfigの設定を行います。こんな感じです。

<VirtualHost *:443>
  ServerName www.example.com
  DocumentRoot "/var/www/html/example.com"
  ErrorLog /var/log/httpd/example.com_error_log
  <Directory "/var/www/html/example.com">
    AllowOverride All
  </Directory>
  SSLEngine on
  SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
</VirtualHost>
<VirtualHost *:443>
  ServerName example.com
  ServerAlias *.example.com
  VirtualDocumentRoot "/var/www/html/subtaxi/%1"
  SSLEngine on
  SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
  ErrorLog /var/log/httpd/example.com_error_log
</VirtualHost>

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年11月15 12:00日

タグ

１, 123.123.123.123, 80, com, DocumentRoot, Error, example, gt, HP, html, lt, quot, servername, SSL, var, VirtualHost, Virtualhosts, www, カード, これ, ご自分, サブ, そちら, ドメイン, ドメイン名, のし, バリュー, ヒント, レコード, ワイルド, 下記, 人, 任意, 値, 初期, 変更, 容易, 方法, 次, 熨斗, 記載, 設定, 認証, 部分,

javascriptのアロー関数ってアレだな。

2020.05.20

Logging

javascriptのアロー関数ってアレだな、無名関数の省略形だと思ったら良いです。アロー（arrow）＝矢って意味、まんまだよね。日本語に直訳すると矢関数って意味になるのかな・・・。矢関数って響きが良くないのでアロー関数って読んでいるだけだと思うのです。英語のわからない自分は矢関数で良いじゃないと思ったりするわけです。

例文：載せときます、、比較的新しいブラウザなら動作します。

	const test = (e)=>{
		var view = document.querySelector("#view1");
		view.innerHTML = e.target.value;
	};
	const input = document.querySelector("#t");
	input.addEventListener("input",test);

一応、デモサイトのリンクも載せときますので、動作確認してみてくださいな。
尚、今回は純正なjavascriptだけで記載しました。これから極力、純正で純粋なjavascrpitで書いていこうと思います、いまのWEBの流れはそうなんだって。そしてTypescriptとかが今後来るみたいに言われていますよね。

https://zip358.com/tool/demo15/

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年05月20 12:45日

タグ

１, addEventListener, arrow, const, document, gt, innerHTML, input, javascript, querySelector, quot, target, test, value, var, view, アレ, アロー, ブラウザ, まんま, 例文, 動作, 意味, 日本語, 無名, 直訳, 省略形, 矢, 自分, 英語, 関数,

PHP7でTwigを使う。

2020.05.10

Logging

Twigとは小枝であり、PHPのテンプレートエンジンであります。テンプレートエンジンが何なのかはぐぐってください。ここでは割愛します。

Twig3.x(3系)、Dumpの表示の仕方が書かれていないのでそれを記載します。記載方法は下記になります。特に記載方法が変わったのはデバッグの時の記述方法です、最初、デバッグ方法をググっていたのですが、全然上手くいかずエラーばかりはいていました。※Twig2系の情報が結構ヒットします。

require_once '/vendor/autoload.php';
$loader = new \Twig\Loader\FilesystemLoader('テンプレートの階層を指定');
$twig = new \Twig\Environment($loader,['debug' => true]);
$twig->addExtension(new \Twig\Extension\DebugExtension());//?ここの記述を忘れずに！！
echo $twig->render('index.html（レンダーするテンプレートファイル）', ['items'=>$this->top_view()]);

結局、公式ページのドキュメントにデバッグ方法が書かれていたのですが、それにたどり着くまで、小一時間ぐらいWEBの荒野をさまよっていました。最初からドキュメントを見ろよという教訓を得たのですが、結構ググる方を優先してしまう自分がいます。実際はドキュメントの中で検索するのが一番なのかもなと。皆さんが使用するようなエンジンはドキュメントを見るほうが良いと今回、痛感しました。これからはドキュメントを見るようにします。

https://twig.symfony.com/doc/3.x/functions/dump.html

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年05月10 04:58日

タグ

2, ３, 39, 7, addExtension, autoload, debug, dump, Environment, FilesystemLoader, gt, loader, new, once, php, require, true, Twig, vendor, エラー, エンジン, ここ, それ, デバッグ, テンプレート, ヒット, 下記, 仕方, 何, 割愛, 小枝, 情報, 指定, 方法, 時, 最初, 表示, 記載, 記述, 階層,

jqueryのイベント処理時に引数を受け渡す方法を知っとくと良いかもしれません。

2020.03.10

Logging

jqueryのイベント処理時に引数を受け渡す方法を知っとくと良いかもしれません。記述は下記になります。ぐぐると出てくるので知っている人の方が多いかもしれませんが…。ちなみに自分はこの記述方法、ごくまれにしか使わないため、忘れてしまいます。event.dataに紐づけてくれるのはとても良いかなと自分は思っていますが、皆さんはいかがでしょうか？もうjqueryなんか使わないよという方もいると思うのですが、自分が思うにゴリゴリ書くよりか、jqueryで済ませれるところは使ったほうがコードは短くて済むと思っています。WEB業界は技術の移り変わりが早いですよね。逆にソフトのほうはWEBよりはスパンが長い気がします。

https://zip358.com/tool/demo9/

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="common.js"></script>
    <title>Document</title>
</head>
<body>
    <p id="pen">お腹空いた(´；ω；｀)お腹空いたと＞φ(..)</p>
</body>
</html>

$(function(){
    $("#pen").click({sword:"The pen is mightier than the sword"},function(e){
        $(this).text(e.data.sword);
    });
    // $("#pen").on("click",{sword:"The pen is mightier than the sword"},function(e){
    //     $(this).text(e.data.sword);
    // });
});

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年03月10 05:20日

タグ

charset, data, DOCTYPE, EVENT, gt, head, html, ja, jquery, lang, lt, meta, quot, web, いかが, イベント, かな, コード, スパン, ソフト, ため, ところ, 下記, 人, 処理, 引数, 技術, 方, 方法, 業界, 気, 皆さん, 紐, 自分, 記述, 逆,

都道府県にカーソルを乗せると色が変わるちょっとした奴ムフ。

2020.03.09

Logging

JSONファイル、JSファイル、htmlファイルはそれぞれ下記になります。ちなみにいま作っている、あるサービスに使うために作ったもののお裾分けです。雛形として作っているのでおそらく、編集しやすいかなと思います。なお、SVGファイルは自分のソースからダウンロードするか、提供元のSVGをダウンロードするかしてください。ちなみにSVGは日本地図の標準をダウンロードしています。

デモ8：： https://zip358.com/tool/demo8/

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="common.js"></script>
    <title>Document</title>
</head>
<body onload="ken()">
    <object id="svg_ken" data="jpn03_a4.svg" type="image/svg+xml" width="700" height="700"></object><br>
    <a target="new456" rel="license" href="http://creativecommons.org/licenses/by-nc/2.1/jp/"><img alt="Creative Commons License" style="border-width: 0" src="http://i.creativecommons.org/l/by-nc/2.1/jp/88x31.png.webp"></a><br>
    データ引用元：<a target="new123" href="https://www.kabipan.com/geography/whitemap/">https://www.kabipan.com/geography/whitemap/</a><br>
</body>
</html>

{
    "kenmei":[
        {"id":"1","ken":"北海道","eiji":"HOKKAIDO"},
        {"id":"2","ken":"青森県","eiji":"AOMORI"},
        {"id":"3","ken":"岩手県","eiji":"IWATE"},
        {"id":"4","ken":"宮城県","eiji":"MIYAGI"},
        {"id":"5","ken":"秋田県","eiji":"AKITA"},
        {"id":"6","ken":"山形県","eiji":"YAMAGATA"},
        {"id":"7","ken":"福島県","eiji":"FUKUSHIMA"},
        {"id":"8","ken":"茨城県","eiji":"IBARAKI"},
        {"id":"9","ken":"栃木県","eiji":"TOCHIGI"},
        {"id":"10","ken":"群馬県","eiji":"GUNMA"},
        {"id":"11","ken":"埼玉県","eiji":"SAITAMA"},
        {"id":"12","ken":"千葉県","eiji":"CHIBA"},
        {"id":"13","ken":"東京都","eiji":"TOKYO"},
        {"id":"14","ken":"神奈川県","eiji":"KANAGAWA"},
        {"id":"15","ken":"新潟県","eiji":"NIIGATA"},
        {"id":"16","ken":"富山県","eiji":"TOYAMA"},
        {"id":"17","ken":"石川県","eiji":"ISHIKAWA"},
        {"id":"18","ken":"福井県","eiji":"HUKUI"},
        {"id":"19","ken":"山梨県","eiji":"YAMANASHI"},
        {"id":"20","ken":"長野県","eiji":"NAGANO"},
        {"id":"21","ken":"岐阜県","eiji":"GUFU"},
        {"id":"22","ken":"静岡県","eiji":"SIZUOKA"},
        {"id":"23","ken":"愛知県","eiji":"AICHI"},
        {"id":"24","ken":"三重県","eiji":"MIE"},
        {"id":"25","ken":"滋賀県","eiji":"SHIGA"},
        {"id":"26","ken":"京都府","eiji":"KYOTO"},
        {"id":"27","ken":"大阪府","eiji":"OSAKA"},
        {"id":"28","ken":"兵庫県","eiji":"HYOGO"},
        {"id":"29","ken":"奈良県","eiji":"NARA"},
        {"id":"30","ken":"和歌山県","eiji":"WAKAYAMA"},
        {"id":"31","ken":"鳥取県","eiji":"TOTTORI"},
        {"id":"32","ken":"島根県","eiji":"SHIMANE"},
        {"id":"33","ken":"岡山県","eiji":"OKAYAMA"},
        {"id":"34","ken":"広島県","eiji":"HIROSHIMA"},
        {"id":"35","ken":"山口県","eiji":"YAMAGUCHI"},
        {"id":"36","ken":"徳島県","eiji":"TOKUSHIMA"},
        {"id":"37","ken":"香川県","eiji":"KAGAWA"},
        {"id":"38","ken":"愛媛県","eiji":"EHIME"},
        {"id":"39","ken":"高知県","eiji":"KOUCHI"},
        {"id":"40","ken":"福岡県","eiji":"FUKUOKA"},
        {"id":"41","ken":"佐賀県","eiji":"SAGA"},
        {"id":"42","ken":"長崎県","eiji":"NAGASAKI"},
        {"id":"43","ken":"熊本県","eiji":"KUMAMOTO"},
        {"id":"44","ken":"大分県","eiji":"OOITA"},
        {"id":"45","ken":"宮崎県","eiji":"MIYAZAKI"},
        {"id":"46","ken":"鹿児島県","eiji":"KAGOSHIMA"},
        {"id":"47","ken":"沖縄県","eiji":"OKINAWA"}
        ]
}


function ken() {
    $.getJSON("ken.json", function (json) {
        var svg_ken = document.getElementById('svg_ken').contentDocument;
        var ken = $(svg_ken);
        ken.find('path').attr('fill', '#fff');
        ////
        for (var i = 0; i < 47; i++) {
        ken.find("[id='" + json.kenmei[i].eiji + "']").on("click",{i:i,json:json},function (event) {
            window.location.href = "/page/" + event.data.json.kenmei[event.data.i].id;
        });
        }
        ////
        for (var i = 0; i < 47; i++) {
            ken.find("[id='" + json.kenmei[i].eiji + "']").hover(
                function () {
                    $(this).attr('fill', '#4080ff');
                },
                function () {
                    $(this).attr('fill', '#fff');
                });
        }
    });
}

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年03月09 04:34日

タグ

358, 8, charset, com, content, demo, device-widt, DOCTYPE, gt, head, html, https, ja, JS, json, lang, lt, meta, name, quot, SVG, tool, UTF-, viewport, Width, zip, いま, お裾分け, カーソル, サービス, ソース, それぞれ, ダウンロード, ため, デモ, ファイル, ムフ, 下記, 地図, 奴, 提供, 日本, 標準, 編集, 自分, 色, 都道府県, 雛形,

月の満ち欠けPHPライブラリを書きました。ちょっと適当なアイコンで表示。

2020.02.22

Logging

月の満ち欠けPHPライブラリを書きました、ご自由にお使いください。

ちょっと適当なアイコンで表示。
もっと正確なアイコンを取り入れたい方はご自身でご自由に変更ください。
月の満ち欠けの計算方法はネットから見つけてきました。
情報を記載していただいた先人の知恵を借りPHPライブラリが出来ました。
ありがとうございます。

<?php
//date_default_timezone_set('Asia/Tokyo');
class moon{
    static public $icon = array(
        "0"=>'?',//朔
        "1"=>'?',//朔
        "2"=>'?',//朔
        "3"=>'?',//三日月
        "4"=>'?',//三日月
        "5"=>'?',//三日月
        "6"=>'?',//三日月
        "7"=>'?',//上弦の月',
        "8"=>'?',//上弦の月',
        "9"=>'?',//上弦の月',
        "10"=>'?',//上弦の月',
        "11"=>'?',//上弦の月',
        "12"=>'?',//十三夜月
        "13"=>'?',//十三夜月
        "14"=>'?',//十三夜月
        "15"=>"?",//望月
        "16"=>"?",//望月
        "17"=>"?",//望月
        "18"=>"?",//望月
        "19"=>"?",//寝待月
        "20"=>"?",//寝待月
        "21"=>"?",//寝待月
        "22"=>"?",//寝待月
        "23"=>'?',//下弦の月
        "24"=>'?',//下弦の月
        "25"=>'?',//下弦の月
        "26"=>"?",//二十六夜月
        "27"=>"?",//二十六夜月
        "28"=>"?",//二十六夜月
        "29"=>"?"//二十六夜月
    );
    static public $res = "0";
    static public $moon_gregorian = array(0,2,0,2,2,4,5,6,7,8,9,10);
    public function main($year=2012,$mon=12,$day=12)
    {
        static::$res = ((($year-11)%19)*11 + static::$moon_gregorian[$mon-1]+$day)%30;
    }
    public function icon(){
        return static::$icon[static::$res];
    }
}

呼び出しはこんな感じで。

<?php
    moon::main($year,$mon,$day);
    $chg = moon::icon();

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年02月22 09:22日

タグ

0, １, 2, ３, 39, array, Asia, class, date, default, gt, icon, lt, moon, php, public, quot, set, static, timezone, Tokyo, アイコン, ご自身, ネット, ライブラリ, 先人, 変更, 情報, 方, 方法, 月, 朔, 正確, 満ち欠け, 知恵, 表示, 計算, 記載, 適当,

パンくずリストの構造化を変えない人がいるよ。

2020.01.29

Logging

Gさんから、data-vocabulary.org schema deprecated のお叱り（警告）が出た方はschema.orgの形式の構造体に変更しなくてはなりません。パンくずリストって何って方はまずググってみてください。以前勤めていた会社はこのパンくずリストを対応しているサイトは見かけませんでした。長いものにはまかれろな会社になっていたので誰も言いたいことが言えなかっただけなのかもしれません。

ちなみにこれを変更することによりGさんの検索サイトに表示される時に表示を目立たさせる効果があります。ちょっとした事ですがクリック率はかなり上がります。対応していないとしているでは雲泥の差があります。

タグコードはこんな感じです。

  <ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="https://zip358.com">
        <span itemprop="name">home</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
      <a itemprop="item" href="https://zip358.com/PHP">
        <span itemprop="name">php入門</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
  </ol>

SEOは必要ないとは言いません。昔のサイトはコードも古いデザインも古いけど上位表示されているサイトがありますよね。それには理由があります、アクセス数と競合会社がいない、ドメインが古いという事から上位表示されているだけで、SEO対策を行ったサイトが出てきたらそちらが上位表示される恐れがあります。そして一番怖いのは古いサイトは下手にデザイン等や構造を変えると上位表示から転落しますので、ご注意ください！

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年01月29 09:20日

タグ

BreadcrumbList, data-vocabulary, deprecated, gt, http, itemscope, itemtype, li, lt, ol, org, quot, schema, お叱り, かなり, クス, クリック, コード, こと, これ, サイト, タグ, パン, もの, リスト, 事, 人, 以前, 会社, 何, 効果, 変更, 対応, 差, 形式, 感じ, 方, 時, 検索, 構造, 構造体, 表示, 誰, 警告, 雲泥,

WEBお問い合わせフォームのお値段はいったい幾ら？

2020.01.17

Logging

WEBお問い合わせフォームのお値段はいったい幾らなのか？
堀江貴文氏はデジタルの値段は限りなくゼロに近くなると言っていたけど、無料のWEB申し込みフォームやお問い合わせフォームはある。自分もお問い合わせフォームの簡易的な物を作ってみましたのでファイルをアップしますね。

テンプレートエンジンとしてtwig3.0を使用しています、そのため動作環境はPHP7.2以上になります。ソースコードの可変は行って構いません、またこのソースコードの動作保証などは致しません。WEB担当者様が確認を行いバグ等があれば修正を行ってください。

尚、Composerでtwigをインストール済みという事が前提となります。また送信部分やエラー処理についてはご自身で機能の追加が必要となります。

サンプルページ
https://zip358.com/tool/request/

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>お問い合わせ</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
        crossorigin="anonymous"></script>
    <script src="js/common.js"></script>
    <style>
        .jumbotron {
            background-color: #2bd4d0;
            color: #fff;
        }

        .btn-primary {
            color: #fff;
            background-color: #2bd4d0 !important;
            border-color: #2bd4d0 !important;
        }

        .input-group-text {
            background-color: #2bd4d0;
            border: 1px solid #2bd4d0;
        }
    </style>
</head>

<body>
    <div class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1 class="display-4">お問い合わせ</h1>
            <p class="lead">必須項目を入力し送信ボタンを押してください。<br>DEMOのため送信はできません</p>
        </div>
        <div class="alert alert-warning" id="error_sendmail" role="alert">
        </div>
    </div>
    <form action="index.php" method="POST">
        <div class="container">
            <div class="row">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">お名前[必須]</span>
                    </div>
                    <input type="text" name="name" class="form-control" id="name" placeholder="name" value="{{name}}">
                </div>
                <div class="alert alert-warning" id="error_name" role="alert">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">メールアドレス[必須]</span>
                    </div>
                    <input type="email" name="email" class="form-control" id="email" placeholder="name@example.com"
                        value="{{email}}">
                </div>
                <div class="alert alert-warning" id="error_email" role="alert">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">@</span>
                    </div>
                    <input type="text" name="twitter_account" class="form-control" placeholder="twitter account"
                        aria-label="twitter account" aria-describedby="basic-addon1" value="{{twitter_account}}">
                </div>
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">お問い合わせ内容[必須]</span>
                    </div>
                    <select name="meun" class="form-control" id="exampleFormControlSelect1">
                        {% for selectop in meun_option %}
                        <option value="{{selectop.value}}" {{ selectop.value == selectoped ? " selected":"" }}>
                            {{selectop.name}}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="alert alert-warning" id="error_meun" role="alert">
                </div>
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text">コメント[必須]</span>
                    </div>
                    <textarea name="comment" rows="10" class="form-control" aria-label="コメント">{{comment}}</textarea>
                </div>
            </div>
            <div class="row">
                <footer class="blockquote-footer">
                    <small class="text-muted">
                        ご自由に記入ください。
                    </small>
                </footer>
            </div>
            <div class="alert alert-warning" id="error_comment" role="alert">
            </div>
            <button type="submit" class="mt-2 btn btn-primary btn-lg btn-block">送信する</button>
        </div>
    </form>
</body>

</html>

<?php
session_start();
require __DIR__ . '/vendor/autoload.php';
use Twig\Environment;
use Twig\Loader\FilesystemLoader;

$loader = new FilesystemLoader(__DIR__.'/templates');
$twig = new Environment($loader);
$meun_option = json_decode(file_get_contents("js/select.json"));

$form = ["name","email","twitter_account","meun","comment"];
$data = [];

if($_POST){
	foreach($_POST as $key=>$val){
		$_SESSION[$key] = strip_tags($val);
	}
}
if($_SESSION){
	foreach($_SESSION as $key=>$val){
		$_SESSION[$key] = strip_tags($val);
	}
}

foreach($form as $key => $val){
	$data[$val] = $_SESSION[$val]?$_SESSION[$val]:"";
}

extract($data);

print $twig->render('index.html.twig',["name"=>$name,"email"=>$email,"twitter_account"=>$twitter_account,"selectoped"=>$meun,"comment" => $comment,"meun_option"=>$meun_option]);

著者名 @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2020年01月17 02:46日

タグ

3.0, 358, 7.2, com, Composer, DOCTYPE, gt, html, https, lt, php, request, tool, Twig, web, www, zip, アップ, インストール, エラー, エンジン, お問い合わせ, コード, ご自身, サンプル, ゼロ, ソース, ため, デジタル, テンプレート, バグ, ファイル, フォーム, ページ, 事, 使用, 保証, 修正, 値段, 処理, 前提, 動作, 堀江貴文, 幾ら, 必要, 担当者, 機能, 無料, 物, 環境, 確認, 簡易的, 自分, 追加, 送信, 部分,

ワードプレス電光掲示板プラグインを作りました。

2019.12.05

Logging

電光掲示板（お知らせ）のプラグイン取扱に関して記載します。

プラグインに関してはワードプレス5.2以降を推奨としテーマファイル（外観）のheader.phpのbody直下に下記の記述が存在しない場合は追加記述を
お願いいたします。

<?php wp_body_open();?>

尚、プラグインのソースコードはご自由に変更頂き二次配布も構いませんが
ひとつ注意事項があります。参照した記事にリンクを貼ってください、
なお、事前の連絡等入りません。

電光掲示板（お知らせ）のソースコードは下記になります。
現在、テキストはHTMLタグを許していますので、いろいろと自由に
変更することが可能かと思います。

ちなみにこういった電光掲示板みたいな流れる仕様のコードは
インターネットの初期のころは多く見られましたが
このごろは全然、見なくなりましたね。。。

CSSの記述に関してはとくめいさんの記述を使用させて頂きました。
https://creatorclip.info/2014/06/css3-electric-bulletin-board/

とくめいさんも同じようなことを記事に記載しておりますが
自分もそのように感じました。

とくめいさんへ断りもなく使用してすみません、
Twitterで連絡しようかなと思ったのですが、それもなんだかと思い
勝手ながらこのような手段を取りました。

お知らせ（電光掲示板）のダウンロードは下記になります。
下記のファイルを解凍しワードプレスのプラグイン領域にフォルダごと
アップロードしプラグインを有効にするとご使用頂けます。

https://zip358.com/plugin/Z-Electric-bulletin-board.zip

<?php
/*
Plugin Name: Z-Electric-bulletin-board
Plugin URI: https://zip358.com/plugin/Z-Electric-bulletin-board.zip
Description: お知らせ
Author: taoka toshiaki
Version: 1.0
Author URI: https://zip358.com/
*/
add_action( 'wp_head', function() {
    $color = get_option('ZEBB_color')?get_option('ZEBB_color'):"ffffff";
    $cssdata ="
    <style>
        /* =====================
            電光掲示板
        ======================= */
        .ledText {
            overflow: hidden;
            position: relative;
            padding:5px 0;
            color: #$color;
            font-size: 60px;
            font-weight: bold;
            background: #333333;
        }
        /* CSS3グラデーションでドット感を出す */
        .ledText:after {
            content: ' ';
            display: block;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-image: linear-gradient(#0a0600 1px, transparent 0px), linear-gradient(0, #0a0600 1px, transparent 1px);
            background-image: -webkit-linear-gradient(#0a0600 1px, transparent 0px), -webkit-linear-gradient(0, #0a0600 1px, transparent 1px);
            background-size: 2px 2px;
            z-index: 10;
        }
        /* CSS3アニメーションでスクロール */
        .ledText span {
            display: inline-block;
            white-space: nowrap;
            padding-left: 100%;
            -webkit-animation-name: marquee;
            -webkit-animation-timing-function: linear;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: 15s;
            -moz-animation-name: marquee;
            -moz-animation-timing-function: linear;
            -moz-animation-iteration-count: infinite;
            -moz-animation-duration: 15s;
            animation-name: marquee;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-duration: 15s;
        }
        @-webkit-keyframes marquee {
        from   { -webkit-transform: translate(0%);}
        99%,to { -webkit-transform: translate(-100%);}
        }
        @-moz-keyframes marquee {
        from   { -moz-transform: translate(0%);}
        99%,to { -moz-transform: translate(-100%);}
        }
        @keyframes marquee {
        from   { transform: translate(0%);}
        99%,to { transform: translate(-100%);}
        }
    </style>
    ";
    print $cssdata;
 });
add_action("wp_body_open",function(){
    $text = get_option('ZEBB_text')?get_option('ZEBB_text'):"";
    if($text)print '<p class="ledText"><span>'.$text.'</span></p>';
});
add_action('admin_menu','Z_Electric_bulletin_board_set');
function Z_Electric_bulletin_board_set(){
	add_options_page(
		'zip358.com：プラグイン',
		'電光掲示板設定',
		'administrator',
		'Z_Electric_bulletin_board',
		function(){
            if(isset($_POST["ZEBB_color"]) or isset($_POST["ZEBB_text"])){
                $color = preg_match("/[a-zA-Z0-9]*/",$_POST["ZEBB_color"])?$_POST["ZEBB_color"]:"ffffff";
                update_option('ZEBB_color', wp_unslash($color));
                $text = $_POST["ZEBB_text"];
                update_option('ZEBB_text', wp_unslash($text));
            }
            ?>
            <form method="post" action="">
                <h2>電光掲示板設定</h2>
                color code #<input type="text" style="width:350px" name="ZEBB_color" value="<?=get_option('ZEBB_color')?get_option('ZEBB_color'):""?>" placeholder="f7f7f7"><br>
                text <input type="text" style="width:350px" name="ZEBB_text" value="<?=get_option('ZEBB_text')?get_option('ZEBB_text'):""?>" placeholder="文字を記入してください"><br>
                テキスト文字を未入力にすると電光掲示板が表示されません
                <?php submit_button(); ?>
            </form>
            <?php
        }
	);
}

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年12月05 06:19日

タグ

5.2, body, css, gt, header, html, lt, open, php, wp, いろいろ, インターネット, お知らせ, お願い, コード, こと, ころ, ごろ, ソース, タグ, テーマ, テキスト, トク, ひとつ, ファイル, プラグイン, プレス, メイ, リンク, ワード, 下記, 事前, 事項, 二, 仕様, 使用, 初期, 参照, 取扱, 可能, 場合, 変更, 外観, 存在, 推奨, 掲示, 注意, 現在, 直下, 自由, 記事, 記載, 記述, 追加, 連絡, 配布, 電光,

PHP非同期の考え方サンプル。

2019.11.12

Logging

非同期の考え方サンプルです。
さて非同期ってなんでしょうか？
非同期とは次から次へと仕事をお願いする状態。
仕事量が重いと結果が返るまで時間がかかります。
なので、Aという仕事が重く、B、Cという仕事が楽な場合は
A、B、Cという仕事を順番に頼んでもAの結果はBの後やCの後に
結果が返ってきます。

逆に同期処理とは何か？
A、B、C の順に仕事を頼むと、Aの仕事が終えた後にB、Cと仕事を
行います。

非同期＝並列処理と考えると良いかも。
同期処理＝逐次処理と考えると良いかも。

https://www.youtube.com/watch?v=VHlW65WPUDY

<!DOCTYPE html>
<html lang="en">
<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">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Document</title>
    <script>
        $(function(){
            $("#btn").on("click",function(){
                test();
                return false;
            })
        });
        function test(){
            var data = $("#frm").serialize();
            $.ajax({
                type: "post",
                url: "url.php",
                data: data,
                dataType: "json",
                success: function (response) {
                    console.log(response);
                }
            });
        }
    </script>
</head>
<body>
    <a href="#" id="btn">クリック</a>
    <form id="frm">
        <input type="text" name="test1">
        <input type="text" name="test2">
        <input type="text" name="test3">
    </form>
</body>
</html>

<?php
//url.php
$data = [];
if(!is_null($_POST)){
    foreach($_POST as $key=>$val){
        $data[$key] = $val;
    }
    print(json_encode($data));
}else{
    print(0);
}

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年11月12 12:26日

タグ

65, 8, charset, com, DOCTYPE, en, gt, head, html, lang, lt, meta, name, php, quot, UTF-, VHlW, WPUDY, youtube, お願い, サンプル, 並列, 仕事, 何, 処理, 同期, 場合, 後, 時間, 次, 状態, 結果, 考え方, 逆, 順, 順番,

画像ファイル系一覧のパスを列挙するバッチ

2019.08.17

Logging

setlocal enabledelayedexpansion
type nul >imglist.txt
set BEFORE_STRING=
set AFTER_STRING=/
set BEFORE_STRING2=F:/
set OUTPUT_FILE=imglist.txt
for /f %%a in ('dir /a-d /s /b *.jpg.webp *.gif') do (
set line=%%a
set RES=!line:%BEFORE_STRING%=%AFTER_STRING%!
echo !RES:%BEFORE_STRING2%=!>>%OUTPUT_FILE%!
)
endlocal

画像ファイル系一覧のパスを列挙するバッチです。
ググりながら作ってみました。
ちなみに勘所はsetlocal enabledelayedexpansion（endlocal）と！です。
どうもforの中の変数をセットするタイミングが関係しているので
上記の文言を使用しないとうまく取り出す事が
できないようです。
遅延環境変数とかいうそうですね。。。
あまり理解していないけれどもorz

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年08月17 12:01日

タグ

2, a-d, AFTER, BEFORE, DIR, do, echo, enabledelayedexpansion, endlocal, file, For, gif', gt, imglist, in, jpg, line, nul, OUTPUT, res, set, setlocal, string, txt, type, パス, バッチ, ファイル, 一覧, 列挙, 勘所, 画像,

変なコードを書いてしまった。それはいつものこと（笑）

2019.08.10

Logging

変なコードを書いてしまった。
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>

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年08月10 10:33日

タグ

--, 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

Logging

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);
})();

著者名 @taoka_toshiaki

※この記事は著者が30代前半に書いたものです．

OFUSEで応援を送る

投稿日時 2019年08月03 06:43日

タグ

--, 5.0, 7, 8, ９, class, DOCTYPE, endif, gt, html, IE, if, lt, lt-ie, no-js, openUrl, php, quot, TinyMCE, windowManager, コード, サンプル, ダメダメ, プログラム, やり方, 他, 使用, 内容, 前回, 割愛, 力, 勘どころ, 好評, 自分, 英語, 解析, 記事, 記載, 送受信,