2020-08-09

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 というボタンを押すだけ。

2020-08-03

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

CSS HTML

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を使うのが良さそうです。

2020-07-23

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

CSS

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

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

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

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

2020-07-05

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してから書き込む

2020-06-08

ReactでModal windowを実装する

React JavaScript

汎用コンポーネントも存在しますが、自作のミニマル実装コードです。

ひとまずコード（スタイルなどは簡略化しています）

import React from 'react';
import PropTypes from 'prop-types';

class ModalWindow extends React.Component {
  constructor(props) {
    super(props);
    this.eventListener = this._handleEscKey.bind(this);
    this.state = {};
  }

  componentDidMount() {
    document.body.classList.add('openModal');
    document.addEventListener('keydown', this.eventListener);
  }

  componentWillUnmount() {
    document.body.classList.remove('openModal');
    document.removeEventListener('keydown', this.eventListener);
  }

  _handleEscKey(e) {
    const keyCode = parseInt(e.keyCode, 10);
    if (keyCode !== 27) {
      return false;
    }
    this.props.onClose();
  }

  render() {
    const { children, onClose } = this.props;
    return (
      <div className="modalWin_wrapper" onClick={(e) => e.target === e.currentTarget ? onClose() : null}>
        <div className="modalWin_inner">
          <button className="modalWin_close" onClick={() => onClose()}>
            &times;
          </button>
          {children}
        </div>
      </div>
    );
  }
}

ModalWindow.propTypes = {
  children: PropTypes.node.isRequired,
  onClose: PropTypes.func.isRequired
}

export default ModalWindow;

.modalWin_wrapper {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 10000;
}

.modalWin_inner {
  position: relative;
  width: 1000px;
  height: 100%;
  margin: 0 auto;
  padding: 0 0 20px;
  background: #FFF;
  overflow: scroll;
  box-sizing: border-box;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .5);
}

.modalWin_close {
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  right: 0;
  border: 0;
  background: #666;
  font-size: 40px;
  line-height: 1;
  color: #FFF;
  text-align: center;
  outline: none;
}

body.openModal {
  overflow: hidden;
}

使うときは、

<ModalWindow onClose={this.onClose.bind(this)}>
  <div>Content</div>
</ModalWindow>

のようにする。

最低限、

モーダルウィンドウの外側（ここではmodalWin_wrapperクラスのdiv要素）をクリックしたら閉じる
Escキーを押したら閉じる
モーダルウィンドウ内にも閉じるボタン（ここでは.modalWin_closeクラスのbutton要素）
閉じる時にActionの発行をしたいので、閉じるための関数は外部から渡す

を実装しています。

Escキーが押されたことを検知するにはイベントリスナーの登録が必要なので、componentDidMount()内でdocument.addEventListener('keydown', this.eventListener);しています。そしてcomponentWillUnmount()で削除します。削除する時に同じ関数を引数にする必要があるので、関数はコンストラクターで定義してしまっています。

もう一点、モーダルウィンドウを開いている状態でスクロールをすると、後ろに隠れているコンテンツもスクロールしてしまいます。これではあまり使い勝手がよろしくないので、モーダルウィンドウが開いている間はbody要素にoverflow: hiddenを設定しています。
body要素はReactのマウントポイントの外側にあるため、直接DOMツリーからアクセスしています。この部分：document.body.classList.add('openModal');。

yuw27b’s blog

技術メモと雑記