AppletをJavaScriptで

オリジナルソースによる表示		JavaScriptによる表示
Your browser doesn't support Java.
サイズは縮小しました

このページはオリジナルソースに示すような JavaApplet の部分を
Javascript で書き換えるのが目的です

１．オリジナルのソース

<APPLET archive="multishow.jar" code="multishow.class"
                  width="500" height="400" VIEWASTEXT id="Applet1">

                  <PARAM name="id_key" value="6s853137975935159191+6s890667530995822119">

                  <PARAM name="bgcolor" value="003050">

                  <PARAM name="background" value="bg.jpg">

                  <PARAM name="bgalign" value="tile">

                  <PARAM name="target" value="_blank">

                  <PARAM name="texttype" value="0">

                  <PARAM name="framecolor" value="FFFFFF">

                  <PARAM name="bordercolor" value="FFFFFF">

                  <PARAM name="textcolor" value="002090">

                  <PARAM name="diagonal" value="off">

                  <PARAM name="maxspeed" value="1">

                  <PARAM name="maxshown" value="5">

                  <PARAM name="maximages" value="5">

                  <PARAM name="img1" value="image1.gif">

                  <PARAM name="img2" value="image2.gif">

                  <PARAM name="img3" value="image3.gif">

                  <PARAM name="img4" value="image4.gif">

                  <PARAM name="img5" value="image5.gif">

                  <PARAM name="text1" value="Red Rose">

                  <PARAM name="text2" value="Princess Miyu">

                  <PARAM name="url2" value="http://www.6sense.com/applets">

                  <PARAM name="url4" value="http://www.6sense.com/applets">

                  Your browser doesn't support Java.

                  </APPLET>

２．JavaScriptによる関数化

ローカル変数　cc　にすべての命令文を読み込ませます

<PARAM name="img1" value="image1.gif">
を下記のようにします

cc +="<PARAM name='img1' value='image1.gif'>"
[ " ] を [ ' ]に書き換えます

書き換えた結果は下記の通りです

function multishow(){

                        var cc ="" 

                        cc +="<APPLET archive='multishow.jar' code='multishow.class'
                  width='500' height='400' VIEWASTEXT id='Applet1'>"

                        cc +="<PARAM name='id_key' value='6s853137975935159191+6s890667530995822119'>"

                        cc +="<PARAM name='bgcolor' value='003050'>"

                        cc +="<PARAM name='background' value='bg.jpg'>"

                        cc +="<PARAM name='bgalign' value='tile'>"

                        cc +="<PARAM name='target' value='_blank'>"

                        cc +="<PARAM name='texttype' value='0'>"

                        cc +="<PARAM name='framecolor' value='FFFFFF'>"

                        cc +="<PARAM name='bordercolor' value='FFFFFF'>"

                        cc +="<PARAM name='textcolor' value='002090'>"

                        cc +="<PARAM name='diagonal' value='off'>"

                  

                       //-- 画像の表示数設定

                        cc +="<PARAM name='maxspeed' value='1'>"

                        cc +="<PARAM name='maxshown' value='5'>"

                        cc +="<PARAM name='maximages' value='5'>"

                  

                       //-- 画像設定

                        cc +="<PARAM name='img1' value='image1.gif'>"

                        cc +="<PARAM name='img2' value='image2.gif'>"

                        cc +="<PARAM name='img3' value='image3.gif'>"

                        cc +="<PARAM name='img4' value='image4.gif'>"

                        cc +="<PARAM name='img5' value='image5.gif'>"

                  

                       //--　画像の説明部分

                        cc +="<PARAM name='text1' value='Red Rose'>"

                        cc +="<PARAM name='text2' value='Princess
                  Miyu'>"

                   

                        //--  画像の中のEnterをクリックしたときのURL

                        cc +="<PARAM name='url2' value='http://www.6sense.com/applets'>"

                        cc +="<PARAM name='url4' value='http://www.6sense.com/applets'>"

                   

                        cc +="Your browser doesn't support Java."

                        cc +="</APPLET>"

                  

                        document.write(cc)

                  }

３．画像部分の設定

//-- 画像設定

                  cc +="<PARAM name='img2' value='image2.gif'>"

                       

                  //--　画像の説明部分

                  cc +="<PARAM name='text2' value='Princess Miyu'>"

                   

                  //--  画像の中のEnterをクリックしたときのURL

                  cc +="<PARAM name='url2' value='http://www.6sense.com/applets'>"

この部分をよく観察すると対になっていることが判ります
img2 → image2.gif
text2 → Princess Miyu
url2 → http://www.6sense.com/applets

また、Applet を導入するとき、その都度書き換えなくてはなりません
そこで効率よくページを作成するために次のようにします

４．画像データの作成

基本となるデータを作成します。当然　JavaScript　で作成します
ここでは　split 関数を使います

"ファイル名<>写真の説明<>クリックしたときのURL<>",

という形でデータを作成します

//-- 掲載写真リスト

                  f_data = new Array(

                       "image1<>写真の説明<><>",

                       "image2<>Princess Miyu<><>",

                       "image3<>素晴らしい写真でしょうか<><>",

                       "image4<>写真の説明<><>",

                       "image5<>解説です<><>",

                       "<><><>"

                  )

                  var scr_w = 400 ; //-- Appletの表示範囲をここで設定します

                  var scr_h = 300 ; //--

第３項目目のデータにはダミーです。
実際にはクリックしたとき画像を表示するようにしておけばいいので、別な方法で記述します

データの順番は自由に変更が出来ます
順番変更したときに間違わないように、
ダミーとして　"<><><>" を設定しておきます

これを次のようにデータ変換をします

//-- データ変換

                  var f_name=new Array() ;//-- ファイル名

                  var f_alt=new Array() ;//-- 写真の説明文

                  var f_url=new Array() ;//-- リンクするアドレス

                  var f_dummy=new Array()

                  

                  var j=0

                  for(i=0 ; i<f_data.length ; i=i+3){

                       f_dummy[i]=f_data[i].split("<>")

                       j++ 

                       f_name[j]= f_dummy[0] ;//--第１番目のデータをf_name[j]に入れます

                       f_alt[j]  = f_dummy[1] ;//--第２番目のデータをf_alt[j]に入れます　

                       f_url[j]  = f_dummy[2] ;//--第３番目のデータをf_url[j]に入れます　

                  }

                  var dat_sum = j - 1           ;//--データ総数

５．画像の表示数設定

//-- 画像の表示数設定
cc +="<PARAM name='maxspeed' value='1'>"
cc +="<PARAM name='maxshown' value='5'>"
cc +="<PARAM name='maximages' value='5'>"

データ変換で、表示するデータ数が　dat_sum という変数に設定されているので、この変数を利用して次のようにします

cc +="<PARAM name='maximages' value='" + dat_sum + "'>"

maxspeed　の値は好みに応じて設定します
　　　maxshown　の値は表示数で、あまり多くない値にします。
　　　　　　　　　　　当然　data_sum　よりは小さな値にします

６．画像関係のパラメーターの設定

画像関係のパラメーターは次のような設定になっています
当然の事ながら、画像数に応じて、<PARAM ・・・　を追加していきます
これはページを作成するという観点から見ると非常に効率の悪い方法です

//-- 画像設定

                  cc +="<PARAM name='img1' value='image1.gif'>"

                  cc +="<PARAM name='img2' value='image2.gif'>"

                  cc +="<PARAM name='img3' value='image3.gif'>"

                  cc +="<PARAM name='img4' value='image4.gif'>"

                  cc +="<PARAM name='img5' value='image5.gif'>"

                  

                  //--　画像の説明部分

                  cc +="<PARAM name='text1' value='Red Rose'>"

                  cc +="<PARAM name='text2' value='Princess Miyu'>"

                   

                  //--  画像の中のEnterをクリックしたときのURL

                  cc +="<PARAM name='url2' value='http://www.6sense.com/applets'>"

                  cc +="<PARAM name='url4' value='http://www.6sense.com/applets'>"

そこで、下記のように書き換えます

//-- 画像設定

                  for(i=1 ; i < dat_sum + 1 ; i++){

                        //-- 画像設定

                        cc +="<PARAM name='img" + i + "'
                  value='"+ f_name[i] + ".gif'>"

                        //--　画像の説明

                        cc +="<PARAM name='text" + i + "'
                  value='" + f_alt[i] + "'>"

                        //--　EnterをクリックしたときのURL

                        cc +="<PARAM name='url" + i + "'
                  value='" + f_url[i] + "'>" 

                   }

この行をもう少し詳しく説明します
ここでは　http://www.6sense.com/applets にリンクしていますが
実際には画像を表示するように書き換えます
まず、このApplet　の画像が置かれているサーバー上のアドレスを

　　　http://www.xxx.ne.jp/~yyy/zzz/

とします

cc +="<PARAM name='url" + i + "' value='http://www.xxx.ne.jp/~yyy/zzz/" + f_name[i] + ".gif''>"

このように書き換えればクリックによって画像を表示することが出来ます

７．如何でしょうか

今までは画像数に応じて、<PARAM ・・・　を追加していきましたが
この方法ですと画像数に関係なく表示することが出来ます

表示したい部分に下記の命令文を記述します

<SCRIPT type="text/javascript">

</SCRIPT>

以上の考え方は、画像数に応じて　*.html ファイルを作っていたのにも
すべて応用が出来ます

JavaScriptによる表示です。詳しくはソースをご覧下さい

2009/03/07 修正