みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

ウェブ上にキーボードを作りたいのですが…

現在、ホームページを作成していて、そのページに文字入力するときに
キーボードで普通に文字を打ち込むのではなくて、ページ上に
キーボードを設置して、マウスで文字を入力できるサイトを
作りたいと考えています。イメージは銀行のATMの
文字入力画面です。

しかし、そのようにするにはどうすればいいか分かりません。
そのようなフリーウェアがあれば一番いいんですが…
どなたか詳しい方いらっしゃいませんか?

また、それをタッチパネルで作ろうと思っているので
タッチパネル専用のソフトキーボードがあれば
それも教えていただければ助かります。

投稿日時 - 2007-03-24 15:53:09

QNo.2861407

すぐに回答ほしいです

このQ&Aは役に立ちましたか?

23人が「このQ&Aが役に立った」と投票しています

回答(11)

ANo.11

function SoftClear(){
document.MyInput.clkMoji[fcPos].value = "";
document.MyInput.clkMoji[fcPos].focus();
}
function SoftErase(){
document.MyInput.clkMoji[fcPos].value = document.MyInput.clkMoji[fcPos].value.slice(0,-1);
document.MyInput.clkMoji[fcPos].focus();
}
function SoftInput(moji){
if ( document.MyInput.clkMoji[fcPos].value.length < fcMax ){
document.MyInput.clkMoji[fcPos].value += moji;
}
document.MyInput.clkMoji[fcPos].focus();
}
function SoftPoint(){
var point1 = [
"か","き","く","け","こ",
"さ","し","す","せ","そ",
"た","ち","つ","て","と",
"は","ひ","ふ","へ","ほ",
"が","ぎ","ぐ","げ","ご",
"ざ","じ","ず","ぜ","ぞ",
"だ","ぢ","づ","で","ど",
"ば","び","ぶ","べ","ぼ",
"ぱ","ぴ","ぷ","ぺ","ぽ",
];
var point2 = [
"が","ぎ","ぐ","げ","ご",
"ざ","じ","ず","ぜ","ぞ",
"だ","ぢ","づ","で","ど",
"ば","び","ぶ","べ","ぼ",
"か","き","く","け","こ",
"さ","し","す","せ","そ",
"た","ち","つ","て","と",
"は","ひ","ふ","へ","ほ",
"ば","び","ぶ","べ","ぼ",
];
SoftChange(point1,point2);
}
function SoftRound(){
var round1 = [
"は","ひ","ふ","へ","ほ",
"ば","び","ぶ","べ","ぼ",
"ぱ","ぴ","ぷ","ぺ","ぽ"
];
var round2 = [
"ぱ","ぴ","ぷ","ぺ","ぽ",
"ぱ","ぴ","ぷ","ぺ","ぽ",
"は","ひ","ふ","へ","ほ"
];
SoftChange(round1,round2);
}
function SoftChange(find,table){
if ( (len = document.MyInput.clkMoji[fcPos].value.length) != 0 ){
var chr = document.MyInput.clkMoji[fcPos].value.charAt(len - 1);

for ( var i=0 ; i < find.length ; i++ ){
if ( find[i] == chr ){
SoftErase();
document.MyInput.clkMoji[fcPos].value += table[i];
document.MyInput.clkMoji[fcPos].focus();
return;
}
}
}
}

投稿日時 - 2007-03-27 18:33:53

ANo.10

function SoftKeyboard(){
var table = [
["1","2","3","4","5","6","7","8","9","0"],
["わ","ら","や","ま","は","な","た","さ","か","あ"],
["を","り","ゆ","み","ひ","に","ち","し","き","い"],
["ん","る","よ","む","ふ","ぬ","つ","す","く","う"],
["ー","れ","゛","め","へ","ね","て","せ","け","え"],
[" ","ろ","゜","も","ほ","の","と","そ","こ","お"],
["ぁ","ぃ","ぅ","ぇ","ぉ","ゃ","ゅ","ょ","ゎ","っ"]
]; fcPos = 0; fcMax = 0;

document.write( '<DIV ID=Softkey><TABLE CELLSPACING=5>' );
document.write( '<TR ID=SoftkeyErs>' );
document.write( '<TH COLSPAN=5><A HREF="#" onClick="SoftClear()">入力行消去</A></TH>' );
document.write( '<TH COLSPAN=5><A HREF="#" onClick="SoftErase()">1文字消去</A></TH>' );
document.write( '</TR>' );

for ( var j=0 ; j < table.length ; j++ ){
if ( (j == 0) || (j == 6) ){
document.write( '<TR ID=SoftkeyNum>' );
}
else{
document.write( '<TR ID=SoftkeyChr>' );
}
for ( var i=0 ; i < table[0].length ; i++ ){
switch ( table[j][i] ){
case " ":
document.write( '<TH CLASS=Empty><BR></TH>' );
continue;
case "゛":
document.write( '<TH CLASS=Point><A CLASS=Point HREF="#" ' );
document.write( 'onClick=SoftPoint()>' );
break;
case "゜":
document.write( '<TH CLASS=Point><A CLASS=Point HREF="#" ' );
document.write( 'onClick=SoftRound()>' );
break;
case "ー": case " ":
document.write( '<TH CLASS=Point><A CLASS=Point HREF="#" ' );
document.write( "onClick=SoftInput('",table[j][i],"')>" );
break;
default:
document.write( '<TH><A HREF="#" ' );
document.write( "onClick=SoftInput('",table[j][i],"')>" );
break;
}
document.write( table[j][i],'</A></TH>' );
}
document.write( '</TR>' );
}
document.write( '</TABLE></DIV>' );
document.MyInput.clkMoji[fcPos].focus();
}

投稿日時 - 2007-03-27 18:32:53

ANo.9

●HTMLソース部(32行)
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_Jis">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/JavaScript">
<LINK REL="StyleSheet" TYPE="text/css" HREF="softkey.css">
<SCRIPT LANGUAGE="JavaScript" SRC="softkey.js"></SCRIPT>
<TITLE>ソフトキーボード</TITLE>
</HEAD>
<BODY BGCOLOR=#FFFFDD>

<CENTER>
<H1>ソフトキーボード</H1>
<HR>
<FORM NAME="MyInput">
<TABLE ID=Input>
<TR><TH> 月:</TH><TD><INPUT TYPE="text" NAME="clkMoji" onFocus="fcPos=0;fcMax=2" MAXLENGTH=2 SIZE="4"></TD></TR>
<TR><TH> 日:</TH><TD><INPUT TYPE="text" NAME="clkMoji" onFocus="fcPos=1;fcMax=2" MAXLENGTH=2 SIZE="4"></TD></TR>
<TR><TH>入力1:</TH><TD><INPUT TYPE="text" NAME="clkMoji" onFocus="fcPos=2;fcMax=20" MAXLENGTH=20 SIZE="45"></TD></TR>
<TR><TH>入力2:</TH><TD><INPUT TYPE="text" NAME="clkMoji" onFocus="fcPos=3;fcMax=30" MAXLENGTH=30 SIZE="65"></TD></TR>
</TABLE>
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
SoftKeyboard();
// -->
</SCRIPT>
<P><B><FONT COLOR=#F00000>※濁音と半濁音の文字は、濁点(゛)ボタン、半濁点(゜)ボタンを押して下さい。</FONT></B></P>
</CENTER>

</BODY>
</HTML>

●CSSソース部(66行)
#Softkey TABLE{
BORDER-COLLAPSE:separate;
BORDER-STYLE:dotted;
BORDER-WIDTH:3px;
BORDER-COLOR:#F00000;
}
#Softkey TH{
HEIGHT:40px;
FONT-SIZE:30px;
FONT-WEIGHT:normal;
BORDER-STYLE:solid;
BORDER-WIDTH:1px 2px 2px 1px;
BORDER-COLOR:#000000;
}
#SoftkeyErs TH{
BACKGROUND-COLOR:#66FFCC;
}
#SoftkeyNum TH{
WIDTH:40px;
BACKGROUND-COLOR:#CCFF66;
}
#SoftkeyChr TH{
WIDTH:40px;
BACKGROUND-COLOR:#FFCC66;
}
#SoftkeyChr TH.Point{
WIDTH:40px;
BACKGROUND-COLOR:#FFFF66;
}
#Softkey TH.Empty{
WIDTH:40px;
BACKGROUND-COLOR:#EEEEEE;
}
#Softkey A{
WIDTH:100%;
HEIGHT:100%;
TEXT-DECORATION:none;
}
#Softkey A:Active{
COLOR:#FFFFFF;
BACKGROUND-COLOR:#F00000;
}
#Softkey A:Hover{
COLOR:#FFFFFF;
BACKGROUND-COLOR:#F00000;
}
#SoftkeyErs A{
WIDTH:240px;
COLOR:#000000;
BACKGROUND-COLOR:#66FFCC;
}
#SoftkeyNum A{
COLOR:#000000;
BACKGROUND-COLOR:#CCFF66;
}
#SoftkeyChr A{
COLOR:#000000;
BACKGROUND-COLOR:#FFCC66;
}
#SoftkeyChr A.Point{
COLOR:#000000;
BACKGROUND-COLOR:#FFFF66;
}
#Input TH{
TEXT-ALIGN:right;
}

投稿日時 - 2007-03-27 18:31:40

ANo.8

★最初に漢字変換機能は無理です。
・JavaScript でカナ漢字変換 IME を操作できれば良いのですが…。私はその方法を知りません。
・『ソフトキーボード』に『濁点』、『半濁点』、『長音』、『空白』や『小さい文字』の入力を付けました。
 『濁点』入力は『た』の後に『゛』をクリックすると入力フォームの『た』が『だ』に変換されます。
 『半濁点』入力も同じです。また、既に濁点や半濁点の付いている文字が最後のとき、『゛』や『゜』を
 クリックすると『濁点』、『半濁点』のない文字(清音)に戻ります。あと濁点のある文字に『゜』クリックや
 半濁点がある文字に『゛』クリックすると文字が切り替わる仕組みです。実際に試してみると分かります。

改良版:
・次の回答(No.9)で『HTMLソース』32行と『CSSソース』66行を載せます。
 前回の回答で作成した softkey.html は完全に削除して下さい。
 そして、新しく softkey.html、softkey.css を作って下さい。→今度は分離します。
 『HTMLソース』32行…『softkey.html』名で保存。
 『CSSソース』66行…『softkey.css』名で保存。
・その次の回答(No.10)では『JavaScript』の前編53行を載せます。
 前回の回答で作成した softkey.js は完全に削除して下さい。→新規に作成して下さい。
・さらに次の回答(No.11)では『JavaScript』の後編66行を載せます。→上手く合併して下さい。
・これで『softkey.html』、『softkey.css』、『softkey.js』の3つファイルが出来ます。
 softkey.html をダブルクリックすると『ソフトキーボード』のサンプルが現れます。

最後に:
・上記の『ソフトキーボード』で複数の入力フォームの1つにマウスでフォーカスを合わせると、
 その入力フォームに対して文字が入力されます。最初は『月』入力にフォーカスが位置しています。
・入力フォームの数は『softkey.html』を参考に追加、削除などして編集して下さい。
 『fcPos=?』の部分は上から順番に数値を指定して下さい。→フォーカス位置です。
 『fcMax=?』の部分は入力可能な文字数です。→サンプルでは上から順に2、2、20、30文字です。
 『MAXLENGTH=?』の部分も入力可能な文字数です。→『fcMax』と合わせて下さい。直接入力したときに制限されます。
 『SIZE="?"』の部分は入力フォームの横幅サイズです。適当に長さを変更して下さい。『fcMax』の2倍+5が良いかも。
・月、日付の入力はコンボボックスの選択を利用した方が選択しやすい気がいます。→改良してみて下さい。
 複数の各ページに『softkey.css』、『softkey.js』の2つのファイルを<HEAD>で指定すれば使いまわせます。
・入力フォームから文字列を読み取ってメールに送る方法は CGI なんかを利用すると良いかも。
 メール送信などは yusuke1121 さんが実現して下さい。
 詳しいことは、専門家さん達がいる『CGI』、『JavaScript』のカテゴリで相談して下さい。
・以上。おわり。→動作確認してくださいね。最後の報告を待っています。それではさようなら。

投稿日時 - 2007-03-27 18:30:04

ANo.7

★追記。
(1)『ソフトキーボード』に『濁点』、『半濁点』、『長音』、『空白』や『小さい文字』の入力が出来るようにしますか?
(2)入力フォームは1ページに付き、1箇所のみですか?
(3)複数ある箇所に、ソフトキーボードで入力する方法ですか?
・その他、何かあれば『ソフトキーボード』の入力部だけは私が作ります。→面白そうなので。
 入力フォームから文字列を読み取り、そのデータをメールで送信する部分は私はアドバイス
 できないため、『HTML』や『JavaScript』のカテゴリで質問してみて下さい。この場合は
 この質問の URL アドレスを貼り付けて質問して下さい。その方が回答しやすくなりますので。
・以上。それでは。また!

参考URL:http://oshiete1.goo.ne.jp/c254.html,http://oshiete1.goo.ne.jp/c252.html

投稿日時 - 2007-03-26 19:18:12

お礼

(1)文字を入力する際に『濁点』、『半濁点』、『長音』、『空白』、
『小さい文字』がないとやっぱり不便なので、あったほうがいいですね(^^;)
できれば漢字変換機能もあればいいのですが…
(2)ページによっては2箇所書き込む必要があります。
日付は月と日別々に書き込もうとしています。
(3)複数ページに複数書き込む所があります。

ほんとうに色々教えていただいてありがとうございます!!
その上、ソフトキーボードまで作っていただけるなんて感激です☆

投稿日時 - 2007-03-27 12:15:59

ANo.6

★ソフトキーボードの入力が出来ました。
・前回(No.4)に次の部分を追加して下さい。→『softkey.html』ファイルです。
(1)『#Softkey TH{ … }』と『#SoftkeyNum TH{ … }』の間に次の4行を挿入。
#SoftkeyErs TH{
WIDTH:200px;
BACKGROUND-COLOR:#66FFCC;
}
(2)『#Softkey A:Hover{ … }』と『#SoftkeyNum A{ … }』の間に次の5行を挿入。
#SoftkeyErs A{
WIDTH:240px;
COLOR:#000000;
BACKGROUND-COLOR:#66FFCC;
}

・前回(No.5)に次の部分を追加して下さい。→『softkey.js』ファイルです。
(1)『document.write( '<DIV ID=Softkey><TABLE CELLSPACING=5>' );』の下に次の4行を挿入。
document.write( '<TR ID=SoftkeyErs>' );
document.write( '<TH COLSPAN=5><A HREF="#" onClick="SoftClear()">すべて消去</A></TH>' );
document.write( '<TH COLSPAN=5><A HREF="#" onClick="SoftErase()">1文字消去</A></TH>' );
document.write( '</TR>' );
(2)『document.write( '<TH><A HREF="#">',table[j*10+i],'</A></TH>' );』の行を削除して下の2行に置換。
temp = " onClick=SoftInput('" + table[j*10+i] + "')";
document.write( '<TH><A HREF="#"',temp,'>',table[j*10+i],'</A></TH>' );
(3)ファイルの末尾に次の9行を追加。
function SoftClear(){
document.MyInput.clkMoji.value = "";
}
function SoftErase(){
document.MyInput.clkMoji.value = document.MyInput.clkMoji.value.slice(0,-1);
}
function SoftInput(moji){
document.MyInput.clkMoji.value += moji;
}

最後に:
・文字の最大数の制御はありません。yusuke1121 さんが付けて下さい。
 あと『送信』ボタンの仕組みも追加する必要があります。
 が、私はこれ以上アドバイスできません。趣味程度しか JavaScript を知らないので。ごめん!
 『送信』ボタンの仕組みなどは『HTML』や『JavaScript』のカテゴリで質問してみて下さい。
・ソフトキーボード部分は、前回の回答ソースに上記の部分を追加(編集)すれば出来ます。
・以上。おわり。→ソフトキーボードの編集する箇所は『』内をたよりに見つけて下さい。

投稿日時 - 2007-03-26 16:33:20

ANo.5

function SoftKeyboard(){
var table = [
"1","2","3","4","5","6","7","8","9","0",
"わ","ら","や","ま","は","な","た","さ","か","あ",
" ","り"," ","み","ひ","に","ち","し","き","い",
"を","る","ゆ","む","ふ","ぬ","つ","す","く","う",
" ","れ"," ","め","へ","ね","て","せ","け","え",
"ん","ろ","よ","も","ほ","の","と","そ","こ","お"
];
document.write( '<DIV ID=Softkey><TABLE CELLSPACING=5>' );

for ( var j=0 ; j < 6 ; j++ ){
if ( j == 0 ){
document.write( '<TR ID=SoftkeyNum>' );
}
else{
document.write( '<TR ID=SoftkeyChr>' );
}
for ( var i=0 ; i < 10 ; i++ ){
if ( table[j*10+i] == " " ){
document.write( '<TH CLASS=Empty><BR></TH>' );
}
else{
document.write( '<TH><A HREF="#">',table[j*10+i],'</A></TH>' );
}
}
document.write( '</TR>' );
}
document.write( '</TABLE></DIV>' );
}

投稿日時 - 2007-03-26 15:26:11

ANo.4

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_Jis">
<META HTTP-EQUIV="Content-Style-Type" CONTENT="text/css">
<STYLE TYPE="text/css">
<!--
#Softkey TABLE{
BORDER-COLLAPSE:separate;
BORDER-STYLE:dotted;
BORDER-WIDTH:3px;
BORDER-COLOR:#CC0000;
}
#Softkey TH{
WIDTH:40px;
HEIGHT:40px;
FONT-SIZE:30px;
FONT-WEIGHT:normal;
BORDER-STYLE:solid;
BORDER-WIDTH:1px 2px 2px 1px;
BORDER-COLOR:#000000;
}
#SoftkeyNum TH{
BACKGROUND-COLOR:#CCFF66;
}
#SoftkeyChr TH{
BACKGROUND-COLOR:#FFCC66;
}
#Softkey TH.Empty{
BACKGROUND-COLOR:#EEEEEE;
}
#Softkey A{
WIDTH:100%;
HEIGHT:100%;
TEXT-DECORATION:none;
}
#Softkey A:Active{
COLOR:#FFFFFF;
BACKGROUND-COLOR:#F00000;
}
#Softkey A:Hover{
COLOR:#FFFFFF;
BACKGROUND-COLOR:#F00000;
}
#SoftkeyNum A{
COLOR:#000000;
BACKGROUND-COLOR:#CCFF66;
}
#SoftkeyChr A{
COLOR:#000000;
BACKGROUND-COLOR:#FFCC66;
}
-->
</STYLE>
<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/JavaScript">
<SCRIPT LANGUAGE="JavaScript" SRC="softkey.js"></SCRIPT>
<TITLE>ソフトキーボード</TITLE>
</HEAD>
<BODY>

<CENTER>
<FORM NAME="MyInput">入力:<INPUT TYPE="text" NAME="clkMoji" SIZE="90"></FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
SoftKeyboard();
// -->
</SCRIPT>
</CENTER>

</BODY>
</HTML>

投稿日時 - 2007-03-26 15:24:56

ANo.3

★補足要求、有り難うございます。
・正直、ボタン数が多いので大変そうです。
 ボタンの出し方は <INPUT> タグで簡単に作れます。が、ボタン数が多いので
 ボタンと同じようなパネルでも良いならば、<TABLE>タグで作成してみてはどうでしょうか。
・<TABLE>タグに『数字』と『ひらがな』を表示して、クリックされたらばそれを感知して
 文字入力フォームに1文字ずつ入れていきます。→JavaScript を使って。
・なお、この処理は JavaScript を利用することになります。
 聞いた事はあるようですが、どんな場面で利用するとかは分からないようですね。
 今回は JavaScript を利用すれば実現できそうですよ。→私も趣味程度しか知りませんが…。
・お年寄りを対象にしているため『文字』を大きくする必要がありますね。
 私の環境は画面が1280×1024です。→画面の解像度も考慮しないといけません。
・次の回答で『数字』と『ひらがな』のソフトキーボードの表示サンプルを載せます。
 こんな感じでクリックされたらば文字入力、文字削除は実装出来ると思います。
 ソフトキーボード画面は、タッチパネルに似せてデザインしました。私のイメージで。
・あとスタイルシート(CSS)は知っていますか?
 HTMLのマークアップと『JavaScript』を組み合わせれば『ソフトキーボード』がキレイに
 実現出来そうです。『JavaScript』と『スタイルシート』部は外部ファイルに保存して
 管理するのがスマートだと思います。

最後に:
・次の回答で『HTMLソース』部、『JavaScript』部の2つに分けて載せます。
 回答 No.4 の内容をコピーして、メモ帳などに貼り付けて下さい。→『softkey.html』の名前で保存。
 回答 No.5 の内容をコピーして、メモ帳などに貼り付けて下さい。→『softkey.js』の名前で保存。
 ファイル名は上記の名前にして下さい。→変更するときには回答 No.4 の内容も変更する必要あり。
・まだ表示部の『JavaScript』だけなので入力できないよ。あと漢字変換機能は無理のような気が…。
・詳しくは『HTML』や『JavaScript』のカテゴリで質問してみて下さい。→『CGI』『Perl』カテゴリもあります。
 この質問に興味を持ったため、続けてアドバイスしていきたいと思います。
 お急ぎの場合は、他のカテゴリ(JavaScript)などで質問してみて下さい。
・私もちょっと『JavaScript』で作ってみます。しばらくお待ち下さい。
・以上。

投稿日時 - 2007-03-26 15:23:24

ANo.2

★最初に6つだけお聞きしたいです。
(1)JavaScript は知っていますか?
(2)Windows 電卓のような GUI ボタンを出したいのですか?
(3)ソフトキーボードは『ア~ン』のカタカナのみですか?
(4)ソフトキーボードの入力文字数はどれくらいですか?
(5)そもそもソフトキーボードで入力した文字は何に利用するのですか?
(6)その他。
・上記の6つを補足して下さい。
・以上。→『JavaScript』などを使えば出来そうな気がしますが…。

投稿日時 - 2007-03-25 14:55:12

お礼

(1)名前は聞いたことあるんですが、そこまで詳しくないです。
(2)ボタン形式にはしたいと思っています。
(3)キーはひらがな・数字があればいいです。
  (できたら漢字変換機能や文字の消去もできればと…)
(4)ページによって変わりますが、最大30文字程度です。
(5)(6)現在、私はお年寄りを対象にしたショッピングシステムを
タッチパネル画面で作ろうとしてるんですが、通常の
ショッピングカートのCGIだと、細かすぎたり、複雑で
お年寄りやタッチパネルには不向きだったんです。
なので必要情報(個人情報や商品情報)を1ページずつ
書いてもらう構造を考えています。
その入力してもらったデータはコチラで管理するメールアドレスに
送って確認できればいいと思っています。

長々となりましたが、どうでしょうか?

投稿日時 - 2007-03-25 16:53:27

ANo.1

IMEのツール>IMEパットの中に「ソフトキーボード」がありますよ。

投稿日時 - 2007-03-24 16:07:58

お礼

回答ありがとうございます!
初めての投稿だったんで、回答が返ってきて嬉しかったですw

IMEパットのソフトキーボードでは小さすぎて
画面をタッチして操作するのは困難なんですよ…
なので見やすくて大きなソフトキーボード
(あと、できればアイウエを順になってるようなもの)
があればいいんですが。

投稿日時 - 2007-03-25 11:51:06

あなたにオススメの質問