備忘録

気になったこと、調べたこと、わからなかったことなど..

【CSS】トグルボタンを作ってみる

トグルボタン
f:id:omomo_memo:20210930200545p:plain

よく見かけるこのボタン。これをcssで実装してみました。

html

<input type="checkbox" name="hoge" class="input" value="1" checked="">
<label for="hoge" class="toggle"></label>

css

.toggle {
    width: 50px;
    height: 30px;
    background: #f5f5f5;　　// チェックしていない時の背景色
    position: relative;
    display: inline-block;
    border-radius: 46px;
    transition: 0.4s;　　　　// チェックして背景色が変わるアニメーション
    box-sizing: border-box;
    border: 1.5px solid #E5E5EA;
}

.toggle:after {   // 丸いボタン
    content: "";
    position: absolute;
    width: 27px;
    height: 97%;
    border-radius: 100%;
    left: 0;
    top: 0;
    z-index: 2;
    background: #ffffffff;
    -webkit-box-shadow: 0 2px 6px #999;
    box-shadow: 0 2px 6px #999;
    transition: 0.4s;
}

.input:checked+.toggle:after {  // ボタンの動き
    left: 20px;

.input:checked+.toggle {　// チェック後の背景色
    background-color: #4169e1;
}

inputがチェックされた時に、after要素を左から20px移動させることで、丸ボタンが動いたようにみせる仕組み。

参考

cssの:after
擬似要素。要素のようなものをhtmlではなく、cssで作成する。
.toggle:afterは、toggleクラスの要素の直後に擬似要素を作成する。

cssの+(プラス)
「＋」は隣接セレクタ。その直後に出現する要素を表す。
input:checked+.toggle は、input要素でチェックされた直接にくるtoggleクラスを指す。
→今回の場合、チェックされたら背景色を変更

ちなみに、チェックしてない時にも指定のvalueを送信したい場合は、 をチェックボックスののinput前に置くことで可能。

参考サイト

cssでオンオフtoggleボタン - Qiita

【PHP】配列の自動採番 

array(1,2,3,8=>1,4=>4)

このarrayで作成される配列は

[0] => 1,
[1] => 2,
[2] => 3,
[8] => 1,
[4] => 4

となる。
一見すると疑問に思ったので、順に確認する。

まず、

array(1,2,3)

で、

[0] => 1,  
[1] => 2,  
[2] => 3,

が作られる。インデックスを省略しているので、0から採番される。

そして、

array(8=>1,4=>4)

で

[8] => 1,  
[4] => 4

が作られる。
array(1,2,3,8=>1,4=>4)の、1,2,3,8がセットに見えたので混乱してしまった。。

PHP: array - Manual

【VBA】基本的な記述

久しぶりにVBAを触ったので、基本的なコードについてまとめておく。

変数の宣言

Dim （変数名） As （型）

セルの値の取得

2通りの方法がある。 　例：B3の値を取得する場合

①Cells(3 , 2).Value
Cells（縦の行 , 横の行）みたいな感じ。

②Range("A1").Value
こちらは直感的な書き方。

CellsとRangeの使い分け

■Cellsでできること
・行と列を指定することができるため、変数を使うことができる

For i = 1 To 5  
   print Cells(<span style="color: #ff5252"><b>i</b></span>, 1).Value  
Next i

for文とかループ処理ではCellsが活躍しますね。
Rangeでも変数を使うことはできますが、実行速度がちょっと遅いらしい。

■Rangeでできること
・セルを範囲選択できる
例えば、A1からA5の複数のセルを選択するとき。

Range(A1:A5)

・名前をつけたセルを参照できる
①A1セルに名前をつけます。

Range("A1").Name = "合計"

②①で付けた名前を使って、セルを指定することができる。

Range("合計").Value

値が入っているセルの数を数える

例：A3からA10の中で値が入っているセルをカウントする

Dim cnt As Long  
cnt = WorksheetFunction.CountIf(Range("A3:A10"), "<>")

「"<>"」は「"<>" & ""」を省略したもの。
<>"" →　not ""　
という意味になる。

<>は比較演算子で、等しくない記号として使います。phpだと!=にあたります。
調べて知ったのですが、phpでも<>を使うことができるそう。!=しか知りませんでした。

https://www.php.net/manual/ja/language.operators.comparison.php

他ソフトとの連携

VBAはMicrosoftofficeに搭載されているプログラミング言語。 ということで、Excelだけでなく他のOfficeソフトと連携したりすることができる。 ExcelからOutlookを開いてメールを作成する、等。

【PHP】textareaとmb_strlenの改行コード

事象

テキストエリアに入力した文字数と、それをmb_strlen関数で数えた文字数が合わなかった。

原因

改行コードの取り扱いが違う。

詳細

mb_strlen関数は、CRLFの改行コードを2で返すそうです。
なので、受け取った文字列の改行コードを変換してあげてからmb_strlen関数に通してあげることで解決しました。

<?php
str_replace(array("\r\n", "\r"), "\n", 文字列);
?>
参考

mb_strlenと改行コードの罠 - Narusaseの日記 -ハニポってどうよ？(仮)-

【PHP】htmlspecialcharsでの多重エンコード

事象

htmlspecialcharsで特殊文字を変換したとき、何度もhtmlspecialcharsを通すと意図しない形になった。

詳細

例：
【原文】
はちみつ＆りんご

【1回目】
値　　　：はちみつ&りんご
画面表示：はちみつ＆りんご

【2回目】
値　　　：はちみつ&amp;りんご
画面表示：はちみつ&りんご

【3回目】
値　　　：はちみつ&amp;amp;りんご
画面表示：はちみつ&amp;りんご

原因

1回目では「はちみつ＆りんご」の&を変換。
2回目では、1回目で変換した「はちみつ&amp;りんご」の&を変換。
3回目では2回目で変換した「はちみつ&amp;amp;りんご」の&を変換。

変換後の文字&も変換してしまうのでこのような現象が起きました。

解決方法

htmlspecialcharsの第四引数double_encodeに、falseを設定してあげます。 double_encodeをfalseにすると、既にあるhtml特殊文字はエンコードしなくなります。

参考サイト

PHP: htmlspecialchars - Manual
第四引数double_encodeでhtmlspecialcharsの二重エスケープ防止

【HTML】テキストの縦ラインがずれる問題

HTML

cakePHP2でメール送信をする機能を作成していた時に、同じ文章を送っているのに端末によってメールのレイアウトがずれていて 修正につまってしまいました。

事象

■端末A

f:id:omomo_memo:20210510172824p:plain

■端末B

f:id:omomo_memo:20210510172837p:plain

こんな感じに、縦がずれてしまいました。

原因

端末Aと端末Bで受け取るメーラーが異なり、表示フォントの違いが原因でした。

詳細

フォントには「等幅フォント」と「プロポーショナルフォント」の2種類あります。

等幅フォントとは、文字の幅が均一であるフォントです。 それに対して、文字によって幅が異なるフォントがプロポーショナルフォントです。 可変幅フォントとも言うそうです。

端末Aの画像はくだもの名のところ、文字の幅が同じですが、端末Bではずれているのがわかります。

解決策

今回はメールを送ろうとしていたので、テキスト形式のメールではなくhtml形式でメールを送り、 フォントを指定することで解決しました。

<?php 
$Email = new CakeEmail();
$Email ->emailFormat('html');
?>

emailFormatをhtmlに設定してあげて、htmlコードで本文を送信すればOKです。 WindowsとMacで搭載しているフォントが異なるので、そこだけ注意。

【PHP】メール送信で自動改行されて文字化けする

PHP
事象　

一行にある程度文字を入れて送信したとき、文字化けが発生する。
f:id:omomo_memo:20210510174113p:plain

原因

1行に1000バイト入った状態だと、メール送信サーバーが改行を入れるため。

詳細

インターネット通信規格RFCというインターネットの仕様をまとめてある文書があります。
その中で、メールは1行1000バイトまでと決められているそうです。
なので、1行に1000バイト入っていたら、文字コードの考慮なく改行コードが入り、そこで文字化けが発生してしまうということです。
まぁ1行に1000バイトも入れることは早々ないと思いますが..

解決策

適度に改行を入れてあげるしかないと思います。
PHPには指定した文字数で、指定した文字で区切るwordwrap関数というものがあるので、それを使って区切ってあげてもいいと思います。
ただ、この関数はマルチバイトに対応していないので、日本語の文字列を区切ることに使うのは難しいかも。
色んな方がマルチバイトに対応させたwordwrap関数を作ってくださっているので、検索すれば色々出てくると思います。

参考サイト

1行1000バイトを超えると文字化けするメール | Points & Lines
PHP: wordwrap - Manual
[PHP]マルチバイト対応のwordwrapが無いから作った - Qiita
マルチバイト文字対応のwordwrap()｜php｜STEP UP BLOG