正規表現についてのメモ

2022/05/07 2022/05/07 カテゴリーサーバー管理

正規表現は文字列の集合を1つの文字列にまとめて表現する方法です．
各種プログラミング言語で検索・置換に用いられています．

Pickrでサイトにカラーピッカーを設置する

2021/02/12 2021/02/13

Pickerはカラーピッカーのライブラリで，依存関係の問題が生じないように作られています．
jQueryも使用されていません．

設置方法

以下はPickr v1.8.0での設置例です．
はじめに，HTMLファイルにスタイルを指定します．

<!-- pickrに「classic」テーマを指定する例 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/>

<!-- Modern or es5 bundle -->
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>

body内でカラーピッカーの設置箇所には

<div class="color-picker"></div>
<script src="パス"></script>

と書いておき，ソースとなるパスにはJavaScriptによる諸設定を書いておきます．

諸設定は例えば次の通りです．
スワッチやHEX，RGB，CMYK等のコンポーネントの有無を定めることができます．

const pickr = Pickr.create({
    el: '.color-picker',
    theme: 'classic',

    // スワッチ
    swatches: [
        'rgba(244, 67, 54, 1)',
        'rgba(233, 30, 99, 0.95)',
        'rgba(156, 39, 176, 0.9)',
        'rgba(103, 58, 183, 0.85)',
        'rgba(63, 81, 181, 0.8)',
        'rgba(33, 150, 243, 0.75)',
        'rgba(3, 169, 244, 0.7)',
        'rgba(0, 188, 212, 0.7)',
        'rgba(0, 150, 136, 0.75)',
        'rgba(76, 175, 80, 0.8)',
        'rgba(139, 195, 74, 0.85)',
        'rgba(205, 220, 57, 0.9)',
        'rgba(255, 235, 59, 0.95)',
        'rgba(255, 193, 7, 1)'
    ],

    // 下で設定するインタラクションのデフォルト
    defaultRepresentation: 'HEX',

    components: {

        preview: true,
        
        // スライダーの有無
        opacity: true,
        hue: true,

        // 使用するカラーコードの種類など
        interaction: {
            hex: true,
            rgba: true,
            hsla: true,
            hsva: true,
            cmyk: true,
            input: true,
            clear: true,
            save: true
        }
    }
});