少し前の話になりますが、linker journalの「普段読んでるRSS一覧でも＜Web制作系編＞」というエントリーにこのブログが載ってるのを見かけて心苦しくなったので何か書こうと思った次第です。
deliciousが自動更新するブログになっていてホントすんまへん。へこへこ。

さて、皆さんはalt、description、keywordsのチェックはどうされてますか？
下階層で同じようなレイアウトのページが続くと前回作ったものをコピーして作ったりしますが、その際にalt、description、keywordsを更新し忘れてて公開後にギャースとなることがまれにあります。

数ページのサイトであればチェックも手間では無いのですが、数百ページとかになるとaltチェックだけでもかなりの手間になります。
そこで自分はjQueryでコードを書きテストサーバーにアップ後、それを読み込ませてブラウジングしながらチェックしています。

左の画像がJSを読み込ませる前、右が今回のコードを読み込ませた後

右の左側（わかりにくいな）の画像にはaltが入っているので画像の左上にaltテキストが表示されます。
右の右側の画像はaltが抜けていたので画像に枠がつきます。

また、body直下にdescriptionとkeywordが出力されます。
bodyに背景画像でごにょごにょしてる場合は崩れる可能性大！（まぁチェックだからいいよね）

$(function(){
//description、keywordチェック
	$("body").prepend('<div>description: ' + $("meta:[name^='description']").attr("content") + '</div>');
	$("body").prepend('<div>keywords   : ' + $("meta:[name^='keywords']").attr("content") + '</div>');

//altチェック
	$("img").each(function(){
		var h = $(this).height();
		if($(this).attr("alt")){
			$(this).after('<div style="z-index:999;position: absolute;background-color: #333; color:#FFF; font-size:10px; padding:5px;margin-top:-' + h + 'px;">' + $(this).attr("alt") + '</div>');
		}
		else{
			$(this).css({ backgroundColor:"#F00", padding:"5px" });
		}
	});
});

無理やり出力させてたりするので、画像の上にaltテキストが乗らなかったりしますが、その辺は見なかった体でお願いします。

jQuery1.3.2＆Firefox以外ではめんどくさくてチェックしてませんので動かなかったらごめんなさい。

今回の問題はこちら！

1. 複数の数値を入力させ、昇順に並び替え、最大値と最小値を出す（例：同僚の体重を入力して計算）。

今回は体重のソート（順番に並べる）ってことなので、第1関門はフォームから値を入力してもらう事、第2関門にソートする事。
最初はあまり考えずに「体重だけじゃアレだなー」と思って「名前も一緒に入れよう！」と思ったのが運のツキ…めんどくさくなってしまった…

最初にHTMLのフォームからPOSTでデータを受け取る！
これは$_POST["name1"] この1行で終わるので楽勝ですな。（name1はフォームのname属性の値）

次にソートなんだけど、名前を取得せずに体重だけを取得する場合はsort関数を使えばそんなに悩まずにすぐ出来ると思います。
が、しかし！自分は$personという配列の中に3人のデータをさらに配列で作ってしまったのでめんどくさくなりました(´･ω･｀)

でも色々調べてみるとarray_multisortという関数があったので、$person配列からweightの値を$weightという新しい配列に移し、この$weight配列の数字の大きい順に$personも並び替えできました。

実際に動いているのはこちら
第3回目「新しくプログラミング言語を覚えたいときに行うべき10の練習問題　〜PHP編〜」

書いたコードはこちら

<?php
//POSTで受け取ったデータを2次元配列に格納
$person = array(
	        		array('name'  => $_POST["name1"], 'weight'  => $_POST["weight1"]),
	        		array('name'  => $_POST["name2"], 'weight'  => $_POST["weight2"]),
	        		array('name'  => $_POST["name3"], 'weight'  => $_POST["weight3"])
	        		);
※問題があったので下に修正したものを書きましたのでそちらを参考にしてください。

//2次元配列の中の連想配列weightの値を配列$weightの中に代入
foreach ($person as $key => $row) {
    $weight[$key]  = $row['weight'];
}

//$weightの数値の大きい順に$personも並び替えする。
array_multisort($weight, SORT_DESC,  $person);

//配列の中を順番に表示
for($i=0; $i<3; $i++){
	echo '<p>名前：'.$person[$i]['name'].'　体重：'.$person[$i]['weight'].'</p>';
}
?>

コメント欄にてyusuke0927さんに下記のようなご指摘を受けました。ありがとうございます！

$_POST["name1"] とやっている箇所は htmlspecialchars() を入れておかないと、＜script＞タグを埋め込めてJavaScript等を実行できてしまいます。（いわゆるクロスサイトスクリプティングというやつですね）

ということだったので、POSTで受け取ったデータを配列に代入するときに htmlspecialchars()を使ってJavaScript等を実行できないように修正しました。
これで入力されてもそのまま出力されるはずっ！

こういうご指摘は正直ありがたいです。どんどんお願いしますー！

$person = array(
	        		array('name'  => htmlspecialchars($_POST["name1"]), 'weight'  => htmlspecialchars($_POST["weight1"])),
	        		array('name'  => htmlspecialchars($_POST["name2"]), 'weight'  => htmlspecialchars($_POST["weight2"])),
	        		array('name'  => htmlspecialchars($_POST["name3"]), 'weight'  => htmlspecialchars($_POST["weight3"]))
	        		);

次回は「簡易電卓。0で割ったときの処理を自分なりに作りこむ。」だそうだ。がんばるぞ〜！(n’ ∀ ‘)η

関連リンク

第0回「新しくプログラミング言語を覚えたいときに行うべき10の練習問題」をPHPでやってみよう！

第1回「新しくプログラミング言語を覚えたいときに行うべき10の練習問題」をPHPでやってみた！！

第2回「新しくプログラミング言語を覚えたいときに行うべき10の練習問題」をPHPでやってみた！！

第3回「新しくプログラミング言語を覚えたいときに行うべき10の練習問題」をPHPでやってみた！！

今回の問題はこちら！

1. 現在時刻にあわせてやる気のでるメッセージを出力（例：もうすぐランチ！がんばれ！）。

今回は時間の取得さえできれば問題なっしん。
PHPで日付の取得はdate関数を使えば楽チンなのですぐできました。
配列にメッセージを予め入力しておいて、対応した時間によってそのメッセージを選んで出力するだけ！
後は指定した時刻以外のときのメッセージを入力しておけばOK。

今回作ったプログラムだと1分単位のメッセージなので指定した時間を逃すと見れなくなる…
分単位じゃなくて時間単位にすればよかったかなー。でも「はなまるマーケット」は8時半だし仕方ないw
個別に「このメッセージは分刻みだけどそれ以外は時間刻みで！」という場合はswitchで分岐しないでifで分岐すればいいよー！(n’ ∀ ‘)η

実際に動いているのはこちら
第2回目「新しくプログラミング言語を覚えたいときに行うべき10の練習問題　〜PHP編〜」

書いたコードはこちら

<?php
$message = array('(n' ∀ ')η＜起きろ〜！',	//7時
			'(n' ∀ ')η＜はなまるマーケット始まったよ！そろそろ家出ないと遅刻！',	//8時半
			'(n' ∀ ')η＜出社！今日も1日がんばろ〜！',//10時
			'(n' ∀ ')η＜お昼だ〜！今日は何食べる？',//13時
			'(n' ∀ ')η＜眠くなる時間だが耐えるのだっ！',//15時
			'(n' ∀ ')η＜定時まで後1時間！もう少しだよ！',//17時半
			'(n' ∀ ')η＜定時になった！残業なければ帰れるよ！',//18時半
			'(n' ∀ ')η＜そろそろ夕食だよー！',//20時
			'(n' ∀ ')η＜今日もお疲れさまでしたっ！');//1時

switch(date("H:i")){
	case '07:00':
		$str = $message[0];
		break;
	case '08:30':
		$str = $message[1];
		break;
	case '10:00':
		$str = $message[2];
		break;
	case '13:00':
		$str = $message[3];
		break;
	case '15:00':
		$str = $message[4];
		break;
	case '17:30':
		$str = $message[5];
		break;
	case '18:30':
		$str = $message[6];
		break;
	case '20:00':
		$str = $message[7];
		break;
	case '01:00':
		$str = $message[8];
		break;
	default:
		$str = '(￣－￣)ｼｰﾝ';
}
echo $str;
?>

次回は「複数の数値を入力させ、昇順に並び替え、最大値と最小値を出す（例：同僚の体重を入力して計算）。」だそうだ。がんばるぞ〜！(n’ ∀ ‘)η

関連リンク

第0回「新しくプログラミング言語を覚えたいときに行うべき10の練習問題」をPHPでやってみよう！

第1回「新しくプログラミング言語を覚えたいときに行うべき10の練習問題」をPHPでやってみた！！

第2回「新しくプログラミング言語を覚えたいときに行うべき10の練習問題」をPHPでやってみた！！

第3回「新しくプログラミング言語を覚えたいときに行うべき10の練習問題」をPHPでやってみた！！

今回の問題はこちら！

1. 「なんらかのカウントアップメッセージを1から100まで出すけど、3のときだけアホになる！（例：1万円！2万円！しゃ～ん万円！とか）」。

まぁ要するに世界のナベアツですなw
今回の問題は簡単なようで実は結構難しかった（めんどくさかった）です。

というのも、3で割り切れる数字のときだけアホになれば楽なのですが、3で割り切れない場合でかつ数値に3が入っていた場合もアホになるのです。31とかね。

この割り切れないけど、数値に3が入っていた場合の処理がめんどくさかったです。
実際に出来上がったコードを書くので参考にしてみてください。
解りやすいようにコメント多めにしてみましたがどうでしょう？

自分で読み返してみても無駄な処理が多いので、もっとスリムアップできると思います。
やっぱりこの場合正規表現かすら？(n’ω’ `)

実際に動いているのはこちら
第1回目「新しくプログラミング言語を覚えたいときに行うべき10の練習問題　〜PHP編〜」

書いたコードはこちら

<?php
//アホになる場合の文字$str1は一桁、$str2は二桁
$str1 = array('', 'いち', 'にっ', 'さん', 'しっ', 'ご', 'ろく', 'なな', 'はち', 'きゅう', 'じゅう');
$str2 = array('', 'じゅ〜う', 'にじゅ', 'さ〜んじゅ', 'よ〜んじゅ', 'ご〜じゅ', 'ろくじゅ〜', 'ななじゅ〜', 'はちじゅ〜', 'きゅうじゅ');

//1から100までループ
for($i=1; $i<=100; $i++){
 	//1桁の場合
 	if($i<10){
  		//3の倍数の場合
  		if(!($i%3)){
   			$sum = $str1[$i];
  		}
  		//普通の数字の場合
  		else{
   			$sum = $i;
  		}
 	}
 	//2桁、3桁の場合
 	else{
  		//2桁の場合、10の位と1の位を抜き出し
  		$num1 = mb_substr($i,0,1);
  		$num2 = mb_substr($i,1,2);
  		
  		//10の位と1の位が3の場合か、3の倍数の場合
  		if($num1 ==3 || $num2 ==3 || !($i%3)){
   			$sum = $str2[$num1];
   			$sum .= $str1[$num2];
  		}
  		//普通の数字の場合
  		else{
   			$sum = $i;
  		}
 	}
 	//出力
 	echo $sum.'万円！<br>';
}
?>

次回は「現在時刻にあわせてやる気のでるメッセージを出力」だそうだ。がんばるぞ〜！(n’ ∀ ‘)η

関連リンク

第0回「新しくプログラミング言語を覚えたいときに行うべき10の練習問題」をPHPでやってみよう！

第1回「新しくプログラミング言語を覚えたいときに行うべき10の練習問題」をPHPでやってみた！！

第2回「新しくプログラミング言語を覚えたいときに行うべき10の練習問題」をPHPでやってみた！！

第3回「新しくプログラミング言語を覚えたいときに行うべき10の練習問題」をPHPでやってみた！！

Rubyがオススメとか良く聞くけれど、使う言語はPHP。PHPを使う理由はやっぱり業務に直結しやすいから。

さて、実際にエントリーの中で書かれていた練習問題は下記の通り。

1. 「なんらかのカウントアップメッセージを1から100まで出すけど、3のときだけアホになる！（例：1万円！2万円！しゃ～ん万円！とか）」。
2. 現在時刻にあわせてやる気のでるメッセージを出力（例：もうすぐランチ！がんばれ！）。
3. 複数の数値を入力させ、昇順に並び替え、最大値と最小値を出す（例：同僚の体重を入力して計算）。
4. 簡易電卓。0で割ったときの処理を自分なりに作りこむ。
5. キーワードを入れてYahoo!の検索結果を出力。
6. テキストを入れると語尾が赤ちゃん言葉に（例：ですよ→でちゅよ）。
7. メールアドレスを入れるとあらかじめ用意されたテンプレートファイルにそのメアドを埋め込んだ上でメール送信（スパムはダメだよ！）。
8. 「（名前）が、（場所）で、（アクション）した」がランダムに組み合わされて出てくるプログラム。
9. URLを入れるとそのページのはてなブックマーク数が出てくるプログラム。
10. ある名前とある名前を入れると相性診断を10段階で出してくれるプログラム。診断結果は適当でもいいけど、同じ組み合わせだったら同じ数値が必ずでないといけないように。

一見、簡単な順に並んでるのかと思ったけどそんなことないような気が…

簡単かなー？と思う練習問題は、1、2、3、5、8、9。
ちょっと難しいかも？と思う練習問題は4、6、7、10。

5、9はYahoo!、はてなブックマークのAPIを使うので若干難しそうに思ったけど、PHPのSimpleAPI（だよね？）を使うと割と簡単にできそう。

意外と難しいと思われるのが4。0で割ったときの処理をどうするかかな？強制的にエラー出してしまえばいいのかすら？

後は7のメール送信の処理かな？メール送信の部分はサーバーによっても違うかもしれないし調べつつやってみようー！

最後の10は普通に難しい…まずどうやって判定させたものか困る…

そんなわけで、コードを公開してやっていくので変な処理してたり困ってたら教えてください＞＜

大きな解像度で見たい方はNIKEFOOTBALL.comでどうぞー！

有望な若い選手が名門アーセナルの監督ベンゲルに見いだされ、プレミアでプレーすることに…
というサクセスストーリーをあたかも体験したかのような動画になっています。

サッカー好きにはたまらんシチュエーションですなっ!!

特に若手の発掘で有名なベンゲル監督を用いるとかありそうで良いんですよねw
途中、マテラッツィに歯を折られるとか笑ったww　わかっていらっしゃる！w

誰がこのCM作ったのか気になって調べてみたら、なんと！マドンナの旦那のガイ・リッチーだった！
な、なんだってー！

しかし、NikeのCMはいつもカッコいいよなぁ。
俺が今まで一番好きなのはNikeのCMはFreeStyle。

追記
ブログを書いた後にcouldのyhassyにこんな指摘をうけましたー。そうだったのかっ！

今回はPHPとpearを使って、CORESERVERで動かしています。
CORESERVERでpearを動かすにあたってはこちらのエントリーが非常に参考になりました。あざっす！(n’ ∀ ‘)η
共有サーバ（CORESERVER.JP）で自由にPEARのインストールをする

twitterへのPOST自体はpearを使えばすごく簡単に出来るのですが、HTMLを取得して特定のタグから必要なデータのみ抜き出す（スクレイピング）作業と、その抜き取ったデータの処理（無駄なデータを削除するなど）、エラー処理に苦労しました。

pearを使ったのが初めてだった事もあるのですが、スクレイピングのやり方が分からずPHPで昔ながらの手法で作業しました。これは何か方法があるに違いない！pear＆PHPの詳しい人教えて！＞＜

まぁそんなつたないコードですが、公開しますので赤字つけてくれる人大募集！
コメントでもtwitterでも何でも良いのでお願いします＞＜


<?php
require_once 'HTTP/Request.php';

//名言集.comの最大数
$max = 2019;

//乱数を生成
$random = rand(0,$max);

//twitterAPIのURL
$url ="http://twitter.com/statuses/update.xml";

// URL をオープン
$fp = @fopen('http://www.meigensyu.com/word/index'.$random.'.html', 'r');

//データが無い場合は再度乱数を生成してURLを変更する
while (!$fp) {
//乱数を再度生成
$random = rand(0,$max);
echo '乱数；'.$random.'<br />';
$fp = @fopen('http://www.meigensyu.com/word/index'.$random.'.html', 'r');
if($fp) break; // ループ脱出
}

// HTML を読み出す
while (! feof($fp)) {
$buffer = fgets($fp, 4096);
if(strpos($buffer, '"text"')){
while(!strpos($buffer, '</div>')){
$meigen .= $buffer;
$buffer = fgets($fp, 4096);
}
$meigen .= $buffer;
}
else if(strpos($buffer, '"author"')){
while(!strpos($buffer, '</div>')){
$author .= $buffer;
$buffer = fgets($fp, 4096);
}
$author .= $buffer;
}
}
//タグ除去
$meigen = strip_tags($meigen);
$author = strip_tags($author);

//正規表現でテキストから不要な部分を除去
//特定のカテゴリに入ってる名言は
if( ereg("\[映画の名言\]|\[漫画・アニメの名言\]|\[ドラマの名言\]|\[ことわざ\]", $author) ){
$meigen = ereg_replace("[\r\n\]|　|&nbsp;", "", $meigen);
$author = ereg_replace("[\r\n\]|　&nbsp;|　|&nbsp;&nbsp;|^&nbsp;|\[.+\]|&nbsp;出典.|^出典.", "", $author);
$author = ereg_replace("&nbsp;", "　", $author);
}
else{
//全角スペース、半角スペース除去
$meigen = ereg_replace("[\r\n\]|　|&nbsp;", "", $meigen);
$author = ereg_replace("[\r\n\]|　&nbsp;|　|^&nbsp;|&nbsp;&nbsp;|^出典.|&nbsp;出典.|\(.+\)|\[.+\]|（.+）", "", $author);
$author = ereg_replace("/出典+/", "", $author);
}
// HTML のクローズ
fclose($fp) or die("CLOSE");

//出典が空の場合があるので「不明」と入力
if($author=='') $author='不明';

// ソケットを開き、送信形式を指定し、データを送信する
$req = new HTTP_Request();
$req->setBasicAuth("twitterID", "twitterPASSWORD");
$req->setMethod(HTTP_REQUEST_METHOD_POST);
$req->addPostData('status', $meigen.'　出典：「'.$author.'」');
$req->setURL($url);

if (!PEAR::isError($req->sendRequest())) {
$response = $req->getResponseBody();
}
?>


「このサイトはコンピュータに損害を与える可能性があります。」とな！？

該当するページを開こうとすると、下記のような画面が出ました。

というわけでGoogleの検索結果画面からはリンクされず、URL直打ちでしか見れないようになっていまいた。

説明を読むとStopBadware.org というサイトのデータベースに登録されているスパイウェアが発見されると上記のようなエラーが出るようです。

ちなみにYahoo!では下記のように普通のサイトとして認識されているようですね。

ペパボことレンタルサーバー「ロリポップ」でおなじみ株式会社paperboy&co.が新しい写真共有サービスをリリースしました！

いよっ！待ってましたっ！

先日、「まめことネコゼのどたばた会議」でペパボさんのインタビューを行なったのですがそのときに「無理ッカー」という名前でお話してくださったサービスがこの「30days Album」です！

「30days Album」とは、

友達や家族、恋人、会社の人など大切な人と過ごした時間を切り取った写真や好きな景色、物などなどの写真を簡単に共有できるサービスです。しかも無料で！

だそうです。無料とはまた太っ腹ですね！

しかし、なんでまた4月10日にリリースしたのかと思っていたら…

4/10はフォトの日なんですよ。誰が何と言おうとフォトの日なんだ。

とgionのシィンさんが仰っていました。な、なんだってー！

さて、実際に触ってみて一番いいなと思ったのはやっぱり共有の部分。
flickrにせよ、Zorgにせよ写真共有サービスって便利なんだけど、共有の部分でカスタムが効かなくて結構困ってました。

flickrはOnlyOne,Friends,Family,Publicの4カテゴリしか無いので、「友達のA君には見せたいけど、B君には見せたくない」とかそういう細かい調整ができません。
まず何より全員がflickrのアカウントを持っていないと始まらないので、アカウント取得からお願いするとか非常に面倒なことになってました。

あとは旅行に行った時の写真集め！これがまた面倒だった！
誰かが全員の写真をメッセンジャーでZipでもらったり、CD-Rに焼いてもらって全員からかき集めて、それをオンラインで見られるようにする手間！手間！手間！
Zip受信中にメッセが落ちたらそこでもうやる気ゼロですよ。えぇ、もうやる気でません。

でもこの「30days Album」を使えば、旅行から帰って来てその日にオンラインアルバムを作成して、全員にパスワードを送っておけば各自でアップできるじゃないですか！

しかもアップロードが速いんよー、これがまた！写真を一括選択して放置しとけば終わったときには音でお知らせしてくれるから便利！

かなりのスピードだったのでgloverさんに速い言ったら、「むしろビューワーを。写真ビューワーを見てみてください。」と言われたので中を見に行ったら…やゔぁい！

まず、写真のExifに記述してある撮影時間別に並んでる！これはめちゃくちゃ便利なんだよ！（力説）
複数の人の写真を集めるとファイル名がバラバラだから時系列に並ばないので、わざわざExif情報を確認できるフリーソフトで時系列にファイル名もソートしたりしてたの！それが何もやらなくてもサーバーでやってくれるこの便利さ！わっかるかなー？わかんねーだろうなー（わかるって）

次に超高速ビューワー！
これめちゃ速いぜ！しかも、矢印キーやクリックでサクサク見れるのが良い！マウスを使う場合はコマンド＋クリックで戻れるよ！Windowsの場合はCtrlかしら？（未確認）

最後にあったら便利だなという機能！
まず俺が欲しいなと思うのはコメント付きで写真集とかにできるサービスが欲しい。
30日間ネット上だけで遊べるのは嬉しいけれど、せっかく盛り上がったコンテンツをそのままダウンロードしておしまい。っていうのは少し寂しいかな。コメントとかのデータはもちろん欲しいので嬉しいけど、最後は紙にしたい。アルバムにして全員に渡したい。

後は有料でもいいので写真の無制限化。ウチの会社は20人ぐらいで社員旅行に行くので写真の枚数もハンパねっす！4日で5000枚とかあるある。
30日間でワンコイン（500円）とかどうでしょう？ww　値段はともかく本気でお願いしたかったり。

もうこれは俺が長らく困ってた部分を解決してくれるサービスですよ！マジで！
久しぶりに熱くなったので気合入れて書きすぎちゃったよ。

What happened to the design?

To know more about why styles are disabled on this website visit the Annual CSS Naked Day website for more information.

このイベントは去年？一昨年？ぐらいから知ってるのですが、実は初参加。

たまには裸になってマークアップを見直そうぜ？的な企画であってるかしら？
とは言え、3pingさんのVicunaテンプレートを使わせていただいてるのでマークアップは素敵です。

こういうイベントがあると、デザインやマークアップを見直す良い機会になるのでリニューアルしなきゃなーとか思ってしまいます＞＜

今回、CSS Naked DayというWordPress用のプラグインを使用してCSSを脱ぎ脱ぎしております。
このプラグインを入れておくだけで、CSS Naked Dayになったら勝手に脱いでくれるのラクチン。
ただし、毎年CSS Naked Dayの日付が違うようなのでどこまで対応してるの不明。来年も使えるのかな？(n’ω’ `)

2007年4月6日に軽い気持ちで登録したTwitter。いつのまにやら遊び始めて1年経過していました。

blog.grayash.com – Twitterハジメマシタ

Twitter経由でどれほどの物を得たか。思い返すと自分でもビックリします。

最初に行ったのTwitterのオフ会のメンバーの中には今でも遊んでもらってる人達が多いです。
@pruto、@ukstudio、@retlet、＠HolyGrail、@hamashun、@forestk・・・そして、場を提供してくれた@miniturbo みんなありがとう。
また@3pingさん、@amachang、@kyosukeさんと有名な方々にもお会いできたのは嬉しかったです。

blog.grayash.com – CSS Nite LP3レポート

@amachang主催の大規模オフ。
このときは色んな人と知り合いになれましたが、特に@woopsdez、@natura、@komakuにはお世話になっております＞＜

blog.grayash.com – Twitter Offline Party レポート！

blog.grayash.com – モバイル勉強会レポート

その後もTwitter経由でメガネオフに行きました。
主催された@cremaさんと@necoze、@k_taro、@todomaru、@2baihanにはその後も仲良くさせてもらってます。

blog.grayash.com – Twitter メガネオフレポート！

blog.grayash.com – 第１回スタジオ撮影勉強会に参加してきました

Twitterで知り合ったGo my wayの@rea君がやってるポッドキャストにもその縁で出演させてもらいました。

blog.grayash.com – realog Podcastで3人対談してきましたっ！

またTwitterから始まった企画「ついったーカレンダー」の写真版にも参加しました。

blog.grayash.com – 2008年版ついったーカレンダー写真版に参加しました

結構長く書きましたが、実はTwitterの人達と会ったイベントやオフはこれだけじゃなくて、
ブログに書いてないものもざっと思い出せるだけでも結構あります。

• ビリヤードオフ
• プルコギオフ
• お散歩写真オフ
• 関西組上京盆フェス
• Summer Sonic 2007
• アサラトオフ
• ワールドアトリエオフ
• HolyGrail誕生会
• ダーツオフ
• retlet誕生会

そして今は、Twitterで知り合った@woopsdezと@necozeがメインでやってる「まめことネコゼのどたばた会議 」にスタッフとして参加させてもらってます。

すでに2年目に入ってますが、まだ当分はTwitterで遊んでると思います。

以前お目にかかった方々、ありがとうございました。これからもよろしくお願いします。
今後お目にかかる方々、お会いした暁にはやさしく接してください＞＜

今さっき、Google Analyticsでブラウザのシェアを見ていたら下の方に素敵なブラウザからアクセスされている方が居ました。

「えっちでよくないブラウザ」

そんなブラウザあんの！？と調べてみたところGoogle先生でも結構な数検索されてる模様。

軽く調べたところ、やっぱりUAの偽装じゃねーかという結論に。

このサイトでは、他に面白いUAで遊びに来た人は居なかったのですが、このblogで過去に遡って調べてみるとこんな方がいらっしゃいました。

誰だか知らないけど照れるぜハニー

今日、スーパーでバナナを選んでいたら面白いバナナを発見っ!!
何やら「手紙のついた果物」と書いてあって、QRコードがバナナに張ってあるではないか！なんぞこれー！ということで早速購入。他のバナナよりは若干高め？っぽいですが、そこまでの値段差は無さそうです。

家に帰って、バナナのQRコードを読んでみるとこのようなページが！

バナナを作られた方がいかに丹精こめて作ったか、写真と直接書かれたメッセージが書いてありました。

バナナごとのユニークなメッセージでは無いようですが、生産者の声を気軽に読めるというのは面白いし、良いサービスだなぁと思いました。

これはバナナ以外の果物、野菜でもあるようなのでお近くスーパーで探してみるといいかもしれません。

い、いやいや、ウチはエロやってませんよ!!

さっき海外のスポーツウェアブランドのサイトを見ていたらこんなの発見！勢いでエントリー！
自社のインナーウェアの密着性をアピールするために作ったと思われるスペシャルサイト。

最初にカップ数を選択して、次に運動の激しさを選択。

するとスクショのようにどれだけ揺れないようになるかが見れます。

それにしてもこのストレートな表現は日本じゃできないなと思ったw

関連サイト

Shock Absorber

IE7の日本語版がリリースされて1ヶ月以上経つのですが、やはりIE6.xのシェアは多いですね。

自分のブログであればIE6.xは全体の25%ぐらいですが、仕事で関わっているサイトですとIE全体のシェアが90%以上、その内IE6.xが70%以上とかはよくある話だと思います。

すべてのユーザーがIE6.x以下を使わなくなってくれたらどんなに仕事が楽になるんだろう(´；ω；｀)

そこでこんなキャンペーンを見つけたので紹介。

あなたのウェブブラウザを最新にして、かわいそうなウェブ開発者を助けて！

ということで、IE6でアクセスしてきたユーザーに下のように最新のブラウザへアップデートを促すメッセージがでるブログパーツ？です。

これを見て数人でもいいから新しいブラウザに乗り換えてくれると嬉しいですね。（結構切実

ちなみにこのキャンペーンは元々海外で行われているものですが、id:riafさんが日本語化してくれた模様。

関連サイト

SaveTheDevelopers.org :: Making The Web A Better Place, One Campaign At A Time…　（英語）

SaveTheDevelopers Japan :: Making The Web A Better Place　（日本語）

仕事で一度だけケータイFlashのコンテンツを作ったことがあるのだけど、特定端末でビデオメモリ不足で画像が出なかったりと色々苦戦しました。そこでこの勉強会が開催されるとのことで上級編（Flash作ってる人向け）に参加しました。

パブリッシュについて

Flash4はFlashLite1.1とほぼ同等。ただし、FlashLiteは携帯特有のASが付随していると考えればよい。
CS3があるならデバイスなんちゃら（携帯の端末でテストできるあれ）を使うのがいいが、持ってない人はFlash4で作って行くのが良いよ。

フレームレート7~12fpsで制作するのがいい。12fpsで問題ないが一部端末でつらい場合があるのでセーフティは7fps。
画面解像度は240＊240。ただしこれはセーフティーなサイズなので、コンテンツによって変えるといい。

FlashLite1.xならではのスプリクトの書き方

携帯端末はreleaseのアクションはとれないので全てpressにする。
携帯端末は押す動作しかなく、マウスのように離すことは無いためpressを使うこと。
ただし一部端末ではreleaseでも取れることがある。

FlashLiteは配列が使えない。オブジェクトも使えない。

変数制限について

変数宣言のvarは認識できないので使わない。
読みづらくなるので変数名をわかりやすくしないと…

ドットシンタックスは使えない

AS2.0では基本的なドットシンタックスによる指定ができない。

image.gotoAndPlay(1);

上記の指定だとシンタックスエラーが出るので下記の方法でやる。

tellTarget(“image”){
gotoAndPlay(1);
}

テキストフィールドについて

AS2.0だとテキストフィールドでもインスタンス名を入れるが、FlashLiteだとインスタンス名を入れるとエラーが出るので、変数名で指定する。

文字列の連結

AS2.0だと＋で文字列の連携ができるが、FlashLiteだと連結することが出来ない。

tellTarget(“image” + 1){
gotoAndPlay(1);
}

上記の記述だとエラーが出るので下記のようなaddを使って文字列の連結を行う。

tellTarget(“image” add 1){
gotoAndPlay(1);
}

MC名にforで回した変数を追加して”mc01”、”mc02”といった指定をする場合はこれで行う

さらに「==」は「eq」に置き換わる。これも注意。

FlashLite1.xだとfunctionが使えない

functionは無理だがcallでそれっぽいことができる
call(2);

これで2フレームに書いてあるasを呼び出すことができる！（フレーム名じゃなくてラベルでも呼び出せる）
asのみの動作であって、2フレーム目に書いてある画像などは呼び出されない。

ただし、引数は持っていけないので引数っぽいことがやりたければcallを呼び出す前にグローバル変数に引数（戻り値）も入れてしまうといい。さらに呼び出した先のフレームの最後でグルーバル値に値を入れると戻り値っぽいことができる（若干トリッキーだが。

#include はFlash4でも使える

なのでcallをたくさん使うならincludeを使ったほうが管理しやすいよ。
ただし！呼び出されるたびにコードが展開され容量を喰うので何度も同じコードを呼び出す場合はキツイ…
携帯で容量を喰うのは痛い。程度によってはcallを使うか、そもそも関数を使わないように組むのがいいかな。

携帯案件で折れ線グラフを作ってみた結果、気がついたことを

AS2.0であれば、ポイントからポイントまでLineToで線を引けばいいが、FlashLiteではLineToが無いので線をあらかじめ書いたMCを移動、回転、伸縮させて表示している。

Tips

_width,_heightは機能しない機種（一部）がある
解決方法はサンプルデータが公開されてから追記します。

参加者からの質問

テキストフィールドの位置を動的に動かしたい場合は？
テキストフィールドにインスタンス名を書く事ができないからそのままだと動かせない。
MCの中に入れればMCごと移動できるかな？

自動的なローディングはできない？
何かをさせつつ裏でロードするということができないので、ロードするにもユーザーにクリックを強いてしまう。
クリックを感じさせない設計ならいいんじゃね？

容量を押さえる、スムーズに動かすには。

ビデオメモリは1M〜2Mの間が多い、この間で画像が出なかったりする。
フォントは明朝体よりもゴシック体、さらにデバイスフォントのほうが軽い。
デバイスフォントは汚いが、PCと端末で入ってるフォントが違うのでPCよりは読みやすいものがでるよ。（端末のメニューとかで使ってるし）
フォント選びは慎重にすること。
また、パスの場合も多くなってくる重くなる。が、落ちることも無い（画像の場合は落ちる）ただし、極端な場合は表示すらされないこともある。

音の差異

mmf,midiファイルを与えないと音が鳴らせない。（PCでは確認できない
音を鳴らすためのルールが3キャリアで違うので、別途でやらないとダメ。
ピアノの音源であれば、端末の差があまりでない（ピアノはピアノの音色になる）
その他の音源（シンセ）とかだと端末によってドラムになったりするらしい。
正直、音の入ったコンテンツは音の専門家が居ないと作れないと思われる。

フォントの差異

容量の関係で_ゴシックを使う機会も多くなるので注意したほうがいいよ。
フォントは12pxで１２文字（７、８文字）で作るのが一般的。
８、１６、は12pxと同じサイズで表示されたり危ない。Softbankだと8pxが米粒に。
最悪はアウトライン化して出力。

ベンチマーク

DoCoMoの端末は早い！また遅い機種も無い！
AUの端末は基本的に遅い。一番早い機種でDoCoMoの中で真ん中ぐらい。遅い端末はDoCoMoの２倍以上かかることも。
表示速度をしっかり得るには、早い端末、遅い端末の間をとって制作するのがいいね。
このベンチマーク結果はあとでもらえるとのこと。太っ腹すぎる。
FlashLiteに対応していない端末は30%ぐらい。

ボタンのフォーカス

基本的にY軸上、上から下へフォーカスがかかっていく。
同じ軸上にある場合は左からフォーカスがかかる。

データの保存

クエリをつけてGETで送る。これには特に注意点は無い。

再生中に電話やメールといったことがおきると

基本的にはブラウザの操作なので注意点はとくになし。ブラウザごと一時停止する。
待受けの場合は携帯を閉じるときにデータを保存することができる端末もある（すべてじゃない）

結論

セーフティな書き方でFLashを作ることはできるが、やっぱり実機での動作環境は必須

さて、久しぶりにちゃんとしたエントリーを書こうかと。
だいぶ時期を逃してますが、Yahoo!Pipesで自分のフィードをまとめる方法です。

Web上には色んなサービスがあるので気になるあの子のFeedを個別に読んでいたら数がどんどん増えて行きます(´･ω･｀)
そこで、気になるあの子（もしくは自分）の使ってるWebサービスのFeedをまとめて読む方法をスクショ付きで比較的わかりやすく説明するので是非ご活用ください。

Yahoo! Pipesを使ってみる

まずはYahoo!Pipesにアクセスしてアカウントを取得しませう。ここは説明を省きます。

アカウントを取得したらトップページにある「Create a Pipes」のボタンをクリック！(n’ ∀ ‘)η

まとめたいFeedをこれでもか！と登録する

その後は左の「Sources」カテゴリの中にある「Fetch Feed」を中央の画面にドラッグ。左の画像がその状態っす。

入力欄に登録したいFeedのアドレスを入力(n’ ∀ ‘)η

2つのFeedをまとめる

左の「Operator」カテゴリの中の「Union」をドラッグして中央の画面へ。

この「Union」とはFeedをまとめる役割をします。かなり常用するので覚えておくのがいいね(n’ ∀ ‘)η

その後、「Fetch Feed」の下にある円をドラッグして「Union」へ繋げましょー！

繋げ終わった状態が左の画像。

完成？

最後は「Pipe Output」に「Union」を繋げたら完成！！(n’ ∀ ‘)η

・・・なんですが、まだちょっと色々問題があります。

1. 時系列がバラバラ
2. どのFeedから配信されたものかわからない

色んなFeedをまとめるとソーシャルブックマークなのか、個人のブログなのかがタイトルからだと判別できません(´･ω･｀)

そこで、各Feedのタイトルの先頭に文字を追加しましょう。

おまけ：各Feedのタイトルに文字列を追加

「Fetch Feed」と「Union」の間に「Operator」カテゴリの中にある「Regex」を追加。

Regexは、指定した条件に一致する文字列を発見したら、それを別の文字列で置換することができるモジュールです。正規表現が理解できるとかなり細かい設定ができるようです。

ですが、今回はそんな小難しいことはせずにタイトルの先頭に文字を追加するのに使います。

「In」には編集したい部分を入れます。今回の場合だとタイトルなので「item.title」を選択。

その次の「replace」は正規表現で先頭を意味する「^」を入力します。（最後の場合は「$」）

最後の「with」は何に置き換えるか を意味しますので、今回の場合は対応するFeedの名前を入れればいいと思います。
例えば、TwitterのFeedだと「[Twitter]」とか「[ついったー]」でもいいし、ブログだと「[Blog]」とかその辺は適当に付けていいと思います(n’ ∀ ‘)η

他のFeedも個別に「Regex」を追加して先頭に文字を入れていき、「Union」に繋ぎましょう。

おまけ：まとめたFeedを時系列に並び替えしてみよう

「Union」でまとめたFeedを出力するまえに時系列で並び替えします。

「Union」と「Pipes Output」の間に「Operator」カテゴリの中にある「Sort」を追加。
今回の場合、日付でソートするのでSort byを「item.pubDate」に選択、inを「descending」に設定。
これで日付の新しいアイテムが一番上に来るようになったと思います。

最後に「Pipe Output」に繋げれば完成！！！(n’ ∀ ‘)η

まとめ

今回、様々な機能があるYahoo!Pipesのほんの一部だけの紹介で完成してしまいました。

ね、簡単でしょう？

Blog,Twitter,Flickr,Tumblr,はてなブックマーク、del.icio.us,livedoor Clip!,livedoor Readerの新着フィード…などなどその人が使ってるサービスをまとめて「あぁ、あの人今日はこんなことしてたのかー(・∀・)」とニヤニヤするといいと思います。

最後に、俺のまとめFeedを置いておきますので、もの好きな方はリーダーに登録してもらえると俺がいかに仕事してないか…じゃない、どんな事を配信＆ウォッチしてるか見えると思いますよ(n’ ∀ ‘)η

sunitiのまとめフィード

最近はもっぱらMacばっかり使ってるわけですが、Paralles DesktopでWindows XPはインストールしてありますし、自宅のデスクトップはWindows Vistaなのでウィルス対策ソフトは欠かせません。

毎年悩むのですが今回も各種ソフトを検討した結果、前年と同じくウィルスバスターを更新することにしました。
検討していたソフトは下記の通り。

• トレンドマイクロ – ウィルスバスター2008
• Symantec Corporation – Norton Internet Security 2008
• キャノンシステムソリューションズ株式会社 – NOD32
• ウェブルート・ソフトウェア株式会社 – Spy Sweeper with AntiVirus スパイ スウィーパー ウイルス対策付き
• ALWIL Software – avast!4 Home Edition

自分が検討したポイントは次の通りです。

Windows Vista(64bit)に対応していること
Windows機が3台（使うのは2台）あるので、複数ライセンス買わないといけないこと
重くないこと！！！！

Windows Vista(64bit)に対応していること

Vistaの64bitで以外とひっかかるかと思いきや、Spy Sweeper以外はすべて対応していました。
Spy Sweeperは友達からのオススメで候補に入れたのですが、軽くて非常に良いと聞いているので64bit非対応だったのは残念でした。

複数ライセンス購入

1台ならばどのソフトを購入してもあまり差が出ないのですが、複数台お持ちの方はお財布に痛恨の一撃が入りますのでここは慎重に。
自分の場合は2台分のライセンスは必須で3台目はあまり使わないので別に無くてもOK的な感じ。

ウィルスバスター2008

基本で3ライセンス付いてくるので一番助かる環境！価格:4,980円（3ライセンス）

Norton Internet Security 2008

ウィルスバスターと同じで3ライセンス付きで8,190円（3ライセンス）

NOD32

1ライセンス購入後に追加ライセンス（割引）で買うので、3,200円*2で6,400円（2ライセンス）

Spy Sweeper

3ライセンスパックがあるので、そちらだと6,510円（3ライセンス）

avast!4 Home Edition

は無料なので、欲しい分だけライセンスもらえばOK　価格:0円（3ライセンス）

こうしてみると、ノートン先生が高いっすね。有名なソフトだとウィルスバスターがコストパフォーマンス高い。（avast!には勝てないがw）

重くないこと！！！！

ウィルスバスター2008

若干重かった（2007）が、2008は軽くなってるらしいぞ！

Norton Internet Security 2008

昔使ってたが、死ぬほど重かった（2005かな？）

NOD32

軽さには定評があるらしい！使った事無し

Spy Sweeper

こちらも非常軽いらしい！使った事無し

avast!4 Home Edition

軽くもないが、重くもない！

ここまで書いておいてなんですが、ノートンは以前使っていてあまりの重さにキレたことがあるのでぶっちゃけ二度と使いたくありません＞＜
今使ってるウィルスバスター2007は軽くは無いのですが、普段はあまり重たくは無いので気になりません。（スキャン中とかは別）

で、最終的にはウィルスバスター2008にしました。
全体的に悪くなかったってのが一番です。avast!4 Home Editionも最後までずいぶん悩んだんですが、「無料のウィルス対策ソフトって大丈夫？」という脅迫観念があるのでおとなしくお金払うことにしましたー。

ここに記載してないソフトでオススメがあれば教えてもらいたいのでよろしくお願いします。

関連リンク

トレンドマイクロ – ウィルスバスター2008

Symantec Corporation – Norton Internet Security 2008

キャノンシステムソリューションズ株式会社 – NOD32

ウェブルート・ソフトウェア株式会社 – Spy Sweeper with AntiVirus スパイ スウィーパー ウイルス対策付き

ALWIL Software – avast!4 Home Edition

Twitterから始まった@lomoさん主催のカレンダーを作ろう！企画に参加しました。
カレンダーにはイラスト版と写真版があるのですが、イラストの書けない自分は写真版に。

企画は@lomoさん、デザインは@aohigeさんです。
自分の担当は写真版の3月だったのですが、これは難しい季節になりました。

「ひなまつり」や、「ホワイトデー」みたいなイベントの写真がいっさい無かったので、「別れの季節」ということでGRAYASH.comでも使っている写真にしました。できれば未公開の写真にしたかったのですが・・・(´･ω･｀)

ついったーカレンダーは自宅のプリンタで印刷できるので、イラスト版、写真版とお好きな方を印刷してデスクに飾っておくと良いですよ！オススメ！

関連リンク

2008年版 ついったーカレンダー配布します。 | caramel*vanilla

Twitterで仲良くしてもらっている、Go my wayの@rea君が不定期に配信しているrealog Podcastingに友達のpruto.jpの@prutoと一緒に出演してきましたっ！

realog casting Vol.08

http://realog.org/2007/12/25/1005.html

「2007年のWeb業界を振り返る」ということで、Twitterの事、Appleの事、今後の事などなど喋ってきました。
最初は３人とも別の場所でSkypeやGtalkといったIMで話する予定だったのですが、録音の関係で我が家に@prutoを呼んで二人で神戸のrea君と対談しました。

で、最初は2時開始の予定だったのですが。。。

てっきりSkypeで対談すると思っていたら、どうも録音する場合相性が悪いらしくGtalkでやろうとのこと。
MacではGtalkが無かったので、MacBookのParallelesでWindowsXPを立ち上げてGtalkを起動。

しかしメモリ不足のせいなのか、Windowsもすぐフリーズしたりとすごい不安定の中、ようやく対談できるようになったのが4時近かったと思います・・・rea君、お手数かけました。ごめんなさい(n’ω’ `)

実際の対談時間は、50分だったかな？それぐらい喋ったのですが、編集して20分前後になっています。
途中、@prutoがDo●oMoの携●がクソだ！とか色々DISっていたので大幅カットになりましたwww

で、実際の対談はPodCast聞いてもらうことにして、ここで一つ訂正＞＜
途中、iPhoneのくだりで「アルカロイドでしたっけ？Googleの〜」と喋ってしまいましたが、正しくは「アンドロイド」です。
適当に喋ってごめんなさいごめんなさい！

関連リンク

realog casting Vol.08

pruto.jp