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のテストカバレッジのバッジを貼り付けていたのですが、気付いたら「?」になっていました。
この部分:
(「?」の状態をスクショし忘れてしまったけど、左のMaintenabilityは表示されてて、テストカバレッジだけ「?」に)
CircleCIでビルドするときに、テスト実行→カバレッジのデータをCodeClimateに送信するようにしているのですが、いつからかカバレッジのデータが取得できなくなっていたようです。
しばらく更新も何もしていないライブラリのリポジトリだったので、仕方ないのかな、でも更新する予定もないしな、などと考えていましたが、
ふと思い立って、CircleCIで最新のBuildプロセスを再実行したら表示されるようになりました。
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%」)は、ブラウザが非対応の場合に表示されます。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; }
各ブラウザでのレンダリング結果:
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年なのでだいぶ前ですが、今さらながら使ってみました。
こういう入力フォームがあって:
しかも増やせる:
さらに1回フォーム送信したら終わり、ではなく、後日サーバからデータを読み出して編集したい。
…という仕様のWebフォームを作っていました。
このデータを保存するためにJSON型のカラムを用意して、
[{"label": "Category", "value": "xxx"}, {"label": "Input 1", "value": "yyy"}, ...]
のようなJSONを保存。フロントエンドとはJSONでやりとりするので、そのまま読み出し・書き込み(更新時は丸ごと書き換え)をします。
JSONフォーマットがおかしい場合はエラーが出るのも良いです。