ホームページ作成に関する話題を中心に気ままにつづるブログです。
『bgMaker』はホームページの背景パターンを簡単につくれるWEBサービスです。
画面真ん中のグリッドにちょこちょこと色をのせていくと、それにあわせてリアルタイムに背景に表示されていきます。
（こんなかんじです↓）
グリッドのサイズを大きくすることもでき、もちろんつくった背景パターンは「Save（絵をかくところの右下部）」でダウンロードすることができます。また「Gallary」をクリックすることで、前に誰かがつくった背景パターンを見ることもできます。
背景パターンをお探しの方は、これでオリジナルの背景パターンを作成してみてはいかがでしょうか。適当に塗りつぶしていくだけでも案外いいかんじになったりします。ぜひお試しあれ。
bgMaker ||| Background maker || Tiled Background generator | Web Background maker
最近暗号化について調べていて「そーいえば数年前にmd5は解読できるってあったなぁ」と思い出し、ウェブで情報探していたら「えっ」と思うサイトを見つけてしまいました（今さらかもしれないんですが…）。
「iloveyou」をmd5で暗号化すると「f25a2fc72690b780b2a14e140ef6a9e0」。でもって、下記サイトで「f25a2fc72690b780b2a14e140ef6a9e0」を検索すると、なんと「iloveyou」と表示するではないですか！
md5.rednoize.com – reverse engineer md5 hashes – powered by rednoize.com
これはなんだ！簡単に解読できるようになったのか！と思って調べたら、暗号化前の文字とmd5の暗号化文字をデータベース化してるだけでした。
けど適当に単語を暗号化して検索すると、けっこうデータベース化されています。
md5は数年前までは復号化が難しい安全な暗号化とされていたため、復元できない暗号化をする場合によく用いられていますが、こんなアナログな方法でデータベース化されていたら復元もくそもないですね…。
気になる方は下記サイトでmd5暗号化できるので、暗号化して「md5.rednoize.com」を通してみてください。復号化されているということは、ちょっとパスワードにつかうには危険な文字列かもしれません。
まあこれはプログラム側のパスワードの管理等の問題なので、普通にWEBサービスを使う分には関係ないかもしれません。今時md5ハッシュして、そのままDBにほりこんでるような仕様のものはあまりないと思うので（…たぶん）。
けど大切なパスワードは「出来る限りランダムな文字列」を使うにこしたことはありません。みなさん、気をつけましょう！
fadeIn、fadeOut等の練習がてらjQuery本体だけで簡単なギャラリーページを作ってみました。
小さな画像をクリックすると表示されている画像がfadeOutし、新しい画像が読み込まれるまでLoading画像が表示され、新しい画像読み込み終わった時点でfadeInし、あわせてLoading画像が消えていきます。
ソース
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<title>jQueryでギャラリー（フェードイン・フェードアウト）</title>
<script type="text/javascript" src="../jquery-1.2.6.min.js"></script>
<script language="JavaScript">
$(function(){
$("#menu img").click(function(){
//loadingを削除
$("#loading").remove();
//サムネイルの画像URLを取得
thumbURL = $(this).attr("src");
//サムネイルの画像URLを大きい画像URLに書き換え
imgURL = thumbURL.replace("/s_","/b_");
//大きい画像を読み込み
var image = new Image();
image.imgURL;
//Loading画像を表示
$("#imgbox").append('<div id="loading" style="position:absolute;top:0;left:0;z-index:100;"><img src="./img/download.gif" /></div>');
//画像をフェードアウト
$("#bigimg").fadeOut(
"slow",
function() {
//大きい画像の入れ替え
$("#bigimg").attr("src", imgURL);
//画像の読み込みが完了したら…
$("#bigimg").load(function () {
//フェードイン
$("#bigimg").fadeIn(2000);
//Loading画像をフェードアウト
$("#loading").animate({opacity:0}, 800, "linear");
});
}
);
});
});
</script>
<style type="text/css">
body {
background: #000000;
color: #ffffff;
}
a {
color: #dddddd;
}
#wrap {
width: 800px;
margin: 30px auto;
}
#menu {
float: right;
width: 80px;
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#imgbox {
width: 610px;
height: 610px;
background: #000;
position: relative;
}
#bigimg {
margin: auto;
margin-right: auto;
display: block;
}
img {
padding: 2px;
border: 2px solid #cccccc;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Image Gallery</h1>
<p>画像はこちらサイトの画像をお借りしました。<a href="http://sozai-free.com/" class="openwin">2000ピクセル以上のフリー写真素材集</a></p>
<div id="menu">
<ul>
<li><img src="./img/s_1.jpg" /></li>
<li><img src="./img/s_2.jpg" /></li>
<li><img src="./img/s_3.jpg" /></li>
<li><img src="./img/s_4.jpg" /></li>
</ul>
</div>
<div id="imgbox"><img src="./img/b_1.jpg" id="bigimg" /></div>
</div>
</body>
</html>
ひとまずサムネイル画像は「s_○.jpg」、大きい画像は「b_○.jpg」で名前をつけてimgディレクトリに一緒にほり込んで、画像のサイズに合わせてCSSを書き換えれば動作します。
今回はとにかく簡単で、最低限そのままでも使えそうな感じで基本形を作ってみましたが、もうちょっとJavascriptやjQueryがわかっていれば、もっと簡単に記述できる気がする…。
まあ記述はよしとして、クロスフェードや別の動きを盛り込んでいきながら作り込んでいこ。
アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。
アマゾンのサーバでエラーが起こっているかもしれません。一度ページを再読み込みしてみてください。