アプリ版：「スタンプのみでお礼する」機能のリリースについて

既存のJSコードをHTMLサンプルに組み込みたい（日本語漢字の中国漢字

解決済

  • 質問者：litton101
  • 質問日時：
  • 回答数：4件

既存のJSコードをHTMLサンプルに組み込みたい（日本語漢字の中国漢字に変換）

以下のJSサンプルがあります。

簡体字と日本語漢字の相互変換ツール Kanconvit を公開
http://blog.livedoor.jp/dankogai/archives/512242 …

これを、文末のHTMLサンプルに組み込み、次の動作をさせたいのですが、JSのサンプルコードをご教示いただけますと幸いです。

(1) 一行にテキストフォームが８つあり、各行ごと処理するボタンが設置されている。
(2) ボタンを押下すると、８フォームに対して、上段（緑）の日本語文字列が、中国語漢字に置換されて下段（黄）に中国語文字列が表示される。
(3) 対象漢字がない場合や、ひらがな／カタカナは変換せず、元の漢字を表示。
(4) 【参考】変換結果は、各行ごと配列に格納し、PHPでMySQLに格納されます。

※名簿の下訳（省力化）が目的であり、厳密な「翻訳」を期待するものではありません。

※HTMLサンプルが長いので、回答No1に示します。

よろしくお願い致します。

通報する

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

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

＃2です。



説明をしていると長くなりますが、要素を特定する方法をどのように考えるかということで、単純化できればそれだけ処理を簡単にできると言う意味です。
想像するところ、ソースはサーバー側のソフトから自動出力されるもののようなので、ソースの間違いまでは考慮しなくても良さそうではありますが…

HTMLを変更しても良いのか不明ですが、例えば以下のサンプルのようにすれば、対になるinputが必ず連続するようになるかと思います。
#2の例では変換対象の識別に「type、class名」を、対の識別に「type、name、class名」で確認していましたが、簡略化して、変換対象はclass="jp"のものとし、対のものはその直後のinput（かつclass="cn"）と限定しています。

ついでに、入れ子のtableもはずしてあります。
（ダミーのKanconvitが入っていますので、削除してください。）

文字数制限の都合上分割されちゃいます。
（例示のセットも2個。スクリプトに必要のない属性も省略しました。）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head><title>test</title>
<style type="text/css">
table#nameList {
border-collapse: separate;
border-spacing:2px;
border:1px solid #ccc;
border-bottom-color:#444;
border-right-color:#444;
}
table#nameList td {
border:1px solid #ccc;
border-top-color:#444;
border-left-color:#444;
}
table#nameList td div {
margin-left:2px;
float:left;
}
table#nameList input { width:18em; }
table#nameList td.L4 input { width:4em; }
table#nameList input.jp { background-color: #cfc; }
table#nameList input.cn { background-color: #ffc; }
</style>
</head>
<body>
<table id="nameList">
<tr>
<td rowspan="3" class="L4">
<div><input value="高橋" class="jp"><br><input value="" class="cn"></div>
<div><input value="一郎" class="jp"><br><input value="" class="cn"></div>
</td>
<td>肩書1</td>
<td><input value="社名1" class="jp"><br><input value="" class="cn"></td>
<td><input value="役職1" class="jp"><br><input value="" class="cn"></td>
<td rowspan="3">
<button type="button">中国語<br>←漢字変換</button>
</td>
</tr>
<tr>
<td>肩書2</td>
<td><input value="社名2" class="jp"><br><input value="" class="cn"></td>
<td><input value="役職2" class="jp"><br><input value="" class="cn"></td>
</tr>
<tr>
<td>肩書3</td>
<td><input value="社名3" class="jp"><br><input value="" class="cn"></td>
<td><input value="役職3" class="jp"><br><input value="" class="cn"></td>
</tr>
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillinさん、たびたびのご教示ありがとうございました。

おかげさまで、期待の動作を得ることができました!
class="jpで対を判定するとのこと、こちらもよく理解できました。

これを本番環境に組み込めば、驚くほど作業効率が向上するはずです。

WebでOpenにするわけでなく、裏でわたしがシコシコやる作業の効率化ツールなのでなおさら助かります。

ともかく永久保存版とさせていただきます。本当にありがとうございました。

通報する
お礼日時：2010/05/15 23:41

No.4

  • 回答者： fujillin
  • 回答日時：

＜つづき＞



<tr>
<td rowspan="3" class="L4">
<div><input value="鈴木" class="jp"><br><input value="" class="cn"></div>
<div><input value="二郎" class="jp"><br><input value="" class="cn"></div>
</td>
<td>肩書1</td>
<td><input value="社名1" class="jp"><br><input value="" class="cn"></td>
<td><input value="役職1" class="jp"><br><input value="" class="cn"></td>
<td rowspan="3">
<button type="button">中国語<br>←漢字変換</button>
</td>
</tr>
<tr>
<td>肩書2</td>
<td><input value="社名2" class="jp"><br><input value="" class="cn"></td>
<td><input value="役職2" class="jp"><br><input value="" class="cn"></td>
</tr>
<tr>
<td>肩書3</td>
<td><input value="社名3" class="jp"><br><input value="" class="cn"></td>
<td><input value="役職3" class="jp"><br><input value="" class="cn"></td>
</tr>
<tr>
</table>

<script type="text/javascript">
<!--
(function() {
var list = document.getElementById("nameList");
try {
list.addEventListener("click", function(e){convert(e)}, false);
} catch(evt) {
list.attachEvent("onclick", function(e){convert(e)});
}
})()

var convert = (function(classTest) {
return function(evt) {
var e, i = 3, j, inp = [];
var t = evt.target || evt.srcElement;
if (t.nodeName != "BUTTON") return;
while (t.nodeName != "TR") t = t.parentNode;

while (i--) {
e = t.getElementsByTagName("input");
for (j=0; j<e.length;) inp.push(e[j++]);
t = t.nextSibling;
while(t && t.nodeName != "TR") t = t.nextSibling;
if (!t) break;
}

i = 0;
while (e = inp[i++]) {
if (classTest("jp")(e)) {
t = inp[i++];
if (t && classTest("cn")(t)) t.value = Kanconvit.ja2zh(e.value);
}
}
}
})(
function(str) {
var reg = "(^|\\s)" + str + "(\\s|$)";
return function(elm) {return elm.className.match(new RegExp(reg));}
});

var Kanconvit = function(){};
Kanconvit.ja2zh = function(a) {
return a;
}
//-->
</script>
</body>
</html>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： fujillin
  • 回答日時：

確認はしていませんが、参考のサイトによれば


　Kanconvit.ja2zh( 文字列 )
で、変換結果を得られるということみたいなので…

<script>
var convert = (function(serchPair) {
return function(frm) {
var e, pair, i = 0, inp = frm.elements;
while (e=inp[i++]) {
if ("text" == e.type && "jp" == e.className) {
if (pair = serchPair(e.name, i, inp)) pair.value = Kanconvit.ja2zh(e.value);
}
}
}
})(
function(org, i, inp) {
var p = inp[i], pair = null;
var tnam = org.substr(0, org.length-2) + "_Chinese[]";
if (p && tnam != p.name) p = inp[i+1];
if (p && "text" == p.type && "cn" == p.className && tnam == p.name) pair = p;
return pair;
});
</script>
とでもしておいて、
ボタン部分に　onclick="convert(this.form)"　とか。

対になっているinputの位置関係が、例示されているもので全てなのかよくわからないのですが、2個先のinputまで見て無ければ打ち切りにしています。
（本来は構造的に同じ関係になるようにマークアップしておいたほうが良いのでは？）
    • good
    • 0
    • 件
通報する
この回答へのお礼

fujillinさん、早速のご回答ありがとうございました。

元質問のサイトのサンプル＋fujillinさんご教示のスクリプト＋元質問のサンプルHTMLの組み合わせでUTF-8でHTMを保存したところ、うまく動作できました！！ものすごい感激しました。

> 対になっているinputの位置関係が、例示されているもので全てなのかよくわからないのですが、

「補足」に新たなHTMLをお示ししたように、200人分のデータがテーブル上に並んでいますが、ご提示いただいたJSは、ボタン押下→表示されている全データに瞬時に処理を施す、という仕様になっています。
こんなに一括変換できるとは十分すごいのですが、ここは、ボタン押下→「その行の人の部分だけに」中国語変換を実施、という動作をさせたいです。それから、

>2個先のinputまで見て無ければ打ち切りにしています。
> （本来は構造的に同じ関係になるようにマークアップしておいたほうが良いのでは？）

すみません、この２点はどういうことでしょうか。
構造的には、本番環境もほぼ質問に例示したHTMLと同じ構造であり、同じINPUTタグの数ですが・・・

もしよろしければ、希望するような動作にできるようご教示いただけますと大変幸いです、
よろしくお願い致します、

通報する
お礼日時：2010/05/13 23:55

No.1

  • 回答者： litton102
  • 回答日時：

元質問者です。



HTMLサンプルは下記のとおりです、よろしくお願い致します。


<html>
<head>
<style type="text/css">
.jp {background-color: #00ff00;}
.cn {background-color: #ffff00;}
</style>
</head>
<body>
<form method="post" name="myform" action="">
<table border="1">
<th>氏名</th>
<th>分類</th>
<th>社名</th>
<th>役職</th>
<th>変換ボタン</th>
<tr>
<td rowspan="3">
<table border="0" cellpadding="0">
<tr>
<td><input type="text" name="Sei[]" size="2" value="高橋" class="jp"></td>
<td><input type="text" name="Mei[]" size="2" value="一郎" class="jp"></td>
</tr>
<tr>
<td><input type="text" name="Sei_Chinese[]" size="2" value="" class="cn"></td>
<td><input type="text" name="Mei_Chinese[]" size="2" value="" class="cn"></td>
</tr>
</table>
</td>
<td>肩書1</td>
<td><input type="text" name="Kaisya1[]" size="40" value="青空運輸株式会社" class="jp"><br><input type="text" name="Kaisya1_Chinese[]" size="40" value="" class="cn"></td>
<td><input type="text" name="Yakusyoku1[]" size="40" value="常務取締役" class="jp"><br><input type="text" name="Yakusyoku1_Chinese[]" size="40" value="" class="cn"></td>
<td rowspan="3">
<input type="button" name="chieseinput" value="←中国語漢字に変換してみる">
</td>
</tr>
<tr>
<td>肩書2</td>
<td><input type="text" name="Kaisya2[]" size="40" value="日本輸送協会" class="jp"><br><input type="text" name="Kaisya2_Chinese[]" size="40" value="" class="cn"></td>
<td><input type="text" name="Yakusyoku2[]" size="40" value="副会長" class="jp"><br><input type="text" name="Yakusyoku2_Chinese[]" size="40" value="" class="cn"></td>
</tr>
</tr>
<tr>
<td>肩書3</td>
<td><input type="text" name="Kaisya3[]" size="40" value="東京トラック連合会" class="jp"><br><input type="text" name="Kaisya3_Chinese[]" size="40" value="" class="cn"></td>
<td><input type="text" name="Yakusyoku3[]" size="40" value="安全部会長" class="jp"><br><input type="text" name="Yakusyoku3_Chinese[]" size="40" value="" class="cn">
<input type="hidden" name="MyNumber" value="1">
</td>
</tr>

</table>
：
：（以下、延々と200人分のリストが続く）
：
<input type="submit" name="exec" value="保存">
</form>
</body>
</html>

この回答への補足

質問時は投稿文字数制限により、省略しましたが、本番環境もこのようなテーブル構造になっています。
(続きは、お礼欄に記述します)


<table border="1">
<tr>
<td rowspan="3">
<table>
<tr>
<td><input value="高橋"></td>
<td><input value="一郎"></td>
</tr>
<tr>
<td><input value=""></td>
<td><input value=""></td>
</tr>
</table>
</td>
<td>肩書1</td>
<td><input value="社名1"><br><input value=""></td>
<td><input value="役職1"><br><input value=""></td>
<td rowspan="3">
<input type="button" value="←この行にある8フォームを中国語漢字に変換">
</td>
</tr>
<tr>
<td>肩書2</td>
<td><input value="社名2"><br><input value=""></td>
<td><input value="役職2"><br><input value=""></td>
</tr>
</tr>
<tr>
<td>肩書3</td>
<td><input value="社名3"><br><input value=""></td>
<td><input value="役職3"><br><input value="">
</td>
</tr>
<tr>
<td rowspan="3">
<table>
<tr>
<td><input value="鈴木"></td>
<td><input value="二郎"></td>
</tr>
<tr>
<td><input value=""></td>
<td><input value=""></td>
</tr>
</table>
</td>
<td>肩書1</td>
<td><input value="社名1"><br><input value=""></td>
<td><input value="役職1"><br><input value=""></td>
<td rowspan="3">
<input type="button" value="←この行にある8フォームを中国語漢字に変換">
</td>
</tr>
<tr>
<td>肩書2</td>
<td><input value="社名2"><br><input value=""></td>
<td><input value="役職2"><br><input value=""></td>
</tr>
</tr>
<tr>
<td>肩書3</td>
<td><input value="社名3"><br><input value=""></td>
<td><input value="役職3"><br><input value="">
</td>
</tr>
<tr>
<td rowspan="3">
<table>
<tr>
<td><input value="田中"></td>
<td><input value="三郎"></td>
</tr>
<tr>
<td><input value=""></td>
<td><input value=""></td>
</tr>
</table>
</td>
<td>肩書1</td>
<td><input value="社名1"><br><input value=""></td>
<td><input value="役職1"><br><input value=""></td>
<td rowspan="3">
<input type="button" value="←この行にある8フォームを中国語漢字に変換">
</td>
</tr>
<tr>
<td>肩書2</td>
<td><input value="社名2"><br><input value=""></td>
<td><input value="役職2"><br><input value=""></td>
</tr>
</tr>
<tr>
<td>肩書3</td>
<td><input value="社名3"><br><input value=""></td>
<td><input value="役職3"><br><input value="">
</td>
</tr>
</table>
（以下、同じ構造で２００名分のデータが続く）

補足日時：2010/05/13 23:44
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報