構想雑文

WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。

借りているとあるレンタルサーバーのPHPの設定が変わっていたのでPHP.iniを設定。

これまで「PHPのエラー表示」「imagickが利用可」ができていたのが急に出なくなったので、以下の定義をPHP.iniで設定。

extension=imagick.so
display_errors =On
error_reporting = E_ALL

WordPressでも利用しているサーバーだったので、ついでにファイルを送信するファイルサイズの上限、アップロードするファイルサイズの上限も下記に変更。

post_max_size = 100M
upload_max_filesize = 100M

これでよし。

FileZillaでレンタルサーバー通りに、FTPの設定をしたところ　次のようなエラーメッセージが。

20221105_1

赤い文字で「GnuTLS エラー -8: A packet with illegal or unsupported version was received.」というエラー。

TLSのバージョンが違うって言われているんですが、あれ？　TLSって設定ってあったっけ？
と思ったら、「設定」→「接続」　表示の部分に「TLSオプション」って項目がありました。


スクリーンショット 2022-11-05 15.14.19


2022年11月時点では、TLS1.2になっているようですが、ここを「TLS1.0(安全ではない)」に変更するとエラーが解消されました。

これだけでエラーが解消して、サーバーに接続するなら、楽なもんです。


多分、特殊な例です。

連想配列に、例えば、以下のように同じ名前で、異なる数値が入っていて、同じ名前なら、その値はすべて合計させる場合の処理方法です。

エクセルでいうと「集計」で「合計値」を出す処理です。

$array=[["愛媛県","3"],
		["愛媛県","2"],
		["愛媛県","5"],
		["愛媛県","1"],
		["茨城県","1"],
		["茨城県","1"],
		["岡山県","1"],
		["岡山県","4"],
		["岡山県","5"],
		["岡山県","2"],
		["岡山県","5"]];

 

PHPでの集計の処理ですが

  1. Keyの名前だけで配列を新たに作る（$keys）
  2. 新たに作った配列（$keys）を使って、元の配列（$array）から同じ名前の値を取り出す。
  3. 最終的に、名前が一つだけで数値が合計した値が入った新しい配列（$total）が出来上がって処理完了。

という処理の仕方をしていきます。

Keyの名前だけで配列を新たに作る（$keys）

それぞれのKeyになっている名前をarray_columnで配列の値として取得します。

array_column


取得した名前は重複していますので、重複した名前をarray_uniqueで削除します。

array_unique

重複した名前は一応、配列になっていますが、名前が入っている配列の番号は数値が飛び飛びになっているので、array_valuesで配列の数値を0から配置し直します。

array_values

以上の処理を行うプログラムは以下のようになります。

$keys=array_values(array_unique(array_column($array,0)));

新たに作った配列（$keys）を使って、元の配列（$array）から同じ名前の値を取り出す。

新たに作った配列$keyを使って、元の配列$arrayから同じ名前の値を取り出し、合計していきます。命令は次のように記述するといいかと思います。

foreach($keys as $value){
	$num = 0;
	foreach($array as $row){
		if($row[0]==$value){
			$num = $num+$row[1];
		}
	}
	$total[$value] = $num;
}
print_r($total);

 

以上の処理で、こんな感じに出力されるはずです。

Array
(
    [愛媛県] => 11
    [茨城県] => 2
    [岡山県] => 17
)

 

ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ

ウェブサイトで、四角いボタンっぽいレイアウトの中央に文字や画像を配置したいときの書き方。

こういうレイアウトを作りたい。

 

できれば、こういう並びを作りたい、という場合。

結論を書けば、2020年現在であれば、display:flex;をこんなレイアウトを作成したい親要素と子要素に指定すればOK。

 

例えば、上の1つだけのレイアウトであれば、HTMLを次のように書くのであれば

 <div class="one">ボタン1</div>

CSSは以下の感じでコーディングすればいい。

.one{
            display: flex;
            box-sizing: border-box;
            border:2px solid #999;
            width:200px;
            height: 200px;
            align-items: center;
            justify-content: center;
}

では、こんなレイアウトのように、複数に増やす場合は、親要素にもdisplay:flex;を追加する。まずHTMLは次のようにコーディングしたとします。

<div class="wrapper">
            <div class="one">ボタン1</div>
            <div class="one">ボタン2</div>
            <div class="one">ボタン3</div>
</div>

上記のHTMLに対して、CSSはこんな感じにコーディングします。

.wrapper{
            width:640px;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: auto;
            font-size:1.5rem;
}
.one{
            box-sizing: border-box;
            border:2px solid #999;
            width:200px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

display:flex;が無効になるブラウザでは使えませんが、今時のブラウザなら、大抵は大丈夫だと思います。ダメなら、違う方法を試すしかありません。

なお、海外の質問サイトに「どうやって中央に配置すればいいの？」という質問に対して、色々なコードがサンプルとして回答されていました。
他にはどんなHTML/CSSをコーディングすればいいのか、知りたい方は、参考になると思うので閲覧することをオススメします。

How to center an element horizontally and vertically
https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically


ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。

にほんブログ村 デザインブログ Webデザインへ

XMLHttpsRequestオブジェクトは、いわゆるAjaxの時にJavaScriptでHTTPリクエストをするための仕組みです。

検索するとPOSTの方法が結構まとまってなくて、jQueryなどでAjaxばっかりしていると書き方がわからなくなるので、まとめてです。

XMLHttpsRequestオブジェクトを使うときはこんな記述をします。

let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
　　　　　　　　if (this.readyState == 4 && this.status == 200) {
　　　　　　　　　　　　サーバーからのレスポンス受信完了（readyStateが4）
　　　　　　　　　　　　HTTPリクエスト処理が成功（statusが200）のときの処理を記述
　　　　　　　　}
　　　　};
xhr.open("POST", ‘https//localhost/exmaple.txt’);
xhr.send();

XMLHttpsRequestオブジェクトの使い方について詳細は、MDN web docsのドキュメントを参考。

XMLHttpRequest
https://developer.mozilla.org/ja/docs/Web/API/XMLHttpRequest


POSTでデータを送信したいときは、send()に、パラメータを設定してデータを処理します。

わかりやすいPOSTのやり方は大きく二つ。

  1. setRequestHeader()を設定し、”Content-type", "application/x-www-form-urlencoded”を定義する
  2. formDataオブジェクトを使う

setRequestHeader()を設定し、”Content-type", "application/x-www-form-urlencoded”を定義する

send()のパラメータにGETでデータをやりとりする書き方で記述します。

例えば以下のように記述します。

send(“name=taro&age=25&where=japan”);

send()を記述する前に、setRequestHeader()に”Content-type", "application/x-www-form-urlencoded”を定義します。

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
send(“name=taro&age=25&where=japan”);

 

formDataオブジェクトを使う

formDataオブジェクトを使う方法は、setRequestHeader()を使うより楽です。


formData
https://developer.mozilla.org/ja/docs/Web/API/FormData


使い方は、まずFormDataオブジェクトを作ります。

var formData = new FormData();

FormData.appendを使って、POSTで使う値を追加します。

例えば以下のように記述します。

FormData.append(‘name’,’taro’);
FormData.append(‘age’,’25’);
FormData.append(‘where’,’japan’);

なお、次のようにFormDataを設定するときに、formをオブジェクトごと設定すれば、一回ごとにFormData.appendを設定しなくて済みます。

var myForm = document.getElementById('myForm');
var formData = new FormData(myForm);

この他に注意する点として、文字化けなどの問題が発生しないように、sendの値は、encodeURIComponent()でエンコードすることぐらいですかね。


ブログの反応がどれくらいあるか、知りたいので、ランキングサイトに入ってみました。よろしければクリックお願いします。


にほんブログ村 デザインブログ Webデザインへ

↑このページのトップヘ