Photo by Kelly on Pexels.com

お便りがたまに来るようになった。読者感想?

2023.09.12

Logging

おはようございます、お便りがたまに来るようになったけれど、8割が意味のない言葉や単語です、でも残りの2割は文章が来るようになりました。ありがとうございます。ありがたや~ありがたや~。゚(゚´Д`゚)゚。

まだ質問やご意見というものが来ていないので、もしそのような事が有りましたら記事下のフォームからどしどしと書き込んでくださいませ。

記事を読まれているのは、結構なかの人にとっては続ける活力になっていたりしています。

これがアクセス数、毎日ゼロだったら凹みますけど毎日何かしらの記事にアクセスがあり、微量の広告収入も発生しています。この広告収入でGさんの広告を貼り付けると毎日10円の対価が発生すると思っていた人がいましたので現実は違うよと言ったけど信じていただけなかったことを記憶しています。

でも、それを信じる人も分からないことはないです、実際にそういう記事はあります。

回転数の多いサイトではそういうのはあるのですが、そんなに簡単なものではない。せいぜい、一日の稼ぎは普通のサイトなら1円が関の山。自分の場合は3桁行く日もあれば数円になる日で終わる場合もあります。合計すると毎月、4桁の稼ぎにはなりますが5桁には程遠い金額です。

ともあれ、これからも書いていくのでよろしくお願いします😂。

タグ

4桁, 5桁, Gさん, アクセス, お便り, せいぜい, なか, フォーム, 単語, 回転数, 対価, 広告収入, 微量, 文章, 毎月, 活力, 現実, 程遠い金額, 言葉, 関の山,

Photo by Miguel Á. Padriñán on Pexels.com

あなたの感想やご意見などをお聞かせ下さい。

2023.05.24

Logging

おはようございます、あなたの感想やご意見などをお聞かせ下さい。この頃、記事のネタに困っておりまして、記事にフォームを設けることにしました。設置することにより一方的な配信から少しは改善するかなという思いもあります。設置しても大体、コメントを書いてくれる人って稀な存在なのかもしれません。

高校入学までの大変さが違いすぎる!日本VSアメリカ#Shorts

こういう所は指定して頂けると有り難いです、例えばプログラムコードが間違っているとかの問題や解説文が変だとかいうのは、極力少なくしたいですけど、中々、過去のプログラムにまで手がまわらないので・・・・。

因みになんですが、このブログはもう5年以上続いています。自分が書けなくなるまで書いていこうと思います。個人的見解がほぼ大半を占めるのですが、たまに自分が書いた過去記事を読んであのときはこういう考えだったんだと思うところがあったり、これは不味いなと言うような記事もあったりします。そういう記事を見つけたら自分で極力アップデートしていってます、、、、。

タグ

アップ, あなた, コメント, ご意見, ところ, ネタ, フォーム, プログラム, プログラムコード, 問題, 大半, 少し, 感想, , , 見解, 解説文, 過去, 過去記事, 配信,

Photo by Carlos Pernalete Tua on Pexels.com

旅の栞:日帰り弾丸旅行でとんぼ返りです。 #7月の予定

2023.05.22

Logging

おはようございます、7月22日に大阪へ旅行にいきます。高知空港で自分を見つけてもスルーでお願いします。声掛けてもらっても良いけど片言の日本語しか喋れないので会話が成り立たないと思います。そろそろ何処へ行くのか決めても良い時期なんだけどほぼ何も決まっていないです。

予約だけ取れた状態ですね・・・・。ここだけは行くという所が冨樫義博展です。その為、先日WEBから予約を行いました。

因みに他にも何処か良いところが有れば教えてください、そういうフォームを記事の下に設けました因みにこれプラグインです。全部の内容が本人に届くわけではありません。

タグ

web, スルー, フォーム, プラグイン, 予約, 会話, 何処, 何処か良いところ, 全部, 冨樫義博展, , 大阪, , 旅行, 日本語, 時期, 本人, 片言, 状態, 高知空港,

chatGPTを使用していますか。”YesOrNo”

2023.02.28

Logging

おはようございます、chatGPTをお仕事でも活用しています。

例えば「Bootstrapで下記の情報(単語一覧)を使用してフォームを構築して」と指示すると、コーディングしたBootstrapの雛形を生成してくれます。なので、大量の項目数を必要とする場合などは間違いなく力を発揮してくれます。

因みにchatGPTはコーディングを途中で辞めてしまう場合がありますので、その場合は続きを書いてという指示を出せば、続きのコードを書いてくれますが、ここで注意点があり先ほどと同じスタイルのコードで書いてくれればよいのですが、たまにコーディングスタイルを変えてしまう場合があります。そう言う時は先ほどの続きを書いてと指示を出すか、最初からやり直してもらうのが良いです。

その他の方法として一度に渡すタスク量を少なくして小出しに指示を出すとでも良い結果が得られます。

コーディングしてくれた物が完璧なものをchatGPTに要求するより、後は人の手で直す方が効率が良いのです、ですので自分はこれで全てが現段階で出来るとは思っていませんし、そういう使い方は難しいとも思っています。

タグ

Bootstrap, ChatGPT, コーディング, コーディングスタイル, コード, スタイル, その他, タスク量, フォーム, 一度, 下記, 効率, 単語一覧, 小出し, 指示, 最初, 現段階, 途中, 雛形, 項目数,

Photo by Clem Onojeghuo on Pexels.com

びっくり髭剃りスムースが凄い! #ニベアメンシェービングフォームスムース

2022.12.06

Logging

おはようございます、高知県はどんより曇り空が続きますね🙄今日はどうかな?

今日は昨日、使用したシェービングフォームスムースの話を書きます。女性には全然関係ない話なのでスルーしてください。今までシェービングフォームスムースは外国製のスムースを使用していましたが、この度、日本製のシェービングフォームスムースを使用してみようかなって思って使ってみました。

使用してみてめちゃ驚きです😳、泡が今までと全然違うし本当に泡が分厚いです!!。髭を剃った感覚も今までよりも綺麗に剃れたような気がします。

そして、何だか理髪店のシェービングフォームスムースのような香りもするし、なんかすごいよコレ。因みに自分は一昔前までは電動髭剃りで剃ってたのだけど、この頃は自分で剃るようになりました、その理由は肌荒れがあるから仕方無く剃るようになったですが、今ではそれ程苦にならないぐらいになりました。

タグ

アメン, コレ, シェービング, スムーズ, スルー, ニベ, びっくり, フォーム, , , 今日, 使用, 外国, 女性, , 感覚, 日本, , 昨日, 曇り空, 本当, , , 理由, 理髪店, 綺麗, 肌荒れ, 自分, , , 電動, , 高知県, , 髭剃り,

Photo by Vlada Karpovich on Pexels.com

検索されなかったワード埋もれた価値について! #javascript #php

2022.09.26

Logging

おはようございます、今日は引き落とし日です🫠。

さて、今日は検索されなかったキーワードの価値のお話です。此処で言う検索されなかったというのは、エンターキーや検索ボタンを押さなかった、キーワードの価値のお話です、たぶん、その情報をGさんは収集してそうな気がします。GサイトやYサイト等のキーワード収集は基本出来ませんが、自サイトの検索フォームの情報を収集出来ます。

此処からは技術的なお話になりますが、検索ボタンを押した時とは別に文字入力をしたときの挙動を感知するプログラムを導入する事により比較的簡単に導入できるかと思います。例えば下記のようなjavascriptコードを検索フォームに導入します。

document.getElementById("sh").addEventListener("input",(e)=>{
    $.ajax({
        type: "post",
        url: "example.com/sh.php",
        data: {text:this.value},
        dataType: "json",
        success: function (response) {
            
        }
    });
});

あとはPHP側でデータを受信しデータベース等に保存すれば良いだけです。この検索されなかったワードは、結構価値があると思います。より細かな情報を取得したい方はIPアドレスどのページからの情報なのかも取得可能です。

これらのデータを元に販路開拓は十分出来ると思います。情報を保存する際に大量の情報が収集されるので、保存先に一工夫必要になります。JSで制御する手段もありますが、それだとあまり情報収集出来ないですからね。

因みにこのサイトに情報収集の処理は導入していません(今後の導入は未定)。

タグ

addEventListener, ajax, document, getElementById, gt, input, javascript, php, quot, sh, エン, お話, キーワード, コード, サイト, ターキー, とき, フォーム, プログラム, ボタン, ワード, 下記, , 今日, 価値, 入力, 収集, 基本, 導入, 情報, 感知, 挙動, 文字, , , 検索, 此処, , 簡単, ,

submit(サブミット):送信させない4つの方法です🙄。#javascript #サブミットキャンセル

2022.09.07

Logging

おはようございます、台風一過が去りましたね😌。

さて、今日はsubmit(サブミット):送信させない4つの方法を記載します、方法は大きく分けて2つの方法があり、それを細分化して4つの方法になります。まず、一番目は“送信する際(form側)”にてキャンセルする方法です。この場合、addEventListener(アッドイベントリスナー)でキャンセル処理する場合とonsubmitを使用してキャンセルする方法があります。

サンプルコード例1と例3にあたるコードが上記のコードになります。

次に”ボタンをクリック”した際にサブミット(送信)処理をキャンセルする方法です、この方法でも送信を阻止する事ができます。

サンプルコード例2と例4にあたります、自分としてはフォームで処理した方が良いかなと思いますが、こちらでも送信をキャンセルする事ができます。

尚、ソースコードは下記になります。また、参考にしたサイトのリンクを貼っときます。MDNのリンクです。

    <form id="frm" method="post" action="./example/">
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary">Submit1</button>
    </form>
    <form method="post" action="./example/">
        <input type="hidden" name="example" value="data">
        <button id="btn" type="submit" class="btn btn-primary">Submit2</button>
    </form>    
    <form method="post" action="./example/" onsubmit="return func1()" >
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary">Submit3</button>
    </form>
    <form method="post" action="./example/"  >
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary" onclick="return func2()" >Submit4</button>
    </form>
//例1
document.getElementById("frm").addEventListener("submit",function(event){
    event.preventDefault();
});
//例2
document.getElementById("btn").addEventListener("click",function(event){
    event.preventDefault();
    event.stopPropagation();//インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。 
});
//例3
function func1(){
    return false;
}
//例4
function func2(){
    return false;
}

タグ

, 2, , 4, addEventListener, Form, javascript, onsubmit, submit, アッド, イベント, キャンセル, クリック, コード, こちら, サブミット, サンプル, それ, フォーム, ボタン, リスナー, , 上記, , 今日, 使用, , , 処理, 台風一過, 場合, , 方法, , 細分化, 自分, 記載, 送信, 阻止, ,

T2のお問い合わせフォームフロント側が緩く完成、続きは今の所なしかな。

2021.10.26

Logging

朝起きは三文の徳ですが・・・。本当なのでしょうか、朝方からお問い合わせフォームのちょこちょこと残りを制作しておりました。

T2のお問い合わせフォームフロント側が緩く完成しました、パチパチ?。この雛形を元に制作してくださいと業者へ持っていくと値引きはしてくれるとは思います。即興ですが一応、汎用性がある作りにしています。

code{0} お問い合わせフォーム編-part1

フロント側は実はあまり得意ではないです、全然わからない訳ではないのですがこの頃、コードを書かなかったら抜け落ちている部分が結構あり反省しております?

code{0} お問い合わせフォーム編-part2

ソースコードはgithubに置いてありますのでご自由にご使用くださいませ。あまり労力とかかけていないのですが、pushしてもgithubのページに反映されないという事象が何度もありまして反映待ちで結構な時間を取られました。

https://github.com/zip358/T2_pg/tree/main/inquiry

タグ

2, am-BShXaVuI, com, github, https, push, watch, www, youtube, お問い合わせ, コード, ソース, フォーム, フロント, ページ, , 事象, , 何度, 作り, 使用, , 制作, 労力, 即興, 反映, 反省, 完成, 得意, , , 時間, 朝方, 朝起き, 本当, 業者, 汎用性, 結構, , 部分, 雛形, ,

お問い合わせフォームとメールフォームの考え方は同じ。

2021.06.07

Logging

お問い合わせフォームとメールフォームの考え方は同じです。AからBにデータを送信してそれを元に処理をしているだけです。これはフォームに限らず、プログラムはデータを元に計算などを行い結果を出力しているに過ぎないのです。コンピュータというのは高速にデータを分類したり、計算したりしているだけなのです。

プログラミングに挫折する人は、いろいろな事に疑問を持って先に進まない人が多いです。どうしてそうなるのかという所まで考えようとしていて前に進まない人が多いです。

https://www.youtube.com/watch?v=5cl3D95KrN4

逆にそうなるだという事を受け入れる人の方が覚えが早いです。最初はルールを覚えたほうが良いですね。
小学生でプログラミングを始めたい方は、人のプログラミングコードを模写して、そのコードの一部の数字などを変更してみて、こうするとこうなるのかという形で覚えていくほうが良いと感じます。参考書には難しい言葉を使って書いている事が多いので、そのような形で覚えるほうが良いでしょう。
今回のソースコードを貼っときますので、コピーするのではなく自分で書いて動かしてみてください!
※因みにphp言語が動作する環境が必要になります。
https://www.sakura.ne.jp/standard.html#plan

<!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="お問い合わせ"/>
<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.2/css/all.min.css">
<title>お問い合わせ</title>
<style>
	body{
		background-color: #f8f9fa;
	}
</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-12 mt-5">
				<h2>お問い合わせ</h2>
				<input class="form-control mt-1" type="text" name="name" placeholder="お名前を入力ください">
				<input class="form-control mt-1" type="text" name="email" placeholder="メールアドレスを入力ください">
				<div class="form-group mt-1">
					<label for="my-select">お問い合わせ</label>
					<select id="my-select" class="form-control" name="ptn">
						<option value="問い">お問い合わせ</option>
						<option value="意見">ご意見</option>
					</select>
				</div>
			</div>
		</div>
		<div class="form-group mt-1">
			<label for="my-textarea">内容</label>
			<textarea id="my-textarea" class="form-control" name="text" rows="3" placeholder="内容を入力ください"></textarea>
		</div>
		<button class="btn btn-primary" id="btn" type="button">送信</button>
	</div>
<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.6.0/js/bootstrap.min.js"></script>
<script>
	document.getElementById("btn").addEventListener("click",function(){
		let data = {};
		data["name"]  = document.getElementsByName("name")[0].value;
		data["email"] = document.getElementsByName("email")[0].value;
		data["ptn"]   = document.getElementsByName("ptn")[0].value;
		data["text"]  = document.getElementsByName("text")[0].value;
		$.ajax({
			type: "POST",
			dataType: "json",
			url: "./send.php",
			data: data,
			success: function (response) {
				if(response){
					console.log(response);
				}
			}
		});
	});
</script>
</body>
</html>
<?php
print json_encode($_POST);

タグ

いろいろ, お問い合わせ, コード, これ, コンピュータ, それ, データ, フォーム, プログラミング, プログラム, メール, ルール, 一部, , , , 処理, 出力, 分類, , 参考書, 変更, 小学生, , , 挫折, 数字, , 最初, 模写, 疑問, 結果, 考え方, 言葉, 計算, 送信, , 高速,

簡易的なメールフォームとメール送信のプログラムを書くのにかかる時間は?

2021.05.28

Logging

簡易的なメールフォームとメール送信のプログラムを書くのにかかる時間は?大体10分?15分ぐらいかと思います。本当はエラーチェックなどの機能をちゃんとした物に置き換える必要があるけど、ざっくり考え方はこれだけで良いじゃないかなと思っています。下記のコードを制作するのに参考にしたサイトのリンクを貼っときますね。

https://www.youtube.com/watch?v=xqg-zp2cHW8

https://techplay.jp/column/550https://techacademy.jp/magazine/19300

上記のコードを拝借してコードを書き、簡易的な二重送信防止対策と簡易的なエラーチェックをプログラミングしていますが、ここにreCAPTCHAなどの機能を入れてあげるとボット対策にもなるので良いかもしれません。ソースコードを見て後から気づいたのですが、ポストしているnameのデータを受け取っていない事があとから気づきました。因みにPOSTの生データが欲しいと言うときはこのように書くと取得することが可能ですよ。

<?php
 $data = file_get_contents('php://input');
?>
reCAPTCHA ENTERPRISE Updated Video
<?php
session_start();
$toke_byte = openssl_random_pseudo_bytes(16);
$csrf_token = bin2hex($toke_byte);
$_SESSION['csrf_token'] = $csrf_token;
?>
<!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.2/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>sendmail</title>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<form method="post" action="./sendmail.php">
					name<input class="form-control" type="text" name="name">
					email<input class="form-control" type="text" name="email">
					<div class="form-group">
						<label for="my-textarea">Text</label>
						<textarea id="my-textarea" class="form-control" name="text" rows="3"></textarea>
					</div>
					<input type="hidden" name="csrf_token" value="<?=$_SESSION['csrf_token']?>">
					<?=$_SESSION["sendmail"]!=="ok"?'<button class="btn btn-primary" type="submit">submit</button>':"NG"?>
				</form>
			</div>
		</div>
	</div>
<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>
</body>
</html>
<?php
session_start();
?>
<!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.2/css/all.min.css">
	<link rel="stylesheet" href="assets/css/style.css">
	<title>sendmail</title>
</head>

<body>
	<div class="container">
		<div class="row">
			<div class="col-12">
				<?= EmailSend() ?>
			</div>
		</div>
	</div>
	<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>
</body>

</html>
<?php

function EmailSend()
{

	$check = function ($val = "") {
		return isset($val) ? $val : false;
	};

	mb_language("Japanese");
	mb_internal_encoding("UTF-8");

	$to = $_POST['email'];
	$title = "test-mail";
	$message = $_POST['text'];
	$headers = "From: from@example.com";
	if (
		isset($_POST["csrf_token"])
		&& $_POST["csrf_token"] === $_SESSION['csrf_token']
	) {
		if (($check($to) && $check($title) && $check($message)) && mb_send_mail($to, $title, $message, $headers)) {
			$_SESSION["sendmail"] = "ok";
			return "メール送信成功です";
		} else {
			$_SESSION["sendmail"] = "ng";
			return "メール送信失敗です";
		}
	} else {
		return "不正なリクエストです";
	}
	return false;
}

タグ

10, 15, 2, 550, 8, cHW, column, com, https, jp, name, POST, reCAPTCHA, techplay, watch, www, xqg-zp, youtube, あと, エラー, コード, ここ, これだけ, サイト, ソース, チェック, デー, データ, フォーム, プログラミング, プログラム, ポスト, ボット, メール, リンク, 上記, 下記, , , 制作, 参考, 大体, 対策, , 必要, 拝借, 時間, 本当, 機能, , , 簡易的, 考え方, 送信, 防止,

SEOって意味があるのかわからないけれどAll in One SEOの採点は気にしてる。

2021.05.14

Logging

SEOって意味があるのかわからないけれどAll in One SEOの採点は気にしてる自分。ワードプレス(WordPress:WP)にはオールインワンSEO(エスイオー)というプラグインがあり、最新版には記事単位でSEO採点をしてくれる機能が無料でついている。このWPプラグインのコード(中身の処理)がどうなっているかは知らないけれど、恐らく記事のデータはWPプラグインの提供元(All in One SEO)へデータを送信していることは間違いないのではないかと思っています。このSEO採点基準は投稿フォームの下の方にヒントとして記載されているので、その基準に記事を書けばスコアは最低でも70点以上の採点になるはずです。

【2021年度版】All in One SEO(WordPressプラグイン)の設定方法

因みにこの頃、書いている自分の記事は大体、80点以上の採点になることが多くなってきている。この機能が導入されてから記事を見返したり、SEOの得点を気にするようになった。それでも前から言っているように最終的に記事を読むのは人なので人が読んで評価が良いものを投稿する事こそが最強のSEOだと思っています。

しかし記事が検索サイトに表示されないと人目につかないので、SEOはある程度意識しないといけないなというのが今の自分の考えだったりします。昔に比べて検索の上位を狙うのが難しくなっていることは確かな事で数撃ちゃ当たる戦法はもう難しくなってきています。YOUTUBEは今の所、それが通用するみたいです。

なぜ、数撃ちゃ当たるの戦法が難しくなってきているかといえば、SEOを熟した企業が記事を量産しているから、個人で記事を書いている人が太刀打ちが難しくなってきているのが現状です。

https://twitter.com/zip358com/status/1389684900937097217

ならば、プログラムで記事を量産させようと思い立ち、先日、記事を自動生成するサービスをいろいろ調べていた。調べると量産させるサービスがあった。そのサービスは「Articoolo(日本語はベータ版:2021年)」というサービスで人工知能の機能を使用し記事が作成されるものだった。試してみた結果、日本語が整っていなく未完成な記事が生成された、今のところは使用できるレベルではない(2021/05)。

【取材】超巨大言語モデルの開発を発表したLINEさんにその裏側を聞いてみた!

まだ、先の話になるのだけどこんな取り組みがある。LINEは日本語に特化した人工知能モデルを作ろうとしている。そのサービスが完成すればそれを使用して記事の自動制作を行えないかという事を自分は考えています。おそらくベータ版サービスは無料で作成できそうなので精度が良ければ使用してみたいと思っています。

今でも自然言語処理と人工知能のことを正しく理解している人であれば、記事を量産できるかもしれないが・・・。

タグ

70, 80, all, in, one, SEO, WordPress, wp, エスイ, オー, オールインワン, コード, こと, スコア, データ, パス, ヒント, フォーム, プラグイン, プレス, ワード, , 中身, 処理, 単位, 基準, 大体, 導入, 得点, 意味, 投稿, 採点, 提供, , 最低, 最新版, 機能, , 無料, 自分, 記事, 記載, 送信, ,

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]);

タグ

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