タイプ音がしない!? jQueryで しずかなソフトキーボード「shizukey」を作りました。

高校生の頃、タイプ音がうるさい人が、「エンターキー」と言うあだ名を付けられていたのをいまでも覚えています。エンターキーに限らず、文字を入力する時のタイプ音が気になる方はいらっしゃるのではないでしょうか。

という事で、タイプ音がしない しずかなソフトキーボード「shizukey」を作りました。

なんて動機は冗談で(笑)、
webアプリにソフトキーボードを組み込む必要が出てきた時に、汎用性が高いものが見つからなかったのでjQueryで作成しました。

デモもあるよ！

こんな時におすすめします。

• デザイン（htmlタグやcss）が決まっている。
• 複数のフォームに文字を入力する必要がある。
• 出たり引っ込んだりしないように画面上に埋め込みたい。

などなど

大人の事情で制限がかかっているような時に使いやすいかもしれません。

shizukeyで出来る事

• フォームへの文字の挿入
• 文字の挿入場所の変更
• 文字の削除
• 文字を挿入するフォームの切り替え
• 濁音、半濁音、小文字の変換

shizukeyに必要なもの

shizukeyを使うには

1. jQuery
2. jQuery.selection

上記2点が必要になります。

shizukeyの使い方

～ここでの条件～

• 入力フォームのidはそれぞれtextfield1とtextfield2
• 自作のjsファイル名はkeyboard.js
• jsファイルは./javascriptフォルダに格納
• 自作関数はhtmlタグ内からonclickで呼び出す
• ソフトキーボードのタグは<a href=""></a>を使用

index.html

1. 必要なjsファイルを読み込む。

    <script src="http://code.jquery.com/jquery-latest.js"></script>  
    <script src="./javascript/jquery.selection.js"></script>  
    <script src="./javascript/jquery.shizukey.js"></script>  
    <script src="./javascript/keyboard.js"></script>  
   

2. 文字を入力するフォームを作成する。

    <input type="textfield" id="textfield1" onclick="switch_target($(this));">  
    <input type="textfield" id="textfield2" onclick="switch_target($(this));">
   

3. ソフトキーボードのキーを作成する。

    <a href="#" onclick="put_string('あ');">あ</a>
    <a href="#" onclick="put_string('い');">い</a>
    <a href="#" onclick="put_string('う');">う</a>
    <a href="#" onclick="put_string('え');">え</a>
    <a href="#" onclick="put_string('お');">お</a>
   

keyboard.js

サンプルを参考にjsファイルを作成します。

1. 初期設定を記述する。

    $(function(){
      target = "#textfield1";
    });
   

2. 文字入力を記述する。

    function put_string(chr){
      $(target).shizukey('put_string', {chr: chr});
    };
   

3. 入力先のフォーム変更を記述する。

    function switch_target(obj){
      target = "#" + obj.attr("id");
    };
   

今後について

1. jQueryプラグインにしたい！
2. デモサイトをカッコよくしたい！
3. readmeとかwikiとか書く
4. テスト書く

タイプ音や、大人の事情に悩まされている方々のお役に立てれば幸いです。

github.com