- 投稿日：2022-01-09T22:04:35+09:00
【PHP】htmlspecialchars()の使い方
背景 会員登録画面を作成中に出てきたので、備忘録かねて作成しました。 macOS : Monterey PHP : 8.1.1 エスケープ処理について htmlspecialchars()はエスケープ処理を行う関数であるが、まずエスケープ処理ってなんだってなったので調べてみた。 マークアップ言語のHTMLに限らず、プログラミング言語ではその言語にとって特別な意味を持つ記号があり、それをエスケープシーケンス（エスケープ文字、特殊文字）と言う。例えばHTMLでは < とか > とかが該当する。 記事に文章を入力するときなどに < や > を使おうとすると、通常これらの文字は、HTMLを動かす為に必要な記号だと判断され上手く表示されない。 そのため、入力フォームなどで < や > を文字として変換するための処理が用意されており、その処理のことをエスケープ処理という。 htmlspecialchars（）の使い方 htmlspecialchars()の引数 htmlspecialchars(変換したい文字列, フラグ（変換するルールみたいなもの）, エンコード, 既存のhtmlエンティティをエンコードするか否か(無くてもいい)) htmlspecialchars()使用例 htmlspecialchars($memo, ENT_QUOTES, "UTF-8") 第一引数 : エスケープ処理したい文字列 第二引数 : デフォルトでは、ENT_QUOTES | ENT_SUBSTITUTE | ENT_HTML401 詳しくは公式ドキュメント参照 第三引数 : UTF-8などのエンコードを指定 第四引数 : 一つのコード内で、htmlspecialchars()を二重にかける場合などに、変換した文字をさらに変換することを防止（勉強不足ですいませんが、使い方がよく分かってません） 戻り値は、変換後の文字列となる。 因みに、このメソッドはクロスサイト・スクリプティング脆弱性を防止するために重要なメソッドになる。 参照資料 1.PHP公式ドキュメント https://www.php.net/manual/ja/function.htmlspecialchars.php 2.エスケープ処理について https://www.f5.com/ja_jp/services/resources/glossary/escape-processing 3.第四引数について https://blog.dododori.com/create/program/htmlspecialchars/ 4.『体系的に学ぶ 安全なWebアプリケーションの作り方』 P120~137 https://wasbook.org/
- 投稿日：2022-01-09T12:15:44+09:00
BINGOや,何かに使える,ランダムに数字が出てくるものを作ろう
今回は,BINGOMや、何かに使えるランダムに数字が出てくるものを作ってみたいと、思います それは、1~75です もっと上の数字までしてほしい方は、お知らせください スターティン <body> <body style="background-image: url(mmこ.jpg);"> </style> <script type="text/javascript"><!-- mres = new Array(); mcom = new Array(); // おみくじの結果とコメント集 mres[0] = '1'; mcom[0] = '1でござんす'; mres[1] = '2'; mcom[1] = '2でござんす'; mres[2] = '3'; mcom[2] = '3でござんす'; mres[3] = '4'; mcom[3] = '4でござんす'; mres[4] = '5'; mcom[4] = '5でござんす'; mres[5] = '6'; mcom[5] = '6でござんす'; mres[6] = '7'; mcom[6] = '7でござんす'; mres[7] = '8'; mcom[7] = '8でござんす'; mres[8] = '9'; mcom[8] = '9でござんす'; mres[9] = '10'; mcom[9] = '10でござんす'; mres[10] = '11'; mcom[10] = '11でござんす'; mres[11] = '12'; mcom[11] = '12でござんす'; mres[12] = '13'; mcom[12] = '13でござんす'; mres[13] = '14'; mcom[13] = '14でござんす'; mres[14] = '15'; mcom[14] = '15でござんす'; mres[15] = '16'; mcom[15] = '16でござんす'; mres[16] = '17'; mcom[16] = '17でござんす'; mres[17] = '18'; mcom[17] = '18でござんす'; mres[18] = '19'; mcom[18] = '19でござんす'; mres[19] = '20'; mcom[19] = '20でござんす'; mres[20] = '21'; mcom[20] = '21でござんす'; mres[21] = '22'; mcom[21] = '22でござんす'; mres[22] = '23'; mcom[22] = '23でござんす'; mres[23] = '24'; mcom[23] = '24でござんす'; mres[24] = '25'; mcom[24] = '25でござんす'; mres[25] = '26'; mcom[25] = '26でござんす'; mres[26] = '27'; mcom[26] = '27でござんす'; mres[27] = '28'; mcom[27] = '28でござんす'; mres[28] = '29'; mcom[28] = '29でござんす'; mres[29] = '30'; mcom[29] = '30でござんす'; mres[30] = '31'; mcom[30] = '31でござんす'; mres[31] = '32'; mcom[31] = '32でござんす'; mres[32] = '33'; mcom[32] = '33でござんす'; mres[33] = '34'; mcom[33] = '34でござんす'; mres[34] = '35'; mcom[34] = '35でござんす'; mres[35] = '36'; mcom[35] = '36でござんす'; mres[36] = '37'; mcom[36] = '37でござんす'; mres[37] = '38'; mcom[37] = '38でござんす'; mres[38] = '39'; mcom[38] = '39でござんす'; mres[39] = '40'; mcom[39] = '40でござんす'; mres[40] = '41'; mcom[40] = '41でござんす'; mres[41] = '42'; mcom[41] = '42でござんす'; mres[42] = '43'; mcom[42] = '43でござんす'; mres[43] = '44'; mcom[43] = '44でござんす'; mres[44] = '45'; mcom[44] = '45でござんす'; mres[45] = '46'; mcom[45] = '46でござんす'; mres[46] = '47'; mcom[46] = '47でござんす'; mres[47] = '48'; mcom[47] = '48でござんす'; mres[48] = '49'; mcom[48] = '49でござんす'; mres[49] = '50'; mcom[49] = '50でござんす'; mres[50] = '51'; mcom[50] = '51でござんす'; mres[51] = '52'; mcom[51] = '52でござんす'; mres[52] = '53'; mcom[52] = '53でござんす'; mres[53] = '54'; mcom[53] = '54でござんす'; mres[54] = '55'; mcom[54] = '55でござんす'; mres[55] = '56'; mcom[55] = '56でござんす'; mres[56] = '57'; mcom[56] = '57でござんす'; mres[57] = '58'; mcom[57] = '58でござんす'; mres[58] = '59'; mcom[58] = '59でござんす'; mres[59] = '60'; mcom[59] = '60でござんす'; mres[60] = '61'; mcom[60] = '61でござんす'; mres[61] = '62'; mcom[61] = '62でござんす'; mres[62] = '63'; mcom[62] = '63でござんす'; mres[63] = '64'; mcom[63] = '64でござんす'; mres[64] = '65'; mcom[64] = '65でござんす'; mres[65] = '66'; mcom[65] = '66でござんす'; mres[66] = '67'; mcom[66] = '67でござんす'; mres[67] = '68'; mcom[67] = '68でござんす'; mres[68] = '69'; mcom[68] = '69でござんす'; mres[69] = '70'; mcom[69] = '70でござんす'; mres[70] = '71'; mcom[70] = '71でござんす'; mres[71] = '72'; mcom[71] = '72でござんす'; mres[72] = '73'; mcom[72] = '73でござんす'; mres[73] = '74'; mcom[73] = '74でござんす'; mres[74] = '75'; mcom[74] = '75でござんす'; // 関数 function ShowKuji(kRes,kCom) { // ジャンケンを選ぶ var kuji = Math.floor(Math.random()*mres.length); // ジャンケンを表示 document.getElementById(kRes).innerHTML = mres[kuji]; document.getElementById(kCom).innerHTML = mcom[kuji]; } // --></script> <div class="omikujibase"> <p id="KujiRes" class="kRes">数字は何が出るかな</p> <p id="KujiCom" class="kCom">＊＊＊</p> </div> <p class="button"><input type="button" value="好きな秒数Enrerを長押しして、数字を引く" onclick="ShowKuji( 'KujiRes', 'KujiCom' );" /></p> </div> </style> <html> <body> <pre> <ol> です おみくじきのうです 終了
- 投稿日：2022-01-09T12:00:05+09:00
今回はおみくじを作ります ＊1日1回御神籤編
前回は、おみくじ何回も押せる編を、作りました 今回は、1日1回編です ＊ページを更新すると、また、押せます。ページを閉じてまた開くと、また押せます そこには、ご了承ください <!--背景設定したかったら、()に、入れる--> <body style="background-image: url(.jpg);"> <div class="samplearea"> <div class="omikujibase"> <p class="kRes" id="KujiRes2">？？</p> <p class="kCom" id="KujiCom2">＊＊＊</p> </div> <p class="button"> <input id="lottery-start" onclick="ShowKuji( 'KujiRes2', 'KujiCom2' );" type="button" value="おみくじを引く"/> </p> </div> <script type="text/javascript"> mres = []; mcom = []; // おみくじの結果とコメント集 mres[13] = ' 石墨丘 '; mcom[13] = '人生が、30年伸びる～お父さんたちより、80年長く生きれるよ'; mres[12] = ' 平 '; mcom[12] = '大吉より上だ 好き～～～～～～～なこと、させてくれるで'; mres[0] = '大吉'; mcom[0] = '好きなものをなんぼでも買ってくれるかもしれへんで'; mres[1] = '中吉'; mcom[1] = '人生の中で一番楽しい日になるかも'; mres[2] = '小吉'; mcom[2] = '勉強に進んで出来る様になるかもね！！'; mres[3] = ' 吉 '; mcom[3] = '頑張ったら褒められるかも'; mres[4] = '末吉'; mcom[4] = '頭が、回転しなくて勉強できないかも'; mres[5] = ' 凶 '; mcom[5] = '今日は不幸だ。元気に遊んだら変わるかも'; mres[6] = ' 大凶 '; mcom[6] = '誰もからも、しゃべてくれなくなるかも'; mres[7] = ' 鬼吉 '; mcom[7] = 'すごくひどい病気になって30年、入院生活になるかも'; mres[8] = ' 悪吉 '; mcom[8] = 'ストレスがすごくたまって、友達にいじめをしてしまうかも'; mres[9] = ' 嫌凶 '; mcom[9] = 'いらいらして自殺してしまうかも'; mres[10] = ' 変凶 '; mcom[10] = 'パソコンウイルスに感染して、パソコンを没収されるかも '; mres[11] = ' 死亡凶 '; mcom[11] = '巨大地震が起きて、家が壊れてご飯も食べれなくなって、死ぬかも'; /** * くじ引きロジック * @param kRes * @param kCom * @constructor */ function ShowKuji(kRes, kCom) { // くじを混ぜる const lotteries = Math.floor(Math.random() * mres.length); // くじ引き結果表示 document.getElementById(kRes).innerHTML = mres[lotteries]; document.getElementById(kCom).innerHTML = mcom[lotteries]; // 1回だけ引ける document.getElementById('lottery-start').disabled = true; } </script> </body>
- 投稿日：2022-01-09T11:02:01+09:00
おみくじを作ろう ＊何回も押せる版
こんかいは、おみくじ（御神籤）何回も押せる編を作ってみます スターティン <body> <body style="background-image: url(mmこ.jpg);"> </style> <script type="text/javascript"><!-- mres = new Array(); mcom = new Array(); // おみくじの結果とコメント集 mres[0] = '大吉'; mcom[0] = '今日はラッキーな日'; mres[1] = '中吉'; mcom[1] = 'いいことあるかも？'; mres[2] = '小吉'; mcom[2] = 'そこそこ良い日かも'; mres[3] = ' 吉 '; mcom[3] = '頑張れば報われる？'; mres[4] = '末吉'; mcom[4] = 'まあまあでしょう。'; mres[5] = ' 凶 '; mcom[5] = '今日は不幸だ。元気に遊んだら変わるかも'; mres[6] = ' 大凶 '; mcom[6] = '誰もからも、しゃべてくれなくなるかも'; mres[7] = ' 鬼吉 '; mcom[7] = 'すごくひどい病気になって30年、入院生活になるかも'; mres[8] = ' 悪吉 '; mcom[8] = 'ストレスがすごくたまって、友達にいじめをしてしまうかも'; mres[9] = ' 嫌凶 '; mcom[9] = 'いらいらして自殺してしまうかも'; mres[10] = ' 変凶 '; mcom[10] = 'パソコンウイルスに感染して、パソコンを没収されるかも '; mres[11] = ' 死亡凶 '; mcom[11] = '巨大地震が起きて、家が壊れてご飯も食べれなくなって、死ぬかも'; mres[13] = ' 石墨丘 '; mcom[13] = '人生が、30年伸びる～お父さんたちより、80年長く生きれるよ'; mres[12] = ' 平 '; mcom[12] = '大吉より上だ 好き～～～～～～～なこと、させてくれるで'; // 関数 function ShowKuji(kRes,kCom) { // ジャンケンを選ぶ var kuji = Math.floor(Math.random()*mres.length); // ジャンケンを表示 document.getElementById(kRes).innerHTML = mres[kuji]; document.getElementById(kCom).innerHTML = mcom[kuji]; } // --></script> <div class="omikujibase"> <p id="KujiRes" class="kRes">くじを引いてみよう</p> <p id="KujiCom" class="kCom">＊＊＊</p> </div> <p class="button"><input type="button" value="1日一回までおみくじを引く" onclick="ShowKuji( 'KujiRes', 'KujiCom' );" /></p> </div> </style> <html> <body> <pre> <ol> これで、OK これにて完成です は、終了
- 投稿日：2022-01-09T10:49:40+09:00
すごくシンプルなタイピングゲームを作ろう
今回は、タイピングゲーム＊くそ を、作ってみましょう <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="GENERATOR" content="UTF-8 Writer" /> <title>私が作った、タイピングゲーム</title> <h1>私が作った、タイピングゲーム</h1> <script> document.onkeydown = typeGame; //キー押下時に関数typeGame()を呼び出す //文字を格納する配列 var moji = new Array("a","b","c","d","e","f","g","h","i", "j","k","l","m","n","o","p","q","r", "s","t","u","v","w","x","y","z"," "," "); //キーコードを格納する配列 var kcode = new Array(65,66,67,68,69,70,71,72,73, 74,75,76,77,78,79,80,81,82, 83,84,85,86,87,88,89,90); //0～25までの乱数を格納する配列 var rnd = new Array(); //グローバル変数群 var mondai = ""; //問題の文字列を格納 var cnt=0; //何問目か格納 var typStart,typEnd; //開始時と終了時の時刻を格納 //0～25までの乱数を200個作成して配列rndに格納する関数 function ransu() { for ( var i = 0 ; i < 200 ; i++ ) { rnd[i] = Math.floor( Math.random() * 26 ); } } //タイピングゲームの問題をセットする関数 function gameSet() { //カウント数をクリアする cnt=0; //まずは問題文を作る ransu(); //問題文をテーブルを使って表示。各セルはID名「word＋数字」を付す mondai="<table class='Q'>"; for ( var i = 0 ; i < 10 ; i++ ) { mondai += "<tr>"; for ( var j = 0 ; j < 20 ; j++ ) { var idnum =i*20+j; mondai += "<td id='word"+idnum+"'>"+moji[ rnd[idnum] ]+"</td>"; } mondai += "</tr>"; } mondai += "</table>"; //問題枠に表示する document.getElementById("waku").innerHTML = mondai; } //キー入力を受け取る関数 function typeGame(evt) { var kc; //入力されたキーコードを格納する変数 //入力されたキーのキーコードを取得 if (document.all) { kc = event.keyCode; } else { kc = evt.which; } //入力されたキーコードと、問題文のキーコードを比較 if (kc == kcode[ rnd[cnt] ]) { //以下、キーコードが一致した時の処理 //最初の1文字が入力された時間を記録する if (cnt==0) { typStart = new Date(); } //入力されたセルの文字色を灰色にする var idName = "word"+cnt; document.getElementById(idName).style.color="#dddddd"; cnt++; //カウント数を＋１にする //全文字入力したか確認 if ( cnt == 200) { //全文字入力していたら、終了時間を記録する typEnd = new Date(); //終了時間－開始時間で掛かったミリ秒を取得する var keika = typEnd - typStart; //1000で割って「切捨て」、秒数を取得 var sec = Math.floor( keika/1000 ); //1000で割った「余り(%で取得できる）」でミリ秒を取得 var msec = keika % 1000; //問題終了を告げる文字列を作成 var fin=" GAMECLEAR GAMESET 時間："+sec+"秒"+msec; //問題枠にゲーム終了を表示 document.getElementById("waku").innerHTML = fin; } } } </script> <style type="text/css"> <!-- table.Q td { width:20px; height:20px; font-size:18pt; text-align:center; } --> </style> </head> <body onload="gameSet()" bgcolor="#ffffff" text="#000000" link="#0000ff" alink="#ff0000" vlink="#800080"> <h1></h1> <div id="waku"></div> <form> <input type="button" value="問題初期化" onclick="gameSet()"><br> <input type="button" value="好きなことを入力" onclick="location.href='ここに自分のURLを入力'"><br> </form> </body> </html> <!DOCTYPE html> <html lang="ja"> <head> 上記で、シンプルすぎるタイピングゲームを作ってみました いかがでしょう まだまだ、記事や、質問を、投稿するので、フォローをお願いいたします フォローをしてくれたら、 私も、フォローさせていただきます
- 投稿日：2022-01-09T10:32:43+09:00
サイト内検索機能を作成してみよう
ホームページにいろいろなことが、入力されていたら、 サイト内検索機能が、あったらいいですね なので、サイト内検索機能を作成機能を、投稿してみました じゃぁスタ－ト サイト内検索機能全部 <html> <css> <form action="自分のページURLを入力" method="get"> <input type="search" name="search" placeholder="検索したいことを入力"> <input type="submit" name="submit" value="検索"> </form> これで完成です なんと、3行で作れるんです すごくないですか 完成です ご参考になると辛いです