@Blog{zip358.com}
日常日誌からプログラムやYOUTUBER紹介、旅日記まで日々更新中です。
POSTとGETの考え方について伝えている動画。 #以心伝心
2022.11.12
おはようございます、11月なのに寒くないって不思議です😗温暖化。
さて、POSTとGETの考え方について無音声（音楽あり）で伝えている動画です、以心伝心で意味が通じると良いですが、それではブログを書いている意味がないので要点だけ解説します。POSTとGETとは、インターネット上でデータの送信を行うのに使用します。POSTの利点はデータを隠して送れることと、比較的に重いデータも送れることにあります。ではGET送信の利点は、SEOに有利と言ったところでしょうか。
今回、POST送信とGET送信を行い、PHPのプログラムでPOSTとGETを受信する方法を動画で伝えています。次回は非同期処理を使用して送受信を行う方法をプログラムで書いていきます。
HTMLとPHPプログラムは下記のソースを参照下さいませ🙇。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo site</title>
<style>
html {
width: 100vw;
height: 100vh;
}
body {
background-color: rgb(0, 0, 0);
color: aliceblue;
background-image: url(./assets/images/aig-mid22910-120-xl_TP_V.jpg.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
div.box {
border-color: aliceblue;
border-style: inset;
position: absolute;
width: 300px;
height: 450px;
color: white;
border-radius: 1em;
padding: 1em;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
/* background-color: #ffffff80; */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
overflow-wrap: break-word;
text-align: center;
}
div>form>p {
font-weight: bold;
margin: 13px;
}
input {
opacity: 0.5;
}
textarea {
opacity: 0.5;
}
button {
padding: 5px;
border-radius: 1em;
border-style: solid;
border-color: aliceblue;
background-color: aliceblue;
color: rgb(0, 0, 0);
}
button:hover{
border-color: rgb(255, 255, 255);
border-style: inset;
background-color: rgb(27, 76, 119);
color: aliceblue;
}
.put:nth-child(2){
overflow: auto;
height: 120px;
}
</style>
</head>
<body>
<div class="box">
<div id="box2">
<form action="submit.php" method="post">
<p>名前:<input type="text" name="name"></p>
<p><textarea name="text" id="" cols="30" rows="10"></textarea></p>
<p><button class="btn" type="submit">確認</button></p>
</form>
</div>
<div id="data">
<p class="put"></p>
<p class="put"></p>
</div>
</div>
<script src="./assets/js/main.js"></script>
</body>
</html><?php
var_dump(xss_d($_POST));
print(xss_d($_POST["name"])."<br>");
print(xss_d($_POST["text"])."<br>");
function xss_d(mixed $val){
if(!isset($val))return false;
if(is_array($val)){
foreach ($val as $key => $value) {
$val[$key] = strip_tags($value);
$val[$key] = htmlspecialchars($val[$key],ENT_QUOTES);
}
}else{
$val = strip_tags($val);
$val = htmlspecialchars($val,ENT_QUOTES);
}
return $val;
}
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
11, 2, css, DOCTYPE, GET, html, lt, no, php, POST, SEO, インターネット, こと, ソース, データ, ところ, ブログ, プログラム, 下記, 不思議, 今回, 以心伝心, 使用, 処理, 初学, 利点, 動画, 参照, 受信, 同期, 意味, 方法, 有利, 次回, 温暖化, 考え方, 要点, 解説, 送信, 送受信, 音声, 音楽,
デモ５５ajax=jqueryを使わずに非同期通信するのが普通に。
2022.05.03
おはようございます。
祝日が始まりましたね、お休みの方も多いかと思います。
そんな中、連休からプログラミングの勉強を始めようと考えている方もいるかと思いましたので、フロントエンドエンジニアがバックエンドエンジニアとの連携で一番初めにぶち当たる壁である、非同期通信のコードを書きました。コードをコピペして階層など合わしてご自身の実行環境で実行してみてください。この頃ではフロントエンドエンジニアの方は非同期処理でコードを書いているので、非同期という言葉を聞くことも多くなったと思います。
非同期処理は処理の結果を待たずして次の処理を実行することです、非同期通信も同じです。バックエンド側に処理を問い合わせて処理の結果は待たずして行います。結果も順番に帰ってくる訳では無いのでフロント側で処理するときに注意も必要になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="api">非同期通信</button>
<script>
document.getElementById("api").addEventListener("click", api);
function api() {
let data = [];
data.push({"name":"樹龍"});
console.log(param(data));
fetch("./api.php", {
method: "POST",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body:param(data)
}).then(
response => response.json()
).then(data => {
console.log('data', data);
}).catch(error => {
console.log('error', error);
});
}
function param(data){
let str = [];
for(key in data){
for(keyname in data[key]){
str.push(keyname +"="+ encodeURIComponent(data[key][keyname]));
}
}
return str.join("&");
}
</script>
</body>
</html><?php
$name = htmlspecialchars(strip_tags($_POST['name']));
$response['res'] = $name;
print json_encode($response);
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
55, ajax, DOCTYPE, gt, html, jquery, lang, lt, quot, エンジニア, エンド, お休み, コード, こと, コピペ, ご自身, デモ, とき, バック, プログラミング, フロント, 中, 処理, 勉強, 同期, 壁, 実行, 必要, 方, 普通, 次, 注意, 環境, 祝日, 結果, 言葉, 訳, 通信, 連休, 連携, 階層, 頃, 順番,
コード書き初め、そろそろネタが尽きてきたよ「始め」！？
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>
著者名
@taoka_toshiaki
※この記事は著者が40代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
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, いろいろ, エッジ, グラデーション, コード, こちら, これ, ソース, ネタ, もの, 事, 何, 写, 動作, 変更, 文字, 景, 書き初め, 最新, 確認,
外部VPSサーバーからさくらレンタルサーバーのDBに接続する方法。
2020.12.04
外部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代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
8, charset, db, DOCTYPE, en, expect, gt, head, html, lang, lt, meta, name, quot, tmp, UTF-, vie, VPS, yum, アップ, インストール, コード, ご自身, サーバー, さくら, データベース, パーティション, ファイル, プロセス, ポート, まま, レンタル, 下記, 初期, 削除, 場合, 変数, 外部, 完成, 必要, 接続, 方法, 時間, 権限, 機能, 生成, 要件, 追加, 開放,
jqueryのイベント処理時に引数を受け渡す方法を知っとくと良いかもしれません。
2020.03.10
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代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
charset, data, DOCTYPE, EVENT, gt, head, html, ja, jquery, lang, lt, meta, quot, web, いかが, イベント, かな, コード, スパン, ソフト, ため, ところ, 下記, 人, 処理, 引数, 技術, 方, 方法, 業界, 気, 皆さん, 紐, 自分, 記述, 逆,
都道府県にカーソルを乗せると色が変わるちょっとした奴ムフ。
2020.03.09
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代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
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, いま, お裾分け, カーソル, サービス, ソース, それぞれ, ダウンロード, ため, デモ, ファイル, ムフ, 下記, 地図, 奴, 提供, 日本, 標準, 編集, 自分, 色, 都道府県, 雛形,
WEBお問い合わせフォームのお値段はいったい幾ら？
2020.01.17
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代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
3.0, 358, 7.2, com, Composer, DOCTYPE, gt, html, https, lt, php, request, tool, Twig, web, www, zip, アップ, インストール, エラー, エンジン, お問い合わせ, コード, ご自身, サンプル, ゼロ, ソース, ため, デジタル, テンプレート, バグ, ファイル, フォーム, ページ, 事, 使用, 保証, 修正, 値段, 処理, 前提, 動作, 堀江貴文, 幾ら, 必要, 担当者, 機能, 無料, 物, 環境, 確認, 簡易的, 自分, 追加, 送信, 部分,
PHP非同期の考え方サンプル。
2019.11.12
非同期の考え方サンプルです。
さて非同期ってなんでしょうか？
非同期とは次から次へと仕事をお願いする状態。
仕事量が重いと結果が返るまで時間がかかります。
なので、Aという仕事が重く、B、Cという仕事が楽な場合は
A、B、Cという仕事を順番に頼んでもAの結果はBの後やCの後に
結果が返ってきます。
逆に同期処理とは何か？
A、B、C の順に仕事を頼むと、Aの仕事が終えた後にB、Cと仕事を
行います。
非同期＝並列処理と考えると良いかも。
同期処理＝逐次処理と考えると良いかも。
<!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代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
65, 8, charset, com, DOCTYPE, en, gt, head, html, lang, lt, meta, name, php, quot, UTF-, VHlW, WPUDY, youtube, お願い, サンプル, 並列, 仕事, 何, 処理, 同期, 場合, 後, 時間, 次, 状態, 結果, 考え方, 逆, 順, 順番,
変なコードを書いてしまった。それはいつものこと（笑）
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>
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
--, 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);
})();
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
--, 5.0, 7, 8, ９, class, DOCTYPE, endif, gt, html, IE, if, lt, lt-ie, no-js, openUrl, php, quot, TinyMCE, windowManager, コード, サンプル, ダメダメ, プログラム, やり方, 他, 使用, 内容, 前回, 割愛, 力, 勘どころ, 好評, 自分, 英語, 解析, 記事, 記載, 送受信,
Canvasで円がぐるぐる回る。
2019.03.09
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="ctx" ></canvas>
<script>
"use strict";
let x = 0,y = 0;
let xs = 300,ys = 300;
let xc = 1,yc = 1;
let ctx = document.querySelector("#ctx");
let canvas;
ctx.width = window.screen.width;
ctx.height = window.screen.height;
if(ctx.getContext)
{
canvas = ctx.getContext("2d");
setInterval(draw,77);
}
function draw(){
canvas.beginPath();
canvas.fillStyle = "#3399ff";
canvas.arc(x,y,35,0,Math.PI*2,true);
canvas.globalCompositeOperation = "xor";
canvas.fill();
x =((Math.sin (xc) * xs)) + 500;
y =(Math.cos(yc) * ys) + 500;
console.log(x + ":" + ctx.width);
console.log(y + ":" + ctx.height);
if(x < 0 || x > ctx.width)
{
xs*=-1;
}
if(y < 0 || y > ctx.height)
{
ys*=-1;
}
if(x<0)
{
x=0;
}
if(y<0)
{
y=0;
}
if(x > ctx.width)
{
x=ctx.width;
}
if( y > ctx.height)
{
y=ctx.height;
}
xc+=1
if(xc>360)
{
xc=0;
}
yc+=1
if(yc>360)
{
yc=0;
}
}
</script>
</body>
</html>Canvasでぐるぐる円を廻す。
ガラクタコードが少しあります、最初違うコードを書いていたので
これを可変していろいろお試しください。
https://zip358.com/tool/demo5/js/index-3.html
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
0, １, 300, body, Canvas, ctx, DOCTYPE, document, gt, head, Height, html, ID, let, lt, querySelector, screen, script, strict, use, Width, win, window, xc, xs, yc, YS, 円,
javascriptでEVENT処理レベル1
2019.03.09
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" class="zyezyezye">
<script>
"use strict";
let zyezyezye = document.querySelector(".zyezyezye");
zyezyezye.addEventListener("input",()=>{
console.log(">おいら>>" + zyezyezye.value);
if(zyezyezye.value=="じぇじぇじぇ")
{
console.log("おいら>>ｷﾀ━━━━(ﾟ∀ﾟ)━━━━!!nおいら>>じぇじぇじぇn<<ストーカーかよ!!");
}
});
</script>
</body>
</html>jqueryばかり書いているとこういう書き方、書かなくなる。
jqueryから世の中はjavascriptやvue.jsなどへシフトしているそうだけど、未だにjqueryばかり書いている自分です。なれないといけないと思いつつ！？
別のことに力を注いでいる毎日です。
ちなみに「じぇじぇじぇ」は方言で驚きを指す言葉だとか。
著者名
@taoka_toshiaki
※この記事は著者が30代前半に書いたものです．
Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki
タグ
１, addEventListener, body, class, console, DOCTYPE, document, EVENT, gt, head, html, if, input, javascript, let, log, lt, querySelector, script, strict, Text, type, use, value, zyezyezye, おいら, レベル, 処理,
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, サービス, モバイル, 旅割, 最終, 逆算,