ipadが届いたので、とりあえず簡単レビュー。

本日ようやくipadが発売となりました。

「1個買っちゃおうZE☆」とうちの社長がどこかで予約していたので、本日会社に製品が届きました。

製品が届いたところで、直近でアプリを作ろうとかの話ではないのだけれども、まぁそれでもワクワクします。

今回はwifiバージョンを購入しました。使ってみてよかったら次回は3Gを検討してもいいのかもしれません。というところにヤマトからお届けものが。





ipadが会社に届いた!あれ、意外と軽い。



オデマシー!



本体。ではなく箱。海外などでは箱だけ来て中身が盗まれてた!なんてこともあったらしいのですが、さぁちゃんと中身はあるでしょうか・・・



デター!蛍光灯の光が反射してうまく伝わらないけれど、高級感あふれる仕上がり。
今回からようやく壁紙の存在意義があるようになりました。背景写真を変えたら雰囲気がガラっと変わりそうです。アプリとアプリの感覚が広い。

思ったよりも小さくて軽い。そしてなによりもうっすぃ!



ちょーわかりにくいけれど、ノートPCと並べたところ。うすい。


なんかあれです。薄いし軽いし、だけれども表面積は大きくてやっぱり精密機械なので、落としたりなんか傷をつけちゃったりとかが心配。落としたら一発で液晶割れてしまいそうな予感。。。



うわさのキーボード。今はかなり使いにくいが。慣れたら大丈夫かも。そもそもこれって両手で使う感じで作られているのかな??

ちなみに会社の部長はうちの会社名でググるのに1分ぐらい格闘していた。それくらい最初は使いにくい。



なんかかっこよくなったカレンダー。カレンダーというか、完全に手帳です。



地図。


今回は3Gではなくwifiバージョンを買いました。すごい印象深かったのが、ズームの感度がメチャクチャいい。早い。iphoneに比べてでかい分、処理速度もそれなりに向上しているのかな?

カメラはついていないんですね。てっきりついてると思ってました。会社のアートディレクター殿が「内側のカメラが次バージョンでつきそう」と言っていて、確かに。内側カメラをつかってベットで横になりながら友人とチャットなんて、ありそうなシチュエーションですね。

さぁ、これから使いまくるぞ!と思ったら社長が持って帰ってしまったので、ちゃんと使い込むのは来週になりそうです。トホホ。とりあえず最初の印象をお伝えしました。

Google Map APIを使ったフォトギャラリー、のサンプル

Google Mapの機能をJavascriptを用いて利用するAPIを、Google Map APIといいます。そのまんま。

使い方等はほかのサイトにたくさんのっているので割愛しますが、とりあえず一個簡単に作ってみました。

テキトーに作ったのでデザインがアレでかっこ悪いですが、背景画像やアイコンをイケてる感じにしたら
なかなかいい感じのギャラリーやら特設ページやらとして使えるのではないでしょうか。

とりあえずそんな感じ。PHPと組み合わせたりもできるようなので、そのうちなんかやってみようかな。

【Javascript】jQueryをつかった一定時間で画像を切り替えるスクリプト(スクロール)

一定時間がたつと画像が切り替えるスクリプトの第二弾。スクロールして画像が切り替わります。

今回は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使わなくてイイネ!今回のサンプルではバカでかい画像使ってるけれど、これを横長の画像にしてサイトのメイン画像部分に入れちゃえば、いい感じになるんじゃなーい?キャンペーンの画像切り替えたりしてさー!

では。

【Javascript】jQueryをつかった一定時間で画像を切り替えるスクリプト(フェードイン)

一定時間がたつと画像が切り替えるスクリプトでございます。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;
		}
	}
});

ほんとはね、ほんとは画像をクロスフェード(なんか溶け込むように変わってくやつ)で切り替えたかったんだけど、めんどくさかったから寝ちゃったんです!

いつかそれも作ります。

会社で隣の席の先輩がグロ画像を喜んで見せてきました。そのせいでもう僕のスィートハートはブレイキンだぜ!

ほんとは「イヤーン!こんな怖いもの見れませんわー!」とか言いながら嬉々として見ていたんですけれども。

【Javascript】改良版・jQueryとPHPと Sqliteを使ったAjaxのシンプルなチャット

サンプルデモはこちら
ファイル一式のダウンロードはこちら

先日、jQueryを使ったシンプルなチャットを作成しましたが、今回はその修正版です。

一度に表示する記事数を設定でき、Twitterみたいに「もっと読む」をクリックするとAjaxで次の記事が表示されます。
あ、あと日付も入れました。

なんか全然難しいことしてないのに、やたら時間ばかりかかりました。もうダメです。五月病です。ウソです。

さてどんな使い道があるでしょう。

・ちょっと思いついたアイデアを書き込んじゃうメモにする
・話しかけたい けれど勇気が出せず話しかけられない総務のアイドル長谷川さんへ思いを密かに綴る恋日記にする
・姑の悪口をひたすら吐くことでストレス解消の場とする

うん、ちょっと考えただけでもいろいろ使えそう!レッツトライ!

一度に表示する記事数はlimit.phpをいじります。

<?php
//一度に表示する記事数
$limit = 5;
?>


説明しなくても分かるくらいに簡単ですね。赤子の手をひねるようですね。関係ないですが、なんでわざわざ赤子の手をひねらなければいかんのでしょう。いったいどういうシチュエーションなのかサッパリわからんとです。足ではいかんかったのでしょうか。

そんなわけで僕はもう寝ます。もう朝です。布団が読んでます。グゥ。