pre-Hilbert's Blog
WEBアプリを作りました。
pc
　伊豆踊り子号が下を通る歩道橋を渡ると、中小の会社が建ち並ぶ街並みに様変わりをします。その街並みの中ほどにある4階建ての白い建物が、私の勤めていた測定器の製造メーカーでした。私が入社した当時は、測定器にマイクロプロセッサを組み込むことが当面の課題でした。
　"Z80"というアメリカ・ザイログ社の８ビットマイクロプロセッサの演算プログラムから始まり、パソコン上で動く測定器のコントロール・ソフトウェアまで、プログラムづくりの仕事をしてきました。

　不思議なものです学生時代は、FORTRANとかCOBOLとか不得意だった私が、会社を辞めてからもプログラムづくりをしたいという情熱を持ち続けていました。
　その頃、WEBサイトの作成に興味を持ちました。メモ帳などの簡易エディタのみで、WEBサイトを作成することできるという点が最大のメリットでした。
　最近では、javascriptを駆使して簡単なＷＥＢアプリを作れる様になりました。その一つを、紹介されて頂きます。
Image Filter
　写真や画像にフィルタを掛けるアプリです。ccs3には"filter"というプロパティがあります。このプロパティを使って、グラフィック効果（ぼかしや色変化など）を写真や画像に適用することができます。左のボタンをクリックすると、写真や画像が変化します。
　ボタンは上から brightness(明るさ), saturate(鮮やかさ), contrast(コントラスト), blur(ぼかし), grayscale(白黒), sepia(セピア), hue-rotete(色相), invert(階調), opacity(透明度)の順になっています。 また「ファイルを選択」ボタンをクリックして、任意の写真や画像を選択することができます。
kawagooe
brightness明るさを調整します。
saturate鮮やかさを調整します。
contrastコントラストを調整します。
blur画像をぼかします。
grayscale画像を白黒にします。
sepia画像をセピア色にします。
hue-rotate画像の色相を変更します。
invert画像の階調を調整します。
opacity画像の透明度を調整します。
　画像をホーバーされた時に、アニメーションを開始するためには疑似クラス":hover"を使用することで実現可能ですが、任意のボタンがクリックされたら、アニメーションを開始することは可能であるか否か？以前から考えていました。HTMLやjavascriptの書籍を調べて、ようやく辿り着いたのが、右のカラムで紹介している「javascript コードレシピ集」でした。特に「18.関数やクラスについて詳しく知る」を参考にしました。
ボタンがクリックされたら、アニメーションを開始する方法
　画像を色変化させたり、ぼかしを入れたりするためには、css3のfilterプロパティを使用します。カラー画像を段々とグレースケール（白黒）画像に変化させる場合を例にあげて説明します。最初に、グレースケール 0% の状態（完全カラー画像の状態）から、グレースケール 100% の状態（完全白黒画像の状態）まで変化するように、キーフレームを定義します。 

    @keyframe AnmGrayscale {

        0% { filter: grayscale( 0% ); }
        100% { filter: grayscale( 100% ); }
    }
　ここで "AnmGrayscale"はアニメーションの名前なので任意に設定することができます。画像をホーバーされた時に、アニメーションを開始させる時には 

    .img_box {

        width:			300px;		/* 画像の横幅 */
        height:			300px;		/* 画像の縦幅 */
    }

    .img_box:hover {

        animation-name:		AnmGrayscale;
        animation-duration:	3s;		/* アニメーションを開始してから終了するまでの時間 */
     }
と記述するのが常套手段ですが、一段階レベルを上げて、ボタンをクリックしたときにアニメーションを開始するように作るには、次の様にします。最初に、アニメーションのクラスを作成します。 

    .img_grayscale {

        animation-name:		AnmGrayscale;
        animation-duration:	3s;		/* アニメーションを開始してから終了するまでの時間 */
    }
　このクラスを、javascript により画像のクラスに追加することにより、アニメーションを開始することが可能になります。
　 この画像のクラスに、アニメーションのクラスを追加することにより、アニメーションを開始するということが重要です。
 　具体的なjavascriptのコードは 

    function grayscaleClick() {

        /* alert('grayscale button Click !'); */

        const element = document.querySelector('.img_box');

        if (element.classList.contains('img_grayscale') === false) {

            element.classList.add('img_grayscale');
        } else {

            element.classList.remove('img_grayscale');
        }
    }

    /* ボタンが押された時の処理 */
    
    let btn_grayscale = document.getElementById('grayscale');

    btn_grayscale.addEventListener('click', grayscaleClick);
と記述します。最後に、アニメーションが終了した時に、追加したアニメーションのクラスを削除することを忘れずに処理をしておく必要があります。 

/* アニメーションが終了した時の処理 */
const targetE = document.querySelector('.img_box_1');
targetE.addEventListener('animationend', (event) => {
    
    const element = document.querySelector('.img_box_1');
    
    if (element.classList.contains('img_grayscale') === true) {
        
        element.classList.remove('img_grayscale');
    }
　以上、このアプリの中心となる部分を記述してみました。ＷＥＢサイト作成の初心者の方に、少しでも参考になれば嬉しく思います。
これからも、アプリを作っていきます。よろしくお願いいたします。