リモコン
複合カラーエディタ
ver.3.0
　
　◆サンプル
　 　 ＜機能と特徴＞
　
　・カラーエディタで作成した色に文字色・背景色を変更できます。
　
　・ボタンを押し続けるとどんどん数値が変化します。
 



 

公開日 2002.6.15
最終更新日 2003.6.15
バージョン ver.3.0
動作確認 IE6.0,NN4.7,NN7.0,Opera7.0
cookie 使用(NN4のみ)
CSS 使用
更新履歴 2002.10.24 ver2.0 スクリプトの簡略化(変更点：全般)
2003.06.15 ver.3.0 全般の動作を改良(変更点：ソース全般)

 

☆★☆使い方☆★☆
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．カスタマイズフォームを使って設定をしてください。

２．ソース１をそのまま書き込み新しいHTMLファイルを作ってください

３．ソース２を文字色を変更したいページの<head>〜</head>の間に
　　書き込んでください。

４．作ったHTMLファイルを文字色を変更したいページから
　　ちらっと小窓君で呼び出してください。

５．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．ソース１をそのまま書き込み新しいHTMLファイルを作ってください

２．ソース２を文字色を変更したいページの<head>〜</head>の間に
　　書き込んでください。

３．作ったHTMLファイルを２のページから
　　ちらっと小窓君で呼び出してください。

４．ブラウザでテストしてみてください。
　　正常に動作すれば設置は完了です。
 
 
 初心者向け解説   中級者向け解説   ダウンロード 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押してファイルをダウンロードしてください。

３．以下のフォームに入力して
　　カラーエディタのウィンドウを開くスクリプトの設定をしてください。


小窓で開くファイルのパス：
*２で保存したファイルを指定してください。
ウィンドウの横幅： (半角数字：正の整数)
ウィンドウの縦幅： (半角数字：正の整数)
スクロールバーの有無：
ウィンドウの名前：
ウィンドウを開くリンクの形式：
リンクの文字：
　

 
■カラーエディタのウィンドウを開くページのダウンロードする形式を選択してください。

  【スクリプトを１つのページに組み込む】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押してファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は一括)】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。

２．右のボタンを押して外部ファイルをダウンロードしてください。
 
３．保存した外部ファイルのファイル名を入力してください。
　　 (ファイルのパスでも可)
 
４．右のボタンを押してHTMLファイルをダウンロードしてください。

 【スクリプトを外部ファイルにする(設定は各ページ毎)】 

１．カスタマイズフォームを使って設定をする場合は、
　　ダウンロードの前に設定をしてください。
 
２．右のボタンを押して外部ファイルをダウンロードしてください。
 
３．保存した外部ファイルのファイル名を入力してください。
　　 (ファイルのパスでも可)
 
４．右のボタンを押してHTMLファイルをダウンロードしてください。
 
５．複数のページが必要な場合は、カスタマイズフォームで設定をし
　　再度HTMLファイルのみダウンロードしてください。 


ew_url = 'w_remocon_editor'; //小窓で開くファイルのパス
ew_x   = 360;                 //ウィンドウの横幅
ew_y   = 172;                 //ウィンドウの縦幅
ew_bar = 'no';                //スクロールバーの有無
ew_id  = 'editor_win';        //ウィンドウの名前


function editor_komadokun()
{ew_komado = open(ew_url,ew_id,"width="+ew_x+",height="+ew_y+",resizable=yes,scrollbars="+ew_bar);
 ew_opener = Math.random();
 if(ew_opener != ew_komado.opener.ew_opener)
 {ew_komado.close();
  komadokun();}
 ew_komado.focus();
 return false;}

<a href="JavaScript:;" onClick="editor_komadokun();">カラーエディタを開く</a>
 

 
 
 
 カスタマイズフォーム   補足説明   改造方法 
 
色見本の横幅： (半角数字：正の整数)
色見本の縦幅： (半角数字：正の整数)
カラーエディタの初期値(背景色)： (RGB値)
カラーエディタの初期値(文字色)： (RGB値)
クッキーの名前： (半角英数字)
(通常変更の必要はありません)
文字色変更ボタンの文字：
　
 カスタマイズフォーム   補足説明   改造方法 
 
■特にありません。
 
 カスタマイズフォーム   補足説明   改造方法 
 
■色見本部分の大きさを変更する。(半角数字：正の整数)

//設定〜//ここまでの１〜２行目を変更してください。 
c_ar_width  = 64;
c_ar_height = 14;
■カラーエディタの初期の色を変更する。(RGB値)

//設定〜//ここまでの３〜４行目を変更してください。
３行目が背景色、４行目が文字色の初期値です。 
c_ar_shoki1 = "#999999";
c_ar_shoki2 = "#666666";
■クッキーの名前を変更する。(半角英数字)

//設定２〜//ここまでの１行目を変更してください。
通常は変更の必要はありません。
c_ar_cookie = 'c_ar_cookie';
 
 
  

■ソース１(以下のソースを書き込んで１つのページを作ってください)  
  
<html>
<head>
 <title>リモコン複合カラーエディタ</title>
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/
    //ver.3.0


//設定
c_ar_width  = 64;        //色見本の横幅
c_ar_height = 14;        //色見本の縦幅
c_ar_shoki1 = '#999999'; //カラーエディタの初期値
c_ar_shoki2 = '#666666'; //カラーエディタの初期値
//ここまで


c_ar_temp   = 1;
c_ar_stoper  = 0;
id = "";


function c_ar_shoki_rgb()
{document.forms["c_ar_form"].elements["c_ar_rgb1"].value = c_ar_shoki1;
 document.forms["c_ar_form"].elements["c_ar_rgb2"].value = c_ar_shoki2;}


function c_ar_check_rgb()
{with(document)
 {if(forms["c_ar_form"].elements["c_ar_rgb"+c_ar_temp].value.replace("#","").length != 6)
  {return;}
  temp = forms["c_ar_form"].elements["c_ar_rgb"+c_ar_temp].value.replace("#","");
  forms["c_ar_form"].elements["c_ar_red"].value   = parseInt(temp.substring(0,2),16).toString(10);
  forms["c_ar_form"].elements["c_ar_green"].value = parseInt(temp.substring(2,4),16).toString(10);
  forms["c_ar_form"].elements["c_ar_blue"].value  = parseInt(temp.substring(4,6),16).toString(10);}}


function c_ar_spacer()
{if(document.layers)
 {with(document.layers["c_ar_color"].document)
  {open();
   write('<spacer type="block" width="'+c_ar_width+'" height="'+c_ar_height+'">');
   close();}}}


function c_ar_sreach()
{with(document)
 {if((forms["c_ar_form"].elements["c_ar_red"].value-0) > 255)
  {forms["c_ar_form"].elements["c_ar_red"].value = 255;}
  else if((forms["c_ar_form"].elements["c_ar_green"].value-0) > 255)
  {forms["c_ar_form"].elements["c_ar_green"].value = 255;}
  else if((forms["c_ar_form"].elements["c_ar_blue"].value-0) > 255)
  {forms["c_ar_form"].elements["c_ar_blue"].value = 255;}
  else if((forms["c_ar_form"].elements["c_ar_red"].value-0) < 0)
  {forms["c_ar_form"].elements["c_ar_red"].value = 0;}
  else if((forms["c_ar_form"].elements["c_ar_green"].value-0) < 0)
  {forms["c_ar_form"].elements["c_ar_green"].value = 0;}
  else if((forms["c_ar_form"].elements["c_ar_blue"].value-0) < 0)
  {forms["c_ar_form"].elements["c_ar_blue"].value = 0;}
  temp_r   = (forms["c_ar_form"].elements["c_ar_red"].value-0).toString(16);
  if(temp_r.length == 1)
  {temp_r = "0"+temp_r;}
  temp_g   = (forms["c_ar_form"].elements["c_ar_green"].value-0).toString(16);
  if(temp_g.length == 1)
  {temp_g = "0"+temp_g;}
  temp_b   = (forms["c_ar_form"].elements["c_ar_blue"].value-0).toString(16);
  if(temp_b.length == 1)
  {temp_b = "0"+temp_b;}
  temp_rgb = "#"+temp_r+temp_g+temp_b;
  if(!c_ar_stoper)
  {forms["c_ar_form"].elements["c_ar_rgb"+c_ar_temp].value = temp_rgb;}
  if(document.all)
  {all("c_ar_color").style.background = temp_rgb;}
  else if(document.getElementById)
  {getElementById("c_ar_color").style.background = temp_rgb;}
  else if(document.layers)
  {layers["c_ar_color"].bgColor = temp_rgb;}}
 setTimeout('c_ar_sreach()',200);}


function c_ar_edit_start(posi,i)
{clearTimeout(id);
 with(document)
 {temp = forms["c_ar_form"].elements["c_ar_"+posi].value-0+i
  if(temp > 255)
  {temp = 255;}
  else if(temp < 0)
  {temp = 0;}
  forms["c_ar_form"].elements["c_ar_"+posi].value = temp;}
 id = setTimeout('c_ar_edit_start("'+posi+'",'+i+');',50);}


function c_ar_edit_stop()
{clearTimeout(id);}


function c_ar_stop()
{c_ar_stoper = 1;}


function c_ar_start()
{c_ar_stoper = 0;}


function change_colorB()
{temp1 = document.forms["c_ar_form"].elements["c_ar_rgb1"].value;
 temp2 = document.forms["c_ar_form"].elements["c_ar_rgb2"].value;
 with(opener.document)
 {if(document.all)
  {all.tags("body")[0].style.background = temp1;
   all.tags("body")[0].style.color      = temp2;}
  else if(document.getElementById)
  {getElementsByTagName("body")[0].style.background = temp1;
   getElementsByTagName("body")[0].style.color      = temp2;}
  else if(document.layers)
  {c_ar_date = new Date();
   c_ar_date.setTime(new Date().getTime()+15*1000);
   cookie=opener.c_ar_cookie+"="+temp1+'-'+temp2+"; expires="+c_ar_date.toGMTString()+";";
   if(cookie.indexOf(opener.c_ar_cookie+"="+temp1+'-'+temp2) != -1)
   {location.reload();}
   else
   {alert('cookieを有効にしてご利用ください');}}}}


function c_ar_rgb_set(i)
{c_ar_temp   = i;
 c_ar_check_rgb();}


with(document)
{open();
 write('<style type="text/css">\n<!-\-\n');
 if(document.all || document.getElementById)
 {write('.c_ar_style {background:'+c_ar_shoki1+';width:'+c_ar_width+'px;height:'+c_ar_height+'px;}\n');}
 else if(document.layers)
 {write('.c_ar_style {position:relative;}\n');}
 write('.c_ar_style2{background:'+c_ar_shoki1+';}\n');
 write('\n-\->\n<\/style>\n')}


// -->
</script>
</head>
<body>
<form id="c_ar_form" name="c_ar_form">
<table border="0" cellspacing="0" cellpadding="1"><tr><td>
<table border="0" cellspacing="1" cellpadding="0"><tr>
<td class="c_ar_style2"><div class="c_ar_style" id="c_ar_color">
<script type="text/javascript" langurge="JavaScript"><!--
c_ar_spacer();
// --></script></div></td>
</tr></table></td>
<td><input type="text" size="8" value="#000000" id="c_ar_rgb1" name="c_ar_rgb1" onChange="c_ar_check_rgb();" onfocus="c_ar_stop();" onBlur="c_ar_start();"><td>
<td><input type="radio" name="c_ar_select" onClick="c_ar_rgb_set(1)" checked>背景色</td>
<td><input type="button" value="色変更" onClick="change_colorB();"></td>
</tr><tr>
<td></td>
<td><input type="text" size="8" value="#000000" id="c_ar_rgb2" name="c_ar_rgb2" onChange="c_ar_check_rgb();" onfocus="c_ar_stop();" onBlur="c_ar_start();"><td>
<td><input type="radio" name="c_ar_select" onClick="c_ar_rgb_set(2)">文字色</td>
</tr></table>
<table border="0" cellspacing="0" cellpadding="1"><tr>
<td>赤：<input type="text" size="3" id="c_ar_red" name="c_ar_red">
<input type="button" value="▲" name="c_ar_b1" onMouseDown="c_ar_edit_start('red',1);" onMouseOut="c_ar_edit_stop();" onMouseUp="c_ar_edit_stop();"
><input type="button" value="▼" name="c_ar_b2" onMouseDown="c_ar_edit_start('red',-1);" onMouseOut="c_ar_edit_stop();" onMouseUp="c_ar_edit_stop();"></td>
<td>緑：<input type="text" size="3" id="c_ar_green" name="c_ar_green">
<input type="button" value="▲" name="c_ar_b3" onMouseDown="c_ar_edit_start('green',1);" onMouseOut="c_ar_edit_stop();" onMouseUp="c_ar_edit_stop();"
><input type="button" value="▼" name="c_ar_b4" onMouseDown="c_ar_edit_start('green',-1);" onMouseOut="c_ar_edit_stop();" onMouseUp="c_ar_edit_stop();"></td>
<td>青：<input type="text" size="3" id="c_ar_blue" name="c_ar_blue">
<input type="button" value="▲" name="c_ar_b5" onMouseDown="c_ar_edit_start('blue',1);" onMouseOut="c_ar_edit_stop();" onMouseUp="c_ar_edit_stop();"
><input type="button" value="▼" name="c_ar_b6" onMouseDown="c_ar_edit_start('blue',-1);" onMouseOut="c_ar_edit_stop();" onMouseUp="c_ar_edit_stop();"></td>
</tr></table></form>
<script type="text/javascript" langurge="JavaScript"><!--
c_ar_shoki_rgb();
c_ar_check_rgb();
c_ar_sreach();
// --></script>
</body>
</html>

■ソース２(以下のソースを<head>〜</head>の間に書き込んでください)  
  
<script language="JavaScript" type="text/javascript">
<!--//Script Created by あう,http://www5c.biglobe.ne.jp/~horoau/


//設定２
c_tr_cookie = 'c_ar_cookie'; //クッキーの名前
//ここまで


with(document)
{if(document.layers)
 {temp_cookie = cookie;
  while(temp_cookie.indexOf(" ") != -1)
  {temp_cookie = temp_cookie.replace(" ","");}
  temp_cookie = temp_cookie.split(";");
  for(i in temp_cookie)
  {if(temp_cookie[i].indexOf(c_ar_cookie) != -1)
   {temp_cookie2 = temp_cookie[i].split('=');
    if(temp_cookie2[0] == c_ar_cookie)
    {temp_cookie3 = temp_cookie2[1].split("-");
     fgColor = temp_cookie3[1];
     bgColor = temp_cookie3[0];
     open();
     write('<style type="text/css">\n<!--\n');
     write('body {color:'+temp_cookie3[1]+';background:'+temp_cookie3[0]+';}\n');
     write('-\->\n</style>\n');
     close();
     break;}
    else
    {temp_cookie2 = new Array();}}}}}


// -->
</script>


■スクリプト無効時にはちらっと小窓君も動作しませんので
　このスクリプトにおける対策は特にありません。

ウェブ木箱＞サンプル集
copyright(C) 2002-2004 あう