Javascriptでフェードイン・フェードアウト(setTimeout)

■追記

その2ができました。


Bingのトップページのギミックが面白いなぁと思い、なんとかできないかと模索中。
たぶんsetTimeoutかsetInterval使ってるんだと思うけど、割り込み処理のやり方がいまいちわからない。
とりあえずテストバージョン

■コード

<script>
window.onload = function(){
//初期化
browser_type = browser();
if(browser_type == "MSIE"){
document.getElementById("fade01").style.filter = "alpha(opacity=0)";
document.getElementById("fade02").style.filter = "alpha(opacity=0)";
document.getElementById("fade03").style.filter = "alpha(opacity=0)";
document.getElementById("fade04").style.filter = "alpha(opacity=0)";
}else if(browser_type == "Firefox"){
document.getElementById("fade01").style.MozOpacity = 0;
document.getElementById("fade02").style.MozOpacity = 0;
document.getElementById("fade03").style.MozOpacity = 0;
document.getElementById("fade04").style.MozOpacity = 0;
}else{
document.getElementById("fade01").style.opacity = 0;
document.getElementById("fade02").style.opacity = 0;
document.getElementById("fade03").style.opacity = 0;
document.getElementById("fade04").style.opacity = 0;
}

//オートフェード
setTimeout("fadeIn('fade01')",1000);
setTimeout("fadeOut('fade01')",2000);
setTimeout("fadeIn('fade02')",1000);
setTimeout("fadeOut('fade02')",2100);
setTimeout("fadeIn('fade03')",1000);
setTimeout("fadeOut('fade03')",2200);
setTimeout("fadeIn('fade04')",1000);
setTimeout("fadeOut('fade04')",2300);
}

//フェードイン
function fadeIn(id_name){
fadeAction(id_name, "plus", 0);
}

//フェードアウト
function fadeOut(id_name){
fadeAction(id_name, "minus", 100);
}

//フェード関数
function fadeAction(id_name, vector, set_op){
set_op = parseInt(set_op);
elem = document.getElementById(id_name);
browser_type = browser();
if(browser_type == "MSIE"){
elem.style.filter = "alpha(opacity="+set_op+")";
}else if(browser_type == "Firefox"){
elem.style.MozOpacity = set_op / 100;
}else{
elem.style.opacity = set_op / 100;
}
if(vector == "minus"){
set_op -= 20;
if(set_op < 0) return;
setTimeout("fadeAction('"+id_name+"', 'minus', '"+set_op+"')",20);
}else if(vector == "plus"){
set_op += 20;
if(set_op >= 100) return;
setTimeout("fadeAction('"+id_name+"', 'plus', '"+set_op+"')",20);
}
}

//ブラウザ判別
function browser(){
if(navigator.userAgent.indexOf("Opera") != -1){
type = "Opera";
}else if(navigator.userAgent.indexOf("MSIE") != -1){
type = "MSIE";
}else if(navigator.userAgent.indexOf("Firefox") != -1){
type = "Firefox";
}else if(navigator.userAgent.indexOf("Netscape") != -1){
type = "Netscape";
}else if(navigator.userAgent.indexOf("Safari") != -1){
type = "Safari";
}else{
type = "none";
}
return type;
}
</script>

<p id="fade01" style="width:100px; cursor:default;" onmouseover="fadeIn('fade01');" onmouseout="fadeOut('fade01');">フェード1</p>
<p id="fade02" style="width:100px; cursor:default;" onmouseover="fadeIn('fade02');" onmouseout="fadeOut('fade02');">フェード2</p>
<p id="fade03" style="width:100px; cursor:default;" onmouseover="fadeIn('fade03');" onmouseout="fadeOut('fade03');">フェード3</p>
<p id="fade04" style="width:100px; cursor:default;" onmouseover="fadeIn('fade04');" onmouseout="fadeOut('fade04');">フェード4</p>

注意点として、フェードさせるブロックにはwidthを指定していないと、IEにてopacityが効きません。

サンプルはこちら [新しいウィンドウで開く]

※以後サンプルはさくらインターネットの自分用サーバにアップします。

nandani | 2010年07月18日 | コメント(0) | トラックバック(1) | JavaScript関連

クラウドコンピューティング

先日、クライアントさんから「このシステムってクラウドですか?」と聞かれました。
確かにウェブアプリケーションではあるけど、なんとなく自分のイメージとは違っていたため「いや~、違うんじゃないですかね?」と自分で組んだシステムにもかかわらずあいまいな返事。
あとで先輩に聞いたところ、やっぱり違うらしい。
「どっちかって言うと、ASPとかSaaSかな?」とのお答え。

・・・うん、どう違うのかよく分からん・・・

ウェブ屋がクラウドも知らんというのも問題なのでいろいろと調べてみました。
もちろんGoogleで。

いろいろと調べた結果をざっくりと言うと以下のようになります。

■SaaS:Software as a Service
自分のPCにソフトウェアをインストールして使用するのではなく、ネット経由でソフトウェア機能を利用できるようにしたサービス形態のこと。
「Googleドキュメント」なんかがこれにあたるのかな?
ちなみにASPとは料金形態などの差異はあるものの、あまり本質的に変わらないそうです。

■クラウド
アプリケーションどころか、ハードウェアなどのコンピュータ機能までネット経由で提供するサービス。
極論を言えば、手持ちのPCはキーボードとネットワークに接続できる機能が備わってさえいれば良く、あとのPCとしての機能やアプリケーションはネット上に存在する、という考えで構築されているものらしい。
もちろん、ホントに1台のアプリが入っているパソコンがネットで接続して、それを利用する、というわけではないです。当たり前ですが。

例えば
A社:ハードウェアのサービスを行ってますよ~
B社:うちは計算機アプリケーションを提供しております。
C社:ドキュメントアプリもいる?
という会社がそれぞれあるとします。

当然ながらアプリをSaaSで提供している会社(B社・C社)は、クライアントへサービスを提供する時点で、そのアプリを処理する能力を持ち合わせていなくてはなりません。(つまり計算などの処理はサーバサイドですべて行われ、クライアントのPCは結果を受け取って表示するだけ。)
しかし、もしB社の計算機アプリへアクセスするユーザが多すぎる!となったら?

・負荷でまともに処理が出来ない!
・サーバ増築しようにも時間が無い!
・そうだA社のハードウェア機能をサーバとして使わせてもらおう!
・B社がA社と契約してアプリケーションを機能させるに足るスペックを補う。

というような流れでA社とB社がネットワーク経由でつながることになります。(C社も同様)

つまり

   ――――――B社(計算機アプリ提供)――――クライアント
 |
A社(ハード提供)
 |
   ―――――C社(ドキュメントアプリ提供)――――クライアント

てな感じですね。
もちろん、この図は単純なもので、実際はいろいろとサービス提供のネットワークが広がっているものと考えられます。
ただ最終的なクライアントは、A社とB社(またはC社)の契約など知る必要も無く、それぞれ必要なアプリを提供しているベンダーと契約すれば良いというわけです。

参考サイト
http://www.asp-edita.jp/doda/one/doda4075_385.html 
 (エンジニアが作る最新ITブログ by DODAさん)
http://www.itmedia.co.jp/enterprise/articles/0810/27/news008.html 
 (ITmedia エンタープライズさん)
http://www.atmarkit.co.jp/im/cop/special/fivemin/saas/00.html 
 (@IT情報マネージメントさん)
http://www.newton-consulting.co.jp/bcmnavi/glossary/cloud.htm 
 (BCM用語集さん)
・Wikipedia etc...

nandani | 2010年07月18日 | コメント(0) | トラックバック(0) | その他

Javascriptでバルーン表示する

システムを作っている時、機能についての説明を表示したい。でもページに表示するとうっとおしい。
てなことで、「ヘルプ」にマウスオーバーした時にバルーンを表示させる方法を覚書ます。

一番簡単なのはこちら→Balloon tooltip

ただ、これだと画像を入れたり、あまり多くの文字を入れられなさそうな感じがしたので作ってみました。
要はあらかじめ「display:none;」にしてあるブロックをマウスオーバーで表示させればよいわけです。
プラスして今回はカーソルにバルーンが付いてくるようにしました。

<script>

//ブラウザ判定用
function browser(){
    if(navigator.userAgent.indexOf("Opera") != -1){
        type = "Opera";
    }else if(navigator.userAgent.indexOf("MSIE")!=-1 
    && navigator.userAgent.indexOf("Trident/4.0")!=-1){
        type = "MSIE8";
    }else if(navigator.userAgent.indexOf("MSIE") != -1){
        type = "MSIE";
    }else if(navigator.userAgent.indexOf("Firefox") != -1){
        type = "Firefox";
    }else if(navigator.userAgent.indexOf("Netscape") != -1){
        type = "Netscape";
    }else if(navigator.userAgent.indexOf("Safari") != -1){
        type = "Safari";
    }else{
        type = "none"; 
    }
    return type;
}

//バルーンブロック表示用
function balloon_showblock(Target, TopPos, LeftPos){
    if(browser() == "MSIE"){
        document.onmousemove = iMouseIE;
    }else if(browser() == "MSIE8"){
        document.onmousemove = iMouseIE8;
    }else{
        document.onmousemove = iMouseFirefox;
    }

    function iMouseFirefox(evt){
        Xpos = evt.pageX-LeftPos;
        Ypos = evt.pageY-TopPos;
        document.getElementById(Target).style.top = Ypos+"px";
        document.getElementById(Target).style.left = Xpos+"px";
    }

    function iMouseIE(){
        Xpos = event.x+(document.body.scrollLeft || document.documentElement.scrollLeft)-LeftPos;
        Ypos = event.y+(document.body.scrollTop || document.documentElement.scrollTop)-TopPos;
        document.getElementById(Target).style.top = Ypos+"px";
        document.getElementById(Target).style.left = Xpos+"px";
    }

    function iMouseIE8(){
        Xpos = event.x-LeftPos;
        Ypos = event.y-TopPos;
        document.getElementById(Target).style.top = Ypos+"px";
        document.getElementById(Target).style.left = Xpos+"px";
    }

    document.getElementById(Target).style.display = "";
}

//バルーンブロック非表示用
function hide_block(Target){
    document.getElementById(Target).style.display = "none";
}

</script>

<div id="hoge5" style="position:absolute; display:none;">Javascriptでバルーン表示します。</div>

<p><a href="javascript:void(0)" onmouseover="balloon_showblock('hoge5', 30, 30)" onmouseout="hide_block('hoge5')">ヘルプ</a></p>

Javascriptの関数から説明いたしますと
・function browser()
 ブラウザ判定用。
 アクセスしてきたブラウザがIE、FF、Opera、Netscape、Safariのどれか判定します。

・function balloon_showblock(Target, TopPos, LeftPos)
 バルーンを表示に切り替え、カーソルに追随させる。以下引数の説明。
 Target:バルーンとなるブロックのID。
 TopPos:上下の調整(px)。
 LeftPos:左右の調整(px)。

・function hide_block(Target)
 バルーンを非表示に切り換える。
 Target:バルーンとなるブロックのID。

ここでなぜ、わざわざブラウザを判定しなければならないかと言うと、IEとFFでは位置の取得方法が違うからです。今回はカーソルにバルーンが付いてくる設定にしてますのでブラウザによってプログラムを切り替える必要がありました。

バルーンとなるブロックには「Javascriptでバルーン表示します。」という説明を入れ、idを「hoge5」にしました。またあらかじめ非表示にするためstyleに「display:none;」を、さらに他のレイアウトに影響を与えなくするため「position:absolute;」を記述しています。

バルーンの表示スイッチとなる「ヘルプ」のリンクタグには
・onmouseover="balloon_showblock('hoge5', -30, -30)"
・onmouseout="hide_block('hoge5')"
を記述します。

サンプル [新しいウィンドウで開く] ※サンプルは上記のソースに少し手を加えています。

nandani | 2010年07月18日 | コメント(0) | トラックバック(0) | JavaScript関連

MD5を見破る?

PHPにはMD5と呼ばれるハッシュ関数があります。

md5("変数");

という風に簡単に使用できるので何かと便利なのですが、単純な文字列をハッシュ化すると見破られることがあります。
なにも解読するわけではありません。
その見破る方法とは、なんと

Google

です。
たとえば数字の「1」。これをmd5でハッシュ化すると「c4ca4238a0b923820dcc509a6f75849b」となります。
この「c4ca4238a0b923820dcc509a6f75849b」をグーグルで検索すると、なんと40万件以上もヒットし、すぐに元の文字が「1」であることがわかります。

他にも
・admin (21232f297a57a5a743894a0e4a801fc3)
・staff (1253208465b1efa876f982d8a9e73eef)
・user (ee11cbb19052e40b07aac0ca060c23ee)
・writer (a82feee3cc1af8bcabda979e8775ef0f)
など、単純な単語は引っかかってしまうので、いろいろと文字を付け足すなどして手を加えた後ハッシュ化しましょう。
あと、全角日本語などもヒットしにくくなるようです。

参考サイト
http://d.hatena.ne.jp/shunsuk/20071122/1195704611 (「このブログは証明できない。」さん)

nandani | 2010年07月18日 | コメント(0) | トラックバック(0) | PHP関連

Javascriptで表示・非表示の切り替え(style)

単純ですが、よく使用するプログラムなので。
要するに、javascriptによるstyleの切り替えです。

<script>
function show_block(){
   if(document.getElementById("hoge").style.display == ""){
      document.getElementById("hoge").style.display = "none";
   }else{
      document.getElementById("hoge").style.display = "";
   }
}
</script>

<p><a href="javascript:void(0)" onclick="show_block();">表示切替</a></p>
<div id="hoge" style="display:none;">こっち見んな!</div>

1.id="hoge"は、あらかじめdisplay:none;で、非表示にしておく。
2.show_block関数では、id="hoge"のdisplayが空(表示モード)ならばnone(非表示モード)に、noneならその逆という風にする。

サンプル [新しいウィンドウで開く]

nandani | 2010年07月18日 | コメント(0) | トラックバック(0) | JavaScript関連

Javascriptでプルダウンの選択を変更する(getElementsByTagName)

2016年4月30日 jquery版はこちら

 

Javascriptでプルダウンの選択を変更するのは、テキストフォームにデータを突っ込むんだり、ラジオボタンの選択を変更するのとは違い少々面倒です。

<script>
function change_pulldown(){
pulldown_option = document.getElementById("hoge").getElementsByTagName('option');
for(i=0; i<pulldown_option.length;i++){
if(pulldown_option[i].value == "クラブマンハイレッグ"){
pulldown_option[i].selected = true;
break;
}
}
}
</script>

<p><a href="javascript:void(0)" onclick="change_pulldown()">「クラブマンハイレッグ」を選択</a></p>

<select id="hoge">
<option value="イングラム">イングラム</option>
<option value="グリフォン">グリフォン</option>
<option value="タイラント2000">タイラント2000</option>
<option value="クラブマンハイレッグ">クラブマンハイレッグ</option>
</select>

簡単に説明しますと以下のようになります。

1.selectにidをつける(ここでは"hoge"にしました)
2.そのタグの中にあるoptionタグのデータを、getElementsByTagName('option');で配列取得する
3.取得したoptionデータをforループでまわし、optionのvalueデータと選択させたい内容とをifで照らし合わせ、一致したらselected=trueにする。

サンプル [新しいウィンドウで開く] ※サンプルは上記のソースに少し手を加えています。

nandani | 2010年07月18日 | コメント(0) | トラックバック(1) | JavaScript関連

Javascriptでタグに囲まれた内容を取得する(innerHTML)

例えば

<div id="hoge">ほげ</div>

とあり、id="hoge"のdivタグで囲まれている部分の内容を取得する場合は、innerHTMLを使用します。

<script>
function get_data(){
   //データ取得
   data = document.getElementById("hoge").innerHTML;
   //データ出力
   document.write("実行結果:"+data);
}
</script>

<p><a href="javascript:void(0)" onclick="get_data()">関数実行</a></p>
<div id="hoge">ほげ</div>

このようにスクリプトを記述し、「関数実行」を押せば「実行結果:ほげ」が表示されます。(このソースだと地味なんでわかりにくいですが^^;)

なおinnerHTMLはデータを取得するだけでなく、指定したidを持つタグに出力することもできます。

<script>
function get_data(){
   //データ取得
   data = document.getElementById("hoge").innerHTML;
   //データ出力
   document.getElementById("output").innerHTML = data;
}
</script>

<p><a href="javascript:void(0)" onclick="get_data()">関数実行</a></p>
<div id="hoge">ほげ</div>
<div id="output"></div>

というようなソースにすれば、id="hoge"のデータを取得後、id="output"に取得したデータを表示させることができます。
ちなみにこのinnerHTMLによる出力、id="output"のタグにあらかじめ内容が記述されていたとしても、javascriptの実行結果が優先され、中身がすり替わって表示されます。(サンプル参照)

サンプル [新しいウィンドウで開く]

nandani | 2010年07月18日 | コメント(0) | トラックバック(0) | JavaScript関連

cakePHPでデータベースのテーブルにフィールドを追加したときに発生した問題2

前回、cakePHPでデータベースのテーブルにフィールド追加したとき、それが反映されていない問題がありました。
とりあえずは、"fields"=>"*"の追加で一応の解決を見たのですが、あとから不具合がぼろぼろ出てくるわ、こちらでは手の負えない関数で問題が発生するわで、なんとかならんかなぁと思いググってみたらありました!

http://oneday.ter.jp/php/cakephp-php/983.html (イテルの一日一問さん)

「app/tmp/cache/models」フォルダの中にたまっているキャッシュを削除すれば良いらしい。

キャッシュか~。
そんなことだろうとは思ったけど、どこにあるのかはさっぱりわからなかったので助かりました。
ここの記事でも書かれてますが、キャッシュ恐るべし・・・

nandani | 2010年07月18日 | コメント(0) | トラックバック(1) | PHP関連

cakePHPでデータベースのテーブルにフィールドを追加したときに発生した問題

システムの修正でテーブルのフィールドを追加した際、データベースにはデータが入っているのに、findでそのデータを取り出せない問題が発生しました。
ローカル(XAMPP)では正常だったのに、本番サーバ(ファーストサーバを使用)ではうまく動作してくれない・・・
わざとエラーを吐き出させて表示されたSQLを読んでみると、どうやら追加されたフィールドをfieldsで取り出してくれていない様子。とくに設定してないんだけどなぁ。
しかたなく「fields=>"*"」を追加して解決しました。

■こんな感じ
$this->Hoge->find("all", array("fields"=>"*", "conditions"=>$conditions, ));

modelとかと関係あるのかな?

決定的解決方法見つかりました。

nandani | 2010年07月18日 | コメント(0) | トラックバック(0) | PHP関連

fgetcsvのバグ

いまさらですが、PHP4ではまともに使用できていた「fgetcsv」関数。
PHP5になった途端不具合の嵐です。(サーバによるかもしれませんが。)

$csv = "/www/csv/test.csv";
$fl = fopen($csv, "r");
while($data = fgetcsv($fl, 10000)){
   echo $data[0].":".$data[1];
}

としていると、カンマでの区切りがうまくいっていないのか、表示されなかったり、特定の文字で文字化けを起こしたりします。
こうなると、mb_convert_encodingで文字コードを調整しようとしてもうまくいきません。

ここはおとなしくfgetcsvをあきらめてfgetsとexplodeを使用しましょう。

$csv = "/www/csv/test.csv";
$fl = fopen($csv, "r");
while($data_fl = fgets($fl)){
   $data_fl = rtrim($data_fl);
   $data = explode(",", $data_fl);
   echo $data[0].":".$data[1];
}

※rtrimは行の最後にある改行コードを取り除いてくれます。必要に応じて記述してください。自分はよく取り出したデータを条件分岐にかけることがあるので、改行コードの\r\nがあると不具合を起こすことがあります。

記述が少し長くなりますが、これで解決します。

nandani | 2010年07月18日 | コメント(0) | トラックバック(0) | PHP関連

Copyright(c) 2010 - 2018 ダリの雑記