JavaScriptでAuto Text機能を作成しよう!

こんにちは。KOUKIです。

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

<目次>

実装するもの

今回は、「Auto Text機能」をJavaScriptで実装したいと思います。画面上に指定した文字列が自動的に表示される機能です。

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

環境構築

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

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

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

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

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでAuto Text機能のスタイリングをしよう!

ページ(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="style.css" />
    <title>Auto Text Effect</title>
  </head>
  <body>
    <h1 id="text">Starting...</h1>

    <div>
      <label for="speed">Speed:</label>
      <input type="number" name="speed" id="speed" value="1" min="1" max="10" step="1">
    </div>

    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Auto Text Effect</title>

</head>

<body>

<h1 id="text">Starting...</h1>

<div>

<label for="speed">Speed:</label>

</div>

</body>

</html>

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

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {
  box-sizing: border-box;
}

body {
  background-color: darksalmon;
  font-family: 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

div {
  position: absolute;
  bottom: 20px;
  background: rgba(0, 0, 0, 0.1);
  padding: 10px 20px;
  font-size: 18px;
}

input {
  width: 50px;
  padding: 5px;
  font-size: 18px;
  background-color: darksalmon;
  border: none;
  text-align: center;
}

input:focus {
  outline: none;
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

* {

box-sizing: border-box;

}

body {

background-color: darksalmon;

font-family: 'Roboto', sans-serif;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

overflow: hidden;

margin: 0;

}

div {

position: absolute;

bottom: 20px;

background: rgba(0, 0, 0, 0.1);

padding: 10px 20px;

font-size: 18px;

}

input {

width: 50px;

padding: 5px;

font-size: 18px;

background-color: darksalmon;

border: none;

text-align: center;

}

input:focus {

outline: none;

}

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

JavaScriptの実装

要素の取得

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

// 要素を取得する
const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')

// 要素を取得する

const textEl = document.getElementById('text')

const speedEl = document.getElementById('speed')

初期値の設定

初期値も設定しておきます。

// 初期値設定
const text = "Show must go on!(やめるわけにはいかない)"
let idx = 1
let speed = 300 / speedEl.value

// 初期値設定

const text = "Show must go on!(やめるわけにはいかない)"

let idx = 1

let speed = 300 / speedEl.value

テキスト書き込み処理

次は、テキスト書き込み処理を実装しましょう。

// テキスト書き込み処理
writeText()
function writeText() {
  // 画面に文字を埋め込む
  textEl.innerHTML = text.slice(0, idx)

  // インクリメント!
  idx++

  if(idx > text.length) {
    // 初期値に戻す
    idx = 1
  }

  // 指定時間(speed)毎にwriteTextを実行
  setTimeout(writeText, speed)
}

// テキスト書き込み処理

writeText()

function writeText() {

// 画面に文字を埋め込む

textEl.innerHTML = text.slice(0, idx)

// インクリメント!

idx++

if(idx > text.length) {

// 初期値に戻す

idx = 1

}

// 指定時間(speed)毎にwriteTextを実行

setTimeout(writeText, speed)

}

毎度お馴染みのsetTimeoutを使って、writeTextを指定時間(speed)毎に実行する処理を書きました。

時間調整処理

「speed」変数の値をいじるとテキストの表示される時間を調整できます。

// 時間調整
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

1 2	// 時間調整 speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

これで完成です。

おわりに

今回の機能をトップ画面に設置すれば、ディスプレイ広告みたいで面白くなるかもしれませんね^^

それでは、また！

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素を取得する
const textEl = document.getElementById('text')
const speedEl = document.getElementById('speed')

// 初期値設定
const text = "Show must go on!(やめるわけにはいかない)"
let idx = 1
let speed = 300 / speedEl.value

// テキスト書き込み処理
writeText()
function writeText() {
  // 画面に文字を埋め込む
  textEl.innerHTML = text.slice(0, idx)

  // インクリメント!
  idx++

  if(idx > text.length) {
    // 初期値に戻す
    idx = 1
  }

  // 指定時間(speed)毎にwriteTextを実行
  setTimeout(writeText, speed)
}

// 時間調整
speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

// 要素を取得する

const textEl = document.getElementById('text')

const speedEl = document.getElementById('speed')

// 初期値設定

const text = "Show must go on!(やめるわけにはいかない)"

let idx = 1

let speed = 300 / speedEl.value

// テキスト書き込み処理

writeText()

function writeText() {

// 画面に文字を埋め込む

textEl.innerHTML = text.slice(0, idx)

// インクリメント!

idx++

if(idx > text.length) {

// 初期値に戻す

idx = 1

}

// 指定時間(speed)毎にwriteTextを実行

setTimeout(writeText, speed)

}

// 時間調整

speedEl.addEventListener('input', (e) => speed = 300 / e.target.value)

月	火	水	木	金	土	日
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でAuto Text機能を作成しよう!

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素の取得

初期値の設定

テキスト書き込み処理

時間調整処理

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

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

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

要素の取得

初期値の設定

テキスト書き込み処理

時間調整処理

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

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

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

[React]~MovieApp3: ~ルーティング処理(Advance)の…

[golang]Dockerでfiber API環境を構築しよう3! ~Li…

Go言語とVue.jsで作るユーザー認証アプリ~バックエンド開発編Vol1~

Go言語とファイル操作

TypeScriptでデコレータを学ぼう!

Terraformを学ぼう2! ~コンテナの作成と情報の確認~

[Go言語/JavaScript]ハンズオンで作る掲示板アプリ!~WebSo…

[Go言語]Goroutineで並列処理を学ぼう2!

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

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