Uncategorized | イメージ・マジック開発者ブログ

こんにちは、黒羽です。ここしばらく開発しているアプリケーションでは、GUI画面の入力項目やブラウザからWebSocketのメッセージとして渡されたパラメータをJsonSchemaファイルに定義した条件でバリデーションするという実装を行ったので定義ファイルを作成するときに詰まったポイントなどを共有します。そもそもJsonSchemaってなんやねんってときはググればだいたい解決できる世の中ですが、ものすごくざっくりというとプロパティの検証に必要な条件をJson形式で記述したスキーマ言語です。以下のJsonはかの有名な「見た目は子供、頭脳は大人」な某小学生のプロフィールを基に書いてみました。

{
    "name": "江戸川コナン",
    "age": 6,
    "birthdayMonth": "May",
    "birthdayDay": 4,
    "sex": "male",
    "job": ["student",
        "detective"
    ]
}

この情報をベースに某小学生の通う小学校に入ることのできる人物を定義してみました。

{
    "$schema": "https://json-schema.org/draft/2019-09/schema",
    "$id": "http://example.com/example.json",
    "type": "object",
    "default": {},
    "required": [
        "name",
        "age",
        "birthdayMonth",
        "birthdayDay",
        "sex",
        "job"
    ],
    "properties": {
        "name": {
            "type": "string",
            "minLength": 1,
        },
        "age": {
            "type": "integer",
            "default": 0,
            "minValue": 5
        },
        "birthdayMonth": {
            "type": "string",
            "enum": [ "Jan", "Feb", "Mar", "Apr", "May","Jun", "Jul", "Aug"
            , "Sep", "Oct", "Nov", "Dec"
            ]
        },
        "birthdayDay": {
            "type": "integer",
            "default": 1,
            "maxValue": 31,
            "minValue": 1
        },
        "sex": {
            "type": "string",
            "default": "",
            "enum": [
                "male","female"
            ]
        },
        "job": {
            "type": "array",
            "default": [],
            "items": {
                "type": "string",
                "enum": [
                    "student",
                    "detective",
                    "parent"
                ]
            }
        }
    }
}

定義した条件としては

名前を1文字以上持っていること
5歳以上であること
誕生月の略称がenumで定義した項目に含まれること
誕生日が1~31の範囲であること
性別が男女のどちらかであること
職業が学生、探偵、保護者のいずれかであること

となります。主題から脱線しそうなのでこれ以上の深掘りはしませんが某黒ずくめの組織の長髪の兄貴だとか警察関係者は立ち入り禁止、眠りの名探偵は職業が探偵、保護者なので立ち入り許可が出ます。基本的なデータ型のチェック(type)、数字型の値の範囲の判定(minValue, maxValue)、リスト内の項目合致(enum)と基本的なものであれば上記の定義だけで十分です。 if分岐なども可能なので条件によって子プロパティが動的に変わるプロパティなども定義はできますがかなり記述量が増えます。ここからは不便な点、詰まった点を共有します。

判定の結果がエラーだった場合において、エラー理由を取得すると日本語以外のメッセージしか取得できない

現状、JsonSchemaのエラーメッセージは日本語に対応しておらず、英語含めて3か国語程度しか選択できないようです。日本国内での使用が一番想定されている開発中のアプリではユーザーに英語のエラーメッセージを解読してもらうのは忍びないのでJsonSchemaに用意されている予約語以外のフィールド名を使用するとAnnotationsというフィールドにオブジェクトとしてまとめられる仕様を利用して日本語メッセージを返すようにしています。

動的なプロパティを作ろうとすると記述量が膨大になる

if分岐があると上で書きましたがif-thenをJson形式で書くため、素直に書くと記述量がとんでもないことになります。今回のアプリではcase文のような分岐が必要だったため以下のような雰囲気で記述しました。

"allOf": [
        {
            "if": {
                "properties": {
                    "job": {"const": "student"}
                }
            },
            "then": {
                "properties": {
                    "details": { "$ref": "#/definitions/student" }
                }
            }
        },
        {
            "if": {
                "properties": {
                    "job": { "const": "detective" }
                }
            },
            "then": {
                "properties": {
                   "details": { "$ref": "#/definitions/detective" }
                }
            }
        }
    ]

見慣れないプロパティはドキュメント等を参照してもらうとして、条件としては「jobが”student”だった場合はdefinitionsプロパティに定義したstudentのdetailsプロパティを参照し、jobが”detective”だった場合はdetectiveのdetailsプロパティを参照する、それ以外はdetailsを持たない」となっています。 allOfのおかげでここは比較的に簡潔に書けました。(それでもdefinitions項目に別途色々定義したりする必要があるのでJson自体はカオス。)

Formatのチェックがあるがかなり甘い

文字列が特定の形式にのっとっているかを判定してくれるFormatフィールドがあり、URIやIPアドレスの形式チェックができます。これは便利！！！と思って使っていますが細かいところでNGパターンがチェックからすり抜けます。止む無し。試した過程であったのは

IPアドレス→第4オクテットがなくても正常と判断される
URI→「:/」でも正常と判断される

といったものです。他のサイトを調べても「Formatだけじゃ不十分だからPatternできちんと正規表現で潰してね！」みたいな感じだったのでFormatとPatternの併用で潰している箇所があります。(ポート番号はさすがにないけど最大値最小値で判定するのは微妙だったのでここも正規表現を使って潰していたり。)

終わりに

今回はJsonSchemaについてでした。入力値の簡単なチェック処理をソースコードにだらっと書くのが嫌い、美しくない！と思う方は試してみると面白いかもしれないです。

ほぼ書き終わった記事を下書きで保存したら最初と最後だけになりました。
真ん中はどこへ行ったのでしょう？

株式会社イメージ・マジックの技術ブログ前回の担当のsoenoです。

最近CSSカスタムプロパティを触ることがあり、そのうちの機能で使わなかったところが気になったのでコードと合わせて紹介します。

CSSカスタムプロパティとは？

CSSカスタムプロパティ（またはCSS変数）は、CSSで再利用可能なスタイル情報を格納し、管理するための仕組みです。
つまりscss環境を作らなくてもcssで変数が使えます。
また、scssの変数と合わせて使うこともできます。

CSSカスタムプロパティの使い方

通常のCSSプロパティと異なり、カスタムプロパティは--（ハイフン2つ）で指定します。記載場所はcssで:root{}のカッコ内に指定すると（グローバルなスコープになるので）そのcssの読み込まれていれば別のcssからでも使えるようになります。使うときはvar();で囲います。

指定して使用する例を以下に挙げます。

:root {
  --main-bg-color: blue;
}

#main{
  background:var(--main-bg-color);
}

上の例の#main{}の中でもCSSカスタムプロパティーを指定することができますが、その場合は#main{}の外では使えません。

javascriptからCSSカスタムプロパティの値を変更する

さて、本題です。 CSSカスタムプロパティで指定した値はjavascriptから変更することができます。以下に例を挙げます。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>カスタムプロパティデモ</title>
    <style type="text/css">
        :root {
            --h1Color: #e70d9e;
            --h2Color: #9e0de7;
            --h3Color: #350de7;
            --h4Color: #0d4be7;
            --h5Color: #0da2e7;
            --h6Color: #0de77a;
        }

        h1 {
            color: var(--h1Color);
        }

        h2 {
            color: var(--h2Color);
        }

        h3 {
            color: var(--h3Color);
        }

        h4 {
            color: var(--h4Color);
        }

        h5 {
            color: var(--h5Color);
        }

        h6 {
            color: var(--h6Color);
        }

        #stage{
            display: flex;
        }
        #inputArea {
            margin: 30px;
            width: 350px;
            flex:1;
        }
        #inputArea label{
            display: inline-block;
            width: 225px;
        }
        #inputTargetArea {
            display: flex;
        }
    </style>
</head>

<body id="stage">
    <div id="targetArea">
        <h1>h1 hello world</h1>
        <h2>h2 hello world</h2>
        <h3>h3 hello world</h3>
        <h4>h4 hello world</h4>
        <h5>h5 hello world</h5>
        <h6>h6 hello world</h6>
    </div>
    <div id="inputArea">
        <div id="inputTargetArea">
            <label for="targetChanger" name="targetChanger">何を変更するか選べます。</label>
            <select id="targetChanger">
                <option value="h1">h1</option>
                <option value="h2">h2</option>
                <option value="h3">h3</option>
                <option value="h4">h4</option>
                <option value="h5">h5</option>
                <option value="h6">h6</option>
            </select>
        </div>

        <div id="inputColorArea">
            <label for="colorChanger">何色に変更するかを選べます。</label>
            <input type="color" id="colorChanger" name="colorChanger" value="#cbcbcb" />
        </div>
    </div>

    <script language="javascript">
        document.getElementById("colorChanger").addEventListener("input", changeColor, false);
        function changeColor() {
            var targetTagName = document.getElementById("targetChanger").value;
            var newColor = this.value;
            document.documentElement.style.setProperty('--' + targetTagName + 'Color', newColor);
        }
    </script>
</body>
</html>

例は次のようになっています。

　・cssカスタムプロパティでh1～h6の要素に文字色を指定。　・セレクトボックスで各要素を指定できるように。　・カラーピッカーで指定した色をCSSのカスタムプロパティーの変更で指定の要素に反映させる。

例では一対一なので良さがわかりにくいですが、変数で指定した個所すべてが変わります。ですので指定したcssを引き継げばページをまたいだ指定や、そのユーザーのみのページテーマといった指定もできそうです。

結論

scss等使わないとできなかった変数での管理などがCSSカスタムプロパティでできるようになってます。今回紹介はしていませんが、cssでなくjsで値を指定するなんてこともできます。 CSSカスタムプロパティ色々便利です。

イメージ・マジック開発者ブログ

カテゴリー: Uncategorized

JsonSchemaについて