テキストボックスに入力したひらがなをカタカナへ、またはカタカナをひらがなへ自動変換する方法を紹介します。文字を入力するだけでなく、コピーした文章を貼り付けた場合も、対象となる文字を自動的に変換できます。
今回は、変換方向の異なる2種類の入力欄を作成します。1つ目はテキストフィールドに入力した「こんにちは」を「コンニチハ」へ変換するタイプ、2つ目はテキストエリアに入力した「コンニチハ」を「こんにちは」へ変換するタイプです。どちらも日本語入力中は変換せず、文字が確定したタイミングで処理するため、通常の日本語入力を妨げません。
変換するのは対応するひらがな・カタカナだけで、漢字や英数字、記号などはそのまま残ります。また、変換後の文字列は入力欄の値として取得できるため、ほかのJavaScript処理にも利用できます。デモでは、それぞれの入力欄に文字を入力して変換の違いを確認できます。
デモ
入力したひらがなをカタカナへ自動変換します。
入力したカタカナをひらがなへ自動変換します。
①はひらがなをカタカナへ、②はカタカナをひらがなへ自動変換します。入力中の日本語は確定後に変換され、文字の貼り付けにも対応しています。漢字・英数字・記号・スペース・改行は変更されません。変換には文字コードの差である0x60を利用しています。なお、テキストフィールドとテキストエリアは入れ替えることもでき、HTMLのinput要素とtextarea要素を変更し、JavaScriptで取得するIDを一致させれば、どちらの入力欄でも変換できます。
コードをコピーして使おう！
① ひらがな → カタカナ（テキストフィールド）
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードの設定 -->
<meta charset="UTF-8">
<!-- スマートフォンなどの画面幅に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>ひらがなをカタカナに自動変換</title>
<!-- 入力欄のCSSを読み込む -->
<link rel="stylesheet" href="style.css">
<!-- 文字変換用のJavaScriptを読み込む -->
<script src="script.js" defer></script>
</head>
<body>
<!-- テキストフィールド全体の横幅を制御する親要素 -->
<div class="hiragana-katakana-conversion_container">
<!-- 入力欄のラベル -->
<label class="hiragana-katakana-conversion_label" for="hiragana-katakana-conversion-field">
文字を入力
</label>
<!-- ひらがなをカタカナへ自動変換する入力欄 -->
<input class="hiragana-katakana-conversion_input" id="hiragana-katakana-conversion-field" name="hiragana-katakana-conversion-field" type="text" placeholder="例：こんにちは → コンニチハ" autocomplete="off" spellcheck="false">
</div>
</body>
</html>② カタカナ → ひらがな（テキストエリア）
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードの設定 -->
<meta charset="UTF-8">
<!-- スマートフォンなどの画面幅に対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>カタカナをひらがなに自動変換</title>
<!-- 入力欄のCSSを読み込む -->
<link rel="stylesheet" href="style.css">
<!-- 文字変換用のJavaScriptを読み込む -->
<script src="script.js" defer></script>
</head>
<body>
<!-- テキストエリア全体の横幅を制御する親要素 -->
<div class="hiragana-katakana-conversion_container">
<!-- 入力欄のラベル -->
<label class="hiragana-katakana-conversion_label" for="hiragana-katakana-conversion-area">
文字を入力
</label>
<!-- カタカナをひらがなへ自動変換する入力欄 -->
<textarea class="hiragana-katakana-conversion_textarea" id="hiragana-katakana-conversion-area" name="hiragana-katakana-conversion-area" rows="5" placeholder="例：コンニチハ → こんにちは" spellcheck="false"></textarea>
</div>
</body>
</html>コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。 サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
Q ダウンロードしたけど、これをネット上で動かすにはどうするの？
Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。
InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。
ファイル構成と設置方法
今回のサンプルは、HTML・CSS・JavaScriptの3つのファイルで構成されています。HTMLでは文字を入力するテキストフィールドまたはテキストエリアを設置し、CSSでは入力欄の外観を設定しています。JavaScriptでは、入力されたひらがな・カタカナを判定し、文字コードを利用して自動変換しています。
「ひらがな → カタカナ」と「カタカナ → ひらがな」は、それぞれ独立したサンプルとしてダウンロードできます。どちらもファイル構成は同じですが、HTMLの入力要素とJavaScriptの変換方向が異なります。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlには、文字を入力するためのinput要素またはtextarea要素と、入力欄のラベルを記述しています。style.cssでは、入力欄の横幅・余白・枠線・角丸・文字サイズ・フォーカス時の表示などを設定しています。script.jsでは、ひらがな・カタカナの変換処理と、文字入力時に自動変換するためのイベント処理を設定しています。
設置方法・使い方
使用したい変換方向の「サンプル一式をダウンロード」をクリックしてZIPファイルを保存し、展開してください。sampleフォルダ内のindex.html・style.css・script.jsを同じ階層に配置し、index.htmlをブラウザで開くと入力欄が表示されます。
①のテキストフィールドでは、例えば「こんにちは」と入力すると「コンニチハ」へ変換されます。②のテキストエリアでは、「コンニチハ」と入力すると「こんにちは」へ変換されます。文字を直接入力した場合だけでなく、コピーした文章を貼り付けた場合も、対象となる文字が自動的に変換されます。
ひらがなをカタカナへ変換する仕組み
①のscript.jsでは、正規表現/[ぁ-ゖ]/gを使用して、入力された文字列からひらがなを検索しています。対象となる文字が見つかると、charCodeAt(0)で文字コードを取得し、0x60を加算して対応するカタカナへ変換します。
/* =========================================
ひらがなからカタカナへ変換
========================================= */
function convertToKatakana(value) {
return value.replace(/[ぁ-ゖ]/g, function(character) {
// 文字コードに0x60（96）を加えてカタカナへ変換
return String.fromCharCode(character.charCodeAt(0) + 0x60);
});
}
replace()は、正規表現に一致した文字を別の文字へ置き換えるためのメソッドです。末尾のgは、最初に見つかった1文字だけでなく、文字列内のすべての対象文字を変換するために指定しています。
例えば「こんにちは」の各文字に0x60を加算すると、対応する「コンニチハ」へ変換されます。ひらがな以外の漢字・英数字・記号などは正規表現に一致しないため、そのまま残ります。
カタカナをひらがなへ変換する仕組み
②のscript.jsでは、正規表現/[ァ-ヶ]/gを使用してカタカナを検索しています。ひらがなからカタカナへの変換とは反対に、文字コードから0x60を減算することで、対応するひらがなへ変換します。
/* =========================================
カタカナからひらがなへ変換
========================================= */
function convertToHiragana(value) {
return value.replace(/[ァ-ヶ]/g, function(character) {
// 文字コードから0x60（96）を引いてひらがなへ変換
return String.fromCharCode(character.charCodeAt(0) - 0x60);
});
}
例えば「コンニチハ」は「こんにちは」へ変換されます。どちらの変換も文字コードの差を利用しているため、変換対象の文字を1文字ずつ対応させた一覧表を用意する必要はありません。
なお、②は全角カタカナを対象としており、半角カタカナを全角へ変換する処理は含まれていません。また、長音記号の「ー」は変換対象に含まれず、そのまま残ります。
日本語入力中の変換とカーソル位置の調整
どちらのサンプルも、文字入力や貼り付けを検知するためにinputイベントを使用しています。ただし、日本語入力では文字を確定する前に変換候補を選択する操作があるため、event.isComposingを確認し、日本語入力中は変換を行わないようにしています。
// 文字入力や貼り付け時に自動変換
element.addEventListener("input", function(event) {
// 日本語入力中は変換せず、確定後に処理する
if (event.isComposing) return;
updateValue();
});
// 日本語入力が確定したときに変換
element.addEventListener("compositionend", function() {
updateValue();
});
compositionendイベントは、日本語入力の変換操作が終了したときに発生します。このタイミングでupdateValue()を実行することで、入力が確定した文字列を変換できます。
また、入力欄の途中に文字を追加した場合でも、変換後にカーソルが末尾へ移動しないように、selectionStartとselectionEndで選択範囲を取得しています。文字列を変換した後は、setSelectionRange()でカーソル位置と選択範囲を復元しています。
変換後の文字列を取得する方法
入力欄に表示されている変換後の文字列は、JavaScriptのvalueプロパティから取得できます。①のテキストフィールドでは、HTMLに設定したid="hiragana-katakana-conversion-field"を使用して対象の要素を取得します。
次のコードは値の取得方法を説明するための例であり、ダウンロードするZIPには含まれていません。
// テキストフィールドの要素を取得
const textField = document.getElementById("hiragana-katakana-conversion-field");
// 変換後の文字列を変数へ代入
const convertedValue = textField.value;
document.getElementById()でテキストフィールドを取得し、textField.valueを変数convertedValueへ代入しています。例えば「こんにちは」と入力して変換が完了している場合、convertedValueには"コンニチハ"が入ります。
②のテキストエリアでも取得方法は同じです。HTMLに設定したIDを使用して要素を取得します。
// テキストエリアの要素を取得
const textArea = document.getElementById("hiragana-katakana-conversion-area");
// 変換後の文字列を変数へ代入
const convertedValue = textArea.value;
②では、例えば「コンニチハ」と入力して変換が完了している場合、convertedValueには"こんにちは"が入ります。どちらも取得される値は文字列で、入力欄に改行が含まれている場合は、その改行も文字列の一部として取得できます。
これらのコードは実行した時点の値を取得します。入力内容が変わるたびに最新の値を取得したい場合は、inputイベントなどを使用してください。日本語入力の確定後に値を利用する場合は、変換処理の実行順序にも注意が必要です。
テキストフィールドとテキストエリアを入れ替える方法
①はテキストフィールド、②はテキストエリアを使用していますが、どちらの変換処理も両方の入力要素で利用できます。例えば、①を複数行入力できるテキストエリアへ変更したい場合は、index.htmlのinput要素をtextarea要素へ変更します。
<!-- ひらがなをカタカナへ変換するテキストエリア -->
<textarea class="hiragana-katakana-conversion_textarea" id="hiragana-katakana-conversion-field" name="hiragana-katakana-conversion-field" rows="5" placeholder="例：こんにちは → コンニチハ" spellcheck="false"></textarea>
この例では、元のid="hiragana-katakana-conversion-field"をそのまま使用しているため、JavaScriptで取得するIDを変更する必要はありません。ただし、CSSのセレクタは.hiragana-katakana-conversion_inputから.hiragana-katakana-conversion_textareaへ変更し、必要に応じて高さやサイズ変更の設定を追加してください。
反対に、②をテキストフィールドへ変更する場合も同様です。textarea要素をinput要素へ変更し、CSSのセレクタを合わせます。HTMLのIDを変更した場合は、script.jsのgetElementById()に指定するIDも一致させてください。
変換方向を変更する方法
ひらがなからカタカナへの変換を、カタカナからひらがなへの変換に変更したい場合は、script.jsの変換関数を変更します。正規表現を/[ぁ-ゖ]/gから/[ァ-ヶ]/gへ変更し、文字コードの計算を+ 0x60から- 0x60へ変更してください。
反対方向へ変更する場合は、正規表現と加算・減算を逆に設定します。変換関数の名前や呼び出し先も、変更後の処理に合わせて統一してください。
入力欄のデザインを変更する方法
style.cssでは、①のテキストフィールドに.hiragana-katakana-conversion_input、②のテキストエリアに.hiragana-katakana-conversion_textareaを使用しています。どちらも基本的な外観は共通しており、内側の余白・枠線・角丸・文字サイズなどを変更できます。
/* =========================================
テキストフィールド本体
========================================= */
.hiragana-katakana-conversion_input {
display: block; /* 入力欄をブロック要素として表示する */
width: 100%; /* 親要素の横幅いっぱいに広げる */
padding: 16px; /* 内側の余白。大きくすると入力欄が広くなる */
border: 2px solid #dbe5f1; /* 枠線。2pxを変更すると太さが変わる */
border-radius: 12px; /* 角丸。大きくすると丸みが強くなる */
background: #ffffff; /* 入力欄の背景色 */
color: #111827; /* 入力文字の色 */
font-family: inherit; /* 設置先のフォントを引き継ぐ */
font-size: 16px; /* 入力文字のサイズ */
line-height: 1.5; /* 行の高さ。大きくすると上下の間隔が広がる */
box-sizing: border-box; /* 枠線と余白を横幅に含める */
outline: none; /* ブラウザ標準のアウトラインを非表示にする */
transition: border-color .3s ease, box-shadow .3s ease; /* 枠線と影を0.3秒で変化させる */
}
padding: 16px;を大きくすると文字と枠線の間隔が広がり、小さくすると入力欄がコンパクトになります。border: 2px solid #dbe5f1;では枠線の太さと色を設定し、border-radius: 12px;では角の丸みを調整しています。
また、入力欄を選択したときは:focusで枠線を青色に変更し、box-shadowで外側に薄い影を表示しています。テキストエリアでは、これらに加えてmin-height: 140px;で最小の高さを指定し、resize: vertical;で縦方向のサイズ変更を許可しています。
レスポンシブ対応
style.cssでは、親要素の.hiragana-katakana-conversion_containerにwidth: 100%;とmax-width: 480px;を設定し、入力欄全体の最大横幅を480pxに制限しています。margin: 0 auto;によって左右中央に配置され、画面幅が狭い場合は親要素に合わせて縮小します。
さらに、画面幅が640px以下の場合は、次のメディアクエリで入力欄の余白を調整しています。
/* =========================================
スマートフォン対応
========================================= */
@media (max-width: 640px) {
/* 画面幅640px以下では入力欄の余白を小さくする */
.hiragana-katakana-conversion_input {
padding: 14px; /* 内側の余白。小さくすると入力欄がコンパクトになる */
}
}
①のテキストフィールドでは、通常時の内側余白を16px、画面幅640px以下では14pxに変更しています。②のテキストエリアでも同じように余白を調整し、最小の高さを140pxから130pxへ変更しています。これにより、PC・タブレット・スマートフォンで入力欄を画面幅に合わせて表示できます。
コメント