既存のJSコードをHTMLサンプルに組み込む方法
- JSコードをHTMLサンプルに組み込む方法をご教示ください。
- 簡体字と日本語漢字の相互変換ツール Kanconvit を使い、テキストフォームの入力を中国語漢字に変換する方法を教えてください。
- HTMLサンプルにJSコードを組み込んで、テキストフォームの入力に対して中国語漢字に変換する機能を実装したいです。
- ベストアンサー
既存のJSコードをHTMLサンプルに組み込みたい（日本語漢字の中国漢字
既存のJSコードをHTMLサンプルに組み込みたい（日本語漢字の中国漢字に変換） 以下のJSサンプルがあります。 簡体字と日本語漢字の相互変換ツール Kanconvit を公開 http://blog.livedoor.jp/dankogai/archives/51224227.html これを、文末のHTMLサンプルに組み込み、次の動作をさせたいのですが、JSのサンプルコードをご教示いただけますと幸いです。 (1) 一行にテキストフォームが８つあり、各行ごと処理するボタンが設置されている。 (2) ボタンを押下すると、８フォームに対して、上段（緑）の日本語文字列が、中国語漢字に置換されて下段（黄）に中国語文字列が表示される。 (3) 対象漢字がない場合や、ひらがな／カタカナは変換せず、元の漢字を表示。 (4) 【参考】変換結果は、各行ごと配列に格納し、PHPでMySQLに格納されます。 ※名簿の下訳（省力化）が目的であり、厳密な「翻訳」を期待するものではありません。 ※HTMLサンプルが長いので、回答No1に示します。 よろしくお願い致します。
- litton101
- お礼率89% (1106/1240)
- JavaScript
- 回答数4
- ありがとう数7
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
＃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>
その他の回答 (3)
- fujillin
- ベストアンサー率61% (1594/2576)
＜つづき＞ <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>
- fujillin
- ベストアンサー率61% (1594/2576)
確認はしていませんが、参考のサイトによれば 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まで見て無ければ打ち切りにしています。 （本来は構造的に同じ関係になるようにマークアップしておいたほうが良いのでは？）
お礼
fujillinさん、早速のご回答ありがとうございました。 元質問のサイトのサンプル＋fujillinさんご教示のスクリプト＋元質問のサンプルHTMLの組み合わせでUTF-8でHTMを保存したところ、うまく動作できました！！ものすごい感激しました。 > 対になっているinputの位置関係が、例示されているもので全てなのかよくわからないのですが、 「補足」に新たなHTMLをお示ししたように、200人分のデータがテーブル上に並んでいますが、ご提示いただいたJSは、ボタン押下→表示されている全データに瞬時に処理を施す、という仕様になっています。 こんなに一括変換できるとは十分すごいのですが、ここは、ボタン押下→「その行の人の部分だけに」中国語変換を実施、という動作をさせたいです。それから、 >2個先のinputまで見て無ければ打ち切りにしています。 > （本来は構造的に同じ関係になるようにマークアップしておいたほうが良いのでは？） すみません、この２点はどういうことでしょうか。 構造的には、本番環境もほぼ質問に例示したHTMLと同じ構造であり、同じINPUTタグの数ですが・・・ もしよろしければ、希望するような動作にできるようご教示いただけますと大変幸いです、 よろしくお願い致します、
元質問者です。 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> （以下、同じ構造で２００名分のデータが続く）
関連するQ&A
- 中国語と日本の漢字について
お世話になります。 ●日本漢字能力検定（漢検）の２級を持っています。 ●また、中国語の勉強をしたいと思っています。 個人的な考えですが、中国＝漢字というイメージがあるのですが、日本の漢検の知識は中国語を勉強するにあたって、大きく役に立つものでしょうか？ 役に立つものなら猛勉強して、漢検１級を取得してから、中国語の勉強を始めたいと思います。 それとも、「中国語」と「日本の漢字の知識」は別物と考えても良いものですか？ 良かったら、ご教授お願い致します。
- ベストアンサー
- その他（語学）
- 中国語入力フォームの作り方。
中国語入力可のWEBフォームに入力された文字列を 日本語フォントで示せる独自の管理コードに置き換えたいのですが (1)中国語入力を受け付ける入力フォームをつくるには？ (2)入力された中国フォントで書かれた文字を日本語フォント で示せる管理コードに置換え。 (2)もしくは(1)もPHP等のサーバサイドプログラムを使うのかもしれ ませんが上記プロセスしか思いつきません。 実現するための、やり方や手掛かりになる情報をご存知の方 ご教授意ただけませんでしょうか？ 例、 你好←この中国語フォントで書かれた中国漢字を、 ↓↓ 中国語挨拶１←このように、日本語の管理コードに書き換えます。
- ベストアンサー
- HTML
- 中国語のコードについて
中国語のホームページを作ろうと思っています。 現在ホームページ（日本語）に、メールフォームがあり、これを中国語に転用しようと考えております。 日本語の場合、jcode.plというのを使用していますが、中国語ではどういったものを使用するのでしょうか？ 携帯からアクセスできるようにするため、ユニコードは使わず、GBコードを使いたいです。 ご存知の方、教えて下さい。
- ベストアンサー
- Perl
- 日本語の漢字の読みは中国語に比べてやっぱり多いんでしょうか 中国語では規制されていると聞いたんですが本当ですか
日本語の漢字の読みは中国語に比べてやっぱり多いんでしょうか 中国語では規制されていると聞いたんですが本当ですか 中国語でも2つ以上の読み方がある漢字はありますか？？ 日本語の「下」みたいに、8つくらい読みがある漢字はありますかね
- 締切済み
- 中国語
- 同じ漢字でも中国語と日本語とで意味が違うのは
同じ漢字でも中国語と日本語とでは意味が全く違うケースも多いようですが、何故、このようなことが起こってるのでしょうか? 例を挙げると・・・ 老婆 中国語:妻 日本語:おばあさん
- ベストアンサー
- 中国語
- 中国語の読み方を入れて、日本語に変換
無料のソフトで、中国語の読み方をいれて日本語に変換されるソフトみたいなのはないものでしょうか。 例えば、「にーはお」→「こんにちは」となるような。 探してみたやつでは、中国語（漢字）ででてくるので分りませんでした。こんな都合のいいものご存じないでしょうか。 お願いします。
- ベストアンサー
- その他（語学）
- htmlファイルとjsファイルを作成 サンプル
JavaScript初心者なのですが、 http://www.tohoho-web.com/js/start.htm#Prepare のように HTMLの中にJavaScriptのコードを記述する書き方ではなく htmlファイルとjsファイルを作成して コードを記述する書き方を勉強したいのですが そのようなサンプルがたくさん載ったサイトはありますか？
- ベストアンサー
- JavaScript
お礼
fujillinさん、たびたびのご教示ありがとうございました。 おかげさまで、期待の動作を得ることができました! class="jpで対を判定するとのこと、こちらもよく理解できました。 これを本番環境に組み込めば、驚くほど作業効率が向上するはずです。 WebでOpenにするわけでなく、裏でわたしがシコシコやる作業の効率化ツールなのでなおさら助かります。 ともかく永久保存版とさせていただきます。本当にありがとうございました。