アプリ・サービス

【Webアプリ】『ひらがな移調』開発の備忘録を公開!

ひらがな移調のロゴ

SoundCloudにプレイリストを追加した。

曲目は、以前に投稿したオリジナル曲『ナチュラル』と『♭♯』。

『♭♯』の作詞には、『ひらがな移調』というWebアプリケーションを使った。これは曲を聴いてもらえると分かるが、使い道がかなり限定されているアプリだ。

今回は、『ひらがな移調』のソース(一部)を紹介する。

スイフー
スイフー
解説用のメモは短めに書いたよ!
イフちゃん
イフちゃん
詳しく知りたい方がいらっしゃったら、また別の記事でまとめましょう。
葉っぱのイラストに♭♯と書かれた画像
【オリジナル曲】英語?日本語?『♭♯』の意味とは?7月29日(月)、オリジナル曲を投稿した。 タイトルは『♭♯』。読み方はそのまま「フラットシャープ」。 まずは楽曲をチェック...

ひらがな移調 HTML編

オレンジの背景にHTMLと黒い文字で書かれた画像

高さと幅を指定したテキストエリア

1から8までの数字が縦に書かれたテキストエリアの画像
HTML
<textarea rows="8" cols="80"></textarea>
  • textarea でテキストエリアを表示する
  • rows でテキストエリアの高さ(行数)を決める
  • cols でテキストエリアの幅(文字数)を決める

ひらがなを入力する8×80文字サイズのテキストエリアができた。

読み取り専用のテキストエリア

読み取り専用のテキストエリアの画像
HTML
<textarea rows="8" cols="80" readonly></textarea>
  • readonly でリードオンリー=読み取り専用に設定する

移調した結果を表示する「読み取り専用」のテキストエリアができた。

プルダウンメニュー

「♯」と「♭」を選択するためのプルダウンメニューの画像
HTML
<select>
<option>♯</option>
<option>♭</option>
</select>
  • select でセレクトボックスを表示する
  • option で選択肢の内容を設定する

上記の場合は、プルダウンメニューになる。

数値を入力するボックス

「1」と入力されたテキストボックスの画像
HTML
<input type="number" value="1" min="0" max="100" placeholder="数字を入力">
  • input type=”number” で数値入力欄を表示する
  • value で値を設定する
  • min で入力できる最小値を設定する
  • max で入力できる最大値を設定する
  • placeholder で入力に関するヒントを表示する

何文字分ひらがなを前後に変化させるか、数値を指定するためのボックスができた。

実行するボタン

「移調」と書かれたボタンの画像
HTML
<button>移調</button>

または、

<input type="button" value="移調">
  • input type=”button” でボタンを表示する
  • value でボタンに表示されるテキストを決める

移調を実行するためのボタンができた。コピーとツイートのボタンも同様の作り方。

ひらがな移調 JavaScript編

黄色の背景にJavaScriptと黒い文字で書かれた画像

idを持つ要素にアクセス

HTML
<textarea id="textarea" rows="8" cols="80" readonly></textarea>
JavaScript
var textarea = document.getElementById('textarea');
  • var で変数を宣言
  • HTMLで設定したidに getElementById() でアクセス

アラートを表示

「コピーしました」というメッセージが表示された瞬間のスクリーンショット
JavaScript
alert('コピーしました。');
  • alert で表示したい文字列を設定する。

スマホでコピーした時にメッセージが表示されるようにした。

※アラートが表示されない時、文字列を’シングルクォート’ではなく、”ダブルクォート”で囲っていないかチェックしよう。

ひらがなを別の文字列に置き換え

ひらがな移調というアプリを使ってひらがなを別の文字に変換しているスクリーンショット
JavaScript
// 省略
var textarea = document.getElementById('textarea').value;

textarea = textarea.replace(/[ぁ-ゔ]/g, function(s) {
 return String.fromCharCode(s.charCodeAt(0) + number);
});

// 省略
  • replace() で任意の文字列を別の文字列に置き換える
  • /g で全ての文字列を検索する
  • String.fromCharCode() は引数(Unicode)から文字列を作成する
  • charCodeAt() は指定された位置にある文字のUnicodeを返す

テキストエリアに入力された[ぁーゔ]のひらがなを対象に置き換える。

「charCodeAt(0) + number」は、現在のひらがなから、指定した数値分後ろにずらす(♯の)処理。「number」は数値を入力するボックスにつけたid。

前にずらす(♭)の処理は、「+ number」の部分を「 – number」にするだけ。

Unicodeについてはこちらを参照 → Wikipedia

iOSとそれ以外で処理を分岐

パソコンとiPhoneのイラスト
JavaScript
var result = document.getElementById('resultArea');

if (navigator.userAgent.match(/ipad|ipod|iphone/i)) {
      // iOS用の設定
      try {
        result.readOnly = false;

        var range = document.createRange();
        range.selectNode(result);
        window.getSelection().addRange(range);

        document.execCommand("copy");
        result.readOnly = true;
        alert('コピーしました。');

      } catch (e) {
        result.readOnly = true;
        alert('このブラウザには対応していません。');
      }
  } else {
      // iOS以外の設定
      try {
        result.select();
        document.execCommand('copy');
      } catch (e) {
        alert('このブラウザには対応していません。');
      }
  }
  • if…else でiOSとそれ以外を条件分岐
  • navigator.userAgent.match() で利用者の情報を判別する
  • /i で小文字と大文字を区別させない
  • try が例外エラーが起こる可能性のある処理
  • catch がエラーが起きたときの処理
  • .readOnly = false で読み取り専用を解除する
  • .readOnly = true で読み取り専用にする
  • document.createRange() でRange(範囲)を作成する
  • .selectNode() の引数に対象のノードを指定すると、その直前に始点、直後に終点が設定される
  • addRange() でSelection(ユーザーが選択した範囲)に対象を追加する
  • window.getSelection() で選択した範囲を取得する
  • document.execCommand(‘copy’) でクリップボードにコピーする
  • .select() でテキストエリアの内容全体を選択する

iOSの場合、コピー時にアラートを出し、それ以外では出さないように処理を分岐させた。

編集後記

コーヒーのイラスト

ツイートボタンを実装する方法などは、後ほど解説する。

順序が逆になってしまったが、『Shuffle Songs』の開発備忘録も公開しよう。

スイフー
スイフー
久々に真面目な内容を書いた気がする……。
イフちゃん
イフちゃん
前回、「朝活」の記事はふざけすぎましたね。
Shuffle Songs のロゴ画像
【Shuffle Songs】プログラミングでランダムに選曲!2019年6月23日、「Shuffle Songs」というWebアプリケーションを公開した。 Shuffle Song...
▽スイフーの情報はこちらから▽
スイフー
スイフー
最後までご覧くださりありがとうございます!
イフちゃん
イフちゃん
フォローやチャンネル登録、お待ちしております!

COMMENT

メールアドレスが公開されることはありません。