一定時間がたつと画像が切り替えるスクリプトの第二弾。スクロールして画像が切り替わります。
今回はjQueryに加え、jquery.easingというプラグインを使用します。これはアニメーションの動きをイケてる動きに変えれるプラグインです。
縦バージョン
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。
横バージョン
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。
縦も横もほとんど中身は変わりませぬ。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<link href="css/recet.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/loading.js" type="text/javascript"></script>
</head>
<body>
<div>
<ul id="gallery">
<li><img src="img/1.jpg" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
</ul>
</div>
</body>
</html>
liの部分に画像を一つずつ設定してあげてくださいな。画像ファイルの名前は1とか2とか連番じゃなきゃダメよ。
#gallery{
width:600px;
height:480px;
}
#gallery li{
line-height:0px;
position: relative;
left:0
}
//画像を切り替える速さ
imgChangeSpeed = 2000;
//画像の縦幅
imgHeight = 480;
//画像の横幅
imgWidth = 600;
//画像の数
imgInt = 3;
//ページ変異のタイプ
type = "easeInOutBack";
var move = "-" + imgHeight + "px";
var maximun = "-" + imgHeight * imgInt;
$(function(){
//一定時間毎にスクリプトを呼び出す
var t = setInterval(loadImg, imgChangeSpeed);
//呼び出されるスクリプト
function loadImg(){
var movement = $("li").css('top');
var movement = parseInt(movement.replace("px","")) - imgHeight;
if(movement > maximun){
$("li").animate({'top':movement},{queue:false, duration:1000, easing: type});
}
else{
$("li").animate({'top': 0}, 1000);
}
}
});
画像の縦幅と横幅と切り替える画像の数を指定してあげてね☆
ちなみに、//ページ変異のタイプのところをjQuery日本語リファレンスのこちらのページの黄色の棒の上に書いてあるそれぞれの名前に変えてあげると、スクロールの動きが変わりまっせ。
これでFlash使わなくてイイネ!今回のサンプルではバカでかい画像使ってるけれど、これを横長の画像にしてサイトのメイン画像部分に入れちゃえば、いい感じになるんじゃなーい?キャンペーンの画像切り替えたりしてさー!
では。
一定時間がたつと画像が切り替えるスクリプトでございます。jQueryつかってます。
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。
画像を切り替えるスピードなどは簡単に変えることができます。ちなみにスピードのとこの3000というのは3秒のこと。1秒は1000です。
画像を<p id=”gallery”>とかで囲めば表示されます。切り替える画像の数も拡張子も自由に変えれるけれど、画像の名前は1.jpgとか2.pngとか、1、2、3とかの連番でなくてはいけない。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無題ドキュメント</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/loading.js" type="text/javascript"></script>
</head>
<body>
<div>
<p id="gallery"><img src="img/1.jpg" /></p>
</div>
</body>
</html>
//画像の数
imgLength = 3;
//最初に表示する画像
firstInt = 1;
//画像を切り替える速さ
imgChangeSpeed = 3000;
//画像の拡張子
imgExtension = ".jpg";
//画像の保存ディレクトリ
imgDirectory = "img/";
randomInt = firstInt + 1;
$(function(){
//一定時間毎にスクリプトを呼び出す
var t = setInterval(loadImg, imgChangeSpeed);
//呼び出されるスクリプト
function loadImg(){
$("#gallery").children("img").animate({'opacity':'0'}, 0)
$("#gallery").children("img").attr("src",function(){ return imgDirectory + randomInt + imgExtension }).animate({'opacity':'1'}, 800);
if(randomInt < imgLength){
randomInt = parseInt(randomInt) + 1;
}
else{
randomInt = 1;
}
}
});
ほんとはね、ほんとは画像をクロスフェード(なんか溶け込むように変わってくやつ)で切り替えたかったんだけど、めんどくさかったから寝ちゃったんです!
いつかそれも作ります。
会社で隣の席の先輩がグロ画像を喜んで見せてきました。そのせいでもう僕のスィートハートはブレイキンだぜ!
ほんとは「イヤーン!こんな怖いもの見れませんわー!」とか言いながら嬉々として見ていたんですけれども。
サンプルデモはこちら
ファイル一式のダウンロードはこちら
先日、jQueryを使ったシンプルなチャットを作成しましたが、今回はその修正版です。
一度に表示する記事数を設定でき、Twitterみたいに「もっと読む」をクリックするとAjaxで次の記事が表示されます。
あ、あと日付も入れました。
なんか全然難しいことしてないのに、やたら時間ばかりかかりました。もうダメです。五月病です。ウソです。
さてどんな使い道があるでしょう。
・ちょっと思いついたアイデアを書き込んじゃうメモにする
・話しかけたい けれど勇気が出せず話しかけられない総務のアイドル長谷川さんへ思いを密かに綴る恋日記にする
・姑の悪口をひたすら吐くことでストレス解消の場とする
うん、ちょっと考えただけでもいろいろ使えそう!レッツトライ!
一度に表示する記事数はlimit.phpをいじります。
<?php
//一度に表示する記事数
$limit = 5;
?>
説明しなくても分かるくらいに簡単ですね。赤子の手をひねるようですね。関係ないですが、なんでわざわざ赤子の手をひねらなければいかんのでしょう。いったいどういうシチュエーションなのかサッパリわからんとです。足ではいかんかったのでしょうか。
そんなわけで僕はもう寝ます。もう朝です。布団が読んでます。グゥ。
ソースは下記。
アップル、「Flash」に代わる製品を開発中か–米報道:ニュース – CNET Japan
AppleがFlash代替技術を用意? – プラグイン不要のRIAフレームワーク「Gianduia」 | マイコミジャーナル
HTML5で出来ることはHTML5+Javascriptで行い、現在Flashでしかできないような非常にリッチというか、ゲームチックみたいなものを今回のプラットフォームで出来るようにし、そこからJavascriptを呼べるようにする、と。
脱Flashに向けて猛然とダッシュするAppleくんですが、独禁法などにひっかからなければいいのですが。。。
まぁ、たしかに私も普通にHTML5+Javascriptでなんでもかんでも出来るようになるとは思っていません。
非常にゲームチックだったりリアルなムービーチックなものは、結果的に現在のAdobeのFlash(ソフトのこと)のようなツールが制作に必須だと思います。
だからそういったツールを使って制作する場合、私の立場からまぁ確かにJavascriptなどで作れる方が「新しくActionScript覚えなくていいな」って感じです。
まぁ、私としてはJavascriptとHTML5、PHPを伸ばしつつ、ブラウザ側のJavascript対応がもっと進んでくれるといいなーと思います。もうみんなGoogleChromeになってしまえばいいんだ!
もうみんな一斉に「はい、今日はIE6とIE7は禁止!」ってしてしまえばいいんだ!
jQueryを使ったシンプルなAjaxのチャットです。
実装にはjQueryと1つのプラグイン、そしてsqliteのデータベースが必要です。下記に必要なものを全てまとめたファイルがあるので、サーバーにアップするだけですぐ使えます。
サンプルデモはこちらです。
ファイルのダウンロードはこちらから。
ご自由に利用・カスタマイズ・再配布OKです。連絡やコピーライト(入ってないけど)もなくてだいじょぶです。
データベース(Sqlite)もまるごとファイルに含まれているので、ほんとサーバーにあげてすぐ使えます。サーバーのPHPの設定が変じゃないかぎり。
こんな感じにデータベースごとファイルにまとめられるのが軽量で使い勝手のいいSqliteの強みですね。
今回は今までよりちょっとだけ凝った作りになってますので、概要だけご紹介します。
主要なファイルは下記です。
【HTMLファイル】
index.html ・・・基本となるファイル。他のスクリプトを呼び出す。
【PHPファイル】
action.php ・・・コメントを送信されたときに実行されるファイル
read.php ・・・既にデータベースに登録されているコメントを表示するファイル
【Javascript】
jquery.js ・・・すばらしいライブラリ。無論私が作ったものではない。
jquery.easing.js ・・・いい感じにアニメーションさせるためのプラグイン。私が作ったものではない。
jquery.ajaxchat.js ・・・必要に応じてaction.phpとread.phpを呼び出すファイル。これでAjaxを実現してまする。
では具体的なスクリプトを。長くてやんなっちゃうかもしれませんが、一応ね。
<html>
<head>
<title>シンプルなAjaxチャット</title>
<link href="css/recet.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
<script src="js/jquery.js"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>
<script src="js/jquery.ajaxchat.js"></script>
</head>
<body>
<div>
<textarea name="message" id="message"></textarea>
<p name="button" id="button">送信</p>
</div>
<div id="results"></div>
</body>
</html>
必要なファイルをhead内で読み込んでいます。bodyにはコメントデータを送信するフォーム、データを表示するスペースの3つだけがあります。
index.htmlから呼び出された「jquery.ajaxchat.js」が今回核となるファイルで、内容は下記のようになってます。
$(function(){
//データ抽出用PHPの呼び出し
$.post("./read.php", {default_val : 1}, function(data){
if (data.length>0){
$("#results").html(data);
}
})
//コメント送信時のアクションを呼び出す
$("#button").click(function(e){
$("#results").prepend("<div class='loading'><img src='img/loading.gif'></div>");
var t = setTimeout(ajax_send, 500);
});
});
//コメント送信時のアクション
function ajax_send(){
//送信されたデータを変数に格納
var comment_val = $("#message").val();
//データ投稿用PHPの呼び出し
$.post("./action.php", {message : comment_val}, function(data){
if (data.length > 0){
$(".loading").remove();
$("#results").prepend(data);
$("#results div:first-child").animate({'opacity':'0'}, 0);
$("#results div:first-child").animate({'opacity':'1'}, 1000);
}
else{
$(".loading").remove();
}
})
}
まず最初に既にデータベースに登録されているデータを表示するため、表示するPHPプログラム「read.php」にアクセスし、受け取ったデータを表示します。
次に、コメントのボタンがクリックされた時のアクションajax_send関数を呼び出しています。ajax_send関数で、実際にコメントデータをデータベースに登録してAjaxで表示するための「action.php」にアクセスし、受け取ったデータを表示します。
では次にread.php
<?php
mb_internal_encoding("UTF-8");
//DB接続
$dbname = "sql/bbs";
$conn = sqlite_open($dbname) or die ("データベースに接続できませんぜよ");
$comment = '';
//データの抽出
if($_POST['default_val'] == 1){
$sql = "SELECT * FROM comment ORDER BY id DESC;";
$res = sqlite_unbuffered_query($sql,$conn) or die ("データベースを接続できませんぜ");
while ($row = sqlite_fetch_array($res, SQLITE_ASSOC)){
$message .= "<div>" . nl2br(htmlentities($row["message"], ENT_QUOTES, "UTF-8")) . "</div>";
}
}
else{
$message = "Hey You! What are you doing?";
}
//データを書き出し
echo $message;
?>
特に変わったことはしていないと思うので(たぶん、たぶんね!)、説明は省いちゃいます。
次にaction.phpです。
<?php
mb_internal_encoding("UTF-8");
//DB接続
$dbname = "sql/bbs";
$conn = sqlite_open($dbname) or die ("データベースに接続できませんぜよ");
//データの投稿
if(($_POST['message'] != "") and (!mb_ereg_match("^(\s| )+$", $_POST['message']))){
//エスケープ
$message = htmlentities($_POST['message'], ENT_QUOTES, "UTF-8");
$message = sqlite_escape_string($message);
//データベースに追加
$sql = "INSERT INTO comment (message) VALUES ('$message') ";
$res = sqlite_unbuffered_query($sql,$conn) or die ('$error');
$message = "<div>" . nl2br($message) . "</div>";
echo $message;
}
?>
半角スペースだけ、および全角スペースだけの場合は送信できないように、正規表現(!mb_ereg_match(“^(\s| )+$”, $_POST[‘message’])の部分)で制御しました。
ぶっちゃけ正規表現をしっかり理解していないので、ここはどっかから拾ってきました。シェイシェイ!!
Twitterみたいにしっかりしたものを作りたいですけれども、それはまだ先のようですなぁ。。。そもそも、JQuery使わないと作れない時点でこまったちゃんですね。
どこかで時間を作って、通常のJavaScriptだけで作るバージョンを試してみようかと思います。
僕がまだピカピカの新卒だったころ、Gmailが誰でも使えるようになって(それまで確か招待制だった)使ってAjaxすげーってなって、なんか「Ajaxって新技術がすごい!」みたいな雰囲気になってましたが、今ではどこでも見かけるようになりましたね。
もっともっとがんばりまってちゃんとしたの作れるようになりまっしょい。目指せGmailとかGoogleスケジュール。
なお、このブログで公開してるプログラムなどに「ここ、おかしくない?」や、「ここはこうした方が効率いいのに知らないの?ププ・・・」などのアドバイスをいただけると非常にうれしいですので、ぜひぜひお気軽にドシドシ教えてください。
さぁ、ピルクルを飲んで寝ようっと。