HTMLのwindow.btoa()メソッド徹底解説！文字列をBase64形式にエンコードする方法
HTMLのwindow.btoa()メソッドは、文字列データをBase64形式の文字列へエンコードするためのメソッドです。エンコードされた文字列は、同じくwindowオブジェクトが提供するatob()メソッドを使うことで、元の文字列にデコード（復元）できます。データの一時的な変換や、テキストを別の形式で安全に表現したい場合などに活用されます。
構文
btoa()メソッドの基本構文は以下の通りです。
window.btoa(string_to_be_encoded);
引数にはエンコード対象の文字列を指定し、戻り値としてBase64エンコード済みの文字列を受け取ります。
実装例
それでは、入力したメッセージをエンコード・デコードできる簡単なWebページを作成してみましょう。
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
height: 100vh;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) no-repeat;
text-align: center;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
::placeholder {
color: #000;
}
</style>
<body>
<h1>HTML Window atob()/btoa() Method</h1>
<textarea placeholder="Enter your message here" cols="30" rows="5"></textarea>
<button onclick="encode()" class="btn">Encode Message</button>
<button onclick="decode()" class="btn">Decode Message</button>
<div class="show"></div>
<script>
var show = document.querySelector(".show");
function encode() {
var encMsg = window.btoa(document.querySelector("textarea").value);
show.innerHTML = encMsg;
}
function decode() {
var decMsg = window.atob(window.btoa(document.querySelector("textarea").value));
show.innerHTML = decMsg;
}
</script>
</body>
</html>出力結果
白いテキストエリアに任意のメッセージを入力し、「Encode Message」ボタンをクリックします。すると、btoa()メソッドによってエンコードされたメッセージが画面に表示されます。
続けて「Decode Message」ボタンをクリックすると、atob()メソッドによって元のメッセージにデコードされ、その内容が表示されます。
注意点
btoa()メソッドがサポートするのは、各文字のコードポイントが0〜255の範囲に収まるLatin1相当の文字列のみです。日本語のようなマルチバイト文字をそのまま渡すと例外が発生するため、その場合はencodeURIComponent()などを組み合わせてからエンコードする方法が一般的です。用途に応じて適切に対処しましょう。
-
HTML Window moveBy()メソッドの使い方をわかりやすく解説
HTMLのWindow moveBy()メソッドは、開いているウィンドウを現在の位置から相対的に移動させるためのメソッドです。指定したピクセル数だけ、ウィンドウを水平・垂直方向にずらすことができます。構文moveBy()メソッドの基本的な構文は以下のとおりです。window.moveBy(x,y)引数の意味は次のとおりです。x：ウィンドウを水平方向（横）に移動させる距離（ピクセル単位）。正の値で右へ、負の値で左へ移動します。y：ウィンドウを垂直方向（縦）に移動させる距離（ピクセル単位）。正の値で下へ、負の値で上へ移動します。moveBy()とmoveTo()の違い似たメソッドにwindow.m
-
HTML DOM Window stop()メソッドの使い方を徹底解説
HTML DOM の Window stop() メソッドは、ブラウザの「停止」ボタンをクリックしなくても、JavaScript からウィンドウのリソース読み込みを中断できる便利な機能です。ページの読み込み中に特定の条件を満たさない場合など、プログラム側で任意のタイミングで読み込みを止めたいときに活用できます。構文stop() メソッドの基本的な構文は以下のとおりです。window.stop()サンプルコードここでは、HTML DOM Window stop() メソッドの具体的な使用例を紹介します。このサンプルでは、入力された名前が「admin」であれば新しい子ウィンドウを開き、それ以外の場