mixiにTwitter的な機能がついたのを皆さんはご存知でしょうか？

その名も『mixiボイス』。

mixiの笠原社長の記事によると、「Twitterを本格的に始めて、mixiにあまりログインしなくなった」というユーザー対策のようです。

Twitterにユーザーを盗られたから自分とこでも同サービスやっちゃおう、というのがすばらしいｗ
実は今日会社で mixiとTwitter連携しぃひんかなぁ、としゃべっていたところだったので。
さっそくうちのマイミクちゃん達はつぶやいちゃってます。

この『mixiボイス』は、もちろんPC・携帯電話から投稿が可能。
Twittterはいろんなクライアントがありますが、mixiのようにSNSが母体として存在している中でのつぶやき（エコー）なら、『正直Twitterのおもしろさがわからん。』という人もきっと少ないでしょう。個人的にはこの『mixiボイス』によって、IT業界以外の人にもTweetにも親しみやすくなってくれることを願うばかりです。

追記：なんか女子中・高生の間では『リアル』ってのが流行ってるみたいです！
参考サイト >>
参考サイト >>

やっぱり一般ユーザー的には芸能人とかがやってる、ってなると結構身近に感じるようですね。
同じような原理でアメブロとかもやったらいいのにと思った。
アーティストの『Mステなう』とかまぢでおもしろいと思うｗ

そしてユーザーよ、Twitterに流れて来い。小耳に挟んだ話、Twitterのユーザーって現在280万人位らしいですね（推定値）。

ほんと、機能もほとんど一緒。

APIの配布もしているらしく、mixiアプリとかの絡みもあるので、ちょっと注目してみようと思います。

追記2／0918 : そして無駄に作ったキテレツbot。　@kiteretsusoにお悩みでも相談してください。

やたらと忙しく最終回の5回目をなかなか更新できなかった、かしこです。

【５、条件による検索結果の表示（完成）】

・検索結果の表示。

というルーチンの概要説明となります。

指定した条件に対してdata.phpの中身を表示。前回の検索数で作った変数$banbanを利用してチャラット完成させましょう。

実際の完成形はこちら⇒「キテ荘的検索ってみよ」

スターターキットはこちら。

さて、前述の通り$banbanを利用します。

？・・・$banbanってなにって？

ふむ、$banbanは前回の検索数表示ルーチンの中に、仕組んだ変数ですが、この変数の中には表示されるべき内容のみが値のみが配列として格納されています。

これはですね、data.phpの全データを$listとして読み出して、これを元に条件に該当するものを絞って、結果その件数＝検索数というルーチンを用意しました。

その際に、該当する時点の変数だけを$banbanに格納するということなのです。

わかりにくれば検索数のfor文の手前で「print_r($list)」とすると全件表示されますが、for文後に「print_r($banban)」とすると該当するデータのみの表示となります。

これこそが本日、表示すべきデータそのものということなのです。

ではデータを書き出してみましょう。

for($i= ０;$i<検索数;$i++){

print $banban[i]["id"];

print $banban[i]["price"];

print $banban[i]["comment"];

}

こうすると該当i番目の連想配列のkeyを呼び出しめでたく表示されます。

あとは表示させたい形にphpを書き出すようにしてあげればOKです。

htmlの形成は完成ファイルを参照してください。

ポイントは前回の検索数を表示するルーチンに$banban（変数はなんでもいい）を仕組んでおく。あとはそれを表示するという”よい意味での手抜き”です。

今日のデータはこちらからダウンロードできます。

さてさて、検索シリーズは今回で完成ということで、終了です。

ただし、ページングの解説は飛ばしてますし、実際は並べ替えも必要になるでしょうが・・・今回のシリーズはあくまでも検索ルーチンの構築なのでまた違う機会にでも紹介・解説できればなーっと。

というわけで無駄に記事の更新を続けた検索システムをつくってみようぜ！はいかがでしたでしょうか。

難易度は☆☆★★★・・・こんなもんでしょうか。

初見でわかるアナタはステキです。わかないアナタも完成形のソースからきっかけをつかんでもらえばOKです。

ということでバイババーイ！

と、久しぶりすぎる登場を歌って誤摩化してみる。
出町柳しんごです。

書かなきゃなーと思いながら、すっかり筆無精になってたんですが、
前から書きたかったことを書いておきます。

今年の春くらいから気になってたデジタルサイネージの世界。
（それ何？って人はこちら、要は電子広告媒体のこと）

ディスプレイにデジタルコンテンツを載せて配信できるから、
限られた掲載エリアを必要に応じて変更できたり、タッチパネルもできると
それを見る人とコミュニケーションも図れるからすごいよなーって。

PCや携帯で、ターゲットを絞った広告配信はできたけど、
屋外でも場所の状況や時間に応じた広告発信もできてくるし、
リアル広告からネットへの誘導も、紙媒体→QRコード→携帯サイトってのから、
デジタルサイネージ媒体→Bluetooth→携帯サイトって（多少）スムースな流れをつくることもできるんじゃないか。

なんて、可能性はかなりある。

で、

このハード部分のシステムは大手家電メーカーとかも商品化してるんだけど、
そこに載せるコンテンツにはFLASHで制作したムービーも載せられるそうです。

おおっ！PCで閲覧してきたFLASHコンテンツをキオスク端末で展開できるんだから、
これまた夢が広がるな〜って感じ。

こないだ「BREEZE BREEZE」行ってきて、そこのタッチパネル式の店舗案内でも感動したけど、
下記リンク先にある動画なんかはパねぇよ。

Adobe Flash CS4 Webから飛び出したインタラクティブ表示ツール

Webを超えたFlash活用事例「Ubiq’window+ActionScript 3.0」

インターネットをより楽しく、より便利に！

まだまだバグ・修正箇所はありますが、とりあえずの段階でFlashフローティングブログパーツのお目見えとなりました。

Flashフローティングブログパーツの作り方の説明はまた後日に回すとしまして、簡単な説明を。

• 1、キテレツ荘のスタッフを逃がしてあげてください。（日頃うっぷんも溜まっていると思いますので。）
• 2、逃がしといてなんですが、捕まえましょうｗ（捕まえるとスタッフの記事が読めるようになります。）
• 3、見事全員捕まえることができましたら、今回制作しましたブログパーツの元データがダウンロードできます。
  （アクセス拒否してないので、直でURL叩けば落とせますｗ（誰か.htaccessの書き方おせーて））
  ※flaファイルはありません。てかasが汚すぎて見せれません。。。。

以上です。

制作時のポイントとしましては、最近あっしが購入したiPhoneの実寸大をモデルにしたため、ムダにデカイというところです。
あと右上に【×】ボタンあるんですが、小さすぎました。

今回のFlashフローティングブログパーツはJavascriptのリロードを多用しておりますので、読み込みの際、ちゃんと読み込まれないことがある or 前回の処理が残ったままになっているとかいろいろへんなところありますし、他、追加していきたい処理とかもありますので、時間あるときに徐々に修正していきたいと思います。

子供が作ったおふざけやさかい、許しておくんなまし。

相も変わらずふざけたことに注力している自分になさけなくなりましたが、ちょいとした興味で貼り付けてやってください。

ブログ貼り付け用のコードは下記。

これからもキテレツ荘のご支援よろしくお願いします。

韓国の友人に荷物を送ったら韓国の税関で検疫をうけたと連絡を受けたかしこです。

【４、条件による検索結果数の表示】

・検索条件に何件ヒットとしたか。

というルーチンの概要説明となります。

指定した条件に対してdata.phpの中身を精査して何件該当するのか。ここをクリアすれば検索は余裕です。

実際の完成形はこちら⇒「キテ荘的検索ってみよ」

スターターキットはこちら。

では、ルーチンを考えてみます。

Getで受信した変数とdata.phpに連想配列として格納されている商品データをif文で選別する。

？なのことだ・・・とお思いのアナタ。

このシリーズの一回目にやった”print_r($list);”でデータを確認してみてください。

[cat]=>”1″ とかという表記があったはず。それとGetで受信した変数（$cat）を付きあわせて該当するファイルをカウントする。

それを条件の数だけチェックしていけば残った配列数が該当件数、しいては該当ファイルということになります。

あとはそのルーチンをプログラムしてやればOK！

ということで下をご覧ください。
=========================================

<?
include ‘data.php’;

if($_GET["cat"]){
$cat = $_GET["cat"];
}else{
$cat = “” ;
}
if($_GET["catd"]){
$catd = $_GET["catd"];
}else{
$catd = “” ;
}
if($_GET["new"]){
$new = $_GET["new"];
}else{
$new = “” ;
}
$snum = $cat.”-”.$catd.”-”.$new;
?>

<?

$num = count($list);
$searchnum = 0;
if($list){
for($i= 0;$i<$num;$i++){
if($cat){
$a = $list[$i]["cat"];
}
if($catd){
$b = $list[$i]["cat_detail"];
}
if($new){
$c = $list[$i]["new"];
}
$dnum = $a.”-”.$b.”-”.$c;
if($snum == $dnum){
$searchnum++;
$banban[] = $list[$i];
}
}
}

?>

<?=$searchnum?>
=========================================

前半ブロックでGetで受信した変数を付きあわせしやすくするために”$snum”という変数にまとめています。

さてさて、本日のメイン解説となる後半ブロックです。

まずdata.phpから読み込んだデータをcount関数で何件（何個の配列数が）あるかどうかを調べて$numに格納します。

これはその下のfor文を何回まわすのかという数を調べているわけです。そう、$numの数だけまわします。

$searchnumは検索該当数をカウントするために用意。forでまわる度にカウントが１つずつ増えていきます。これが「○○ヒット」の数になるわけです。

ただし、このままですと$listが全部表示されてしまいますのでfor文の中で精査していきます。

$a=$list[$i]["cat"]・・・＄listの中のforのi番目の連想配列キーcat　を変数$aに格納

$b = $list[$i]["cat_detail"]・・・＄listの中のforのi番目の連想配列キーcat_detail　を変数$bに格納

$ｃ = $list[$i]["new"]・・・＄listの中のforのi番目の連想配列キーnew　を変数$cに格納

これを変数$dnumにまとめて格納・・・そう、これが所謂、精査の条件になります。

あとはGetした$snumとforの中の$dnumのイコールのときだけ$searchnumにプラス１してやります。

これで検索数がはじき出されます。

ここからは補足ですが・・・

$banban[] = $list[$i];は次回、実際のデータを吐き出す際に使用する項目です。これは該当したi番目の配列を$banbanに配列として格納してゆけよ！という命令です。

ここは次回に使うのでまた改めて解説しますが、要はヒットした配列だけを$banbanに入れるということなのです。

ということで本日はここまでです。（どんどん複雑になっていくなぁ・・・）

今日のデータはこちらからダウンロードできます。

さてさて、次回は最終回です。実際にデータを吐き出すルーチンをやりますが、ポイントは$banbanですｗ

【予定】

・５、条件による検索結果の表示（完成）

さてさて、そろそろ脱力し始めそうな気配がプンプンしているかしこです。

【３、Getによるform内のphp化】

・Getで受信するルーチン

・Getで受信した内容をフォームに反映させる

この2つで参ります。が、えー、恐らくこのシリーズのキーポイント１です。

そのため、ボリュームもヤバイかも。

実際の完成形はこちら⇒「キテ荘的検索ってみよ」

スターターキットはこちら。

まずはGet、Postや書き方などをこちらで予習することをオススメします。

■Getで受信するルーチン

フォームのメゾットをGetとして送信するとURLが「index.php?cat=1」のような形になります。

これを受信するには「$_GET["cat"];」と書いてあげれば受信できます。

ではでは、今回のシステムもcatを受信するので次のようにします。

=========================================

if($_GET["cat"]){
$cat = $_GET["cat"];
}else{
$cat = “” ;
}

=========================================

なにをしているのかといえば『$_GET["cat"]』があれば変数$catに代入。

なければNull（空に）という処理をしています。

今回のシステムではcat、catd、price、new、typeの5つを受信しますが、type以外は上のルーチンで対応可能です。

typeについてはﾁｪｯｸボックスを利用しているので扱いが少し異なります。

=========================================

if($_GET["type"]){
$type = $_GET['type'];
}else{
$type = array(1,2,3,4,5,6);
}

=========================================

$_GETがあれば変数$typeへ、なければ$typeに配列として1,2,3,4,5,6を代入しています。

何故、ここだけ処理が違うのか・・・といいますと、

受信した際のURLが「index.php?type[]=1&type[]=2&type[]=3」というように受信して変数typeに配列として格納しています。

で、チェックボックスが全て空で検索するという矛盾対策のために空で受信した場合は全てにチェックを入れて受信するという処理を行っています。

ま、このあたりの処理はあまり深く追求しなくてもよいと思います。配列の受信はこんなものだ！的でよいでしょう。

■Getで受信した内容をフォームに反映させる

なんのことかといいますと、form内のselectbox等で検索をしますわね。

結果が呼びだされた時にこの処理をしないとイチイチselectbox達が初期状態に戻ります。

そうなると自分が何を検索したのかがわからなくなるという事態が発生します。またその状態で再度検索をすると先の条件がどこかにいってしまいます。これはユーザービリティ云々の前に検索システムとしては致命的な欠陥といってもいいでしょう。

ここからはそうならない処理を行ってみたいと思います。

では、具体的にどうするのか？

要はselectの中身に”checked”をつけてやれればよいのです。

下は新着か否かという項目をいじってみた例です。

=========================================
<select name=”new” style=”width:160px;”>
<option value=”0″
<?
if($new == 0){
print “selected”;
}
?>
>こだわらない</option>
<option value=”1″
<?
if($new == 1){
print “selected”;
}
?>
>新着で探す</option>
</select>
=========================================
この例でいくとGetで$newを取得していれば０か１の値が入っているのでselectの間にphpをねじ込んでいます。で、 もし０（null）なら「こだわらない」に”checked”が、１なら「新着で探す」に”checked”が入るので、めでたく選択項目がキープされるわけです。

他の項目もこれと同じルーチンでOKですがやはりチェックボックスの項目だけは別になります。
=========================================

<input type=”checkbox” id=”type1″ name=”type[]” value=”1″
<?
if($type[0]==1){
print “checked”;
}
?>
/>

<input type=”checkbox” id=”type2″ name=”type[]” value=”2″
<?
if($type[0]==2||$type[1]==2){
print “checked”;
}
?>
/>

<input type=”checkbox” id=”type3″ name=”type[]” value=”3″
<?
if($type[0]==3||$type[1]==3||$type[2]==3){
print “checked”;
}
?>
/>

=========================================
これも理屈は同じで”checked”をつけるかつけないかっていう処理なのですがif文の条件が少し複雑で$typeの配列の何番目に格納されているかが送信時のチェックボックスのチェック数によってことなるので想定される配列の順番だけ条件を用意しておるわけです。

このあたりは少し複雑で、基礎的な知識がないと苦しいです。勉強会があるようなので、解説してもいいかと思っています。

詳しくは今日の完成データを参照してくだることを期待しています。

ということで本日はここまでです。（だいぶ長くなりましたよ・・・）

今日のデータはこちらからダウンロードできます。

さてさて、次回は実際の検索ルーチンが絡んでくる検索結果数の表示にチャンレンジしましょう。

【予定】

・４、条件による検索結果数の表示

・５、条件による検索結果の表示（完成）

superflyの「恋する瞳は美しい」をやたらリピートしているかしこです。

さてさて、テンションが続く内に連投しときます。
【２、初期解説とデータ読み込み】

・ｈｔｍｌの補助的解説

・htmlのｐｈｐ化

・データの読み込みと確認方法

この2つで参ります。

実際の完成形はこちら⇒「キテ荘的検索ってみよ」

スターターキットはこちら。

・ｈｔｍｌの補助的解説

カテゴリーとカテゴリー詳細の連動はJavaScriptでおこなっております。

元ネタはこちら。

ポイントはｈｔｍｌの94行目、「 new Option(newOptions[i],newValues[i],false,false); 」

ここに第3引数をflaseです。

これはphp化した際にtrueを設定するためにあえて宣言しています。詳細はその時に解説します。

あとは皆さんチャラっと流せますよｗ

・htmlのｐｈｐ化

大層な事をいっていますが新規でphpファイルを作成して便宜上index.phpとします。

さて、sakuraサーバーのPHPのデフォルトcharsetはEUC-JPということなので、エンコードEUC-JPとしてペーストしてください。

以上

・データの読み込みと確認方法

今回の本題、スターターキットに同梱されているdata.phpを読み込んで検索するアイテムを読み込めるようにします。

data.phpにはあらかじめ商品データを$listという変数に連想配列で格納してあります。興味があれば覗いてみてください。

では、1行目にｐｈｐの宣言をしてdata.phpをincludeします。

======================================

<?

include ‘data.php’;

?>

======================================

はい、これで読み込み完了です。

？、実感がない。

はい、そうですか・・・ではではinclude’data.php’;の一行下に次のコードを。

======================================

print_r($list);

======================================

これは予めdata.phpで設定してある変数$listを確認するための一行です。

これで、配列の中身が一目瞭然となります。

ということで本日はここまでです。

今日のデータはこちらからダウンロードできます。

さてさて、次回は検索をGetで送信するようにしていきましょう。

【予定】

・３、Getによるform内のphp化

・４、条件による検索結果数の表示

・５、条件による検索結果の表示（完成）

腱鞘炎中のかしこです。

夏休みっーことと、キテレツ荘ってTips系の記事少ないので試しにこういうのやってみようと。

検索システムをつくろう！

・実用に耐えれるレベルの検索システムをシリーズで作っていく。

・phpの開発の流れを同時に学ぶ。

・自分用のまとめ

という3本のテーゼを持ってすすめてみます。

実際の完成形はこちら⇒「キテ荘的検索ってみよう」

■１、概要、準備編■

さて、まず架空の雑貨メーカー「Brancbranc」を設定しています。

その上で、スペックを決めていきます。

・雑貨メーカーなのでカテゴリー、カテゴリー詳細は必須。また新着アイテムなんてあるとステキだろうから用意。あと金額設定もいるでしょう。その上でﾁｪｯｸボックス込みの検索があれば汎用性と実用性も増す・・・ということで完成形のような形で準備。

・商品単位で検索して、ブックマークもする可能性もあるので送信方式はGetで。

・あくまでも検索システムがメインなので登録、更新のプロセスは省く。

ということでデザイン⇒コーディング済みのhtmlと必要なImgと商品用の画像をパーケージにしたスターターキットをダウンロードして始めていきましょう。

■スターターキット

これを「XAMPP」等の環境に定義するか、サーバー環境に準備するかしていよいよ次回よりphp化して機能を追加していきます。

【予定】

・２、初期解説とデータ読み込み

・３、Getによるform内のphp化

・４、条件による検索結果数の表示

・５、条件による検索結果の表示（完成）

さてさて、企画倒れにならないように間をあけずにリリースしていく予定です・・・よ？

『Iron』

このIronはドイツのSRWare社がオープンソースソフトウェアの「Chromium」をベースに作られています。

Google Chromeは「Chromium」をカスタムビルドしたもの、らしいです。
下記を見ての通りUIはほぼGoogle Chromeと同じようになっています。

IronはGoogle Chromeと違い、余分な機能が無効化されているそうです。

Google Chromeとの違い >>

Google Chromeにはない広告ブロック機能が搭載されているのがすばらしい。

Ironのダウンロードはこちらから>>

Ironを数ヶ月使ってみて、自分としての感想はブラウザチェック用や動画を見たり、重ための処理が必要な際に使用するセカンダリブラウザが合ってると思いました。
良ければ一度使ってみてください。違いがわかると思います。
会社の人 曰く、ボリュームのあるページをMTで再構築する際もだいぶ早くなるとか。

梅雨で完全に腐ってるとんかです。
雨が降るとやる気が出ない病で、
本と漫画ばっかり読んでました（宇宙兄弟はホント面白い）。

さすがにこれではイカンと、
制作意欲を燃やすため、Mac作業環境を整えてみるとこにしました。

1.ノート台　Belkin Lap Pad
夏になるとノート裏面が火傷一歩手前ばりに熱くなり、しかも
熱くなりすぎてCPU速度低下→フリーズ→電源ごと落ちる
みたいな「作業なんかやってられるかー！」状況だったので、
ファン付きのノートパソコン台を買ってみました。

で、使ってみての感想。
イイヨコレ！ノート超快調。
結構でかいファンのおかげで
長時間動画観ても、ファンのおかげでまだ本体ひんやりしてます。
さらにサイドからファンの風が漏れてきて、俺もちょっと涼しいです。
あ、嘘。ややぬるい。

2.Bluetooth無線マウス ELECOM M-BT4BLSV
今まではノートのトラックパッドで作業してたんですが、
さすがにIllustratorやPhotoshopの作業は辛かったんです。
で、前からマウスは欲しかったけど、せっかくAirなんだから有線マウスは嫌だし、
無線でもUSBレシーバ接続とかめんどくさいのでBluetoothマウス買いました。
これで制作作業の効率は著しく向上！の予定。

ただブラウザとかFlashでスクリプト組むぐらいなら、
トラックパッドで十分だなぁと再認識。
トラックパッドもよくできてますなぁ。

3.スピーカ　BOSE Companion 2 series II
Airのスピーカはステレオでさえないので
音楽聴くのは辛かったんです。なんでボーズのスピーカ購入。
でもCompanion 2 series IIはボーズのくせに安い！１万円ちょっと。
で１万円クラスとは思えないええ音！iPodにもつながります！
パソコン用として卓上使用を想定してるようですが、
離れても全然聞けます。低音もしっかり出てるし、ボーカルの細部にまで迫れますよ！
で、スピーカもAirMacExpressに接続することでノートとは無線接続！
ああもう無線ライフ最高。

スピーカ無線接続のデメリットは、iTunesの音楽以外はスピーカから音が出ずに
ノート本体からしか出ないってことです。
Youtube動画もDVDもiTunes内のビデオクリップもダメ。
ちょっとそれ初耳なんですけど。

まぁ、DVD観るときはAirMacExpressを経由せずに
直接ノート本体につなげば問題ありません。

とりあえず１日で環境だけ整えてみました。
さぁ、これで俺はバリバリ作業できるのでしょうか？
８月以降の俺に乞うご期待。たぶん。