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

締切済

質問者：yusuke1121
質問日時：2007/03/24 15:53
回答数：11件

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

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (11件中1～10件)

最新から表示
回答順に表示

No.11

回答者： Oh-Orange
回答日時：2007/03/27 18:33

function SoftClear(){

- 1
- 件

通報する

No.10

回答者： Oh-Orange
回答日時：2007/03/27 18:32

function SoftKeyboard(){

- 0
- 件

通報する

No.9

回答者： Oh-Orange
回答日時：2007/03/27 18:31

●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>入力１：</TH><TD><INPUT TYPE="text" NAME="clkMoji" onFocus="fcPos=2;fcMax=20" MAXLENGTH=20 SIZE="45"></TD></TR>
<TR><TH>入力２：</TH><TD><INPUT TYPE="text" NAME="clkMoji" onFocus="fcPos=3;fcMax=30" MAXLENGTH=30 SIZE="65"></TD></TR>
</TABLE>
</FORM>
<SCRIPT LANGUAGE="JavaScript">

</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;
}

- 0
- 件

通報する

No.8

回答者： Oh-Orange
回答日時：2007/03/27 18:30

★最初に漢字変換機能は無理です。

・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』の３つファイルが出来ます。
　softkey.html をダブルクリックすると『ソフトキーボード』のサンプルが現れます。

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

- 2
- 件

通報する

No.7

回答者： Oh-Orange
回答日時：2007/03/26 19:18

★追記。

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

参考URL：http://oshiete1.goo.ne.jp/c254.html,http://oshie …

- 0
- 件

通報する

この回答へのお礼

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

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

通報する

お礼日時：2007/03/27 12:15

No.6

回答者： Oh-Orange
回答日時：2007/03/26 16:33

★ソフトキーボードの入力が出来ました。

・前回(No.4)に次の部分を追加して下さい。→『softkey.html』ファイルです。
(1)『#Softkey TH{ … }』と『#SoftkeyNum TH{ … }』の間に次の４行を挿入。
#SoftkeyErs TH{
WIDTH:200px;
BACKGROUND-COLOR:#66FFCC;
}
(2)『#Softkey A:Hover{ … }』と『#SoftkeyNum A{ … }』の間に次の５行を挿入。
#SoftkeyErs A{
WIDTH:240px;
COLOR:#000000;
BACKGROUND-COLOR:#66FFCC;
}

・前回(No.5)に次の部分を追加して下さい。→『softkey.js』ファイルです。
(1)『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()">１文字消去</A></TH>' );
document.write( '</TR>' );
(2)『document.write( '<TH><A HREF="#">',table[j*10+i],'</A></TH>' );』の行を削除して下の２行に置換。
temp = " onClick=SoftInput('" + table[j*10+i] + "')";
document.write( '<TH><A HREF="#"',temp,'>',table[j*10+i],'</A></TH>' );
(3)ファイルの末尾に次の９行を追加。
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』のカテゴリで質問してみて下さい。
・ソフトキーボード部分は、前回の回答ソースに上記の部分を追加(編集)すれば出来ます。
・以上。おわり。→ソフトキーボードの編集する箇所は『』内をたよりに見つけて下さい。

- 0
- 件

通報する

No.5

回答者： Oh-Orange
回答日時：2007/03/26 15:26

function SoftKeyboard(){

- 0
- 件

通報する

No.4

回答者： Oh-Orange
回答日時：2007/03/26 15:24

<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">

</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">

</SCRIPT>
</CENTER>

</BODY>
</HTML>

- 0
- 件

通報する

No.3

回答者： Oh-Orange
回答日時：2007/03/26 15:23

★補足要求、有り難うございます。

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

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

- 0
- 件

通報する

No.2

回答者： Oh-Orange
回答日時：2007/03/25 14:55

★最初に６つだけお聞きしたいです。

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

- 0
- 件

通報する

この回答へのお礼

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

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

通報する

お礼日時：2007/03/25 16:53