yuw27b’s blog

技術メモと雑記

MySQL:外部キー制約のあるカラムを削除する

いつもカラムが消せない!って調べることになるのでメモ。

FOREIGN KEYが設定されたカラムを削除しようとするとエラーが出る。

ERROR 1217 (23000): Cannot delete or update a parent row: a foreign key constraint fails

まずFOREIGN KEY を削除する必要があるが、削除するためにはそのキーのシンボル値を知る必要がある。

シンボル値の確認

SHOW CREATE TABLE table_name

レスポンス:

CONSTRAINT `table_name_ibfk_1` FOREIGN KEY (column_name)...

FOREIGN KEY削除

ALTER TABLE table_name DROP FOREIGN KEY table_name_ibfk_1

カラム削除

ALTER TABLE table_name DROP COLUMN yyyy

Code Climateのテストカバレッジが「?」になった

GitHubに、Code Climateのテストカバレッジのバッジを貼り付けていたのですが、気付いたら「?」になっていました。

この部分:
f:id:yuw27b:20200906222114p:plain
(「?」の状態をスクショし忘れてしまったけど、左のMaintenabilityは表示されてて、テストカバレッジだけ「?」に)

CircleCIでビルドするときに、テスト実行→カバレッジのデータをCodeClimateに送信するようにしているのですが、いつからかカバレッジのデータが取得できなくなっていたようです。

しばらく更新も何もしていないライブラリのリポジトリだったので、仕方ないのかな、でも更新する予定もないしな、などと考えていましたが、
ふと思い立って、CircleCIで最新のBuildプロセスを再実行したら表示されるようになりました。

f:id:yuw27b:20200906223058j:plain
Pipelines -> Rerun workflow from start というボタンを押すだけ。

HTMLのprogress要素を使ってプログレスバーを表示する

HTMLにはprogress要素があり、HTMLのみでブラウザ上にプログレスバーを表示することができます。

2020年7月時点では、どのブラウザでも問題なく利用できそうです。
ブラウザ対応状況:https://caniuse.com/#feat=progress
WHATWG仕様(Living Standard):
https://html.spec.whatwg.org/multipage/form-elements.html#the-progress-element


デフォルトでどんなふうにレンダリングされるかは、ブラウザにより異なります。
以下のようなシンプルなHTMLでは、

<progress value="30" max="100">30%</progress>

このように表示されます:
30%

※タグの間のテキスト(「30%」)は、ブラウザが非対応の場合に表示されます。videoタグなどと同じですね。

CSSでの見た目の変更もある程度可能です。幅・高さ・色が変えられるので、十分実用できそうです。(ベンダープレフィックスは必要ですが。)

progress {
  width: 200px;
  height: 30px;
  background-color: orange;
}

progress::-webkit-progress-bar {
  background-color: orange;
}

progress::-webkit-progress-value {
  background-color: violet;
}

progress::-moz-progress-bar {
  background-color: violet;
}

progress::-ms-fill {
  background-color: violet;
}


以下を追加すれば角丸になります。

progress {
  width: 200px;
  height: 30px;
  border-radius: 15px;
}

progress::-webkit-progress-bar {
   border-radius: 15px;
}

progress::-webkit-progress-value {
   border-radius: 15px;
}

progress::-moz-progress-bar {
   border-radius: 15px;
}

progress::-ms-fill {
   border-radius: 15px;
}


各ブラウザでのレンダリング結果:
f:id:yuw27b:20200803220432j:plain
Firefoxの角丸は若干ぼやっとしているような。

角丸にborderを追加するとずれてしまうので、枠線をつけたい場合はbox-shadowのspreadを使うのが良さそうです。

CSSでコンテンツのトグル表示を実装する

チェックボックスを使ってます。
JavaScriptを使ったほうが表現力は高いですが、他にJS使う予定もないしとりあえず隠せればいいか…みたいなページでたまにやるやつです。


See the Pen
Toggle content by CSS
by Yu Watanabe (@yuw27b)
on CodePen.


補足みたいなちょっとした文章とか、テーブル内のコンテンツが長すぎたら隠す、みたいな場合に使う。

アニメーションとか、アクセシビリティの考慮(aria属性の追加)とかは難しいので、お手軽に済ませちゃいけないコンテンツの場合はやっぱりJSです。

MySQLのJSON型を使ってみる

MySQLは、バージョン5.7からJSON型がサポートされています。
MySQL :: MySQL 5.7 Reference Manual :: 11.5 The JSON Data Type

5.7のリリースは2015年なのでだいぶ前ですが、今さらながら使ってみました。


こういう入力フォームがあって:
f:id:yuw27b:20200705160952p:plain

しかも増やせる:
f:id:yuw27b:20200705161101p:plain

さらに1回フォーム送信したら終わり、ではなく、後日サーバからデータを読み出して編集したい。


…という仕様のWebフォームを作っていました。

このデータを保存するためにJSON型のカラムを用意して、
[{"label": "Category", "value": "xxx"}, {"label": "Input 1", "value": "yyy"}, ...]
のようなJSONを保存。フロントエンドとはJSONでやりとりするので、そのまま読み出し・書き込み(更新時は丸ごと書き換え)をします。
JSONフォーマットがおかしい場合はエラーが出るのも良いです。

使ってみたメモ
  • NULLは書き込める
  • NOT NULL属性をつけると書き込めない(cannot be nullエラー)
  • 空文字列('')は書き込めない(Invalid JSON text: "The document is empty."エラー)
  • []{}は書き込める(当然ですね)

PHPで使う(PDOでMySQLに接続):

  • MySQLから取り出した値はJSON文字列なので、json_decodeすると配列になる
  • MySQLに書き込む場合は、配列をjson_encodeしてから書き込む