alice導入 名前変換フォーム編

1) aliceを使用するには、alice.jsとscript.jsが必要です。こちらをクリックしてお好きなバージョンのalice.zipをダウンロードして下さい。ダウンロード後は、zipを解凍をします。jsフォルダが出てくると思いますので、その中にscript.jsとalice.jsがあるか、確かめてください。チュートリアルではオリジナルである、6個バージョンを使用します。

2) ファイルが揃っているのを確認したら、このjsフォルダを、あなたのサイトフォルダ内に置きます。場所はどこでもいいですが、大抵は閲覧者が最初に訪れる玄関、index.htmlと同じ層に入れるので、チュートリアルでもそちらにフォルダを置きます。リンクタグに聞き覚えがない、または不慣れな方は、このチュートリアルと同じ場所においてください。なお、すでにjsフォルダがある方は、script.jsとalice.jsをそのフォルダに移してください。

3) 名前変換フォームを設置します。設置したいhtmlファイルをサイト作成ソフト、サクラエディタなどで開きます。名前変換フォームは閲覧者が名前を登録する箇所です。チュートリアルでは、分かりやすくnamae.htmlに設置することとします。

4) サイト作成ソフトで開いたら、下の方にある</body>の真上に、先ほど置いたscript.jsとalice.jsを呼び出します。jsフォルダとnamae.htmlが同じフォルダ層にある場合は、

<script src="js/script.js" charset="UTF-8"></script>
<script src="js/alice.js" charset="UTF-8"></script>
</body>

となります。このときscript.jsが必ず、alice.jsの上に来るようにしてください。もし、jsフォルダと変換ページが同じ場所にない場合は、jsフォルダからnamae.htmlまで何回フォルダをクリックしたか数えて、その数分、js/の前に../を入れてください。左の画像2の例では、フォルダ『long＞rensai1』の中にnamae.htmlが入ってます。これは『long』と『rensai1』の2つのフォルダを挟んでいるので、../を2回js/の前に入れます。

<script src="../../js/script.js" charset="UTF-8"></script>
<script src="../../js/alice.js" charset="UTF-8"></script>
</body>

※『src=""』はリンクタグ、<a href="">の『href=""』と同じ扱いになります。

5) スクリプトを呼び出したら、フォームを設置します。aliceは【OK】をクリックしても、サイトページの一番上に飛ぶことはないので、ページの下でもどこででも設置できます。設置する場所を決めたら、そこに

<span class="YZ1">
	<input class="names0" type="text"> 
	<input class="names1" type="text"> 
	<input class="names2" type="hidden">
	<input class="names3" type="hidden"> 
	<input class="names4" type="hidden"> 
	<input class="names5" type="hidden">
</span>
<div class="submit">
	<input id="enterYZ1" type="button" value="　OK　"> 
	<input id="deleteYZ1" type="button" value="　NG　">
</div>

を貼り付けてください。洋名などでもうひとつ、名前変換フォームが必要な場合は、

<span class="YZ2">
	<input class="names0" type="text"> 
	<input class="names1" type="text"> 
	<input class="names2" type="hidden"> 
	<input class="names3" type="hidden"> 
	<input class="names4" type="hidden"> 
	<input class="names5" type="hidden">
</span>
<div class="submit">
	<input id="enterYZ2" type="button" value="　OK　"> 
	<input id="deleteYZ2" type="button" value="　NG　">
</div>	

を貼り付けてください。上と下のフォームの違いはYZ1がすべてYZ2になっていることです。主に当サイトではYZ1の方を和名モード。YZ2の方を洋名モードと呼んでいます。

6) 上の変換フォームは両方とも、0を含めて6つの変換項目がついています。

<input class="names0" type="text"><!-- 変換項目0 -->
<input class="names1" type="text"><!-- 変換項目1 -->
<input class="names2" type="hidden"><!-- 変換項目2 -->
<input class="names3" type="hidden"><!-- 変換項目3 -->
<input class="names4" type="hidden"><!-- 変換項目4 -->
<input class="names5" type="hidden"><!-- 変換項目5 -->

の部分です。『type=』に注目してください。『type="text"』と『type="hidden"』があります。『type="text"』と書いてあるのは閲覧者から見えますが『type="hidden"』と書いてあるのは閲覧者から見ることができません。最初の2行は、苗字と名前で2項目使うので『type="text"』にしてありますが、もし、他にも項目を追加したかったら『type="hidden"』を『type="text"』にして項目を有効化してください。反対に名前だけしか使わない場合は2行目の『type="text"』を『type="hidden"』にしてください。なお『type="hidden"』の行はそのまま消してしまっても支障ありません。

<input class="names0" type="text"> 
<input class="names1" type="text"> 

だけでも、OK。6個以外の個数を選んだ方は、そちらに合わせて、フォームを減らすか、増やすかしてください。増やす場合、class="names"の数字を増やしていくだけです。

7) フォーム設置が終了したら、ラベルを加えます。ラベルをみて、閲覧者はそこに何を入力するか、判断します。先ほど呼び出したscript.jsとalice.jsの上にラベルスクリプトを加えます。

<script>var shokiYZ1 = "苗字,名前,変換項目2,変換項目3,変換項目4,変換項目5";</script>
<script>var shokiYZ2 = "First,Last,変換項目2,変換項目3,変換項目4,変換項目5";</script>
<script src="js/script.js" charset="UTF-8"></script>
<script src="js/alice.js" charset="UTF-8"></script>
</body>

今回は両方追加しましたが、YZ1かYZ2の片方しか使用しない場合は、片方だけ追加してください。
YZ1の方ではすでに『変換項目0＝苗字』『変換項目1＝名前』がセットされています。YZ2の方では『変換項目0＝First』『変換項目1＝Last』。こちらはあなたの好きなラベルに変えられますので、変更したい場合は書き換えてください。また、先ほど他の変換項目を有効にされた方は、追加した分のラベルを追加してください。たとえば、YZ1の方に『閲覧者の好きなお茶の名前』とう項目を加えたい場合、ラベルは

<script>var shokiYZ1 = "苗字,名前,好きな茶の名,変換項目3,変換項目4,変換項目5";</script>

になります。6個以外の個数を選ばれた方は、その分、変換項目のラベルを減らすか増やしてください。だたし、ラベルを区切る『,』の数があっていなければならないので、1個を選んだ方は『,』は0。12個を選んだ方は『,』を11個必ずつけてください。個数マイナス1が『,』の数になります。

8）これで名前変換フォームの設置は終わります。補足として、ラベルが項目記入のところに入りきらないくらい長い場合は<span class="YZ1 cms">にして、ラベルは『<input class』の左側に表示してください。

<span class="YZ1 cms">
苗字：<input class="names0" type="text"> 
名前：<input class="names1" type="text"> <br>
隣のお嬢さんが飼っている猫の名前：<input class="names2" type="text">