構想雑文

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

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デザインへ

Bracketsには、「拡張機能マネージャー」を使って「Emmets」をインストールして使っていますが、インストールすると必ず設定を忘れて、イラっとするとのでメモ程度のまとめ。

emmet
https://emmet.io/

公式サイトのDocumentationのCustomizationを読むと、既存のタグとかを独自のものにするときは「snippets.json」を変更するといいことが書いています。
なので、その通りに変更していきます。

なお、DreamweaverとBracketsにインストールしたEmmetの「snippets.json」についてはAdobe Blogの以下の記事が一番正しいと思います。
必ず、下記を参照のこと。

DreamweaverやBracketsでEmmetのlang=”en”を”ja”に変更する方法
https://blogs.adobe.com/japan/emmet-lang-setting-for-dreamweaver-brackets/


ということでmacOS版のBracketsを設定

メニューのヘルプから「拡張機能のフォルダーを開く」を選択します。
img-blog20200217-1

extensionsフォルダーが表示されます。
img-blog20200217-2

このフォルダーからuserフォルダーをクリックして、
brackets-emmet　→　node_modules　→　emmet　→　libフォルダーまで移動し、snippets.jsonをBracketsで開きます。
img-blog20200217-3

先頭行から3行目の部分に、"lang"があるので、"en" を "ja" に書き換えます。
Adobe Blogの記事では、4行目の部分"locale"の"en-US"も"ja-JP"に書き換えることを案内していますが、langだけなら、3行目だけでいいようです。
img-blog20200217-4

※なお、私の場合、Adobe Blogを見るまで、"lang"しか書き換えてませんでしたが、問題なくコーディングできてました。

あとは、Bracketsを再起動すれば、完了です。

Adobe Blogの記事を読むまで知りませんでしたが「!」と書くだけでもHTML5の書式でコーディングできたんですね。

きちんと調べて調べて見るものです。


次にmacOS版のDreamweaverのEmmetsを設定します

dobe Blogの記事には以下のようなアドレスが書いてあります。

/Applications/Adobe Dreamweaver CC 2015/configuration/Shared/Emmet/Emmet/snippets.js

CC 2015のころの記事なので「Adobe Dreamweaver CC 2015」と書いてある部分を今、使っているDreamweaverのフォルダーに置き換えて探します。
img-blog20200217-6


Dreamweaverは、拡張子がjsonでなく、拡張子がjsなんですね。
img-blog20200217-7
なお、Dreamweaverの設定ファイル「snippets.js」を編集するとき、使用するエディタによっては権限がないと怒られてしまいます。
img-blog20200217-8

そういう場合は、「snippets.js」を変更する前に、ファイルを右クリックなどで「情報を見る」で表示するウィンドウの中にある「共有とアクセス権」の下にある鍵マークを選択して、「共有とアクセス権」の権限をすべて「読み/書き」に変更するなどしてどのエディタでも編集できるようにしてから設定するといいでしょう。
img-blog20200217-9


これで再起動すれば、Dreameaverも対応できます。



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

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

 

 

↑このページのトップヘ