JavaScriptなど – 気楽地点

2022年5月11日2023年4月23日

ContactForm7で送信完了画面に飛ばす最低な方法

いろいろな方法があるけど、
なんやかんやとうまくいかないので、かなり初心に帰った基本中の基本の方法です。

次の内容をfunction.phpに入れるだけです。

add_action( ‘wp_footer’, ‘add_thanks_page’ );
function add_thanks_page() {
if( get_the_ID() == ‘9’ ) {
echo <<< EOD
<script>
let search_query = document.getElementById(“wpcf7-f5-p9-o1”).innerHTML;
if(search_query.indexOf(‘ありがとうございます。メッセージは送信されました。’) != -1){
location = ‘飛ばしたいページの’;
}
</script>
EOD; }}

ざっくりいうと

1.post_id=9の場合、これをページ末に記述します
2.「wpcf7-f5-p9-o1」というIDのDIVを探して
3.その中に「ありがとうございます。メッセージは送信されました」の文字があったら飛ばす。

というだけです…

jQueryとかも使っていなくてカッコよくないけど、とりあえず動けばヨシ！　by.現場より

Contactform7のほうでサンキューメッセージを変えていたら
indexOfの部分を変えればOK

2020年4月29日2020年4月29日

簡単に超早でダウンロードサイトを３ステップで作る：テレワークにも便利

「クラウドのデータのダウンロードが30分経っても終わらないのですが…」

と言われました。

あと15分でFGOの新イベントも始まるところでしたので、速攻でダウンロードサイトを作ります。

宅ファイル便見たいのを使ってもよかったんですが、ダウンロードするのが４日後ということもあるので即制作！

「index.php」を作ります

ソースの中身はコレ！

<?php

	// ディレクトリのパス
$dir = '/';

$filelist = glob('*');

foreach ($filelist as $file) {

	if (is_file($file)) {
		echo "<a href='$file'>$file</a>";
		echo nl2br("\n");
	}
}


?>

サーバーに置く

さっき作ったindex.phpとダウンロードしたいデータをレンタルサーバーとかに置きます。

サイトを開く

ファイル名をクリックすればダウンロードが始まります！

完成だ！パスワード対応にする？

もし、パスワード指定にしたかったら.htaccessでＩＤとパスワードの簡易認証を入れればＯＫ

生成や詳細はこちら↓

https://www.luft.co.jp/cgi/htpasswd.php

.htaccessの中身

AuthUserFile /サーバー上のこの場所までのディレクトリフルパス/.htpasswd
AuthGroupFile /dev/null
AuthName "Please enter ID and Password"
AuthType Basic
require valid-user

.htpasswdの中身

web_image_data:6JAGfTiZ2cfyE

データと同じところに入れる

はい！パスワード認証！

2020年2月11日

phpとJavascriptで共通の定数を参照する

定数として設定るる内容がたくさんあるので、変更する際に１つのファイルでまとめたいときにやってみた備忘録。

事例：日本語向けのメッセージ設定ファイル、英語向けのメッセージ設定ファイル、中国語向けのメッセージ設定ファイル、ドイツ語向けのメッセージ設定ファイル…がある場合にフラグ一つで設定ファイルを変更したかった。

手法

設定ファイルはCDATA付きのxmlファイルで作成して、JavascriptはAjaxで、phpは普通に読み込む。

フラグはURL引数とかcookieで保持していればいい。

詳細

※↓クッキー参照で言語を判別する部分は省略しています。
　xml取得部分のみ掲載です。

設定ファイルの例

■const_jpn.xml

<?xml version="1.0" encoding="UTF-8" ?>

<my_const>
	<msg>
		<!-- ログイン -->
		<login><![CDATA[ログインしました]]></login>
			
		<!-- マイページ -->
		<mypage><![CDATA[ようこそ]]></mypage>
	</msg>
</my_const>

呼び出し側の記述方法

■呼び出し元のphp

$constdata = file_get_contents("const_jpn.xml");
$my_const = simplexml_load_string($constdata,'SimpleXMLElement', LIBXML_NOCDATA);
echo $my_const -> msg -> login;//ログインメッセージの表示

■呼び出し元のjavascript

$.ajax({
	url: "const_jpn.xml",
	async: true,
	cache: false,
	dataType:"xml",
	success: function(xml){
		$("msg ",xml).each(function(){
			alert($("login",this).text());//ログインメッセージの表示
		})
	}
});

もし、動的変数ならAjaxでphpからのJSONにした戻り値を使えばＯＫ（よくある方法）

2019年12月14日2019年12月14日

Ajaxで動いたりエラーだったり動かない不具合iOS、Safari、https

Ajaxでphpを呼び出して～の処理でハマった

PCやAndroidだと動くのに、iOSとかiPhoneだと動いたり動かなかったりする不具合。
特に最初に開いたときは動いて、２回目以降はエラーが出るとき。
エラー戻り値は「undefined」とか「0」
サイトはhttps

解決方法

async:falseとbeforeSend:を入れたらOKでした。

URLの指定も//からにするのもポイント。httpとかhttpsとか入れないほうがいい。

$.ajax({
	async:false,
	type:'post',
	cache:false,
	url: '//～～～/～～～.php',
	data:{
		send_data:in_send_data,
		flg:0
	},
	beforeSend:function(xhr){
	  if (window.navigator.userAgent.toLowerCase().indexOf('safari') != -1)
	    xhr.setRequestHeader("If-Modified-Since", new Date().toUTCString());
	},
	success: function(data){
		alert("OK");
	},
    error: function(XMLHttpRequest, textStatus, errorThrown) {
    	alert("ERROR " + XMLHttpRequest.status + "-----" + textStatus + "------" + errorThrown.message + "---" + location.pathname);
	}
});

参考までにエラーが出ていたソースはこんな感じ

$.ajax({
	type:'post',
	cache:false,
	url: '//～～～/～～～.php',
	data:{
		send_data:in_send_data,
		flg:0
	},
	success: function(data){
		alert("OK");
	},
    error: function(XMLHttpRequest, textStatus, errorThrown) {
    	alert("ERROR " + XMLHttpRequest.status + "-----" + textStatus + "------" + errorThrown.message + "---" + location.pathname);
	}
});

お客様を何日待たせてしまったんだよぉっ！(><)

どうか世界からsafariとIEが××されますように…(>人<)

2019年11月7日

javascript、jqueryスマホで動かない：速解決する

パソコンだと動くけど、スマホで動かない

これはページ読み込み後での実行命令の際に
PCとスマホだと動きが違うからいくつかの設定方法があります。

window.onload
と書いてみたり

$(document).ready
と書いてみたり

$(window).on('load'
とやってみると行ける

とありますが、

プラグインとかとぶつかっていることがあってうまく動かないこともあるので、
検証している時間がないので
一番早いのでページ最後にjs読み込む

速解決！

2019年3月13日2019年3月13日

カウントダウンタイマー

カウントダウンタイマーです

タグはこちら

「ありがとう」用

<script type="text/javascript" src="https://www.3scom.com/tools/thankyou_heisei.js"></script>

「さよなら」用

<script type="text/javascript" src="https://www.3scom.com/tools/sayonara_heisei.js"></script>

「thankyou_heisei.js」の中身です。
JKは苦手だけどJSもか苦手なので中身はゴリゴリです。
この前、家に帰ったら、知らないJKがいて居間で勉強していてビビった。

		var outtag = "";
		outtag += "<div style='display:block;border:2px #000 solid;padding:10px 10px 0 10px;border-radius:10px;width:650px;height:165px;line-height:100%;'>";
		outtag += "	<img src='https://www.3scom.com/tools/arigato.png' style='float:left;margin:15px 40px 0 10px;width:160px;height:auto;'>";
		outtag += "	<div id='countdown_value_tahkyou'></div>";
		outtag += "</div>";
		
		document.write(outtag);
		
		clock();

		setInterval(clock, 1000);

	
	function clock(){
		var tl = new Date('2019/04/01 00:00:00');
		var timer='';
		var today=new Date();
		var day=Math.floor((tl-today)/(24*60*60*1000));
		var hour=Math.floor(((tl-today)%(24*60*60*1000))/(60*60*1000));
		var min=Math.floor(((tl-today)%(24*60*60*1000))/(60*1000))%60;
		var sec=Math.floor(((tl-today)%(24*60*60*1000))/1000)%60%60;

		var outtext = "";
	
		if( day > 0 ){
			outtext = "	<p style='font-size:30px;margin:0;padding:0;line-height:150%;'>平成31年4月1日0時まで</p>";
			outtext += "<p style='font-size:25px;margin:0;padding:0;line-height:120%;'>&nbsp;&nbsp;あと</p>";
			outtext += "<p style='font-size:60px;margin:0;padding:0;color:#f00;line-height:130%;'>";
			outtext += day + '<span style="font-size:25px;color:#000;">日</span>';
			outtext += hour + '<span style="font-size:25px;color:#000;">時間</span>';
			outtext += min + '<span style="font-size:25px;color:#000;">分</span>';
			outtext += sec + '<span style="font-size:25px;color:#000;">秒</span></p>';
		}else{
			outtext = "<p style='font-size:40px; padding:0;'>新元号年も<br>良い年に<br>なりますように！</p>";
		}
		document.getElementById("countdown_value_tahkyou").innerHTML = outtext;
	}

2019年3月4日2019年3月4日

スマホのハンバーガーメニューでスライドがくっつく連動バグ

タイトルだとちょっとわかりにくいと思いますが

スマホで見るホームページの「三」みたいなボタンを押して、メニューリスト（ハンバーガーメニュー）を出した後、メニューを上下スライドをさせようとすると、背景も一緒にスライドしちゃうというバグです。

対処方法

ぶっちゃけ、今のところ「絶対に直る！」というような有効的なものが無いです。
この現象が起きるのはiPhone独自のバグなので、iOSのほうで対応してもらわないといけません。（iOS12.1.4現在）
そろそろ直してくれるだろうか…

対策としては、

グレーの隙間を作らない
スライドさせるような長いメニューを作らない
知らないふりする

しか…ない感じです。

バグの詳細

どうやったら、そのバグを体験できるかというと、
まずiPhoneを使用します。

１．ハンバーガメニューを出します

２．グレーの部分をスライドさせます

３．動かなくなります

本来なら、メニューの場所を上下スライドさせるとメニューだけが動くのですが、裏面（サイト）の部分もくっついてきてしまいスライドができなくなります。

困ったねぇ…

ちなみにYahoo、楽天はこのバグに引っかかっています。

Googleはメニューを短くして、ごまかしています。（上記対処方法２）

ヤオコーとかはメニューを全部出しちゃっています。（上記対処方法１）

大手でもこのありさまなんだから、許してやってください。

たまに、いい感じに動いているな～ってところもありますが
なんかタップイベントの監視をしているようなので
たまにページがブルブルしちゃったり、
ずっと読み込みグルグルしていたりするので
変に手出ししないほうがいいかもしれません…

2018年7月24日2018年7月24日

Javascript 無理にmouseoverを発火させる

ページ表示の時に、IDで指定したアイテムのマウスオーバーのイベントを実行する。
備忘録。
（JavaScript一族は苦手なので汚いです…）

元ネタはこちらです：https://qiita.com/ryounagaoka/items/a48d3a4c4faf78a99ae5

//「show_pic_first」というIDのマウスオーバーを実行する
window.onload = function() {
triggerEvent(document.getElementById(“show_pic_first”), ‘mouseover’);
}

function triggerEvent(element, event) {
// IE以外のブラウザ用
if (document.createEvent) {
var evt = document.createEvent(“HTMLEvents”);
evt.initEvent(event, true, true );
return element.dispatchEvent(evt);

// IEブラウザの場合
} else {
var evt = document.createEventObject();
return element.fireEvent(“on”+event, evt)
}
}
</script>