JavaScriptでモザイク処理を実装しよう!

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

<目次>

実装するもの

今回は、パスワードを打ち込んでいくと背景のモザイクが薄れていくアプリケーションを作成します。

demoは「こちら」で確認できます。

環境構築

簡単な環境構築をお願いします。

JavaScriptでアプリ開発 ~環境構築~

必要なファイルは、以下の通りです。

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでモザイクアプリのスタイリングをしよう!

ページ(HTML)の作成

最初にページを作成しましょう。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css"
      integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w=="
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Password Strength Backround</title>
  </head>
  <body>
    <div class="background" id="background"></div>
    <div class="bg-white rounded p-10 text-center shadow-md">
      <h1 class="text-3xl">Image Password Strength</h1>
      <p class="text-sm text-gray-700">Change the password to see the effect</p>
      <div class="my-4 text-left">
        <label for="email" class="text-gray-900">Email:</label>
        <input
          type="text"
          class="border block w-full p-2 mt-2 rounded"
          id="email"
          placeholder="Enter Email"
        />
      </div>

      <div class="my-4 text-left">
        <label for="email" class="text-gray-900">Password:</label>
        <input
          type="password"
          class="border block w-full p-2 mt-2 rounded"
          id="password"
          placeholder="Enter Password"
        />
      </div>

      <button
        class="bg-black text-white py-2 mt-4 inline-block w-full rounded"
        type="submit"
      >
        Submit
      </button>
    </div>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css"

integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w=="

crossorigin="anonymous"

<title>Password Strength Backround</title>

</head>

<body>

<h1 class="text-3xl">Image Password Strength</h1>

<p class="text-sm text-gray-700">Change the password to see the effect</p>

<label for="email" class="text-gray-900">Email:</label>

<input

type="text"

class="border block w-full p-2 mt-2 rounded"

id="email"

placeholder="Enter Email"

</div>

<label for="email" class="text-gray-900">Password:</label>

<input

type="password"

class="border block w-full p-2 mt-2 rounded"

id="password"

placeholder="Enter Password"

</div>

<button

class="bg-black text-white py-2 mt-4 inline-block w-full rounded"

type="submit"

Submit

</button>

</div>

</body>

</html>

このHTMLをブラウザ上で表示すると以下のようになります。

今回、Tailwind CSSを導入しています。BootstrapのようなCSSのフレームワークですね。

<link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css"
      integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w=="
      crossorigin="anonymous"
    />

<link

rel="stylesheet"

href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.11/tailwind.min.css"

integrity="sha512-KO1h5ynYuqsFuEicc7DmOQc+S9m2xiCKYlC3zcZCSEw0RGDsxcMnppRaMZnb0DdzTDPaW22ID/gAGCZ9i+RT/w=="

crossorigin="anonymous"

PRがかっこいいです。

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

* {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

.background {
  background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b')
    no-repeat center center/cover;
  position: absolute;
  top: -20px;
  bottom: -20px;
  left: -20px;
  right: -20px;
  z-index: -1;
  filter: blur(20px);
}

* {

box-sizing: border-box;

}

body {

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

margin: 0;

}

.background {

background: url('https://images.unsplash.com/photo-1556745757-8d76bdb6984b')

no-repeat center center/cover;

position: absolute;

top: -20px;

bottom: -20px;

left: -20px;

right: -20px;

z-index: -1;

filter: blur(20px);

}

ここまで実装すると以下のようになります。

JavaScriptの実装

背景のモザイクは、CSSのスタイルで定義しています。

filter: blur(20px)

1	filter: blur(20px)

blurはCSSの関数で、画像にぼかしを入れることができます。

ここに設定されている数値をパスワードが打ち込まれた時に変化させれば、目的を達成できそうです。

要素を取得する

最初に画面操作に必要な要素を取得します。

// 要素取得
const password = document.getElementById('password')
const background = document.getElementById('background')

// 要素取得

const password = document.getElementById('password')

const background = document.getElementById('background')

inputイベントの登録

inputイベントを登録します。これは、パスワードが打ち込まれた時に発火するイベントです。

// inputイベントの登録
password.addEventListener('input', (e) => {
...
})

// inputイベントの登録

password.addEventListener('input', (e) => {

...

})

モザイク処理

最後にモザイク処理を実装します。前述の通りblurの数値をJavaScriptで制御します。

password.addEventListener('input', (e) => {
  // パスワードに打ち込まれた文字列を取得
  const input = e.target.value

  // 解像度を計算
  const length = input.length
  const blurValue = 20 - length * 2

  // blurに保存
  background.style.filter = `blur(${blurValue}px)`
})

password.addEventListener('input', (e) => {

// パスワードに打ち込まれた文字列を取得

const input = e.target.value

// 解像度を計算

const length = input.length

const blurValue = 20 - length * 2

// blurに保存

background.style.filter = `blur(${blurValue}px)`

})

これで完成です。

おわりに

Tailwind CSSを使ってみて思ったのですが、こういうフレームワークを上手に使えば、CSSの知識も最低限で良さそうですよね。

今時、バックエンドの処理でさえフレームワークを使うのですから。

CSSを勉強しようと思っていましたが、CSSの最低限の知識はありますし、こういうフレームワークを使いこなせるようになりたいと思いました^^

それでは、また!

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素取得
const password = document.getElementById('password')
const background = document.getElementById('background')

// inputイベントの登録
password.addEventListener('input', (e) => {
  // パスワードに打ち込まれた文字列を取得
  const input = e.target.value

  // 解像度を計算
  const length = input.length
  const blurValue = 20 - length * 2

  // blurに保存
  background.style.filter = `blur(${blurValue}px)`
})

// 要素取得

const password = document.getElementById('password')

const background = document.getElementById('background')

// inputイベントの登録

password.addEventListener('input', (e) => {

// パスワードに打ち込まれた文字列を取得

const input = e.target.value

// 解像度を計算

const length = input.length

const blurValue = 20 - length * 2

// blurに保存

background.style.filter = `blur(${blurValue}px)`

})

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

JavaScriptでモザイク処理を実装しよう!

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

inputイベントの登録

モザイク処理

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素を取得する

inputイベントの登録

モザイク処理

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[Golang]Bridge パターンを学ぼう!~Version 2~

Helmまとめ

DjangoでGraphQLを学ぼう！〜クエリ操作〜

Go言語 ~基礎編~ EncapsulationとEmbedding

CSSでローディングをスタイリングしよう！

[Golang/React]~MovieApp3: Formを作成しよう!~

Kubernetes(k8s)を学ぼう3! Networking編 - Po…

[Golang]MD5文字列(ハッシュ値)を生成する方法

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル